mirror of https://github.com/alibaba/ice.git
				
				
				
			fix: ts types (#102)
* fix: request types * refactor: add icestark types * refactor: add types to example
This commit is contained in:
		
							parent
							
								
									dfe837822a
								
							
						
					
					
						commit
						7bb8c703ef
					
				|  | @ -1,7 +1,7 @@ | ||||||
| import { createApp } from 'ice' | import { createApp, IAppConfig } from 'ice' | ||||||
| import Dashboard from './index' | import Dashboard from './index' | ||||||
| 
 | 
 | ||||||
| const appConfig = { | const appConfig: IAppConfig = { | ||||||
|   router: { |   router: { | ||||||
|     routes: [{ path: '/', component: Dashboard }], |     routes: [{ path: '/', component: Dashboard }], | ||||||
|   }, |   }, | ||||||
|  |  | ||||||
|  | @ -1,7 +1,7 @@ | ||||||
| import { createApp } from 'ice' | import { createApp, IAppConfig } from 'ice' | ||||||
| import Home from './index' | import Home from './index' | ||||||
| 
 | 
 | ||||||
| const appConfig = { | const appConfig: IAppConfig = { | ||||||
|   router: { |   router: { | ||||||
|     routes: [{ path: '/', component: Home }], |     routes: [{ path: '/', component: Home }], | ||||||
|   }, |   }, | ||||||
|  |  | ||||||
|  | @ -1,6 +1,6 @@ | ||||||
| import { createApp } from 'ice'; | import { createApp, IAppConfig } from 'ice'; | ||||||
| 
 | 
 | ||||||
| const appConfig = { | const appConfig: IAppConfig = { | ||||||
|   app: { |   app: { | ||||||
|     rootId: 'ice-container', |     rootId: 'ice-container', | ||||||
|   }, |   }, | ||||||
|  |  | ||||||
|  | @ -1,7 +1,4 @@ | ||||||
| { | { | ||||||
|   "router": { |  | ||||||
|     "ignorePaths": ["stores", "components"] |  | ||||||
|   }, |  | ||||||
|   "ignoreHtmlTemplate": true, |   "ignoreHtmlTemplate": true, | ||||||
|   "plugins": [], |   "plugins": [], | ||||||
|   "modeConfig": { |   "modeConfig": { | ||||||
|  |  | ||||||
|  | @ -1,20 +1,22 @@ | ||||||
| import { createApp, APP_MODE } from 'ice' | import { createApp, APP_MODE, IAppConfig } from 'ice' | ||||||
| 
 | 
 | ||||||
| const appConfig = { | const appConfig: IAppConfig = { | ||||||
|   app: { |   app: { | ||||||
|     rootId: 'ice-container' |     rootId: 'ice-container' | ||||||
|   }, |   }, | ||||||
|   logger: { |   logger: { | ||||||
|     level: APP_MODE === 'build' ? 'error' : 'debug', |     level: APP_MODE === 'build' ? 'error' : 'debug', | ||||||
|   }, |   }, | ||||||
|  |   router: { | ||||||
|  |     type: 'hash' | ||||||
|  |   }, | ||||||
|   request: { |   request: { | ||||||
|     timeout: 5000, |     timeout: 5000, | ||||||
|     // baseURL: '/abc',
 |     baseURL: '/', | ||||||
|     interceptors: { |     interceptors: { | ||||||
|       response: { |       request: { | ||||||
|         onConfig: (conf) => { |         onConfig: (config) => { | ||||||
|           console.log('interceptors response:', conf) |           return config | ||||||
|           return conf |  | ||||||
|         } |         } | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
|  |  | ||||||
|  | @ -1,6 +1,6 @@ | ||||||
| import { createApp } from 'ice'; | import { createApp, IAppConfig } from 'ice'; | ||||||
| 
 | 
 | ||||||
| const appConfig = { | const appConfig: IAppConfig = { | ||||||
|   app: { |   app: { | ||||||
|     rootId: 'ice-container', |     rootId: 'ice-container', | ||||||
|   }, |   }, | ||||||
|  |  | ||||||
|  | @ -1,6 +1,6 @@ | ||||||
| import { createApp } from 'ice'; | import { createApp, IAppConfig } from 'ice'; | ||||||
| 
 | 
 | ||||||
| const appConfig = { | const appConfig: IAppConfig = { | ||||||
|   app: { |   app: { | ||||||
|     rootId: 'ice-container', |     rootId: 'ice-container', | ||||||
|   }, |   }, | ||||||
|  |  | ||||||
|  | @ -1,6 +1,6 @@ | ||||||
| import { createApp } from 'ice' | import { createApp, IAppConfig } from 'ice' | ||||||
| 
 | 
 | ||||||
| const appConfig = { | const appConfig: IAppConfig = { | ||||||
|   app: { |   app: { | ||||||
|     rootId: 'ice-container' |     rootId: 'ice-container' | ||||||
|   }, |   }, | ||||||
|  | @ -8,7 +8,7 @@ const appConfig = { | ||||||
|     level: 'warn' |     level: 'warn' | ||||||
|   }, |   }, | ||||||
|   icestark: { |   icestark: { | ||||||
|     type: 'child', |     type: 'child' | ||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -1,17 +0,0 @@ | ||||||
| import React from 'react' |  | ||||||
| import { Link } from 'ice' |  | ||||||
| 
 |  | ||||||
| const Home = (props) => { |  | ||||||
|   console.log('render home', props); |  | ||||||
| 
 |  | ||||||
|   return ( |  | ||||||
|     <> |  | ||||||
|       <h2>404040404 Page...</h2> |  | ||||||
|       <Link to="/">home</Link><br /> |  | ||||||
|       <Link to="/about">About</Link><br /> |  | ||||||
|       <Link to="/dashboard">Dashboard</Link> |  | ||||||
|     </> |  | ||||||
|   ); |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| export default Home |  | ||||||
|  | @ -8,7 +8,7 @@ export default function BasicLayout({ | ||||||
|   return ( |   return ( | ||||||
|     <div style={{minHeight: '100vh'}}> |     <div style={{minHeight: '100vh'}}> | ||||||
|       <section> |       <section> | ||||||
|         Headerxxx |         Header | ||||||
|         {children} |         {children} | ||||||
|       </section> |       </section> | ||||||
|     </div> |     </div> | ||||||
|  |  | ||||||
|  | @ -1,17 +1,7 @@ | ||||||
| import React from 'react' | import React from 'react' | ||||||
| import { Link, useIndexPage, helpers, logger } from 'ice' | import { Link } from 'ice' | ||||||
| 
 |  | ||||||
| console.log('helpers from ice', helpers); |  | ||||||
| console.log('logger from ice', logger); |  | ||||||
| 
 |  | ||||||
| logger.info('=== info ==='); |  | ||||||
| logger.warn('=== warn ==='); |  | ||||||
| 
 | 
 | ||||||
| const Home = (props) => { | const Home = (props) => { | ||||||
|   const page = useIndexPage() |  | ||||||
| 
 |  | ||||||
|   console.log('Home props', props); |  | ||||||
|   console.log('render home', { page }); |  | ||||||
|   return ( |   return ( | ||||||
|     <> |     <> | ||||||
|       <h2>Home Page...{props.a}</h2> |       <h2>Home Page...{props.a}</h2> | ||||||
|  | @ -26,7 +16,7 @@ Home.getInitialProps = async () => { | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| Home.pageConfig = { | Home.pageConfig = { | ||||||
|   title: 'hahah' |   title: 'Home Page' | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| export default Home | export default Home | ||||||
|  |  | ||||||
|  | @ -1,8 +1,8 @@ | ||||||
| import { createApp } from 'ice' | import { createApp, IAppConfig } from 'ice' | ||||||
| import * as React from 'react'; | import * as React from 'react'; | ||||||
| import { ConfigProvider } from '@alifd/next'; | import { ConfigProvider } from '@alifd/next'; | ||||||
| 
 | 
 | ||||||
| const appConfig = { | const appConfig: IAppConfig = { | ||||||
|   app: { |   app: { | ||||||
|     rootId: 'ice-container', |     rootId: 'ice-container', | ||||||
|     addProvider: ({ children }) => ( |     addProvider: ({ children }) => ( | ||||||
|  | @ -16,7 +16,7 @@ const appConfig = { | ||||||
|     type: 'browser', |     type: 'browser', | ||||||
|   }, |   }, | ||||||
|   icestark: { |   icestark: { | ||||||
|     type: 'framework', |     type: 'framework11', | ||||||
|     getApps: async () => { |     getApps: async () => { | ||||||
|       const apps = await new Promise((resolve) => { |       const apps = await new Promise((resolve) => { | ||||||
|         setTimeout(() => { |         setTimeout(() => { | ||||||
|  |  | ||||||
|  | @ -1,6 +1,6 @@ | ||||||
| import { createApp } from 'ice' | import { createApp, IAppConfig } from 'ice' | ||||||
| 
 | 
 | ||||||
| const appConfig = { | const appConfig: IAppConfig = { | ||||||
|   app: { |   app: { | ||||||
|     rootId: 'ice-container' |     rootId: 'ice-container' | ||||||
|   } |   } | ||||||
|  |  | ||||||
|  | @ -11,7 +11,8 @@ | ||||||
|     "test": "__tests__" |     "test": "__tests__" | ||||||
|   }, |   }, | ||||||
|   "files": [ |   "files": [ | ||||||
|     "lib" |     "lib", | ||||||
|  |     "src/types" | ||||||
|   ], |   ], | ||||||
|   "dependencies": { |   "dependencies": { | ||||||
|     "@ice/stark": "^1.3.1", |     "@ice/stark": "^1.3.1", | ||||||
|  |  | ||||||
|  | @ -1,9 +1,11 @@ | ||||||
| import * as path from 'path'; | import * as path from 'path'; | ||||||
| import * as glob from 'glob'; | import * as glob from 'glob'; | ||||||
|  | import * as fse from 'fs-extra'; | ||||||
| import { IPlugin } from '@alib/build-scripts'; | import { IPlugin } from '@alib/build-scripts'; | ||||||
| 
 | 
 | ||||||
| const plugin: IPlugin = ({ onGetWebpackConfig, context }) => { | const plugin: IPlugin = async ({ onGetWebpackConfig, getValue, applyMethod, context }) => { | ||||||
|   const { rootDir } = context; |   const { rootDir } = context; | ||||||
|  |   const iceTempPath = getValue('ICE_TEMP'); | ||||||
| 
 | 
 | ||||||
|   const hasDefaultLayout = glob.sync(`${path.join(rootDir, 'src/layouts/index')}.@(ts?(x)|js?(x))`).length; |   const hasDefaultLayout = glob.sync(`${path.join(rootDir, 'src/layouts/index')}.@(ts?(x)|js?(x))`).length; | ||||||
|   onGetWebpackConfig((config) => { |   onGetWebpackConfig((config) => { | ||||||
|  | @ -14,6 +16,9 @@ const plugin: IPlugin = ({ onGetWebpackConfig, context }) => { | ||||||
|       config.resolve.alias.set(pkgName, require.resolve(pkgName)); |       config.resolve.alias.set(pkgName, require.resolve(pkgName)); | ||||||
|     }); |     }); | ||||||
|   }); |   }); | ||||||
|  | 
 | ||||||
|  |   await fse.copy(path.join(__dirname, '..', 'src/types/index.ts'), path.join(iceTempPath, 'types/icestark.ts')); | ||||||
|  |   applyMethod('addIceTypesExport', { source: './types/icestark', specifier: '{ IIceStark }', exportName: 'icestark?: IIceStark' }); | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| export default plugin; | export default plugin; | ||||||
|  | @ -11,35 +11,13 @@ import { | ||||||
| import { Router } from '$ice/Router'; | import { Router } from '$ice/Router'; | ||||||
| import DefaultLayout from '$ice/Layout'; | import DefaultLayout from '$ice/Layout'; | ||||||
| import removeRootLayout from './runtime/removeLayout'; | import removeRootLayout from './runtime/removeLayout'; | ||||||
| 
 | import { IIceStark } from './types' | ||||||
| interface IAppRouter { |  | ||||||
|   ErrorComponent?: React.ComponentType; |  | ||||||
|   LoadingComponent?: React.ComponentType; |  | ||||||
|   NotFoundComponent?: React.ComponentType; |  | ||||||
|   shouldAssetsRemove?: ( |  | ||||||
|     assetUrl?: string, |  | ||||||
|     element?: HTMLElement | HTMLLinkElement | HTMLStyleElement | HTMLScriptElement, |  | ||||||
|   ) => boolean; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| interface IGetApps { |  | ||||||
|   (): AppConfig[]|Promise<AppConfig[]>; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| interface IConfig { |  | ||||||
|   type: 'framework' | 'child'; |  | ||||||
|   getApps?: IGetApps; |  | ||||||
|   appRouter?: IAppRouter; |  | ||||||
|   removeRoutesLayout: boolean; |  | ||||||
|   AppRoute?: React.ComponentType; |  | ||||||
|   Layout?: React.ComponentType; |  | ||||||
| } |  | ||||||
| 
 | 
 | ||||||
| const { useEffect, useState } = React; | const { useEffect, useState } = React; | ||||||
| 
 | 
 | ||||||
| const module = ({ appConfig, addDOMRender, setRenderRouter, modifyRoutes }) => { | const module = ({ appConfig, addDOMRender, setRenderRouter, modifyRoutes }) => { | ||||||
|   const { icestark, router } = appConfig; |   const { icestark, router } = appConfig; | ||||||
|   const { type: appType } = (icestark || {}) as IConfig; |   const { type: appType } = (icestark || {}) as IIceStark; | ||||||
|   const { type, basename, modifyRoutes: runtimeModifyRoutes } = router; |   const { type, basename, modifyRoutes: runtimeModifyRoutes } = router; | ||||||
|   if (runtimeModifyRoutes) { |   if (runtimeModifyRoutes) { | ||||||
|     modifyRoutes(runtimeModifyRoutes); |     modifyRoutes(runtimeModifyRoutes); | ||||||
|  | @ -70,7 +48,7 @@ const module = ({ appConfig, addDOMRender, setRenderRouter, modifyRoutes }) => { | ||||||
|       return <Router {...routerProps} />; |       return <Router {...routerProps} />; | ||||||
|     }); |     }); | ||||||
|   } else if (appType === 'framework') { |   } else if (appType === 'framework') { | ||||||
|     const { getApps, appRouter, Layout, AppRoute: CustomAppRoute, removeRoutesLayout } = (icestark || {}) as IConfig; |     const { getApps, appRouter, Layout, AppRoute: CustomAppRoute, removeRoutesLayout } = (icestark || {}) as IIceStark; | ||||||
|     if (removeRoutesLayout) { |     if (removeRoutesLayout) { | ||||||
|       modifyRoutes(removeRootLayout); |       modifyRoutes(removeRootLayout); | ||||||
|     } |     } | ||||||
|  |  | ||||||
|  | @ -0,0 +1,24 @@ | ||||||
|  | import { AppConfig } from '@ice/stark'; | ||||||
|  | 
 | ||||||
|  | export interface IAppRouter { | ||||||
|  |   ErrorComponent?: React.ComponentType; | ||||||
|  |   LoadingComponent?: React.ComponentType; | ||||||
|  |   NotFoundComponent?: React.ComponentType; | ||||||
|  |   shouldAssetsRemove?: ( | ||||||
|  |     assetUrl?: string, | ||||||
|  |     element?: HTMLElement | HTMLLinkElement | HTMLStyleElement | HTMLScriptElement, | ||||||
|  |   ) => boolean; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | export interface IGetApps { | ||||||
|  |   (): AppConfig[]|Promise<AppConfig[]>; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | export interface IIceStark { | ||||||
|  |   type: 'framework' | 'child'; | ||||||
|  |   getApps?: IGetApps; | ||||||
|  |   appRouter?: IAppRouter; | ||||||
|  |   removeRoutesLayout?: boolean; | ||||||
|  |   AppRoute?: React.ComponentType; | ||||||
|  |   Layout?: React.ComponentType; | ||||||
|  | } | ||||||
|  | @ -1,14 +1,20 @@ | ||||||
| import { AxiosRequestConfig } from 'axios' | import { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios' | ||||||
|  | 
 | ||||||
|  | export interface IInterceptorRequest { | ||||||
|  |   onConfig?: (config: AxiosRequestConfig) => AxiosRequestConfig; | ||||||
|  |   onError?: (error: AxiosError) => {}; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | export interface IInterceptorResponse { | ||||||
|  |   onConfig?: (response: AxiosResponse) => AxiosResponse; | ||||||
|  |   onError?: (error: AxiosError) => Promise<void>; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | export interface IInterceptors { | ||||||
|  |   request?: IInterceptorRequest; | ||||||
|  |   response?: IInterceptorResponse; | ||||||
|  | } | ||||||
| 
 | 
 | ||||||
| export interface IRequest extends AxiosRequestConfig { | export interface IRequest extends AxiosRequestConfig { | ||||||
|   interceptors: { |   interceptors: IInterceptors; | ||||||
|     request: { |  | ||||||
|       onConfig: (config) => {}; |  | ||||||
|       onError: (error) => {}; |  | ||||||
|     }; |  | ||||||
|     response: { |  | ||||||
|       onConfig: (response) => {}; |  | ||||||
|       onError: (error) => {}; |  | ||||||
|     }; |  | ||||||
|   }; |  | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -29,8 +29,8 @@ const plugin: IPlugin = ({ context, onGetWebpackConfig, getValue, applyMethod, r | ||||||
|   const hasRouteFile = fse.existsSync(routeConfigPath); |   const hasRouteFile = fse.existsSync(routeConfigPath); | ||||||
| 
 | 
 | ||||||
|   // copy types
 |   // copy types
 | ||||||
|   fse.copySync(path.join(__dirname, '../src/types/index.ts'), path.join(iceTempPath, 'router/types.ts')); |   fse.copySync(path.join(__dirname, '../src/types/index.ts'), path.join(iceTempPath, 'types/router.ts')); | ||||||
|   applyMethod('addIceTypesExport', { source: './router/types', specifier: '{ IAppRouterProps }', exportName: 'router?: IAppRouterProps' }); |   applyMethod('addIceTypesExport', { source: './types/router', specifier: '{ IAppRouterProps }', exportName: 'router?: IAppRouterProps' }); | ||||||
| 
 | 
 | ||||||
|   // modify webpack config
 |   // modify webpack config
 | ||||||
|   onGetWebpackConfig((config) => { |   onGetWebpackConfig((config) => { | ||||||
|  |  | ||||||
|  | @ -52,6 +52,7 @@ export interface IModifyRoutes { | ||||||
| 
 | 
 | ||||||
| export interface IAppRouterProps { | export interface IAppRouterProps { | ||||||
|   type?: 'hash' | 'browser' | 'memory'; |   type?: 'hash' | 'browser' | 'memory'; | ||||||
|  |   routes?: RouteItemProps[]; | ||||||
|   basename?: string; |   basename?: string; | ||||||
|   modifyRoutes?: IModifyRoutes; |   modifyRoutes?: IModifyRoutes; | ||||||
|   fallback?: React.ReactNode; |   fallback?: React.ReactNode; | ||||||
|  |  | ||||||
|  | @ -12,8 +12,8 @@ export default async (api) => { | ||||||
|   const pageModelsTemplatePath = path.join(templatePath, 'pageModels.ts.ejs') |   const pageModelsTemplatePath = path.join(templatePath, 'pageModels.ts.ejs') | ||||||
|   const projectType = getValue('PROJECT_TYPE') |   const projectType = getValue('PROJECT_TYPE') | ||||||
| 
 | 
 | ||||||
|   await fse.copy(path.join(__dirname, '..', 'src/types/index.ts'), path.join(targetPath, 'store/types.ts')) |   await fse.copy(path.join(__dirname, '..', 'src/types/index.ts'), path.join(targetPath, './types/store.ts')) | ||||||
|   applyMethod('addIceTypesExport', { source: './store/types', specifier: '{ IStore }', exportName: 'store?: IStore' }) |   applyMethod('addIceTypesExport', { source: './types/store', specifier: '{ IStore }', exportName: 'store?: IStore' }) | ||||||
| 
 | 
 | ||||||
|   onGetWebpackConfig(config => { |   onGetWebpackConfig(config => { | ||||||
|     config.resolve.alias.set('$ice/appModels', path.join(targetPath, 'appModels.ts')) |     config.resolve.alias.set('$ice/appModels', path.join(targetPath, 'appModels.ts')) | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue