@micro-zoe/micro-app 0.4.1 → 0.5.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@micro-zoe/micro-app",
-  "version": "0.4.1",
-  "description": "A minimalist solution for building micro front-end applications",
+  "version": "0.5.1",
+  "description": "A lightweight, efficient and powerful micro front-end framework",
   "private": false,
   "main": "lib/index.min.js",
   "module": "lib/index.esm.js",
@@ -17,24 +17,24 @@
     "start:main-vue3-vite": "npm-run-all --parallel build:watch start-child:* main-vue3-vite",
     "build:watch": "cross-env NODE_ENV='development' rollup -c -w",
     "build": "cross-env NODE_ENV='production' rollup -c && npm run createtype && npm run afterbuild",
-    "install:main-react16": "cd examples/main-react16 && yarn",
-    "install:main-vue2": "cd examples/main-vue2 && yarn",
-    "install:main-vue3-vite": "cd examples/main-vue3-vite && yarn",
-    "install:child-react16": "cd examples/children/react16 && yarn",
-    "install:child-react17": "cd examples/children/react17 && yarn",
-    "install:child-vue2": "cd examples/children/vue2 && yarn",
-    "install:child-vue3": "cd examples/children/vue3 && yarn",
-    "install:child-vite": "cd examples/children/vite && yarn",
-    "install:child-angular11": "cd examples/children/angular11 && yarn",
-    "main-react16": "cd examples/main-react16 && yarn start",
-    "main-vue2": "cd examples/main-vue2 && yarn start",
-    "main-vue3-vite": "cd examples/main-vue3-vite && yarn start",
-    "start-child:react16": "cd examples/children/react16 && yarn start",
-    "start-child:react17": "cd examples/children/react17 && yarn start",
-    "start-child:vue2": "cd examples/children/vue2 && yarn start",
-    "start-child:vue3": "cd examples/children/vue3 && yarn start",
-    "start-child:vite": "cd examples/children/vite && yarn start",
-    "start-child:angular11": "cd examples/children/angular11 && yarn start",
+    "install:main-react16": "cd dev/main-react16 && yarn",
+    "install:main-vue2": "cd dev/main-vue2 && yarn",
+    "install:main-vue3-vite": "cd dev/main-vue3-vite && yarn",
+    "install:child-react16": "cd dev/children/react16 && yarn",
+    "install:child-react17": "cd dev/children/react17 && yarn",
+    "install:child-vue2": "cd dev/children/vue2 && yarn",
+    "install:child-vue3": "cd dev/children/vue3 && yarn",
+    "install:child-vite": "cd dev/children/vite && yarn",
+    "install:child-angular11": "cd dev/children/angular11 && yarn",
+    "main-react16": "cd dev/main-react16 && yarn start",
+    "main-vue2": "cd dev/main-vue2 && yarn start",
+    "main-vue3-vite": "cd dev/main-vue3-vite && yarn start",
+    "start-child:react16": "cd dev/children/react16 && yarn start",
+    "start-child:react17": "cd dev/children/react17 && yarn start",
+    "start-child:vue2": "cd dev/children/vue2 && yarn start",
+    "start-child:vue3": "cd dev/children/vue3 && yarn start",
+    "start-child:vite": "cd dev/children/vite && yarn start",
+    "start-child:angular11": "cd dev/children/angular11 && yarn start",
     "docs": "docsify serve docs --port 2000",
     "lint": "eslint --cache '**/*.{js,ts}'",
     "lint:fix": "yarn lint --fix",
@@ -44,7 +44,7 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "prepublishOnly": "yarn lint && yarn build"
+    "prepublishOnly": "yarn lint && yarn test && yarn build"
   },
   "repository": {
     "type": "git",
@@ -82,9 +82,6 @@
     ]
   },
   "dependencies": {},
