From 3116431125227936ff14df9960b6ddf6b13453ef Mon Sep 17 00:00:00 2001 From: danpeen Date: Wed, 11 Oct 2023 18:25:47 +0800 Subject: [PATCH 1/5] fix(doc): fix some doc mistakes (#644) * fix(loader): fix the requestConfig type definition in beforeLoad * fix: fix some doc mistakes --- website/docs/api/loadApp.md | 98 +++++++++++++++++---------- website/docs/guide/concept/sandbox.md | 2 +- website/docs/issues/childApp.md | 78 ++++++++++++--------- 3 files changed, 110 insertions(+), 68 deletions(-) diff --git a/website/docs/api/loadApp.md b/website/docs/api/loadApp.md index c2e9b33b5..7838be70c 100644 --- a/website/docs/api/loadApp.md +++ b/website/docs/api/loadApp.md @@ -3,26 +3,32 @@ title: Garfish.loadApp slug: /api/loadApp order: 4 --- -import Highlight from '@site/src/components/Highlight'; +import Highlight from '@site/src/components/Highlight'; 用于手动挂载子应用，可动态控制子应用的渲染和销毁。 -> 通过 `Garfish.run()` API 注册的子应用会自动根据路由进行应激活子应用的匹配逻辑，属于路由驱动式的应用挂载和销毁模式。如果你的场景下希望手动控制应用的加载和销毁，你可以使用 `Garfish.loadApp()` 的方式加载应用，它是一种更加灵活的微前端应用加载模式。 + +> Garfish 支持路由驱动式的应用挂载和销毁模式， +> 如果你的应用配置了 `activeWhen`, Garfish 则将自动监听路由变化并在路由命中时加载对应的子应用。这种模式属于路由驱动式的应用加载模式。如果你希望手动控制应用的加载和销毁，我们提供了 `Garfish.loadApp()` API 以供用户手动加载和销毁应用，这是一种更加灵活的子应用加载模式。 :::info + 1. 基于路由匹配的应用加载模式会通过子应用的 `activeWhen` 参数在在路由变化后自动判断当前应加载的子应用； 2. 在手动加载模式下（Garfish.loadApp），Garfish 不会根据路径匹配而是完全由开发者控制应用加载和销毁，此时应用加载不会受到 `activeWhen` 参数的影响； -::: + ::: ## 类型 + ```ts loadApp(appName: string, options?: Omit): Promise; ``` ## 默认值 + - 无 ## 示例 + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -106,25 +112,29 @@ export default App = () => { --> - ## 参数 + ### name - - Type: string - - 要加载的子应用名称，必选。 - - 各子应用的名称应保持唯一，这是子应用的唯一标识； + +- Type: string +- 要加载的子应用名称，必选。 +- 各子应用的名称应保持唯一，这是子应用的唯一标识； :::tip + 1. 请确保当前要加载的子应用信息已注册。Garfish 会从已注册的 app 信息中查找同名 app，若应用信息未注册将导致应用加载失败。 2. 应用信息注册可通过 `Garfish.run()`、`Garfish.registerApp()`、`Garfish.setOptions()` 三种方式注册； -::: + ::: ### options? + - Type: Omit - `options` 参数含义本质上与 [registerApp](/api/registerApp#参数) 中同名参数保持一致，可选。 - 可移步 [registerApp](/api/registerApp#参数) 查看具体参数说明；这里仅针对注意事项进行说明。 :::info + > `options` 的作用？ 这里提供 `options` 是允许用户在手动加载 App 时自定义当前应用的信息参数，若之前已注册过子应用，则会将已配置信息和这里的 `options` 参数进行 deepMerge，提供用户运行时更新 App 应用信息参数的能力； @@ -141,62 +151,68 @@ export default App = () => { ## 返回值 ```ts -import Garfish from "garfish"; -import type { interfaces } from "garfish"; +import Garfish from 'garfish'; +import type { interfaces } from 'garfish'; let app: interfaces.App; app = await Garfish.loadApp('vue-app', { - cache: true, - basename, - domGetter: '#container', - entry: 'http://localhost:8092', + cache: true, + basename, + domGetter: '#container', + entry: 'http://localhost:8092', }); ``` + > loadApp 的返回值为子应用的 App 实例对象，实例对象上存在一些方法和属性，提供给开发者用于手动进行 App 的挂载、销毁及判断 App 当前应用状态等信息； ### 实例属性 - - name: string - 应用名称，string。 +- name: string + +应用名称，string。 - - mounted: boolean +- mounted: boolean - 应用是否已挂载，boolean。 `true` 表示已挂载，`false` 表示未挂载。 +应用是否已挂载，boolean。 `true` 表示已挂载，`false` 表示未挂载。 - - display: boolean +- display: boolean - 应用是否被隐藏，boolean。 `true` 表示显示状态，未隐藏，`false` 表示隐藏态。 +应用是否被隐藏，boolean。 `true` 表示显示状态，未隐藏，`false` 表示隐藏态。 - - strictIsolation: boolean +- strictIsolation: boolean - 是否开启严格隔离。`true` 表示已开启，`false` 表示未开启。 +是否开启严格隔离。`true` 表示已开启，`false` 表示未开启。 - - isHtmlMode: boolean +- isHtmlMode: boolean - 是否是 `html` 入口模式。 +是否是 `html` 入口模式。 - - appContainer: HTMLElement +- appContainer: HTMLElement - 应用容器 +应用容器 - - appInfo: AppInfo +- appInfo: AppInfo - 应用配置信息 +应用配置信息 - - hooks: interfaces.AppHooks +- hooks: interfaces.AppHooks 应用生命周期钩子函数 ### 实例方法 - app.mount() + - Type + ```ts mount(): Promise ``` + - 示例 + ```ts - import Garfish from "garfish"; - import type { interfaces } from "garfish"; + import Garfish from 'garfish'; + import type { interfaces } from 'garfish'; const app = await Garfish.loadApp('vue-app', { cache: true, @@ -206,6 +222,7 @@ app = await Garfish.loadApp('vue-app', { }); await app.mount(); ``` + - 触发子应用的 渲染 流程。若应用 已挂载 、或 正在挂载中 、或 正在卸载中 将不会触发渲染流程； - 在子应用渲染前将会触发 `beforeMount` 钩子函数，渲染完成将触发 `afterMount` 钩子函数并将当前挂载的应用 push 进 `Garfish.activeApps`。若渲染过程中出现异常将触发 `errorMountApp`钩子函数； - 在此过程中将执行 `provider` 提供的子应用 `render` 函数，若 `provider` 函数未找到将会抛出错误。[尝试解决](/issues/#provider-is-null) @@ -216,25 +233,31 @@ app = await Garfish.loadApp('vue-app', { ::: - app.unmount() + ```ts unmount(): boolean; ``` + - 触发子应用的 销毁 流程。若应用 正在卸载中 ，将不会重复卸载； - 在子应用渲染前将会触发 `beforeUnmount` 钩子函数，渲染完成将触发 `afterUnmount` ，若销毁过程中出现异常将触发 `errorUnmountApp` 钩子函数； - 应用卸载过程中会执行 `provider` 内部提供的 `destroy` 函数。卸载完成后，子应用的渲染容器将被移除、子应用的执行上下文也将被销毁，渲染过程中产生的副作用也都将会被清除，同时将子应用从 -`Garfish.activeApps` 里移除，`mounted` 和 `display` 状态置为 false； + `Garfish.activeApps` 里移除，`mounted` 和 `display` 状态置为 false； - [unmount 过程中都做了哪些事情](/guide/lifecycle#unmount) - app.show() + - Type + ```ts show(): Promise ``` + - 触发子应用的 显示 流程； - 示例 + ```ts - import Garfish from "garfish"; - import type { interfaces } from "garfish"; + import Garfish from 'garfish'; + import type { interfaces } from 'garfish'; const app = await Garfish.loadApp('vue-app', { cache: true, @@ -245,6 +268,7 @@ app = await Garfish.loadApp('vue-app', { // 若已经渲染触发 show，只有首次渲染触发 mount，后面渲染都可以触发 show 提供性能 app.mounted ? app.show() : await app.mount(); ``` + - 触发子应用的 显示 流程。若应用 已显示 、或 未挂载 将不会触发应用渲染流程； - 在子应用显示前将会触发 `beforeMount` 钩子函数，显示完成将触发 `afterMount` 钩子函数并将当前挂载的应用 push 进 `Garfish.activeApps`； @@ -252,16 +276,20 @@ app = await Garfish.loadApp('vue-app', { - [show 过程中都做了哪些事情](/guide/lifecycle#show) :::info 请注意： + 1. `app.show()` 用于触发子应用的显示流程，此过程并不是 css 中样式的显示或隐藏，show() 方法会触发子应用的 `render` 函数，若 `render` 函数中存在副作用也会再次执行； 2. `app.show()` 在应用渲染的过程中将会执行 `provider` 中提供的 `render` 函数，但与 `app.mount()` 不同的是，`app.show()` 不会创建新的执行上下文； 3. 在基于路由驱动子应用加载模式下，若已启用缓存(`cache: true`)，则会默认使用 show() 触发子应用的渲染。若未开启缓存模式，则会使用 `app.mount()` 渲染子应用。非路由驱动模式下，由开发者控制子应用的渲染和销毁； -::: + ::: - app.hide() + - Type + ```ts hide(): boolean; ``` + - 触发子应用的 隐藏 流程。若应用 未显示 、或 未挂载 将不会触发应用隐藏流程； - 在子应用隐藏前将会触发 `beforeUnmount` 钩子函数，隐藏完成将触发 `afterUnmount` 钩子函数并将当前隐藏的应用从 `Garfish.activeApps` 中移除； diff --git a/website/docs/guide/concept/sandbox.md b/website/docs/guide/concept/sandbox.md index 98273acdb..d19d20061 100644 --- a/website/docs/guide/concept/sandbox.md +++ b/website/docs/guide/concept/sandbox.md @@ -335,7 +335,7 @@ if ($CONFIG.a) { 最初的版本我们通过重写 HTMLElement.prototype.appendChild，把 append 到 body 的样式放到子应用渲染的根节点里。由于劫持的是原型，这个方案无法支持多实例，如果有多个子应用同时运行，没办法区分是由哪个子应用添加的。 2. 劫持实例的 appendChild - 所以我们想到的是去劫持所有的 dom 节点，通过重写获取 dom 节点的方法，如 `document.querySelector`、`ocument.getElementByID`, 把返回的 `dom` 节点通过 `proxy` 进行包装，这样就能劫持 dom 实例的 appendChild，就可以区分是来自于哪个子应用。但是这个方案经过实践，出现的两个比较棘手的问题： + 所以我们想到的是去劫持所有的 dom 节点，通过重写获取 dom 节点的方法，如 `document.querySelector`、`document.getElementByID`, 把返回的 `dom` 节点通过 `proxy` 进行包装，这样就能劫持 dom 实例的 appendChild，就可以区分是来自于哪个子应用。但是这个方案经过实践，出现的两个比较棘手的问题： - 封装后的 dom 节点在传参的时候会报错，如 diff --git a/website/docs/issues/childApp.md b/website/docs/issues/childApp.md index 03b5ec49a..acdd69d3f 100644 --- a/website/docs/issues/childApp.md +++ b/website/docs/issues/childApp.md @@ -4,7 +4,7 @@ slug: /issues order: 1 --- -import WebpackConfig from '@site/src/components/config/_webpackConfig.mdx'; +import WebpackConfig from '@site/src/components/config/\_webpackConfig.mdx'; ## "provider" is "null". @@ -79,20 +79,22 @@ Garfish.run({ ## HTML entry 和 JS entry 差异 -* HTML entry - * 指的是子应用配置的资源地址是 HTML 的地址 - * 指定子应用的 entry 地址为 HTML 地址，支持像 iframe 一样的能力，将对应的子应用渲染至当前应用中 - * HTML entry 模式的作用设计的初衷，解决子应用：**独立开发**、**独立测试** 的能力 +- HTML entry -* JS entry - * 指的是子应用配置的资源地址就是一个 JS 地址 + - 指的是子应用配置的资源地址是 HTML 的地址 + - 指定子应用的 entry 地址为 HTML 地址，支持像 iframe 一样的能力，将对应的子应用渲染至当前应用中 + - HTML entry 模式的作用设计的初衷，解决子应用：**独立开发**、**独立测试** 的能力 -* 二者在使用层面上的差异 - * 在作为 `html entry` 时，子应用的挂载点需要基于传入的 `dom` 节点进行选中挂载点 - * 因为在 `html entry` 时，其实类似于 `iframe` 的模式，子应用在独立运行时的所有 `dom` 结构都会被挂到主应用的文档流上（整个文档流会挂载在当前 html 上） - * 所以子应用在渲染时需要根据子应用的 `dom` 结构去找他的挂载点。 +- JS entry -- HTML entry 正确渲染销毁写法 + - 指的是子应用配置的资源地址就是一个 JS 地址 + +- 二者在使用层面上的差异 + - 在作为 `html entry` 时，子应用的挂载点需要基于传入的 `dom` 节点进行选中挂载点 + - 因为在 `html entry` 时，其实类似于 `iframe` 的模式，子应用在独立运行时的所有 `dom` 结构都会被挂到主应用的文档流上（整个文档流会挂载在当前 html 上） + - 所以子应用在渲染时需要根据子应用的 `dom` 结构去找他的挂载点。 + +* HTML entry 正确渲染销毁写法 ```js {6} export const provider = () => { @@ -103,22 +105,23 @@ export const provider = () => { dom.querySelector('#root'), // 基于 dom 去选中文档流中的 #root，就和在独立运行时使用 document.querySelector('#root') 一样 ); }, - destroy({ dom }) { // 此外，destroy 应该正确的执行 + destroy({ dom }) { + // 此外，destroy 应该正确的执行 const root = dom && dom.querySelector('#root'); if (root) { ReactDOM.unmountComponentAtNode(root); } }, - } -} + }; +}; ``` - JS entry 正确渲染销毁写法 ```js -export const provider = ({ dom , basename}) => ({ - render(){ - ReactDOM.render(, dom); // 作为 js entry 时，没有自己的文档流，只有提供的渲染节点 +export const provider = ({ dom, basename }) => ({ + render() { + ReactDOM.render(, dom); // 作为 js entry 时，没有自己的文档流，只有提供的渲染节点 }, destroy({ dom }) { @@ -126,6 +129,7 @@ export const provider = ({ dom , basename}) => ({ }, }); ``` + ## garfish 支持多实例吗 支持。 @@ -133,18 +137,19 @@ export const provider = ({ dom , basename}) => ({ 目前 garfish 支持多实例场景，业务使用场景可分为 「非嵌套场景」 和 「嵌套场景」： - 非嵌套场景下 -+ 非嵌套场景下，子应用请勿在安装引入 Garfish 包，并导入使用。 -+ 子应用如果想要在微前端场景下使用 Garfish 包的相关能力，可判断在微前端环境内时，通过 `window.Garfish` 使用相关接口。 + +* 非嵌套场景下，子应用请勿在安装引入 Garfish 包，并导入使用。 +* 子应用如果想要在微前端场景下使用 Garfish 包的相关能力，可判断在微前端环境内时，通过 `window.Garfish` 使用相关接口。 ```js if (window.__GARFISH__) { - window.Garfish.xx + window.Garfish.xx; } ``` - 嵌套场景 -+ Garfish 目前内部的设计都支持嵌套场景，如果业务对这一块有诉求可以使用，协助我们一起推进在嵌套场景下的能力。 +* Garfish 目前内部的设计都支持嵌套场景，如果业务对这一块有诉求可以使用，协助我们一起推进在嵌套场景下的能力。 ## 子应用销毁后重定向逻辑影响其他子应用 @@ -294,7 +299,9 @@ export default () => ( ); ``` + ## 子应用热更新问题 + garfish 子应用热更新问题请参考 [博客](/blog/hmr) ## 如何独立运行子应用 @@ -312,25 +319,29 @@ if (!window.__GARFISH__) { ReactDOM.render(, document.querySelector('#root')); } ``` + ## 已有 `SPA` 应用如何改造为 garfish 子应用 + ### 场景描述 -+ 很多需要改造成微前端的 `SPA` 应用，都是已经存在的旧应用。 -+ 可能需要逐步拆解应用内的部分路由，变为子应用。 -+ 主应用现有路由如何与微前端路由驱动共存，是迁移过程中常遇到的。 + +- 很多需要改造成微前端的 `SPA` 应用，都是已经存在的旧应用。 +- 可能需要逐步拆解应用内的部分路由，变为子应用。 +- 主应用现有路由如何与微前端路由驱动共存，是迁移过程中常遇到的。 ### 如何逐步改造（以 `react` 为例） + 1. 增加 `id` 为 `micro-app` 的挂载点，预留给子应用挂载，`Router` 部分的内容为主应用其他路由。 2. 主应用增加匹配到子应用路由前缀时，`Router` 内容为空。 3. 配置子应用列表时以 `Router` 内容为空时的前缀作为子应用激活条件前缀。 - 主应用的根组件： + ```jsx - - + +
- +
@@ -338,6 +349,7 @@ if (!window.__GARFISH__) { ``` routes： + ```js export default [ { @@ -358,6 +370,7 @@ export default [ ``` 主入口处： + ```js Garfish.run({ domGetter: '#micro-app', @@ -367,6 +380,7 @@ Garfish.run({ ], }); ``` + ## 子应用动态插入到 body 上的节点逃逸？ - 首先 garfish 会对每一个子应用创建一个 app container 用于包裹子应用，会创建 `__garfishmockhtml__`、 `__garfishmockbody__` 等 mock 节点。 @@ -382,7 +396,7 @@ Garfish.run({ ## garfish 缓存模式 -- garfish 目前默认启用了缓存模式，在缓存模式下 garfish 会保留应用的上下文，且不会重新执行所有代码，只会执行 render 的 destory 函数，因此应用的性能将得到很大的提升。 +- garfish 目前默认启用了缓存模式，在缓存模式下 garfish 会保留应用的上下文，且不会重新执行所有代码，只会执行 render 和 destory 函数，因此应用的性能将得到很大的提升。 - 在缓存模式下 garfish 只会隔离环境变量和样式，子应用卸载时会保留应用的上下文，不会默认清除子应用的副作用。若业务存在需要销毁的副作用，一般来说建议用户在组件的销毁函数里面手动释放组件的副作用，如果有些逻辑确实需要清除，并且需要保证应用可用性可以把 cache 设置成 false。 @@ -416,11 +430,11 @@ garfish 子应用热更新问题请参考 [博客](/blog/hmr) > 问题概述 -这个问题其实和上面那个cdn的问题，原因是一样的，由于garfish会注入一个exports变量，而子应用某个脚本（比如vite自己的热更引入的`react-refresh-runtime.development.js`）的代码也写了类似`const exports = {}`的代码，导致出现重复声明而报错。 +这个问题其实和上面那个 cdn 的问题，原因是一样的，由于 garfish 会注入一个 exports 变量，而子应用某个脚本（比如 vite 自己的热更引入的`react-refresh-runtime.development.js`）的代码也写了类似`const exports = {}`的代码，导致出现重复声明而报错。 > 解决方案 -解决办法还是和上面加`no-entry`一样，不会注入commonjs相关的环境变量，但是，考虑到某些脚本可能是构建工具默认注入的，无法修改script标签，所以可以在html入口处加入以下配置代码来达到同样的效果（以vite的`react-refresh`为例）： +解决办法还是和上面加`no-entry`一样，不会注入 commonjs 相关的环境变量，但是，考虑到某些脚本可能是构建工具默认注入的，无法修改 script 标签，所以可以在 html 入口处加入以下配置代码来达到同样的效果（以 vite 的`react-refresh`为例）： ```html From be012359589dbbd63e2f0f7460507bfea0284df6 Mon Sep 17 00:00:00 2001 From: Zhou xiao Date: Thu, 19 Oct 2023 11:02:22 +0800 Subject: [PATCH 2/5] chore: fix: Avoid elements created through the createElementNS api from escaping the sandbox (#645) Co-authored-by: zhouxiao.shaw --- packages/browser-vm/src/dynamicNode/index.ts | 3 +- packages/browser-vm/src/pluginify.ts | 4 +- .../src/proxyInterceptor/document.ts | 6 + packages/browser-vm/src/types.ts | 1 + packages/core/src/config.ts | 1 + packages/core/src/interface.ts | 1 + pnpm-lock.yaml | 232 +++++++++--------- website/src/components/config/_sandbox.mdx | 2 + 8 files changed, 132 insertions(+), 118 deletions(-) diff --git a/packages/browser-vm/src/dynamicNode/index.ts b/packages/browser-vm/src/dynamicNode/index.ts index 8569635ee..a72aa6f78 100644 --- a/packages/browser-vm/src/dynamicNode/index.ts +++ b/packages/browser-vm/src/dynamicNode/index.ts @@ -114,7 +114,8 @@ export function makeElInjector(sandboxConfig: SandboxOptions) { if (typeof window.Element === 'function') { // iframe can read html container this can't point to proxyDocument has Illegal invocation error - if (sandboxConfig.fixBaseUrl) safeWrapper(() => handleOwnerDocument()); + if (sandboxConfig.fixBaseUrl || sandboxConfig.fixOwnerDocument) + safeWrapper(() => handleOwnerDocument()); const rewrite = ( methods: Array, builder: typeof injector | typeof injectorRemoveChild, diff --git a/packages/browser-vm/src/pluginify.ts b/packages/browser-vm/src/pluginify.ts index 49e3e438f..578f3c003 100644 --- a/packages/browser-vm/src/pluginify.ts +++ b/packages/browser-vm/src/pluginify.ts @@ -130,11 +130,13 @@ function createOptions(Garfish: interfaces.Garfish) { fixStaticResourceBaseUrl: Boolean( appInfo.sandbox?.fixStaticResourceBaseUrl, ), + fixOwnerDocument: Boolean(appInfo.sandbox?.fixOwnerDocument), disableWith: Boolean(appInfo.sandbox?.disableWith), disableElementtiming: Boolean(appInfo.sandbox?.disableElementtiming), strictIsolation: Boolean(appInfo.sandbox?.strictIsolation), // 缓存模式，不收集副作用 - disableCollect: appInfo.cache === undefined ? true : Boolean(appInfo.cache), + disableCollect: + appInfo.cache === undefined ? true : Boolean(appInfo.cache), el: () => appInstance.htmlNode, styleScopeId: () => appInstance.appContainer.id, protectVariable: () => appInfo.protectVariable || [], diff --git a/packages/browser-vm/src/proxyInterceptor/document.ts b/packages/browser-vm/src/proxyInterceptor/document.ts index 550b9af83..7ae014a78 100644 --- a/packages/browser-vm/src/proxyInterceptor/document.ts +++ b/packages/browser-vm/src/proxyInterceptor/document.ts @@ -65,6 +65,12 @@ export function createGetter(sandbox: Sandbox) { const el = value.call(document, tagName, options); return setSandboxRef(el); }; + } + if (p === 'createElementNS') { + return function (...args) { + const el = value.call(document, ...args); + return setSandboxRef(el); + }; } else if (p === 'createTextNode') { return function (data) { const el = value.call(document, data); diff --git a/packages/browser-vm/src/types.ts b/packages/browser-vm/src/types.ts index fbbb528a1..c185db4c7 100644 --- a/packages/browser-vm/src/types.ts +++ b/packages/browser-vm/src/types.ts @@ -22,6 +22,7 @@ export interface SandboxOptions { namespace: string; baseUrl?: string; fixBaseUrl?: boolean; + fixOwnerDocument?: boolean; fixStaticResourceBaseUrl?: boolean; disableWith?: boolean; strictIsolation?: boolean; diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts index 90f45398c..231f95315 100644 --- a/packages/core/src/config.ts +++ b/packages/core/src/config.ts @@ -114,6 +114,7 @@ export const createDefaultOptions = () => { disableWith: false, strictIsolation: false, disableElementtiming: false, + fixOwnerDocument: false, }, // global hooks beforeLoad: () => {}, diff --git a/packages/core/src/interface.ts b/packages/core/src/interface.ts index b53aa251c..0a493e5d1 100644 --- a/packages/core/src/interface.ts +++ b/packages/core/src/interface.ts @@ -81,6 +81,7 @@ export namespace interfaces { disableWith?: boolean; strictIsolation?: boolean; disableElementtiming?: boolean; + fixOwnerDocument?: boolean; } export interface Config { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7195e80ac..b29d55cf0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -153,7 +153,7 @@ importers: '@types/jasmine': 3.10.6 '@types/jasminewd2': 2.0.10 '@types/node': 12.20.55 - codelyzer: 6.0.2_tslint@6.1.3 + codelyzer: 6.0.2_fguifr4nhga2d4u46kxhe5txsi html-webpack-plugin: 5.5.0_webpack@5.74.0 jasmine-core: 3.6.0 jasmine-spec-reporter: 5.0.2 @@ -537,10 +537,10 @@ importers: garfish: link:../../packages/garfish mobx-vue: 2.2.0_vue@2.6.13 vue: 2.6.13 - vue-router: 3.5.4 + vue-router: 3.5.4_vue@2.6.13 vuex: 3.6.2_vue@2.6.13 devDependencies: - '@vue/cli-plugin-babel': 4.5.0_6y6nlhbz6vocxqxxh4gircq5qu + '@vue/cli-plugin-babel': 4.5.0_jzirqkl3cocjauksqbewkiku6a '@vue/cli-plugin-eslint': 4.5.0_6kom7lkru2mmpsgmmgrqr4tw2i '@vue/cli-service': 4.5.0_nixqlmt6zp7dzdzrxupl7pgsaa babel-eslint: 10.1.0_eslint@6.8.0 @@ -582,10 +582,10 @@ importers: garfish: link:../../packages/garfish mobx-vue: 2.2.0_vue@2.6.13 vue: 2.6.13 - vue-router: 3.5.4 + vue-router: 3.5.4_vue@2.6.13 vuex: 3.6.2_vue@2.6.13 devDependencies: - '@vue/cli-plugin-babel': 4.5.19_i3xytcjajo3ybwwzaynirpoxde + '@vue/cli-plugin-babel': 4.5.19_hqz6i7bmlzupdvrxqdtclu4shm '@vue/cli-plugin-eslint': 4.5.19_fepo2kslcuyry2fkxxpiwlhxb4 '@vue/cli-service': 4.5.19_nixqlmt6zp7dzdzrxupl7pgsaa babel-eslint: 10.1.0_eslint@6.8.0 @@ -625,7 +625,7 @@ importers: vue-router: 4.0.12_vue@3.2.31 vuex: 3.6.2_vue@3.2.31 devDependencies: - '@vue/cli-plugin-babel': 4.5.15_yhv5fqzhxgiw6gyui5xgu6y5ea + '@vue/cli-plugin-babel': 4.5.15_yecqdxnkw2wdliv6nfjhbfqysq '@vue/cli-plugin-eslint': 4.5.15_cwpzzkkjbctqoajr4lbsdvzfee '@vue/cli-service': 4.5.15_ee7biujstwg456ue5i7k23lvau '@vue/compiler-sfc': 3.2.31 @@ -1278,15 +1278,6 @@ packages: engines: {node: ^12.20.0 || ^14.15.0 || >=16.10.0} dependencies: tslib: 2.3.1 - dev: true - - /@angular/compiler/9.0.0_tslib@1.14.1: - resolution: {integrity: sha512-ctjwuntPfZZT2mNj2NDIVu51t9cvbhl/16epc5xEwyzyDt76pX9UgwvY+MbXrf/C/FWwdtmNtfP698BKI+9leQ==} - peerDependencies: - tslib: ^1.10.0 - dependencies: - tslib: 1.14.1 - dev: true /@angular/core/13.2.4_rxjs@6.6.7+zone.js@0.10.3: resolution: {integrity: sha512-cCgf8Crx86hvZQX8lc7Yy5fedRI4trAXYsysrJ7ISRohfFk31Z/W5BEpKO8CkX51Ja5IfJPyoI2DVVTvrwzsEQ==} @@ -1298,19 +1289,6 @@ packages: rxjs: 6.6.7 tslib: 2.3.1 zone.js: 0.10.3 - dev: false - - /@angular/core/9.0.0_5vxzpnwefl6dwkmk3nf2qix3m4: - resolution: {integrity: sha512-6Pxgsrf0qF9iFFqmIcWmjJGkkCaCm6V5QNnxMy2KloO3SDq6QuMVRbN9RtC8Urmo25LP+eZ6ZgYqFYpdD8Hd9w==} - peerDependencies: - rxjs: ^6.5.3 - tslib: ^1.10.0 - zone.js: ~0.10.2 - dependencies: - rxjs: 6.6.7 - tslib: 1.14.1 - zone.js: 0.10.3 - dev: true /@angular/forms/13.2.4_pdupkt2lpvhltxexto2shiqqnq: resolution: {integrity: sha512-XdWJZy4zfJ4ZGEhKZBceHAAozBQZPp1BRl7m2j09EV2I6l/nLdrYhgKGd4UBUtJWyXElPEuEgLiKKdmlPKF5eQ==} @@ -3674,6 +3652,13 @@ packages: dependencies: regenerator-runtime: 0.13.9 + /@babel/runtime/7.23.2: + resolution: {integrity: sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==} + engines: {node: '>=6.9.0'} + dependencies: + regenerator-runtime: 0.14.0 + dev: false + /@babel/template/7.16.7: resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==} engines: {node: '>=6.9.0'} @@ -3795,7 +3780,6 @@ packages: /@discoveryjs/json-ext/0.5.7: resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==} engines: {node: '>=10.0.0'} - dev: true /@docsearch/css/3.2.0: resolution: {integrity: sha512-jnNrO2JVYYhj2pP2FomlHIy6220n6mrLn2t9v2/qc+rM7M/fbIcKMgk9ky4RN+L/maUEmteckzg6/PIYoAAXJg==} @@ -4030,7 +4014,7 @@ packages: '@babel/preset-env': 7.18.10_@babel+core@7.18.10 '@babel/preset-react': 7.18.6_@babel+core@7.18.10 '@babel/preset-typescript': 7.18.6_@babel+core@7.18.10 - '@babel/runtime': 7.18.9 + '@babel/runtime': 7.23.2 '@babel/runtime-corejs3': 7.18.9 '@babel/traverse': 7.18.11 '@docusaurus/cssnano-preset': 2.0.1 @@ -4087,7 +4071,7 @@ packages: serve-handler: 6.1.3 shelljs: 0.8.5 terser-webpack-plugin: 5.3.3_webpack@5.74.0 - tslib: 2.4.0 + tslib: 2.6.2 update-notifier: 5.1.0 url-loader: 4.1.1_u4acmn7fe6yqgbrqzialkgh5lu wait-on: 6.0.1_debug@4.3.4 @@ -4130,7 +4114,7 @@ packages: cssnano-preset-advanced: 5.3.8_postcss@8.4.16 postcss: 8.4.16 postcss-sort-media-queries: 4.2.1_postcss@8.4.16 - tslib: 2.4.0 + tslib: 2.6.2 dev: false /@docusaurus/logger/2.0.0-rc.1: @@ -4146,7 +4130,7 @@ packages: engines: {node: '>=16.14'} dependencies: chalk: 4.1.2 - tslib: 2.4.0 + tslib: 2.6.2 dev: false /@docusaurus/lqip-loader/2.0.0-rc.1_webpack@5.74.0: @@ -4157,7 +4141,7 @@ packages: file-loader: 6.2.0_webpack@5.74.0 lodash: 4.17.21 sharp: 0.30.7 - tslib: 2.4.0 + tslib: 2.6.2 transitivePeerDependencies: - webpack dev: false @@ -4253,7 +4237,7 @@ packages: react-dom: 17.0.2_react@17.0.2 remark-emoji: 2.2.0 stringify-object: 3.3.0 - tslib: 2.4.0 + tslib: 2.6.2 unified: 9.2.2 unist-util-visit: 2.0.3 url-loader: 4.1.1_u4acmn7fe6yqgbrqzialkgh5lu @@ -4288,7 +4272,7 @@ packages: react-dom: 17.0.2_react@17.0.2 remark-emoji: 2.2.0 stringify-object: 3.3.0 - tslib: 2.4.0 + tslib: 2.6.2 unified: 9.2.2 unist-util-visit: 2.0.3 url-loader: 4.1.1_u4acmn7fe6yqgbrqzialkgh5lu @@ -4410,7 +4394,7 @@ packages: react: 17.0.2 react-dom: 17.0.2_react@17.0.2 reading-time: 1.5.0 - tslib: 2.4.0 + tslib: 2.6.2 unist-util-visit: 2.0.3 utility-types: 3.10.0 webpack: 5.74.0 @@ -4560,7 +4544,7 @@ packages: fs-extra: 10.1.0 react: 17.0.2 react-dom: 17.0.2_react@17.0.2 - tslib: 2.4.0 + tslib: 2.6.2 webpack: 5.74.0 transitivePeerDependencies: - '@parcel/css' @@ -4998,7 +4982,7 @@ packages: engines: {node: '>=16.14'} dependencies: fs-extra: 10.1.0 - tslib: 2.4.0 + tslib: 2.6.2 dev: false /@docusaurus/theme-translations/2.0.1: @@ -5908,6 +5892,7 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [glibc] requiresBuild: true dev: false optional: true @@ -5917,6 +5902,7 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [musl] requiresBuild: true dev: false optional: true @@ -5926,6 +5912,7 @@ packages: engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [glibc] requiresBuild: true dev: false optional: true @@ -5935,6 +5922,7 @@ packages: engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [musl] requiresBuild: true dev: false optional: true @@ -6298,7 +6286,7 @@ packages: engines: {node: '>=10'} dependencies: '@babel/types': 7.18.10 - entities: 4.3.1 + entities: 4.5.0 dev: false /@svgr/plugin-jsx/6.3.1_@svgr+core@6.3.1: @@ -6411,6 +6399,7 @@ packages: engines: {node: '>=10'} cpu: [arm64] os: [linux] + libc: [glibc] requiresBuild: true dev: true optional: true @@ -6420,6 +6409,7 @@ packages: engines: {node: '>=10'} cpu: [arm64] os: [linux] + libc: [musl] requiresBuild: true dev: true optional: true @@ -6429,6 +6419,7 @@ packages: engines: {node: '>=10'} cpu: [x64] os: [linux] + libc: [glibc] requiresBuild: true dev: true optional: true @@ -6438,6 +6429,7 @@ packages: engines: {node: '>=10'} cpu: [x64] os: [linux] + libc: [musl] requiresBuild: true dev: true optional: true @@ -7321,9 +7313,10 @@ packages: svg-tags: 1.0.0 dev: true - /@vue/babel-preset-app/4.5.19_vue@2.6.13: + /@vue/babel-preset-app/4.5.19_core-js@3.21.1+vue@3.2.31: resolution: {integrity: sha512-VCNRiAt2P/bLo09rYt3DLe6xXUMlhJwrvU18Ddd/lYJgC7s8+wvhgYs+MTx4OiAXdu58drGwSBO9SPx7C6J82Q==} peerDependencies: + core-js: ^3 vue: ^2 || ^3.0.0-0 peerDependenciesMeta: core-js: @@ -7342,19 +7335,20 @@ packages: '@babel/preset-env': 7.18.10_@babel+core@7.18.10 '@babel/runtime': 7.18.9 '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.18.10 - '@vue/babel-preset-jsx': 1.3.1_euwiqxoptllsj4yx5flofkjzdu + '@vue/babel-preset-jsx': 1.3.1_jx7ro3eb2oqiucatczdcgovxtq babel-plugin-dynamic-import-node: 2.3.3 core-js: 3.21.1 core-js-compat: 3.24.1 semver: 6.3.0 - vue: 2.6.13 + vue: 3.2.31 transitivePeerDependencies: - supports-color dev: true - /@vue/babel-preset-app/4.5.19_vue@3.2.31: + /@vue/babel-preset-app/4.5.19_core-js@3.24.1+vue@2.6.13: resolution: {integrity: sha512-VCNRiAt2P/bLo09rYt3DLe6xXUMlhJwrvU18Ddd/lYJgC7s8+wvhgYs+MTx4OiAXdu58drGwSBO9SPx7C6J82Q==} peerDependencies: + core-js: ^3 vue: ^2 || ^3.0.0-0 peerDependenciesMeta: core-js: @@ -7373,12 +7367,12 @@ packages: '@babel/preset-env': 7.18.10_@babel+core@7.18.10 '@babel/runtime': 7.18.9 '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.18.10 - '@vue/babel-preset-jsx': 1.3.1_jx7ro3eb2oqiucatczdcgovxtq + '@vue/babel-preset-jsx': 1.3.1_euwiqxoptllsj4yx5flofkjzdu babel-plugin-dynamic-import-node: 2.3.3 - core-js: 3.21.1 + core-js: 3.24.1 core-js-compat: 3.24.1 semver: 6.3.0 - vue: 3.2.31 + vue: 2.6.13 transitivePeerDependencies: - supports-color dev: true @@ -7490,13 +7484,13 @@ packages: resolution: {integrity: sha512-GdxvNSmOw7NHIazCO8gTK+xZbaOmScTtxj6eHVeMbYpDYVPJ+th3VMLWNpw/b6uOjwzzcyKlA5dRQ1DAb+gF/g==} dev: true - /@vue/cli-plugin-babel/4.5.0_6y6nlhbz6vocxqxxh4gircq5qu: + /@vue/cli-plugin-babel/4.5.0_jzirqkl3cocjauksqbewkiku6a: resolution: {integrity: sha512-o2FmvSPyeZ1hP7tnwP3qCoWyNzSd3Mi99yu7Ml/DNaJiz86eF6cL8GcTEgnYvtaq+jiMaCl+Ut69WXLoP5Qd6w==} peerDependencies: '@vue/cli-service': ^3.0.0 || ^4.0.0-0 dependencies: '@babel/core': 7.18.10 - '@vue/babel-preset-app': 4.5.19_vue@2.6.13 + '@vue/babel-preset-app': 4.5.19_core-js@3.24.1+vue@2.6.13 '@vue/cli-service': 4.5.0_nixqlmt6zp7dzdzrxupl7pgsaa '@vue/cli-shared-utils': 4.5.19 babel-loader: 8.2.5_5ouqwanl7jnotevpn4w6qovjqm @@ -7504,19 +7498,20 @@ packages: thread-loader: 2.1.3_webpack@4.46.0 webpack: 4.46.0 transitivePeerDependencies: + - core-js - supports-color - vue - webpack-cli - webpack-command dev: true - /@vue/cli-plugin-babel/4.5.15_yhv5fqzhxgiw6gyui5xgu6y5ea: + /@vue/cli-plugin-babel/4.5.15_yecqdxnkw2wdliv6nfjhbfqysq: resolution: {integrity: sha512-hBLrwYfFkHldEe34op/YNgPhpOWI5n5DB2Qt9I/1Epeif4M4iFaayrgjvOR9AVM6WbD3Yx7WCFszYpWrQZpBzQ==} peerDependencies: '@vue/cli-service': ^3.0.0 || ^4.0.0-0 dependencies: '@babel/core': 7.18.10 - '@vue/babel-preset-app': 4.5.19_vue@3.2.31 + '@vue/babel-preset-app': 4.5.19_core-js@3.21.1+vue@3.2.31 '@vue/cli-service': 4.5.15_ee7biujstwg456ue5i7k23lvau '@vue/cli-shared-utils': 4.5.19 babel-loader: 8.2.5_5ouqwanl7jnotevpn4w6qovjqm @@ -7524,19 +7519,20 @@ packages: thread-loader: 2.1.3_webpack@4.46.0 webpack: 4.46.0 transitivePeerDependencies: + - core-js - supports-color - vue - webpack-cli - webpack-command dev: true - /@vue/cli-plugin-babel/4.5.19_i3xytcjajo3ybwwzaynirpoxde: + /@vue/cli-plugin-babel/4.5.19_hqz6i7bmlzupdvrxqdtclu4shm: resolution: {integrity: sha512-8ebXzaMW9KNTMAN6+DzkhFsjty1ieqT7hIW5Lbk4v30Qhfjkms7lBWyXPGkoq+wAikXFa1Gnam2xmWOBqDDvWg==} peerDependencies: '@vue/cli-service': ^3.0.0 || ^4.0.0-0 dependencies: '@babel/core': 7.18.10 - '@vue/babel-preset-app': 4.5.19_vue@2.6.13 + '@vue/babel-preset-app': 4.5.19_core-js@3.24.1+vue@2.6.13 '@vue/cli-service': 4.5.19_nixqlmt6zp7dzdzrxupl7pgsaa '@vue/cli-shared-utils': 4.5.19 babel-loader: 8.2.5_5ouqwanl7jnotevpn4w6qovjqm @@ -7544,6 +7540,7 @@ packages: thread-loader: 2.1.3_webpack@4.46.0 webpack: 4.46.0 transitivePeerDependencies: + - core-js - supports-color - vue - webpack-cli @@ -8174,7 +8171,7 @@ packages: source-map: 0.6.1 vue-template-es2015-compiler: 1.9.1 optionalDependencies: - prettier: 2.7.1 + prettier: 2.4.1 transitivePeerDependencies: - arc-templates - atpl @@ -8515,7 +8512,6 @@ packages: dependencies: webpack: 5.74.0_webpack-cli@4.10.0 webpack-cli: 4.10.0_foudhxygz4mdqapuaanowzkgwm - dev: true /@webpack-cli/info/1.5.0_webpack-cli@4.10.0: resolution: {integrity: sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==} @@ -8524,7 +8520,6 @@ packages: dependencies: envinfo: 7.8.1 webpack-cli: 4.10.0_foudhxygz4mdqapuaanowzkgwm - dev: true /@webpack-cli/serve/1.7.0_jrmoy2z4ppm6sherzyq2k2csya: resolution: {integrity: sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==} @@ -8537,7 +8532,6 @@ packages: dependencies: webpack-cli: 4.10.0_foudhxygz4mdqapuaanowzkgwm webpack-dev-server: 4.9.3_5v66e2inugklgvlh4huuavolfq - dev: true /@xtuc/ieee754/1.2.0: resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} @@ -8644,7 +8638,6 @@ packages: resolution: {integrity: sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==} engines: {node: '>=0.4.0'} hasBin: true - dev: false /acorn/8.8.0: resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==} @@ -8691,7 +8684,7 @@ packages: resolution: {integrity: sha512-Zn4cw2NEqd+9fiSVWMscnjyQ1a8Yfoc5oBajLeo5w+YBHgDUcEBY2hS4YpTz6iN5f/2zQiktcuM6tS8x1p9dpA==} engines: {node: '>= 8.0.0'} dependencies: - debug: 4.3.3 + debug: 4.3.4 depd: 1.1.2 humanize-ms: 1.2.1 transitivePeerDependencies: @@ -10716,13 +10709,15 @@ packages: - supports-color dev: true - /codelyzer/6.0.2_tslint@6.1.3: + /codelyzer/6.0.2_fguifr4nhga2d4u46kxhe5txsi: resolution: {integrity: sha512-v3+E0Ucu2xWJMOJ2fA/q9pDT/hlxHftHGPUay1/1cTgyPV5JTHFdO9hqo837Sx2s9vKBMTt5gO+lhF95PO6J+g==} peerDependencies: + '@angular/compiler': '>=2.3.1 <13.0.0 || ^12.0.0-next || ^12.1.0-next || ^12.2.0-next' + '@angular/core': '>=2.3.1 <13.0.0 || ^12.0.0-next || ^12.1.0-next || ^12.2.0-next' tslint: ^5.0.0 || ^6.0.0 dependencies: - '@angular/compiler': 9.0.0_tslib@1.14.1 - '@angular/core': 9.0.0_5vxzpnwefl6dwkmk3nf2qix3m4 + '@angular/compiler': 13.3.11 + '@angular/core': 13.2.4_rxjs@6.6.7+zone.js@0.10.3 app-root-path: 3.0.0 aria-query: 3.0.0 axobject-query: 2.0.2 @@ -12524,7 +12519,7 @@ packages: dependencies: domelementtype: 2.3.0 domhandler: 5.0.3 - entities: 4.3.1 + entities: 4.5.0 dev: false /dom7/4.0.4: @@ -12821,8 +12816,8 @@ packages: /entities/2.2.0: resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==} - /entities/4.3.1: - resolution: {integrity: sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==} + /entities/4.5.0: + resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} engines: {node: '>=0.12'} dev: false @@ -12835,7 +12830,6 @@ packages: resolution: {integrity: sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==} engines: {node: '>=4'} hasBin: true - dev: true /err-code/2.0.3: resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==} @@ -13905,7 +13899,6 @@ packages: /fastest-levenshtein/1.0.16: resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==} engines: {node: '>= 4.9.1'} - dev: true /fastparse/1.1.2: resolution: {integrity: sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==} @@ -14218,7 +14211,7 @@ packages: resolution: {integrity: sha512-pZ2bO++NWLHhiKkgP1bEXHhR1/OjVcSvlCJ98aNJDFeb7H5OOQaO+SKOZle6041O9rv2tmbrO4JzClAvDUHf0g==} engines: {node: '>=10'} dependencies: - tslib: 2.4.0 + tslib: 2.3.1 dev: false /follow-redirects/1.15.1: @@ -14420,7 +14413,7 @@ packages: resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==} engines: {node: '>= 4.0'} os: [darwin] - deprecated: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. + deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2 requiresBuild: true dependencies: bindings: 1.5.0 @@ -15438,7 +15431,7 @@ packages: domelementtype: 2.3.0 domhandler: 5.0.3 domutils: 3.0.1 - entities: 4.3.1 + entities: 4.5.0 dev: false /http-cache-semantics/4.1.0: @@ -15486,7 +15479,7 @@ packages: dependencies: '@tootallnate/once': 2.0.0 agent-base: 6.0.2 - debug: 4.3.3 + debug: 4.3.4 transitivePeerDependencies: - supports-color dev: true @@ -15860,7 +15853,6 @@ packages: dependencies: pkg-dir: 4.2.0 resolve-cwd: 3.0.0 - dev: true /imurmurhash/0.1.4: resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} @@ -16005,7 +15997,6 @@ packages: /interpret/2.2.0: resolution: {integrity: sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==} engines: {node: '>= 0.10'} - dev: true /invariant/2.2.4: resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} @@ -17211,7 +17202,7 @@ packages: optional: true dependencies: abab: 2.0.6 - acorn: 8.8.0 + acorn: 8.7.0 acorn-globals: 6.0.0 cssom: 0.4.4 cssstyle: 2.3.0 @@ -18038,7 +18029,7 @@ packages: resolution: {integrity: sha512-xTYd4JVHpSCW+aqDof6w/MebaMVNTVYBZhbB/vi513xXdiPT92JMVCo0Jq8W2UZnzYRFeVbQiQ+I25l13JuKvA==} hasBin: true optionalDependencies: - minimist: 1.2.6 + minimist: 1.2.5 dev: true /makeerror/1.0.12: @@ -18671,7 +18662,7 @@ packages: prop-types: ^15.0.0 react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 dependencies: - '@babel/runtime': 7.18.9 + '@babel/runtime': 7.19.0 prop-types: 15.8.1 react: 17.0.2 tiny-warning: 1.0.3 @@ -18745,6 +18736,7 @@ packages: /minimist/1.2.6: resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==} + dev: true /minipass-collect/1.0.2: resolution: {integrity: sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==} @@ -18943,7 +18935,7 @@ packages: kleur: 3.0.3 listify: 1.0.3 lodash: 4.17.21 - minimist: 1.2.6 + minimist: 1.2.5 prop-ini: 0.0.2 rc: 1.2.8 readme-badger: 0.3.0 @@ -18971,7 +18963,7 @@ packages: lodash: 4.17.21 longest: 2.0.1 middleearth-names: 1.1.0 - minimist: 1.2.6 + minimist: 1.2.5 mrm-core: 6.1.7 semver-utils: 1.1.4 update-notifier: 4.1.3 @@ -19050,6 +19042,12 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + /nanoid/3.3.6: + resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + dev: true + /nanomatch/1.2.13: resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==} engines: {node: '>=0.10.0'} @@ -19972,7 +19970,7 @@ packages: /parse5/7.0.0: resolution: {integrity: sha512-y/t8IXSPWTuRZqXc0ajH/UwDj4mnqLEbSttNbThcFhGrZuOyoyvNBO85PBp2jQa55wY9d07PBNjsK8ZP3K5U6g==} dependencies: - entities: 4.3.1 + entities: 4.5.0 dev: false /parseqs/0.0.6: @@ -21314,7 +21312,7 @@ packages: resolution: {integrity: sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==} engines: {node: ^10 || ^12 || >=14} dependencies: - nanoid: 3.3.4 + nanoid: 3.3.6 picocolors: 1.0.0 source-map-js: 1.0.2 dev: true @@ -21327,7 +21325,7 @@ packages: detect-libc: 2.0.1 expand-template: 2.0.3 github-from-package: 0.0.0 - minimist: 1.2.6 + minimist: 1.2.5 mkdirp-classic: 0.5.3 napi-build-utils: 1.0.2 node-abi: 3.24.0 @@ -21415,14 +21413,6 @@ packages: hasBin: true dev: true - /prettier/2.7.1: - resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==} - engines: {node: '>=10.13.0'} - hasBin: true - requiresBuild: true - dev: true - optional: true - /pretty-bytes/5.6.0: resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==} engines: {node: '>=6'} @@ -21792,7 +21782,7 @@ packages: dependencies: deep-extend: 0.6.0 ini: 1.3.8 - minimist: 1.2.6 + minimist: 1.2.5 strip-json-comments: 2.0.1 /react-base16-styling/0.6.0: @@ -21809,7 +21799,7 @@ packages: peerDependencies: react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.19.0 + '@babel/runtime': 7.18.9 react: 16.14.0 dev: false @@ -21834,6 +21824,12 @@ packages: /react-dev-utils/12.0.1_webpack@5.74.0: resolution: {integrity: sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==} engines: {node: '>=14'} + peerDependencies: + typescript: '>=2.7' + webpack: '>=4' + peerDependenciesMeta: + typescript: + optional: true dependencies: '@babel/code-frame': 7.18.6 address: 1.2.0 @@ -21859,12 +21855,11 @@ packages: shell-quote: 1.7.3 strip-ansi: 6.0.1 text-table: 0.2.0 + webpack: 5.74.0 transitivePeerDependencies: - eslint - supports-color - - typescript - vue-template-compiler - - webpack dev: false /react-dom/16.14.0_react@16.14.0: @@ -21877,7 +21872,6 @@ packages: prop-types: 15.8.1 react: 16.14.0 scheduler: 0.19.1 - dev: false /react-dom/17.0.2_react@17.0.2: resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==} @@ -22239,7 +22233,7 @@ packages: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.18.9 + '@babel/runtime': 7.23.2 react: 17.0.2 use-composed-ref: 1.3.0_react@17.0.2 use-latest: 1.2.1_skqlhrap4das3cz5b6iqdn2lqi @@ -22294,7 +22288,7 @@ packages: peerDependencies: react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.18.9 + '@babel/runtime': 7.23.2 consolidated-events: 2.0.2 prop-types: 15.8.1 react: 17.0.2 @@ -22308,7 +22302,6 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 prop-types: 15.8.1 - dev: false /react/17.0.2: resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==} @@ -22425,7 +22418,6 @@ packages: engines: {node: '>= 0.10'} dependencies: resolve: 1.22.1 - dev: true /recursive-readdir/2.2.2: resolution: {integrity: sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==} @@ -22488,6 +22480,10 @@ packages: /regenerator-runtime/0.13.9: resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==} + /regenerator-runtime/0.14.0: + resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==} + dev: false + /regenerator-transform/0.15.0: resolution: {integrity: sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==} dependencies: @@ -22942,7 +22938,6 @@ packages: engines: {node: '>=8'} dependencies: resolve-from: 5.0.0 - dev: true /resolve-from/3.0.0: resolution: {integrity: sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==} @@ -22956,7 +22951,6 @@ packages: /resolve-from/5.0.0: resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==} engines: {node: '>=8'} - dev: true /resolve-pathname/3.0.0: resolution: {integrity: sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==} @@ -23169,7 +23163,6 @@ packages: neo-async: 2.6.2 schema-utils: 3.1.1 semver: 7.3.7 - dev: false /sass-loader/12.4.0_sass@1.49.9+webpack@5.70.0: resolution: {integrity: sha512-7xN+8khDIzym1oL9XyS6zP6Ges+Bo2B2xbPrjdMHEYyV3AQYhd/wXeru++3ODHF0zMjYmVadblSKrPrjEkL8mg==} @@ -23226,7 +23219,6 @@ packages: dependencies: loose-envify: 1.4.0 object-assign: 4.1.1 - dev: false /scheduler/0.20.2: resolution: {integrity: sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==} @@ -23838,7 +23830,7 @@ packages: engines: {node: '>= 10'} dependencies: agent-base: 6.0.2 - debug: 4.3.3 + debug: 4.3.4 socks: 2.7.0 transitivePeerDependencies: - supports-color @@ -23849,7 +23841,7 @@ packages: engines: {node: '>= 10'} dependencies: agent-base: 6.0.2 - debug: 4.3.3 + debug: 4.3.4 socks: 2.7.0 transitivePeerDependencies: - supports-color @@ -25108,6 +25100,10 @@ packages: /tslib/2.4.0: resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==} + /tslib/2.6.2: + resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} + dev: false + /tslint/6.1.3_typescript@4.4.3: resolution: {integrity: sha512-IbR4nkT96EQOvKE2PW/djGz8iGNeJ4rF2mBfiYaR/nvUWYKJhLwimoJKgjIFEIDibBtOevj7BqCRL4oHeWWUCg==} engines: {node: '>=4.8.0'} @@ -25366,6 +25362,7 @@ packages: /unified/9.2.0: resolution: {integrity: sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==} dependencies: + '@types/unist': 2.0.6 bail: 1.0.5 extend: 3.0.2 is-buffer: 2.0.5 @@ -25377,6 +25374,7 @@ packages: /unified/9.2.2: resolution: {integrity: sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==} dependencies: + '@types/unist': 2.0.6 bail: 1.0.5 extend: 3.0.2 is-buffer: 2.0.5 @@ -25754,7 +25752,7 @@ packages: optional: true dependencies: react: 16.14.0 - tslib: 2.4.0 + tslib: 2.3.1 dev: false /use-callback-ref/1.3.0_react@17.0.2: @@ -25768,7 +25766,7 @@ packages: optional: true dependencies: react: 17.0.2 - tslib: 2.4.0 + tslib: 2.3.1 dev: false /use-callback-ref/1.3.0_react@18.1.0: @@ -25782,7 +25780,7 @@ packages: optional: true dependencies: react: 18.1.0 - tslib: 2.4.0 + tslib: 2.3.1 dev: false /use-composed-ref/1.3.0_react@17.0.2: @@ -25832,7 +25830,7 @@ packages: dependencies: detect-node-es: 1.1.0 react: 16.14.0 - tslib: 2.4.0 + tslib: 2.3.1 dev: false /use-sidecar/1.1.2_react@17.0.2: @@ -25847,7 +25845,7 @@ packages: dependencies: detect-node-es: 1.1.0 react: 17.0.2 - tslib: 2.4.0 + tslib: 2.3.1 dev: false /use-sidecar/1.1.2_react@18.1.0: @@ -25862,7 +25860,7 @@ packages: dependencies: detect-node-es: 1.1.0 react: 18.1.0 - tslib: 2.4.0 + tslib: 2.3.1 dev: false /use/3.1.1: @@ -26410,8 +26408,12 @@ packages: webpack: 4.46.0 dev: true - /vue-router/3.5.4: + /vue-router/3.5.4_vue@2.6.13: resolution: {integrity: sha512-x+/DLAJZv2mcQ7glH2oV9ze8uPwcI+H+GgTgTmb5I55bCgY3+vXWIsqbYUzbBSZnwFHEJku4eoaH/x98veyymQ==} + peerDependencies: + vue: ^2 + dependencies: + vue: 2.6.13 dev: false /vue-router/4.0.12_vue@3.2.31: @@ -26474,6 +26476,7 @@ packages: /w3c-hr-time/1.0.2: resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==} + deprecated: Use your platform's native performance.now() and performance.timeOrigin. dependencies: browser-process-hrtime: 1.0.0 dev: true @@ -26693,7 +26696,6 @@ packages: webpack: 5.74.0_webpack-cli@4.10.0 webpack-dev-server: 4.9.3_5v66e2inugklgvlh4huuavolfq webpack-merge: 5.8.0 - dev: true /webpack-dev-middleware/3.7.3_webpack@4.46.0: resolution: {integrity: sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==} @@ -26882,7 +26884,6 @@ packages: - debug - supports-color - utf-8-validate - dev: true /webpack-dev-server/4.9.3_debug@4.3.4+webpack@5.74.0: resolution: {integrity: sha512-3qp/eoboZG5/6QgiZ3llN8TUzkSpYg1Ko9khWX1h40MIEUNS2mDoIa8aXsPfskER+GbTvs/IJZ1QTBBhhuetSw==} @@ -27185,7 +27186,6 @@ packages: - '@swc/core' - esbuild - uglify-js - dev: true /webpackbar/5.0.2_webpack@5.74.0: resolution: {integrity: sha512-BmFJo7veBDgQzfWXl/wwYXr/VFus0614qZ8i9znqcl9fnEdiVkdbi0TedLQ6xAK92HZHDJ0QmyQ0fmuZPAgCYQ==} @@ -27698,7 +27698,7 @@ packages: resolution: {directory: packages/bridge-react, type: directory} id: file:packages/bridge-react name: '@garfish/bridge-react' - version: 1.11.1 + version: 1.17.1 peerDependencies: react: '>=16' react-dom: '>=16' @@ -27712,7 +27712,7 @@ packages: resolution: {directory: packages/bridge-react, type: directory} id: file:packages/bridge-react name: '@garfish/bridge-react' - version: 1.11.1 + version: 1.17.1 peerDependencies: react: '>=16' react-dom: '>=16' diff --git a/website/src/components/config/_sandbox.mdx b/website/src/components/config/_sandbox.mdx index 226167cdc..0055fabd7 100644 --- a/website/src/components/config/_sandbox.mdx +++ b/website/src/components/config/_sandbox.mdx @@ -18,6 +18,8 @@ interface SandboxConfig { modules?: Array | Record; // disableElementtiming 1.14.4 版本提供，默认值为 false，将会给子应用元素注入 elementtiming 属性，可以通过此属性获取子应用元素的加载时间 disableElementtiming?: boolean; + // fixOwnerDocument 1.17.2 版本提供 ，默认值 false，目前可能会存在 ownerDocument 逃逸的情况，设置为 true 之后将会避免 ownerDocument 逃逸 + fixOwnerDocument?: boolean; } type Module = (sandbox: Sandbox) => OverridesData | void; From 8cf428f93dfac68397ecb240139dbbb324106630 Mon Sep 17 00:00:00 2001 From: Cee Date: Wed, 8 Nov 2023 16:41:46 +0800 Subject: [PATCH 3/5] fix: fix some typo in blog (#648) Co-authored-by: zhou.cee --- website/docs/blog/architecture.md | 21 +++++---------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/website/docs/blog/architecture.md b/website/docs/blog/architecture.md index cfa42c0f4..91bc03444 100644 --- a/website/docs/blog/architecture.md +++ b/website/docs/blog/architecture.md @@ -3,7 +3,6 @@ title: 微前端架构设计 slug: /blog order: 1 --- - 微前端是什么：微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。 微前端诞生在两个大的背景下，在提倡拥抱变化的前端社区可以看到新的框架、技术、概念层出不穷，并且随着 Web 标准的演进，前端应用已经具备更好的性能、更快的开发效率。但随着而来的是应用的复杂程度更高、涉及的团队规模更广、更高的性能要求，应用复杂度已经成为阻塞业务发展的重要瓶颈。 @@ -12,7 +11,6 @@ order: 1 ![image](https://user-images.githubusercontent.com/27547179/165336394-c724ee52-01a6-4667-9765-2b6c95c07ca6.png) - ## 大规模 Web 应用的困局 尽管 Web 应用的复杂度和参与人数以爆炸式的增长速度，但却没有一种新的架构模式来解决现有的困境，并同时兼顾 `DX`（developer experience）和 `UX`（user experience）。 @@ -101,7 +99,6 @@ order: 1 ![image](https://user-images.githubusercontent.com/27547179/165336487-d02e8b09-239b-4108-8351-de33d8f3bb1c.png) ![image](https://user-images.githubusercontent.com/27547179/165336535-8939d56e-0244-41d5-9d1c-b103d8743cc4.png) - ### 微前端部署平台 部署平台作为微前端研发流程中重要的一环，主要提供了：微前端的服务发现、服务注册、子应用版本控制、多个子应用间同灰度、增量升级子应用、下发子应用信息列表，分析子应用依赖信息提取公共基础库降低不同应用的依赖重复加载。 @@ -109,7 +106,6 @@ order: 1 ![image](https://user-images.githubusercontent.com/27547179/165336565-b18887cf-8069-4bd1-b12a-3e80bc4277ca.png) - ### 微前端运行时 > Why not iframe @@ -157,7 +153,6 @@ order: 1 ![image](https://user-images.githubusercontent.com/27547179/165336609-b903adc8-7978-4776-a966-104a251e0555.png) - ### 应用生命周期 整个微前端子应用的生命周期基本可以总结为： @@ -178,7 +173,6 @@ order: 1 ![image](https://user-images.githubusercontent.com/27547179/165336638-d344a74b-ec15-43c1-958e-5dcec9e045fc.png) - ### 加载器的设计 加载器的整体设计理念其实与 `React-loadable` 非常类似，具备以下能力： @@ -200,7 +194,6 @@ order: 1 ![image](https://user-images.githubusercontent.com/27547179/165336727-3489f2e6-20a9-4722-89f8-a3291fab8569.png) - ### 沙箱的设计 其实在过去的 Web 应用中是很少提及到沙箱这一概念的，因为组件的开发一般都会由研发通过研发规范来尽可能的去避免组件对当前应用环境造成副作用，诸如：组件渲染后添加了定时器、全局变量、滚动事件、全局样式并且在组件销毁后会及时的清除子应用对当前环境产生的副作用。 @@ -209,7 +202,7 @@ order: 1 以 Webpack4 JsonpFunction 为例 在 Webpack5 中提供了一个重要的功能就是 Module Federation，随着 Webpack 5 推出 Module Federation ，与 Webpack 4 发生变化的一个重要配置就是 JsonpFunction 属性变为了 chunkLoadingGlobal，并且由原来的默认值 webpackJsonp 变成了默认使用 output.library 名称或者上下文中的 package.json 的 包名称(package name)作为唯一值（webpack.js.org/issues/3940）。 -为什么会发生这个转变呢，如果了解过 Webpack 构建产物的一定会知道 Webpack 通过全局变量存储了分 chunk 后的产物，用于解决分包 chunk 的加载问题。由于 Webpack 5 引入 Module Federation 页面中可能会同时存在两个以上的 Webpack 构建产物，如果还是通过是通过同一个变量存储要加载的 chunk ，必然会造成产物之间的互相影响。 +为什么会发生这个转变呢，如果了解过 Webpack 构建产物的一定会知道 Webpack 通过全局变量存储了分 chunk 后的产物，用于解决分包 chunk 的加载问题。由于 Webpack 5 引入 Module Federation 页面中可能会同时存在两个以上的 Webpack 构建产物，如果还是通过同一个变量存储要加载的 chunk ，必然会造成产物之间的互相影响。 通过 Webpack 4 到 Webpack 5 支持 Module Federation 之后可以发现，在一个基础库尚未考虑默认兼容多实例的场景下，贸然将其作为多实例使用很可能会造成应用无法按照预期运行，更为严重的是你以为其正常运行了其实应用已经发生了严重的内存泄漏或不可预知的情况，倘若将 Webpack 构建产物的应用多次动态的在页面中运行，将会发现已经造成严重的内存泄漏，因为 Webpack 会增量的向全局存储 chunk 的变量上挂载模块以及依赖信息，简单来说就是每次执行 Webpack 构建的子应用代码都会向 webpackJsonp 数组 push 大量的数据，最终造成内存泄漏，直至页面崩溃。 @@ -241,7 +234,7 @@ order: 1 ###### VM 沙箱 -通过快照沙箱的最简化的核心实现后可以发现，它的设计理念依赖于整个代码的执行属于线性的过程，即：存储执行环境=>执行具备副作用的代码=>恢复执行环境，但在实际的场景中对于应用的划分并以页面为维度划分，同一个页面可能存在多个应用，所以它的执行顺序并非线性，可能同时存在多个快照沙箱的实例环境，也就是快照沙箱多实例，以下面代码举例： +通过快照沙箱的最简化的核心实现后可以发现，它的设计理念依赖于整个代码的执行属于线性的过程，即：存储执行环境=>执行具备副作用的代码=>恢复执行环境，但在实际的场景中对于应用的划分并非以页面为维度划分，同一个页面可能存在多个应用，所以它的执行顺序并非线性，可能同时存在多个快照沙箱的实例环境，也就是快照沙箱多实例，以下面代码举例： ![image](https://user-images.githubusercontent.com/27547179/165336842-861d7e28-8c61-476d-9eb0-cfee04415e09.png) @@ -249,7 +242,7 @@ order: 1 维基百科关于 VM 的解释：在计算机科学中的体系结构里，是指一种特殊的软件，可以在计算机平台和终端用户之间创建一种环境，而终端用户则是基于虚拟机这个软件所创建的环境来操作其它软件。虚拟机（VM）是计算机系统的仿真器，通过软件模拟具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统，能提供物理计算机的功能。 -在 Node 中也提供了 VM 模块，不过不过不同于传统的 VM，它并不具备虚拟机那么强的隔离性，并没有从模拟完整的硬件系统，仅仅将指定代码放置了特定的上下文中编译并执行代码，所以它无法用于不可信来源的代码。 +在 Node 中也提供了 VM 模块，不过不过不同于传统的 VM，它并不具备虚拟机那么强的隔离性，并没有从模拟完整的硬件系统，仅仅将指定代码放置在特定的上下文中编译并执行代码，所以它无法用于不可信来源的代码。 参考 Node 中 VM 模块的设计，以及 JavaScript 词法作用域 的特性，可以设计出 VM 沙箱，不过与传统的 VM 差异也同样存在，它并能执行不可信的代码，因为它的隔离能力仅限于将其运行在一个指定的上下文环境中。 @@ -289,10 +282,9 @@ order: 1 ![image](https://user-images.githubusercontent.com/27547179/165336996-76db3051-3dc2-4cbf-9540-264db8bf9168.png) - #### 路由系统的设计 -在于现代 MVC 的设计思想，前端框架的设计思想也一直在发生变更，现代 Web 前端框架提供的最经典的能力莫过于将 MVC 中的 Constroller 变为了 Router，目前几乎主流的前端框架都支持路由驱动视图，仅提供一个 Router Map 路由表，无需关注控制任何路由状态即可完成跳转后的路由更新。 +在于现代 MVC 的设计思想，前端框架的设计思想也一直在发生变更，现代 Web 前端框架提供的最经典的能力莫过于将 MVC 中的 Controller 变为了 Router，目前几乎主流的前端框架都支持路由驱动视图，仅提供一个 Router Map 路由表，无需关注控制任何路由状态即可完成跳转后的路由更新。 通过微前端出现的背景和意义，可以了解到微前端主要是用于解决：应用增量升级、多技术体系并存、构建大规模企业级 Web 应用而诞生的。那么在基于 SPA 的微前端架构中也可以了解到，目前微前端主要是采用应用分而治之 + 动态加载 + SPA 应用的模式来解决大规模应用带来的一系列问题。在以组件为颗粒度的 SPA 应用中组件内部是不需要关心路由的，但是在微前端中主要通过应用维度来拆分，那么拆分的应用也可能是一个独立的 SPA 应用，那么此时主应用与子应用的关系如何编排呢？ @@ -305,7 +297,6 @@ order: 1 ![image](https://user-images.githubusercontent.com/27547179/165337076-752ff44b-397f-4c02-a755-252e22ae4813.png) - > 不考虑任何路由处理的场景 假设存在一个 Garfish 站点，这个站点它是由主应用+一个子应用构成。由于 Garfish 采用的是 SPA 架构，子应用与主应用所处于同一个执行上下文，子应用的路由原样反应在主应用上。 @@ -324,7 +315,6 @@ order: 1 ![image](https://user-images.githubusercontent.com/27547179/165337244-1649b3a5-0048-4bad-a836-247a95c0ceea.png) - Hash 和 History 路由模式 目前主流的 SPA 前端应用基本上都支持两种路由模式，一种是：hash 模式、另一种则是 History 路由模式，两者的优劣和使用并不在本文的讨论范围之内，这里仅做在微前端这种分离式开发模式下的介绍，在微前端这种分离式 SPA 应用开发的模式下该选择哪种路由模式，以及多 SPA 应用下他们的路由应该如何编排： 正常路由情况 @@ -394,9 +384,8 @@ Hash 和 History 路由模式 ![image](https://user-images.githubusercontent.com/27547179/165337300-a82aa763-4c70-474f-a33a-dabc7843178b.png) ![image](https://user-images.githubusercontent.com/27547179/165337326-29590a81-4531-47a9-abf7-c1c3b647a2b8.png) - > 自动计算出子应用所需的 basename -当应用处于激活状态时，根据应用的激活条件自动计算出应用所需的基础路径，并在渲染时告诉框架，以便于应用间路由不发生冲突。 +> 当应用处于激活状态时，根据应用的激活条件自动计算出应用所需的基础路径，并在渲染时告诉框架，以便于应用间路由不发生冲突。 ![image](https://user-images.githubusercontent.com/27547179/165337379-43506a80-71e9-4219-a14d-0f05dd64cfcb.png) From 6c52699db831ed281314573eda9a6ac7dc332692 Mon Sep 17 00:00:00 2001 From: Zhou xiao Date: Mon, 20 Nov 2023 11:40:25 +0800 Subject: [PATCH 4/5] fix: optimize type prompt (#651) --- packages/bridge-react-v18/package.json | 3 ++- packages/bridge-react/package.json | 3 ++- packages/bridge-vue-v2/package.json | 3 ++- packages/bridge-vue-v3/package.json | 3 ++- packages/browser-snapshot/package.json | 3 ++- packages/browser-vm/package.json | 3 ++- packages/core/package.json | 3 ++- packages/css-scope/package.json | 3 ++- packages/es-module/package.json | 3 ++- packages/garfish/package.json | 3 ++- packages/hooks/package.json | 3 ++- packages/loader/package.json | 3 ++- packages/remote-module/package.json | 3 ++- packages/router/package.json | 3 ++- packages/test-suite/package.json | 3 ++- packages/utils/package.json | 3 ++- 16 files changed, 32 insertions(+), 16 deletions(-) diff --git a/packages/bridge-react-v18/package.json b/packages/bridge-react-v18/package.json index 42be14853..da50984ee 100644 --- a/packages/bridge-react-v18/package.json +++ b/packages/bridge-react-v18/package.json @@ -22,7 +22,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/bridge-react/package.json b/packages/bridge-react/package.json index 32d38137f..081c7dd57 100644 --- a/packages/bridge-react/package.json +++ b/packages/bridge-react/package.json @@ -22,7 +22,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/bridge-vue-v2/package.json b/packages/bridge-vue-v2/package.json index 12288f970..5602d620e 100644 --- a/packages/bridge-vue-v2/package.json +++ b/packages/bridge-vue-v2/package.json @@ -23,7 +23,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/bridge-vue-v3/package.json b/packages/bridge-vue-v3/package.json index 928ade010..c67775cae 100644 --- a/packages/bridge-vue-v3/package.json +++ b/packages/bridge-vue-v3/package.json @@ -23,7 +23,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/browser-snapshot/package.json b/packages/browser-snapshot/package.json index 05190a03f..1127fb097 100644 --- a/packages/browser-snapshot/package.json +++ b/packages/browser-snapshot/package.json @@ -19,7 +19,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/browser-vm/package.json b/packages/browser-vm/package.json index eaa290d07..7d51d5fb5 100644 --- a/packages/browser-vm/package.json +++ b/packages/browser-vm/package.json @@ -19,7 +19,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/core/package.json b/packages/core/package.json index fe9d0437f..2bad4719a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -20,7 +20,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/css-scope/package.json b/packages/css-scope/package.json index 980117356..e883e5f73 100644 --- a/packages/css-scope/package.json +++ b/packages/css-scope/package.json @@ -19,7 +19,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/es-module/package.json b/packages/es-module/package.json index 28e154856..05b868221 100644 --- a/packages/es-module/package.json +++ b/packages/es-module/package.json @@ -19,7 +19,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/garfish/package.json b/packages/garfish/package.json index 874449916..7ae608de1 100644 --- a/packages/garfish/package.json +++ b/packages/garfish/package.json @@ -19,7 +19,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./index.d.ts" }, "./*": "./*" }, diff --git a/packages/hooks/package.json b/packages/hooks/package.json index af6d926a5..dc65d055b 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -12,7 +12,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/loader/package.json b/packages/loader/package.json index 68ac19f8e..9fc9fc83b 100644 --- a/packages/loader/package.json +++ b/packages/loader/package.json @@ -19,7 +19,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/remote-module/package.json b/packages/remote-module/package.json index aaf765c41..1ad475be0 100644 --- a/packages/remote-module/package.json +++ b/packages/remote-module/package.json @@ -19,7 +19,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/router/package.json b/packages/router/package.json index 204d48201..3e3bf784e 100644 --- a/packages/router/package.json +++ b/packages/router/package.json @@ -19,7 +19,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/test-suite/package.json b/packages/test-suite/package.json index 6f423ad9f..ecf2a09a2 100644 --- a/packages/test-suite/package.json +++ b/packages/test-suite/package.json @@ -19,7 +19,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, diff --git a/packages/utils/package.json b/packages/utils/package.json index 0c383c6bc..299799424 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -19,7 +19,8 @@ "exports": { ".": { "import": "./dist/esm/index.js", - "require": "./dist/index.js" + "require": "./dist/index.js", + "types": "./dist/index.d.ts" }, "./*": "./*" }, From bd8a4b1410dad5f2dafd6ea2c27082b6356bfeca Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 20 Nov 2023 03:42:32 +0000 Subject: [PATCH 5/5] release: v1.17.2 --- package.json | 2 +- packages/bridge-react-v18/package.json | 2 +- packages/bridge-react/package.json | 2 +- packages/bridge-vue-v2/package.json | 2 +- packages/bridge-vue-v3/package.json | 2 +- packages/browser-snapshot/package.json | 2 +- packages/browser-vm/package.json | 2 +- packages/core/package.json | 2 +- packages/css-scope/package.json | 2 +- packages/es-module/package.json | 2 +- packages/garfish/package.json | 2 +- packages/hooks/package.json | 2 +- packages/loader/package.json | 2 +- packages/remote-module/package.json | 2 +- packages/router/package.json | 2 +- packages/test-suite/package.json | 2 +- packages/utils/package.json | 2 +- 17 files changed, 17 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index ab97be351..b80bd5cdd 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,7 @@ "workspace-tools": "0.16.2", "zx": "4.2.0" }, - "version": "1.17.1", + "version": "1.17.2", "packageManager": "pnpm@7.6.0", "engines": { "node": ">=16.14.0" diff --git a/packages/bridge-react-v18/package.json b/packages/bridge-react-v18/package.json index da50984ee..fa0e58a8f 100644 --- a/packages/bridge-react-v18/package.json +++ b/packages/bridge-react-v18/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/bridge-react-v18", - "version": "1.17.1", + "version": "1.17.2", "description": "garfish module.", "keywords": [ "garfish", diff --git a/packages/bridge-react/package.json b/packages/bridge-react/package.json index 081c7dd57..19f2e5d83 100644 --- a/packages/bridge-react/package.json +++ b/packages/bridge-react/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/bridge-react", - "version": "1.17.1", + "version": "1.17.2", "description": "garfish module.", "keywords": [ "garfish", diff --git a/packages/bridge-vue-v2/package.json b/packages/bridge-vue-v2/package.json index 5602d620e..8b5b4a693 100644 --- a/packages/bridge-vue-v2/package.json +++ b/packages/bridge-vue-v2/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/bridge-vue-v2", - "version": "1.17.1", + "version": "1.17.2", "description": "garfish vue bridge for v2.", "keywords": [ "garfish", diff --git a/packages/bridge-vue-v3/package.json b/packages/bridge-vue-v3/package.json index c67775cae..b89ba261b 100644 --- a/packages/bridge-vue-v3/package.json +++ b/packages/bridge-vue-v3/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/bridge-vue-v3", - "version": "1.17.1", + "version": "1.17.2", "description": "garfish vue bridge for v3.", "keywords": [ "garfish", diff --git a/packages/browser-snapshot/package.json b/packages/browser-snapshot/package.json index 1127fb097..ef68dd986 100644 --- a/packages/browser-snapshot/package.json +++ b/packages/browser-snapshot/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/browser-snapshot", - "version": "1.17.1", + "version": "1.17.2", "description": "browser-snapshot module.", "keywords": [ "garfish", diff --git a/packages/browser-vm/package.json b/packages/browser-vm/package.json index 7d51d5fb5..3fad80515 100644 --- a/packages/browser-vm/package.json +++ b/packages/browser-vm/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/browser-vm", - "version": "1.17.1", + "version": "1.17.2", "description": "vm-sandbox module.", "keywords": [ "garfish", diff --git a/packages/core/package.json b/packages/core/package.json index 2bad4719a..9b76ee95f 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/core", - "version": "1.17.1", + "version": "1.17.2", "description": "core module.", "keywords": [ "garfish", diff --git a/packages/css-scope/package.json b/packages/css-scope/package.json index e883e5f73..b31918dfc 100644 --- a/packages/css-scope/package.json +++ b/packages/css-scope/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/css-scope", - "version": "1.17.1", + "version": "1.17.2", "description": "css scope", "keywords": [ "garfish", diff --git a/packages/es-module/package.json b/packages/es-module/package.json index 05b868221..d747a5f2a 100644 --- a/packages/es-module/package.json +++ b/packages/es-module/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/es-module", - "version": "1.17.1", + "version": "1.17.2", "description": "es module polyfill", "keywords": [ "garfish", diff --git a/packages/garfish/package.json b/packages/garfish/package.json index 7ae608de1..d4dcc9a44 100644 --- a/packages/garfish/package.json +++ b/packages/garfish/package.json @@ -1,6 +1,6 @@ { "name": "garfish", - "version": "1.17.1", + "version": "1.17.2", "description": "garfish module.", "keywords": [ "garfish", diff --git a/packages/hooks/package.json b/packages/hooks/package.json index dc65d055b..a2ca9222f 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/hooks", - "version": "1.17.1", + "version": "1.17.2", "description": "hooks module.", "keywords": [ "garfish", diff --git a/packages/loader/package.json b/packages/loader/package.json index 9fc9fc83b..ad07ee60b 100644 --- a/packages/loader/package.json +++ b/packages/loader/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/loader", - "version": "1.17.1", + "version": "1.17.2", "description": "loader module.", "keywords": [ "garfish", diff --git a/packages/remote-module/package.json b/packages/remote-module/package.json index 1ad475be0..7e621b4c9 100644 --- a/packages/remote-module/package.json +++ b/packages/remote-module/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/remote-module", - "version": "1.17.1", + "version": "1.17.2", "description": "remote-module module.", "keywords": [ "garfish", diff --git a/packages/router/package.json b/packages/router/package.json index 3e3bf784e..f863edd2c 100644 --- a/packages/router/package.json +++ b/packages/router/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/router", - "version": "1.17.1", + "version": "1.17.2", "description": "router module.", "keywords": [ "garfish", diff --git a/packages/test-suite/package.json b/packages/test-suite/package.json index ecf2a09a2..d0d490126 100644 --- a/packages/test-suite/package.json +++ b/packages/test-suite/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/test-suite", - "version": "1.17.1", + "version": "1.17.2", "description": "garfish test suite.", "keywords": [ "garfish", diff --git a/packages/utils/package.json b/packages/utils/package.json index 299799424..857888fea 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@garfish/utils", - "version": "1.17.1", + "version": "1.17.2", "description": "utils module.", "keywords": [ "garfish",