@micro-zoe/micro-app
Advanced tools
Comparing version 1.0.0-alpha.5 to 1.0.0-alpha.6
@@ -14,3 +14,3 @@ /// <reference path="../typings/global.d.ts" /> | ||
declare module '@micro-zoe/micro-app/micro_app' { | ||
import type { OptionsType, MicroAppConfigType, lifeCyclesType, plugins, fetchType, Router, appName } from '@micro-app/types'; | ||
import type { OptionsType, MicroAppConfigType, Router, appName } from '@micro-app/types'; | ||
import preFetch from '@micro-zoe/micro-app/prefetch'; | ||
@@ -39,16 +39,3 @@ import { EventCenterForBaseApp } from '@micro-zoe/micro-app/interact'; | ||
tagName: string; | ||
shadowDOM?: boolean; | ||
destroy?: boolean; | ||
inline?: boolean; | ||
'disable-scopecss'?: boolean; | ||
'disable-sandbox'?: boolean; | ||
'disable-memory-router'?: boolean; | ||
'disable-patch-request'?: boolean; | ||
'keep-router-state'?: boolean; | ||
'hidden-router'?: boolean; | ||
esmodule?: boolean; | ||
ssr?: boolean; | ||
lifeCycles?: lifeCyclesType; | ||
plugins?: plugins; | ||
fetch?: fetchType; | ||
options: OptionsType; | ||
preFetch: typeof preFetch; | ||
@@ -89,3 +76,3 @@ router: Router; | ||
declare module '@micro-zoe/micro-app/libs/utils' { | ||
import type { Func, LocationQueryObject, MicroLocation } from '@micro-app/types'; | ||
import type { Func, LocationQueryObject, MicroLocation, AttrsType, fiberTasks } from '@micro-app/types'; | ||
export const version = "__MICRO_APP_VERSION__"; | ||
@@ -193,2 +180,7 @@ export const isBrowser: boolean; | ||
export const requestIdleCallback: any; | ||
/** | ||
* Wrap requestIdleCallback with promise | ||
* Exec callback when browser idle | ||
*/ | ||
export function promiseRequestIdle(callback: CallableFunction): Promise<void>; | ||
export function setCurrentAppName(appName: string | null): void; | ||
@@ -249,2 +241,20 @@ export function throttleDeferForSetAppName(appName: string): void; | ||
}; | ||
export function getAttributes(element: Element): AttrsType; | ||
/** | ||
* if fiberTasks exist, wrap callback with promiseRequestIdle | ||
* if not, execute callback | ||
* @param fiberTasks fiber task list | ||
* @param callback action callback | ||
*/ | ||
export function injectFiberTask(fiberTasks: fiberTasks, callback: CallableFunction): void; | ||
/** | ||
* serial exec fiber task of link, style, script | ||
* @param tasks task array or null | ||
*/ | ||
export function serialExecFiberTasks(tasks: fiberTasks): Promise<void> | null; | ||
/** | ||
* inline script start with inline-xxx | ||
* @param address source address | ||
*/ | ||
export function isInlineScript(address: string): boolean; | ||
} | ||
@@ -251,0 +261,0 @@ |
{ | ||
"name": "@micro-zoe/micro-app", | ||
"version": "1.0.0-alpha.5", | ||
"version": "1.0.0-alpha.6", | ||
"description": "A lightweight, efficient and powerful micro front-end framework", | ||
@@ -5,0 +5,0 @@ "private": false, |
@@ -38,6 +38,2 @@ <p align="center"> | ||
# How to use | ||
The micro front end is divided into a base application (also called main application) and a micro application. | ||
Here is a common example: the base application uses the Vue framework, uses history routing, the micro application uses the react framework, and uses hash routing. We list the modifications that need to be made by the base application and the micro application, and introduce the use of micro-app in detail. | ||
## base application | ||
@@ -44,0 +40,0 @@ **1、Install** |
@@ -31,3 +31,3 @@ <p align="center"> | ||
# 📖简介 | ||
micro-app是京东零售推出的一款微前端框架,它基于类WebComponent进行渲染,从组件化的思维实现微前端,旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架,并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。 | ||
micro-app是京东零售推出的一款微前端框架,它基于类WebComponent进行渲染,从组件化的思维实现微前端,旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架,并且提供了JS沙箱、样式隔离、元素隔离、预加载、虚拟路由系统、插件系统、数据通信等一系列完善的功能。 | ||
@@ -34,0 +34,0 @@ micro-app与技术栈无关,对前端框架没有限制,任何框架都可以作为基座应用嵌入任何类型的子应用。 |
@@ -12,17 +12,27 @@ declare module '@micro-app/types' { | ||
type SourceAddress = string | ||
type AttrsType = Map<string, string> | ||
type fiberTasks = Array<() => Promise<void>> | null | ||
interface SandBoxStartParams { | ||
umdMode: boolean | ||
baseroute: string | ||
useMemoryRouter: boolean | ||
defaultPage: string | ||
disablePatchRequest: boolean | ||
} | ||
interface SandBoxStopParams { | ||
umdMode: boolean | ||
keepRouteState: boolean | ||
clearEventSource: boolean | ||
} | ||
interface SandBoxInterface { | ||
proxyWindow: WindowProxy | ||
microAppWindow: Window // Proxy target | ||
start ( | ||
umdMode: boolean, | ||
baseRoute: string, | ||
useMemoryRouter: boolean, | ||
defaultPage: string, | ||
disablePatchRequest: boolean, | ||
): void | ||
stop ( | ||
umdMode: boolean, | ||
keepRouteState: boolean, | ||
clearEventSource: boolean, | ||
): void | ||
start (startParams: SandBoxStartParams): void | ||
stop (stopParams: SandBoxStopParams): void | ||
// record umd snapshot before the first execution of umdHookMount | ||
@@ -50,44 +60,67 @@ recordUmdSnapshot (): 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 | ||
inline: boolean | ||
useMemoryRouter: boolean | ||
baseroute: string | ||
keepRouteState: boolean | ||
defaultPage: string | ||
hiddenRouter: boolean | ||
disablePatchRequest: boolean | ||
fiber: boolean | ||
esmodule: boolean | ||
} | ||
// app instance | ||
interface AppInterface { | ||
isPrefetch: boolean // whether prefetch app, default is false | ||
prefetchResolve: (() => void) | null // prefetch callback | ||
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 '' | ||
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 | ||
isPrefetch: boolean // whether prefetch app, default is false | ||
container: HTMLElement | ShadowRoot | null // container maybe null, micro-app, shadowRoot, div(keep-alive) | ||
keepRouteState: boolean // keep route state when unmount, default is false | ||
hiddenRouter: boolean // hide router info of child from browser url | ||
source: sourceType // sources of css, js, html | ||
sandBox: SandBoxInterface | null // sandbox | ||
umdMode: boolean // is umd mode | ||
defaultPage: string // default page when mount | ||
fiber: boolean // fiber mode | ||
useMemoryRouter: boolean // use virtual router | ||
// defaultPage: string // default page when mount | ||
// baseroute: string // route prefix, default is '' | ||
// hiddenRouter: boolean // hide router info of child from browser url | ||
@@ -104,11 +137,3 @@ // Load resources | ||
// mount app | ||
mount ( | ||
container?: HTMLElement | ShadowRoot, | ||
inline?: boolean, | ||
baseroute?: string, | ||
keepRouteState?: boolean, | ||
defaultPage?: string, | ||
hiddenRouter?: boolean, | ||
disablePatchRequest?: boolean, | ||
): void | ||
mount (mountParams: MountParam): void | ||
@@ -159,3 +184,4 @@ // unmount app | ||
'disable-sandbox'?: boolean | ||
'disable-memory-router'?: boolean | ||
inline?: boolean | ||
esmodule?: boolean | ||
} | ||
@@ -173,2 +199,5 @@ | ||
error?(e?: CustomEvent): void | ||
beforeshow?(e?: CustomEvent): void | ||
aftershow?(e?: CustomEvent): void | ||
afterhidden?(e?: CustomEvent): void | ||
} | ||
@@ -190,7 +219,7 @@ | ||
// 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, options: unknown) => string | ||
processHtml?: (code: string, url: string) => string | ||
}> | ||
@@ -210,7 +239,7 @@ | ||
// 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, options: unknown) => string | ||
processHtml?: (code: string, url: string) => string | ||
}> | ||
@@ -229,5 +258,6 @@ } | ||
tagName?: string | ||
'shadowDOM'?: boolean | ||
'destroy'?: boolean | ||
'inline'?: boolean | ||
shadowDOM?: boolean | ||
destroy?: boolean | ||
destory?: boolean | ||
inline?: boolean | ||
// old config 👇 | ||
@@ -243,4 +273,6 @@ disableScopecss?: boolean | ||
'hidden-router'?: boolean | ||
'esmodule'?: boolean | ||
'ssr'?: boolean | ||
'keep-alive'?: boolean | ||
esmodule?: boolean | ||
ssr?: boolean | ||
fiber?: boolean | ||
lifeCycles?: lifeCyclesType | ||
@@ -251,2 +283,3 @@ preFetchApps?: prefetchParamList | ||
globalAssets?: globalAssetsType, | ||
excludeAssetFilter?: (assetUrl: string) => boolean | ||
} | ||
@@ -257,12 +290,3 @@ | ||
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 | ||
@@ -333,3 +357,3 @@ router: Router // eslint-disable-line | ||
type GlobalNormalGuard = ((appName: string, to: GuardLocation, from: GuardLocation) => void) | ||
type GlobalNormalGuard = ((to: GuardLocation, from: GuardLocation, appName: string) => void) | ||
@@ -407,3 +431,3 @@ type RouterGuard = AccurateGuard | GlobalNormalGuard | ||
*/ | ||
getDefaultPage(key: PropertyKey): string | undefined | ||
getDefaultPage(key: PropertyKey): string | void | ||
/** | ||
@@ -410,0 +434,0 @@ * Attach specified active app router info to browser url |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1481989
7083
157