@micro-zoe/micro-app 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micro-zoe/micro-app",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A lightweight, efficient and powerful micro front-end framework",
   "private": false,
   "main": "lib/index.min.js",
@@ -14,12 +14,12 @@
     "start": "yarn start:main-react16",
     "start:main-react16": "npm-run-all --parallel build:watch start-child:* main-react16",
     "start:main-vue2": "npm-run-all --parallel build:watch start-child:* main-vue2",
-    "start:main-vue3-vite": "npm-run-all --parallel build:watch start-child:* main-vue3-vite",
+    "start:main-vite": "npm-run-all --parallel build:watch start-child:* main-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 dev/main-react16 && yarn",
     "install:main-vue2": "cd dev/main-vue2 && yarn",
-    "install:main-vue3-vite": "cd dev/main-vue3-vite && yarn",
+    "install:main-vite": "cd dev/main-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",
@@ -28,7 +28,7 @@
     "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",
+    "main-vite": "cd dev/main-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",

package/polyfill/jsx-custom-event.js

@@ -1,8 +1,16 @@
-import React from 'react';
-
-// @ts-ignore
+const React = require('react');
 // lifecycles
-const eventLifeCycles = ['oncreated', 'onbeforemount', 'onmounted', 'onunmount', 'onerror', 'ondatachange'];
+const eventLifeCycles = [
+    'oncreated',
+    'onbeforemount',
+    'onmounted',
+    'onunmount',
+    'onerror',
+    'ondatachange',
+    'onbeforeshow',
+    'onaftershow',
+    'onafterhidden',
+];
 function jsxCustomEvent(type, props, ...children) {
     if (typeof type !== 'string' || !/^micro-app(-\S+)?/.test(type) || !props) {
         return React.createElement.apply(null, [type, props, ...children]);
@@ -41,6 +49,6 @@ function jsxCustomEvent(type, props, ...children) {
     };
     return React.createElement.apply(null, [type, newProps, ...children]);
 }
-
-export default jsxCustomEvent;
+module.exports = jsxCustomEvent;
+module.exports.default = jsxCustomEvent;
 //# sourceMappingURL=jsx-custom-event.js.map

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  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;;;;"}
+{"version":3,"file":"jsx-custom-event.js","sources":["../src/polyfill/jsx-custom-event.ts"],"sourcesContent":["const React = require('react')\n\ntype MicroElementType = HTMLElement & Record<string, unknown>\n\n// lifecycles\nconst eventLifeCycles = [\n  'oncreated',\n  'onbeforemount',\n  'onmounted',\n  'onunmount',\n  'onerror',\n  'ondatachange',\n  'onbeforeshow',\n  'onaftershow',\n  'onafterhidden',\n]\n\nfunction 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\nmodule.exports = jsxCustomEvent\nmodule.exports.default = jsxCustomEvent\n"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;AAI9B;AACA,MAAM,eAAe,GAAG;IACtB,WAAW;IACX,eAAe;IACf,WAAW;IACX,WAAW;IACX,SAAS;IACT,cAAc;IACd,cAAc;IACd,aAAa;IACb,eAAe;CAChB,CAAA;AAED,SAAS,cAAc,CACrB,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,CAAC;AAED,MAAM,CAAC,OAAO,GAAG,cAAc,CAAA;AAC/B,MAAM,CAAC,OAAO,CAAC,OAAO,GAAG,cAAc"}

package/typings/global.d.ts

@@ -45,7 +45,7 @@ declare module '@micro-app/types' {
     name: string // app name
     url: string // app url
     ssrUrl: string // html path in ssr mode
-    container: HTMLElement | ShadowRoot | null // app container
+    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
@@ -72,16 +72,24 @@ declare module '@micro-app/types' {
     ): void
 
     // unmount app
-    unmount (destroy: boolean): void
+    unmount (destroy: boolean, unmountcb?: CallableFunction): void
 
     // app rendering error
     onerror (e: Error): void
 
-    // get app status
-    getAppStatus (): string
+    // get app state
+    getAppState (): string
+
+    getKeepAliveState(): string | null
 
     // actions for completely destroy
     actionsForCompletelyDestory (): void
+
+    // hidden app when disconnectedCallback with keep-alive
+    hiddenKeepAliveApp (): void
+
+    // show app when connectedCallback with keep-alive
+    showKeepAliveApp (container: HTMLElement | ShadowRoot): void
   }
 
   interface MicroAppElementType {
@@ -162,6 +170,7 @@ declare module '@micro-app/types' {
     disableScopecss?: boolean
     disableSandbox?: boolean
     macro?: boolean
+    ssr?: boolean
     lifeCycles?: lifeCyclesType
     preFetchApps?: prefetchParamList
     plugins?: plugins
@@ -178,6 +187,7 @@ declare module '@micro-app/types' {
     disableScopecss?: boolean
     disableSandbox?: boolean
     macro?: boolean
+    ssr?: boolean
     lifeCycles?: lifeCyclesType
     plugins?: plugins
     fetch?: fetchType