@micro-zoe/micro-app 1.0.0-alpha.1 → 1.0.0-alpha.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micro-zoe/micro-app",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.10",
   "description": "A lightweight, efficient and powerful micro front-end framework",
   "private": false,
   "main": "lib/index.min.js",
@@ -44,6 +44,8 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
+    "test:unit": "jest src/__tests__/unit",
+    "test:unit:coverage": "npm run test:unit -- --coverage",
     "prepublishOnly": "yarn build"
   },
   "repository": {

package/typings/global.d.ts

@@ -7,21 +7,57 @@ declare module '@micro-app/types' {
 
   type microAppWindowType = Window & any
 
+  type AppName = string
+
+  type SourceAddress = string
+
+  type AttrsType = Map<string, string>
+
+  type RequestIdleCallbackOptions = {
+    timeout: number
+  }
+
+  type RequestIdleCallbackInfo = {
+    readonly didTimeout: boolean
+    timeRemaining: () => number
+  }
+
+  type fiberTasks = Array<() => Promise<void>> | null
+
+  interface EffectController {
+    recordEffect(): void
+    rebuildEffect(): void
+    releaseEffect(): void
+  }
+
+  interface SandBoxStartParams {
+    umdMode: boolean
+    baseroute: string
+    useMemoryRouter: boolean
+    defaultPage: string
+    disablePatchRequest: boolean
+  }
+
+  interface SandBoxStopParams {
+    umdMode: boolean
+    keepRouteState: boolean
+    clearEventSource: boolean
+    clearData: boolean
+  }
+
   interface SandBoxInterface {
     proxyWindow: WindowProxy
     microAppWindow: Window // Proxy target
-    start (
-      baseRoute: string,
-      useMemoryRouter: boolean,
-      defaultPage: string,
-    ): void
-    stop (keepRouteState: boolean, clearEventSource: boolean): void
+    start (startParams: SandBoxStartParams): void
+    stop (stopParams: SandBoxStopParams): void
+    releaseGlobalEffect (clearData?: boolean): void
     // record umd snapshot before the first execution of umdHookMount
-    recordUmdSnapshot (): void
+    recordEffectSnapshot (): void
     // rebuild umd snapshot before remount umd app
-    rebuildUmdSnapshot (): void
+    rebuildEffectSnapshot (): void
     setRouteInfoForKeepAliveApp (): void
     removeRouteInfoForKeepAliveApp (): void
+    setPreRenderState (state: boolean): void
   }
 
   interface SandBoxAdapter {
@@ -38,68 +74,93 @@ declare module '@micro-app/types' {
     // injectReactHRMProperty (): void
   }
 
-  type sourceLinkInfo = {
-    code: string // code
-    placeholder?: Comment | null // placeholder comment
-    isGlobal: boolean // is global asset
+  type LinkSourceInfo = {
+    code: string, // source code
+    appSpace: Record<string, {
+      attrs: Map<string, string>, // active element.attributes
+      placeholder?: Comment | null, // placeholder comment
+      parsedCode?: string, // parsed code
+      prefix?: string, // micro-app[name=appName]
+    }>
   }
 
-  type sourceScriptInfo = {
-    code: string // code
-    isExternal: boolean // external script
-    isDynamic: boolean // dynamic create script
-    async: boolean // async script
-    defer: boolean // defer script
-    module: boolean // module type script
-    isGlobal?: boolean // share js to global
-    code2Function?: Function // code to Function
+  type ScriptSourceInfo = {
+    code: string, // source code
+    isExternal: boolean, // external script
+    appSpace: Record<string, {
+      async: boolean, // async script
+      defer: boolean, // defer script
+      module: boolean, // module type script
+      inline: boolean, // run js with inline script
+      pure: boolean, // pure script
+      attrs: Map<string, string>, // element attributes
+      parsedCode?: string, // bind code
+      parsedFunction?: Function | null, // code to function
+      wrapInSandBox?: boolean // use sandbox
+    }>
   }
 
-  interface sourceType {
-    html?: HTMLElement
-    links: Map<string, sourceLinkInfo>
-    scripts: Map<string, sourceScriptInfo>
+  type sourceType = {
+    html: HTMLElement | null, // html address
+    links: Set<string>, // style/link address list
+    scripts: Set<string>, // script address list
+  }
+
+  interface MountParam {
+    container: HTMLElement | ShadowRoot // app container
+    inline: boolean // run js in inline mode
+    useMemoryRouter: boolean // use virtual router
+    defaultPage: string // default page of virtual router
+    baseroute: string // route prefix, default is ''
+    disablePatchRequest: boolean // prevent rewrite request method of child app
+    fiber: boolean // run js in fiber mode
+    esmodule: boolean // support type='module' script
+    // hiddenRouter: boolean
+  }
+
+  interface UnmountParam {
+    destroy: boolean, // completely destroy, delete cache resources
+    clearData: boolean // clear data of dateCenter
+    keepRouteState: boolean // keep route state when unmount, default is false
+    unmountcb?: CallableFunction // callback of unmount
   }
 
   // app instance
-  interface AppInterface {
-    isPrefetch: boolean // whether prefetch app, default is false
-    prefetchResolve: (() => void) | null // prefetch callback
+  interface AppInterface extends Pick<ParentNode, 'querySelector' | 'querySelectorAll'> {
+    source: sourceType // source list
+    sandBox: SandBoxInterface | null // sandbox
     name: string // app name
     url: string // app url
-    ssrUrl: string // html path in ssr mode
-    container: HTMLElement | ShadowRoot | null // container maybe null, micro-app, shadowRoot, DIV(keep-alive)
-    inline: boolean //  whether js runs in inline script mode, default is false
     scopecss: boolean // whether use css scoped, default is true
     useSandbox: boolean // whether use js sandbox, default is true
-    useMemoryRouter: boolean // whether use memoryRouter, default is true
-    baseroute: string // route prefix, default is ''
-    keepRouteState: boolean // keep route state when unmount, default is false
-    source: sourceType // sources of css, js, html
-    sandBox: SandBoxInterface | null // sandbox
+    inline: boolean //  whether js runs in inline script mode, default is false
+    esmodule: boolean // support esmodule in script
+    ssrUrl: string // html path in ssr mode
+    container: HTMLElement | ShadowRoot | null // container maybe null, micro-app, shadowRoot, div(keep-alive)
     umdMode: boolean // is umd mode
-    defaultPage: string // default page when mount
+    fiber: boolean // fiber mode
+    useMemoryRouter: boolean // use virtual router
+    isPrefetch: boolean // whether prefetch app, default is false
+    isPrerender: boolean
+    prefetchLevel?: number
+    // defaultPage: string // default page when mount
+    // baseroute: string // route prefix, default is ''
+    // hiddenRouter: boolean // hide router info of child from browser url
 
     // Load resources
     loadSourceCode (): void
 
     // resource is loaded
-    onLoad (html: HTMLElement): void
+    onLoad (html: HTMLElement, defaultPage?: string, disablePatchRequest?: boolean): void
 
     // Error loading HTML
     onLoadError (e: Error): void
 
     // mount app
-    mount (
-      container?: HTMLElement | ShadowRoot,
-      inline?: boolean,
-      baseroute?: string,
-      keepRouteState?: boolean,
-      defaultPage?: string,
-    ): void
+    mount (mountParams: MountParam): void
 
     // unmount app
-    unmount (destroy: boolean, unmountcb?: CallableFunction): void
+    unmount (unmountParam: UnmountParam): void
 
     // app rendering error
     onerror (e: Error): void
@@ -113,7 +174,7 @@ declare module '@micro-app/types' {
     actionsForCompletelyDestroy (): void
 
     // hidden app when disconnectedCallback with keep-alive
-    hiddenKeepAliveApp (): void
+    hiddenKeepAliveApp (callback?: CallableFunction): void
 
     // show app when connectedCallback with keep-alive
     showKeepAliveApp (container: HTMLElement | ShadowRoot): void
@@ -133,13 +194,20 @@ declare module '@micro-app/types' {
     attributeChangedCallback (a: 'name' | 'url', o: string, n: string): void
   }
 
-  type prefetchParam = {
+  interface prefetchParam {
     name: string,
     url: string,
+    // old config 👇
     disableScopecss?: boolean
     disableSandbox?: boolean
-    disableMemoryRouter?: boolean
-    shadowDOM?: boolean
+    // old config 👆
+    'disable-scopecss'?: boolean
+    'disable-sandbox'?: boolean
+    inline?: boolean
+    esmodule?: boolean
+    level?: number
+    'default-page'?: string
+    'disable-patch-request'?: boolean
   }
 
   // prefetch params
@@ -147,13 +215,18 @@ declare module '@micro-app/types' {
 
   // lifeCycles
   interface lifeCyclesType {
-    created?(e?: CustomEvent): void
-    beforemount?(e?: CustomEvent): void
-    mounted?(e?: CustomEvent): void
-    unmount?(e?: CustomEvent): void
-    error?(e?: CustomEvent): void
+    created(e: CustomEvent): void
+    beforemount(e: CustomEvent): void
+    mounted(e: CustomEvent): void
+    unmount(e: CustomEvent): void
+    error(e: CustomEvent): void
+    beforeshow(e: CustomEvent): void
+    aftershow(e: CustomEvent): void
+    afterhidden(e: CustomEvent): void
   }
 
+  type AssetsChecker = (url: string) => boolean;
+
   type plugins = {
     // global plugin
     global?: Array<{
@@ -161,10 +234,16 @@ declare module '@micro-app/types' {
       scopeProperties?: Array<PropertyKey>
       // Properties that can be escape to rawWindow
       escapeProperties?: Array<PropertyKey>
+      // Exclude JS or CSS
+      excludeChecker?: AssetsChecker
+      // Ignore JS or CSS
+      ignoreChecker?: AssetsChecker
       // options for plugin as the third parameter of loader
-      options?: unknown
+      options?: Record<string, unknown>
       // handle function
-      loader?: (code: string, url: string, options: unknown, info: sourceScriptInfo) => string
+      loader?: (code: string, url: string) => string
+      // html processor
+      processHtml?: (code: string, url: string) => string
     }>
 
     // plugin for special app
@@ -174,14 +253,25 @@ declare module '@micro-app/types' {
         scopeProperties?: Array<PropertyKey>
         // Properties that can be escape to rawWindow
         escapeProperties?: Array<PropertyKey>
+        // Exclude JS or CSS
+        excludeChecker?: AssetsChecker
+        // Ignore JS or CSS
+        ignoreChecker?: AssetsChecker
         // options for plugin as the third parameter of loader
-        options?: unknown
+        options?: Record<string, unknown>
         // handle function
-        loader?: (code: string, url: string, options: unknown, info: sourceScriptInfo) => string
+        loader?: (code: string, url: string) => string
+        // html processor
+        processHtml?: (code: string, url: string) => string
       }>
     }
   }
 
+  type GetActiveAppsParam = {
+    excludeHiddenApp?: boolean,
+    excludePreRender?: boolean,
+  }
+
   type fetchType = (url: string, options: Record<string, unknown>, appName: string | null) => Promise<string>
 
   type globalAssetsType = {
@@ -189,35 +279,44 @@ declare module '@micro-app/types' {
     css?: string[],
   }
 
-  type OptionsType = {
-    tagName?: string
+  interface MicroAppConfig {
     shadowDOM?: boolean
     destroy?: boolean
+    destory?: boolean
     inline?: boolean
+    // old config 👇
     disableScopecss?: boolean
     disableSandbox?: boolean
-    disableMemoryRouter?: boolean
+    // old config 👆
+    'disable-scopecss'?: boolean
+    'disable-sandbox'?: boolean
+    'disable-memory-router'?: boolean
+    'disable-patch-request'?: boolean
+    'keep-router-state'?: boolean
+    'hidden-router'?: boolean
+    'keep-alive'?: boolean
+    'clear-data'?: boolean
+    esmodule?: boolean
     ssr?: boolean
+    fiber?: boolean
+    prefetchLevel?: number
+    prefetchDelay?: number
+  }
+
+  interface OptionsType extends MicroAppConfig {
+    tagName?: string
     lifeCycles?: lifeCyclesType
     preFetchApps?: prefetchParamList
     plugins?: plugins
     fetch?: fetchType
     globalAssets?: globalAssetsType,
+    excludeAssetFilter?: (assetUrl: string) => boolean
   }
 
   // MicroApp config
-  interface MicroAppConfigType {
+  interface MicroAppBaseType {
     tagName: string
-    shadowDOM?: boolean
-    destroy?: boolean
-    inline?: boolean
-    disableScopecss?: boolean
-    disableSandbox?: boolean
-    disableMemoryRouter?: boolean
-    ssr?: boolean
-    lifeCycles?: lifeCyclesType
-    plugins?: plugins
-    fetch?: fetchType
+    options: OptionsType
     preFetch(apps: prefetchParamList): void
     router: Router // eslint-disable-line
     start(options?: OptionsType): void
@@ -283,10 +382,20 @@ declare module '@micro-app/types' {
     [appName: string]: (to: GuardLocation, from: GuardLocation) => void
   }
 
-  type GlobalNormalGuard = ((appName: string, to: GuardLocation, from: GuardLocation) => void)
+  type GlobalNormalGuard = ((to: GuardLocation, from: GuardLocation, appName: string) => void)
 
   type RouterGuard = AccurateGuard | GlobalNormalGuard
 
+  type SetDefaultPageOptions = {
+    name: string,
+    path: string,
+  }
+
+  type AttachAllToURLParam = {
+    includeHiddenApp?: boolean,
+    includePreRender?: boolean,
+  }
+
   // Router API for developer
   interface Router {
     // current route of all apps
@@ -339,10 +448,37 @@ declare module '@micro-app/types' {
      * @param guard global hook for
      */
     afterEach(guard: RouterGuard): () => boolean
-
-    setDefaultPage(appName: string, path: string): () => boolean
+    /**
+     * Add defaultPage to control the first rendered page
+     * @param options SetDefaultPageOptions
+     */
+    setDefaultPage(options: SetDefaultPageOptions): () => boolean
+    /**
+     * Clear data of defaultPage that set by setDefaultPage
+     */
     removeDefaultPage(appName: string): boolean
-    getDefaultPage(key: PropertyKey): string | undefined
+    /**
+     * Get defaultPage that set by setDefaultPage
+     */
+    getDefaultPage(key: PropertyKey): string | void
+    /**
+     * Attach specified active app router info to browser url
+     */
+    attachToURL(appName: string): void
+    /**
+     * Attach all active app router info to browser url
+     */
+    attachAllToURL(options: AttachAllToURLParam): void
+    /**
+     * Record base app router, let child app control base app navigation
+     * It is global data
+     * @param baseRouter router instance of base app
+     */
+    setBaseAppRouter(baseRouter: unknown): void
+    /**
+     * get baseRouter from cache
+     */
+    getBaseAppRouter(): unknown
   }
 
   // result of add/remove microApp path on browser url