-  "peerDependencies": {
-    "@babel/runtime": ">=7.0.0"
-  },
   "devDependencies": {
     "@babel/core": "~7.12.10",
     "@babel/plugin-transform-runtime": "~7.12.10",

package/polyfill/jsx-custom-event.js

@@ -4,40 +4,41 @@ import React from 'react';
 // lifecycles
 const eventLifeCycles = ['oncreated', 'onbeforemount', 'onmounted', 'onunmount', 'onerror', 'ondatachange'];
 function jsxCustomEvent(type, props, ...children) {
+    if (typeof type !== 'string' || !/^micro-app(-\S+)?/.test(type) || !props) {
+        return React.createElement.apply(null, [type, props, ...children]);
+    }
     const newProps = Object.assign({}, props);
-    if (/^micro-app(-\S+)?/.test(type) && props) {
-        // ref will call when create, update, unmount
-        newProps.ref = (element) => {
-            if (typeof props.ref === 'function') {
-                props.ref(element);
-            }
-            else if (typeof props.ref === 'object') {
-                props.ref.current = element;
+    // ref will call when create, update, unmount
+    newProps.ref = (element) => {
+        if (typeof props.ref === 'function') {
+            props.ref(element);
+        }
+        else if (typeof props.ref === 'object') {
+            props.ref.current = element;
+        }
+        // when unmount and update the element is null
+        if (element) {
+            // Update data when the prev and next data are different
+            if (toString.call(props.data) === '[object Object]' && element.data !== props.data) {
+                element.data = props.data;
             }
-            // when unmount and update the element is null
-            if (element) {
-                // Update data when the prev and next data are different
-                if (toString.call(props.data) === '[object Object]' && element.data !== props.data) {
-                    element.data = props.data;
-                }
-                for (const key in props) {
-                    if (Object.prototype.hasOwnProperty.call(props, key) &&
-                        eventLifeCycles.includes(key.toLowerCase()) &&
-                        typeof props[key] === 'function' &&
-                        (!element[key] || element[key] !== props[key])) {
-                        const eventName = key.toLowerCase().replace('on', '');
-                        if (element[key]) {
-                            // @ts-ignore
-                            element.removeEventListener(eventName, element[key], false);
-                        }
+            for (const key in props) {
+                if (Object.prototype.hasOwnProperty.call(props, key) &&
+                    eventLifeCycles.includes(key.toLowerCase()) &&
+                    typeof props[key] === 'function' &&
+                    (!element[key] || element[key] !== props[key])) {
+                    const eventName = key.toLowerCase().replace('on', '');
+                    if (element[key]) {
                         // @ts-ignore
-                        element.addEventListener(eventName, props[key], false);
-                        element[key] = props[key];
+                        element.removeEventListener(eventName, element[key], false);
                     }
+                    // @ts-ignore
+                    element.addEventListener(eventName, props[key], false);
+                    element[key] = props[key];
                 }
             }
-        };
-    }
+        }
+    };
     return React.createElement.apply(null, [type, newProps, ...children]);
 }
 

package/polyfill/jsx-custom-event.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-custom-event.js","sources":["../src/polyfill/jsx-custom-event.ts"],"sourcesContent":["// @ts-ignore\nimport React from 'react'\n\ntype MicroElementType = HTMLElement & Record<string, unknown>\n\n// lifecycles\nconst eventLifeCycles = ['oncreated', 'onbeforemount', 'onmounted', 'onunmount', 'onerror', 'ondatachange']\n\nexport default function jsxCustomEvent (\n  type: string | CallableFunction,\n  props: Record<string, unknown> | null,\n  ...children: any[]\n): void {\n  const newProps = Object.assign({}, props)\n\n  if (/^micro-app(-\\S+)?/.test(type as string) && props) {\n    // ref will call when create, update, unmount\n    newProps.ref = (element: MicroElementType | null) => {\n      if (typeof props.ref === 'function') {\n        props.ref(element)\n      } else if (typeof props.ref === 'object') {\n        (props.ref as any).current = element\n      }\n\n      // when unmount and update the element is null\n      if (element) {\n        // Update data when the prev and next data are different\n        if (toString.call(props.data) === '[object Object]' && element.data !== props.data) {\n          element.data = props.data\n        }\n\n        for (const key in props) {\n          if (\n            Object.prototype.hasOwnProperty.call(props, key) &&\n            eventLifeCycles.includes(key.toLowerCase()) &&\n            typeof props[key] === 'function' &&\n            (!element[key] || element[key] !== props[key])\n          ) {\n            const eventName = key.toLowerCase().replace('on', '')\n            if (element[key]) {\n              // @ts-ignore\n              element.removeEventListener(eventName, element[key], false)\n            }\n            // @ts-ignore\n            element.addEventListener(eventName, props[key], false)\n            element[key] = props[key]\n          }\n        }\n      }\n    }\n  }\n\n  return React.createElement.apply(null, [type, newProps, ...children])\n}\n"],"names":[],"mappings":";;AAAA;AAKA;AACA,MAAM,eAAe,GAAG,CAAC,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,CAAC,CAAA;SAEnF,cAAc,CACpC,IAA+B,EAC/B,KAAqC,EACrC,GAAG,QAAe;IAElB,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,CAAA;IAEzC,IAAI,mBAAmB,CAAC,IAAI,CAAC,IAAc,CAAC,IAAI,KAAK,EAAE;;QAErD,QAAQ,CAAC,GAAG,GAAG,CAAC,OAAgC;YAC9C,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,UAAU,EAAE;gBACnC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;aACnB;iBAAM,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACvC,KAAK,CAAC,GAAW,CAAC,OAAO,GAAG,OAAO,CAAA;aACrC;;YAGD,IAAI,OAAO,EAAE;;gBAEX,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,iBAAiB,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,EAAE;oBAClF,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAA;iBAC1B;gBAED,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE;oBACvB,IACE,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC;wBAChD,eAAe,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;wBAC3C,OAAO,KAAK,CAAC,GAAG,CAAC,KAAK,UAAU;yBAC/B,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,EAC9C;wBACA,MAAM,SAAS,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;wBACrD,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE;;4BAEhB,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAA;yBAC5D;;wBAED,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAA;wBACtD,OAAO,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;qBAC1B;iBACF;aACF;SACF,CAAA;KACF;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAA;AACvE;;;;"}
+{"version":3,"file":"jsx-custom-event.js","sources":["../src/polyfill/jsx-custom-event.ts"],"sourcesContent":["// @ts-ignore\nimport React from 'react'\n\ntype MicroElementType = HTMLElement & Record<string, unknown>\n\n// lifecycles\nconst eventLifeCycles = ['oncreated', 'onbeforemount', 'onmounted', 'onunmount', 'onerror', 'ondatachange']\n\nexport default function jsxCustomEvent (\n  type: string | CallableFunction,\n  props: Record<string, unknown> | null,\n  ...children: any[]\n): void {\n  if (typeof type !== 'string' || !/^micro-app(-\\S+)?/.test(type as string) || !props) {\n    return React.createElement.apply(null, [type, props, ...children])\n  }\n\n  const newProps = Object.assign({}, props)\n\n  // ref will call when create, update, unmount\n  newProps.ref = (element: MicroElementType | null) => {\n    if (typeof props.ref === 'function') {\n      props.ref(element)\n    } else if (typeof props.ref === 'object') {\n      (props.ref as any).current = element\n    }\n\n    // when unmount and update the element is null\n    if (element) {\n      // Update data when the prev and next data are different\n      if (toString.call(props.data) === '[object Object]' && element.data !== props.data) {\n        element.data = props.data\n      }\n\n      for (const key in props) {\n        if (\n          Object.prototype.hasOwnProperty.call(props, key) &&\n          eventLifeCycles.includes(key.toLowerCase()) &&\n          typeof props[key] === 'function' &&\n          (!element[key] || element[key] !== props[key])\n        ) {\n          const eventName = key.toLowerCase().replace('on', '')\n          if (element[key]) {\n            // @ts-ignore\n            element.removeEventListener(eventName, element[key], false)\n          }\n          // @ts-ignore\n          element.addEventListener(eventName, props[key], false)\n          element[key] = props[key]\n        }\n      }\n    }\n  }\n\n  return React.createElement.apply(null, [type, newProps, ...children])\n}\n"],"names":[],"mappings":";;AAAA;AAKA;AACA,MAAM,eAAe,GAAG,CAAC,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,CAAC,CAAA;SAEnF,cAAc,CACpC,IAA+B,EAC/B,KAAqC,EACrC,GAAG,QAAe;IAElB,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QACnF,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAA;KACnE;IAED,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,CAAA;;IAGzC,QAAQ,CAAC,GAAG,GAAG,CAAC,OAAgC;QAC9C,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,UAAU,EAAE;YACnC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;SACnB;aAAM,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YACvC,KAAK,CAAC,GAAW,CAAC,OAAO,GAAG,OAAO,CAAA;SACrC;;QAGD,IAAI,OAAO,EAAE;;YAEX,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,iBAAiB,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,EAAE;gBAClF,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAA;aAC1B;YAED,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE;gBACvB,IACE,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC;oBAChD,eAAe,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;oBAC3C,OAAO,KAAK,CAAC,GAAG,CAAC,KAAK,UAAU;qBAC/B,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,EAC9C;oBACA,MAAM,SAAS,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;oBACrD,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE;;wBAEhB,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAA;qBAC5D;;oBAED,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAA;oBACtD,OAAO,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;iBAC1B;aACF;SACF;KACF,CAAA;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAA;AACvE;;;;"}

package/typings/global.d.ts

@@ -6,23 +6,14 @@ declare module '@micro-app/types' {
   type microWindowType = Window & any
 
   interface SandBoxInterface {
-    active: boolean // sandbox state
     proxyWindow: WindowProxy
-    recordUmdEffect: CallableFunction
-    rebuildUmdEffect: CallableFunction
-    releaseEffect: CallableFunction
-    // Scoped global Properties(Properties that can only get and set in microWindow, will not escape to rawWindow)
-    scopeProperties: Array<PropertyKey>
-    // Properties that can be escape to rawWindow
-    escapeProperties: Array<PropertyKey>
     microWindow: Window // Proxy target
-    injectedKeys: Set<PropertyKey> // Properties newly added to microWindow
-    escapeKeys: Set<PropertyKey> // Properties escape to rawWindow, cleared when unmount
-    start(baseroute: string): void
-    stop(): void
-    recordUmdSnapshot(): void
-    rebuildUmdSnapshot(): void
-    inject(microWindow: microWindowType, appName: string, url: string): void
+    start (baseroute: string): void
+    stop (): void
+    // record umd snapshot before the first execution of umdHookMount
+    recordUmdSnapshot (): void
+    // rebuild umd snapshot before remount umd app
+    rebuildUmdSnapshot (): void
   }
 
   type sourceLinkInfo = {
@@ -39,6 +30,7 @@ declare module '@micro-app/types' {
     defer: boolean // defer script
     module: boolean // module type script
     isGlobal?: boolean // share js to global
+    code2Function?: Function // code to Function
   }
 
   interface sourceType {
@@ -52,6 +44,7 @@ declare module '@micro-app/types' {
     isPrefetch: boolean // whether prefetch app, default is false
     name: string // app name
     url: string // app url
+    ssrUrl: string // html path in ssr mode
     container: HTMLElement | ShadowRoot | null // app container
     inline: boolean //  whether js runs in inline script mode, default is false
     scopecss: boolean // whether use css scoped, default is true
@@ -60,35 +53,49 @@ declare module '@micro-app/types' {
     baseroute: string // route prefix, default is ''
     source: sourceType // sources of css, js, html
     sandBox: SandBoxInterface | null // sanxbox
-    loadSourceCode(): void // Load resources
-    onLoad(html: HTMLElement): void // resource is loaded
-    onLoadError(e: Error): void // Error loading HTML
-    mount(
+    umdMode: boolean // is umd mode
+
+    // Load resources
+    loadSourceCode (): void
+
+    // resource is loaded
+    onLoad (html: HTMLElement): void
+
+    // Error loading HTML
+    onLoadError (e: Error): void
+
+    // mount app
+    mount (
       container?: HTMLElement | ShadowRoot,
       inline?: boolean,
       baseroute?: string,
-    ): void // mount app
-    dispatchMountedEvent(): void // dispatch mounted event when app run finished
-    unmount(destory: boolean): void // unmount app
-    onerror(e: Error): void // app rendering error
-    getAppStatus(): string // get app status
+    ): void
+
+    // unmount app
+    unmount (destroy: boolean): void
+
+    // app rendering error
+    onerror (e: Error): void
+
+    // get app status
+    getAppStatus (): string
+
+    // actions for completely destroy
+    actionsForCompletelyDestory (): void
   }
 
   interface MicroAppElementType {
     appName: AttrType // app name
     appUrl: AttrType // app url
-    isWating: boolean // combine action of set attribute name, url
-    cacheData: Record<PropertyKey, unknown> | null // Cache data
-    hasConnected: boolean // element has run connectedCallback
-    connectedCallback(): void // Hooks for element append to documents
-    disconnectedCallback(): void // Hooks for element delete from documents
-    attributeChangedCallback(a: 'name' | 'url', o: string, n: string): void // Hooks for element attributes change
-    handleAttributeUpdate(): void // handle for change of attribute name, url after inited
-    legalAttribute(name: string, val: AttrType): boolean // judge the attribute is legal
-    handleAppMount(app: AppInterface): void // mount app
-    handleCreate(): void // create app
-    handleUnmount (destory: boolean): void // unmount app
-    getDisposeResult (name: string): boolean // Get configuration
+
+    // Hooks for element append to documents
+    connectedCallback (): void
+
+    // Hooks for element delete from documents
+    disconnectedCallback (): void
+
+    // Hooks for element attributes change
+    attributeChangedCallback (a: 'name' | 'url', o: string, n: string): void
   }
 
   type prefetchParam = {
@@ -150,7 +157,7 @@ declare module '@micro-app/types' {
   type OptionsType = {
     tagName?: string
     shadowDOM?: boolean
-    destory?: boolean
+    destroy?: boolean
     inline?: boolean
     disableScopecss?: boolean
     disableSandbox?: boolean
@@ -166,7 +173,7 @@ declare module '@micro-app/types' {
   interface MicroAppConfigType {
     tagName: string
     shadowDOM?: boolean
-    destory?: boolean
+    destroy?: boolean
     inline?: boolean
     disableScopecss?: boolean
     disableSandbox?: boolean
@@ -189,3 +196,7 @@ declare namespace JSX {
 }
 
 declare module '@micro-zoe/micro-app/polyfill/jsx-custom-event'
+
+declare const __DEV__: boolean
+
+declare const __TEST__: boolean