From 4484bbd8fae2d9364df3dfcb5a2b21d1951b402b Mon Sep 17 00:00:00 2001 From: michaelxxie Date: Fri, 19 Mar 2021 13:29:43 +0800 Subject: [PATCH 01/18] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=BE=AE?= =?UTF-8?q?=E5=89=8D=E7=AB=AFqiankun=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .fatherrc.js | 1 + packages/fes-plugin-layout/src/index.js | 1 + packages/fes-plugin-qiankun/LICENSE | 21 +++ packages/fes-plugin-qiankun/package.json | 39 +++++ packages/fes-plugin-qiankun/src/index.js | 26 ++++ packages/fes-plugin-qiankun/src/main/index.js | 141 ++++++++++++++++++ .../fes-plugin-qiankun/src/main/runtime.js | 85 +++++++++++ .../fes-plugin-qiankun/src/mirco/index.js | 103 +++++++++++++ .../src/mirco/lifecycles.js | 60 ++++++++ .../fes-plugin-qiankun/src/mirco/runtime.js | 12 ++ .../src/plugins/registerMethods.js | 4 +- packages/fes-template/package.json | 1 + yarn.lock | 37 ++++- 13 files changed, 529 insertions(+), 2 deletions(-) create mode 100644 packages/fes-plugin-qiankun/LICENSE create mode 100644 packages/fes-plugin-qiankun/package.json create mode 100644 packages/fes-plugin-qiankun/src/index.js create mode 100644 packages/fes-plugin-qiankun/src/main/index.js create mode 100644 packages/fes-plugin-qiankun/src/main/runtime.js create mode 100644 packages/fes-plugin-qiankun/src/mirco/index.js create mode 100644 packages/fes-plugin-qiankun/src/mirco/lifecycles.js create mode 100644 packages/fes-plugin-qiankun/src/mirco/runtime.js diff --git a/.fatherrc.js b/.fatherrc.js index f0d53670..6ceb55cb 100644 --- a/.fatherrc.js +++ b/.fatherrc.js @@ -19,6 +19,7 @@ const headPkgs = [ "fes-plugin-jest", "fes-plugin-vuex", "create-fes-app", + "fes-plugin-qiankun" ]; const tailPkgs = []; // const otherPkgs = readdirSync(join(__dirname, 'packages')).filter( diff --git a/packages/fes-plugin-layout/src/index.js b/packages/fes-plugin-layout/src/index.js index 99325149..860ac017 100644 --- a/packages/fes-plugin-layout/src/index.js +++ b/packages/fes-plugin-layout/src/index.js @@ -79,6 +79,7 @@ export default (api) => { api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`); // 把BaseLayout插入到路由配置中，作为根路由 + // TODO: fes缺少修改路由API api.modifyRoutes(routes => [ { path: '/', diff --git a/packages/fes-plugin-qiankun/LICENSE b/packages/fes-plugin-qiankun/LICENSE new file mode 100644 index 00000000..0978fbf7 --- /dev/null +++ b/packages/fes-plugin-qiankun/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020-present webank + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/packages/fes-plugin-qiankun/package.json b/packages/fes-plugin-qiankun/package.json new file mode 100644 index 00000000..3b8b27dc --- /dev/null +++ b/packages/fes-plugin-qiankun/package.json @@ -0,0 +1,39 @@ +{ + "name": "@fesjs/plugin-qiankun", + "version": "2.0.0-alpha.0", + "description": "@fesjs/plugin-qiankun", + "main": "lib/index.js", + "files": [ + "lib" + ], + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/WeBankFinTech/fes.js.git", + "directory": "packages/fes-plugin-qiankun" + }, + "keywords": [ + "fes" + ], + "author": "michaelxxie", + "license": "MIT", + "bugs": { + "url": "https://github.com/WeBankFinTech/fes.js/issues" + }, + "homepage": "https://github.com/WeBankFinTech/fes.js#readme", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@umijs/utils": "3.3.3", + "address": "^1.1.2", + "path-to-regexp": "^6.2.0", + "qiankun": "2.3.4" + }, + "peerDependencies": { + "@webank/fes": "^2.0.0-alpha.0", + "vue": "^3.0.5" + } +} diff --git a/packages/fes-plugin-qiankun/src/index.js b/packages/fes-plugin-qiankun/src/index.js new file mode 100644 index 00000000..a7d24c4e --- /dev/null +++ b/packages/fes-plugin-qiankun/src/index.js @@ -0,0 +1,26 @@ +import { join } from 'path'; + +const namespace = 'plugin-qiankun'; + +export default (api) => { + api.describe({ + key: 'qiankun', + config: { + schema(joi) { + return joi.object().keys({ + mirco: joi.object(), + main: joi.object() + }); + } + } + }); + + api.registerPlugins([ + require.resolve('./main'), + require.resolve('./mirco') + ]); + + const absRuntimeFilePath = join(namespace, 'runtime.js'); + + api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`); +}; diff --git a/packages/fes-plugin-qiankun/src/main/index.js b/packages/fes-plugin-qiankun/src/main/index.js new file mode 100644 index 00000000..618a2b6e --- /dev/null +++ b/packages/fes-plugin-qiankun/src/main/index.js @@ -0,0 +1,141 @@ +import { existsSync, readFileSync } from 'fs'; +import { join } from 'path'; +import { + defaultHistoryMode, + defaultMainRootId, + testPathWithPrefix, + toArray +} from '../common'; + +export default function (api, options) { + const { registerRuntimeKeyInIndex = false } = options || {}; + + api.addRuntimePlugin(() => require.resolve('./runtime')); + + if (!registerRuntimeKeyInIndex) { + api.addRuntimePluginKey(() => 'qiankun'); + } + + api.modifyDefaultConfig(config => ({ + ...config, + mountElementId: defaultMainRootId, + disableGlobalVariables: true + })); + + // apps 可能在构建期为空 + const { apps = [] } = options || {}; + if (apps.length) { + // 获取一组路由中以 basePath 为前缀的路由 + const findRouteWithPrefix = (routes, basePath) => { + for (const route of routes) { + if (route.path && testPathWithPrefix(basePath, route.path)) { return route; } + + if (route.routes && route.routes.length) { + return findRouteWithPrefix(route.routes, basePath); + } + } + + return null; + }; + + const modifyAppRoutes = () => { + // TODO: fes缺少修改路由API + api.modifyRoutes((routes) => { + const { + config: { history: mainHistory = defaultHistoryMode } + } = api; + + const newRoutes = routes.map((route) => { + if (route.path === '/' && route.routes && route.routes.length) { + apps.forEach(({ history: slaveHistory = 'history', base }) => { + // 当子应用的 history mode 跟主应用一致时，为避免出现 404 手动为主应用创建一个 path 为 子应用 rule 的空 div 路由组件 + if (slaveHistory === mainHistory) { + const baseConfig = toArray(base); + + baseConfig.forEach((basePath) => { + const routeWithPrefix = findRouteWithPrefix(routes, basePath); + + // 应用没有自己配置过 basePath 相关路由，则自动加入 mock 的路由 + if (!routeWithPrefix) { + route.routes.unshift({ + path: basePath, + exact: false, + component: `() => { + if (process.env.NODE_ENV === 'development') { + console.log('${basePath} 404 mock rendered'); + } + + return React.createElement('div'); + }` + }); + } else { + // 若用户已配置过跟应用 base 重名的路由，则强制将该路由 exact 设置为 false，目的是兼容之前遗留的错误用法的场景 + routeWithPrefix.exact = false; + } + }); + } + }); + } + + return route; + }); + + return newRoutes; + }); + }; + + modifyAppRoutes(); + } + + const rootExportsFile = join(api.paths.absSrcPath, 'rootExports.js'); + + api.addTmpGenerateWatcherPaths(() => rootExportsFile); + + const namespace = 'plugin-qiankun'; + const absCoreFilePath = join(namespace, 'qiankunDefer.js'); + + api.onGenerateFiles(() => { + const { + config: { history = defaultHistoryMode } + } = api; + const rootExports = `window.g_rootExports = ${existsSync(rootExportsFile) ? 'require(\'@/rootExports\')' : '{}'};`.trim(); + + api.writeTmpFile({ + path: `${namespace}/qiankunRootExports.js`, + content: rootExports + }); + + api.writeTmpFile({ + path: `${namespace}/subAppsConfig.json`, + content: JSON.stringify({ + mainHistory: history, + ...options + }) + }); + + api.writeTmpFile({ + path: `${namespace}/qiankunDefer.js`, + content: ` + class Deferred { + constructor() { + this.promise = new Promise(resolve => this.resolve = resolve); + } + } + export const deferred = new Deferred(); + export const qiankunStart = deferred.resolve; + `.trim() + }); + + api.writeTmpFile({ + path: `${namespace}/runtime.js`, + content: readFileSync(join(__dirname, 'runtime.js'), 'utf-8') + }); + }); + + api.addPluginExports(() => [ + { + specifiers: ['qiankunStart'], + source: absCoreFilePath + } + ]); +} diff --git a/packages/fes-plugin-qiankun/src/main/runtime.js b/packages/fes-plugin-qiankun/src/main/runtime.js new file mode 100644 index 00000000..2a8ba764 --- /dev/null +++ b/packages/fes-plugin-qiankun/src/main/runtime.js @@ -0,0 +1,85 @@ +import { deferred } from '@@/plugin-qiankun/qiankunDefer.js'; +import '@@/plugin-qiankun/qiankunRootExports.js'; +import subAppConfig from '@@/plugin-qiankun/subAppsConfig.json'; +import { registerMicroApps, start } from 'qiankun'; +import { createApp, h } from 'vue'; +import { plugin, ApplyPluginsType } from '@@/core/coreExports'; +import { defaultMountContainerId, testPathWithPrefix, toArray } from '../common'; + +async function getMasterRuntime() { + const config = plugin.applyPlugins({ + key: 'qiankun', + type: ApplyPluginsType.modify, + initialValue: {}, + async: true + }); + const { master } = config; + return master || config; +} + +export async function render(oldRender) { + oldRender(); + function isAppActive(location, history, base) { + const baseConfig = toArray(base); + switch (history.type || history) { + case 'hash': + return baseConfig.some(pathPrefix => testPathWithPrefix(`#${pathPrefix}`, location.hash)); + case 'browser': + return baseConfig.some(pathPrefix => testPathWithPrefix(pathPrefix, location.pathname)); + default: + return false; + } + } + const runtimeConfig = await getMasterRuntime(); + const { + apps, jsSandbox = false, prefetch = true, defer = false, lifeCycles, masterHistory, ...otherConfigs + } = { + ...subAppConfig, + ...runtimeConfig + }; + + assert(apps && apps.length, 'sub apps must be config when using fes-plugin-qiankun'); + + registerMicroApps(apps.map(({ + name, entry, base, history = masterHistory, mountElementId = defaultMountContainerId, props + }) => ({ + name, + entry, + activeRule: location => isAppActive(location, history, base), + render: ({ appContent, loading }) => { + if (process.env.NODE_ENV === 'development') { + console.info(`app ${name} loading ${loading}`); + } + if (mountElementId) { + const container = document.getElementById(mountElementId); + if (container) { + const subApp = { + setup() { + + }, + render() { + h('div', { + dangerouslySetInnerHTML: { + __html: appContent + } + }); + } + }; + const app = createApp(); + app.mount(subApp, container); + } + } + }, + props: { + base, + history, + ...props + } + })), lifeCycles); + + if (defer) { + await deferred.promise; + } + + start({ jsSandbox, prefetch, ...otherConfigs }); +} diff --git a/packages/fes-plugin-qiankun/src/mirco/index.js b/packages/fes-plugin-qiankun/src/mirco/index.js new file mode 100644 index 00000000..6c81e1d8 --- /dev/null +++ b/packages/fes-plugin-qiankun/src/mirco/index.js @@ -0,0 +1,103 @@ +import { readFileSync } from 'fs'; +import { join } from 'path'; +import { defaultMircoRootId } from '../common'; + +export default function (api, options) { + const { registerRuntimeKeyInIndex = false } = options || {}; + + api.addRuntimePlugin(() => require.resolve('./runtime')); + + if (!registerRuntimeKeyInIndex) { + api.addRuntimePluginKey(() => 'qiankun'); + } + + const lifecyclePath = require.resolve('./lifecycles'); + const { name: pkgName } = require(join(api.cwd, 'package.json')); + + // TODO: fes缺少修改默认配置API + api.modifyDefaultConfig(memo => (Object.assign(Object.assign({}, memo), { + disableGlobalVariables: true, + base: `/${pkgName}`, + mountElementId: defaultMircoRootId, + // 默认开启 runtimePublicPath，避免出现 dynamic import 场景子应用资源地址出问题 + runtimePublicPath: true + }))); + + if (api.service.userConfig.runtimePublicPath !== false) { + // TODO: fes缺少修改 publicPath API + api.modifyPublicPathStr(() => `window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "${ + // 开发阶段 publicPath 配置无效，默认为 / + process.env.NODE_ENV !== 'development' + ? api.config.publicPath || '/' + : '/'}"`); + } + + api.chainWebpack((config) => { + assert(api.pkg.name, 'You should have name in package.json'); + config.output + .libraryTarget('umd') + .library(`${api.pkg.name}-[name]`); + }); + + // bundle 添加 entry 标记 + // TODO: fes缺少修改HTML API + api.modifyHTML(($) => { + $('script').each((_, el) => { + const scriptEl = $(el); + const umiEntryJs = /\/?umi(\.\w+)?\.js$/g; + const scriptElSrc = scriptEl.attr('src'); + + if (umiEntryJs.test((scriptElSrc) !== null && scriptElSrc !== 0 ? scriptElSrc : '')) { + scriptEl.attr('entry', ''); + } + }); + return $; + }); + + const namespace = 'plugin-qiankun'; + + api.onGenerateFiles(() => { + api.writeTmpFile({ + path: `${namespace}/qiankunContext.js`, + content: ` + import { createApp, h } from 'vue'; + export const Context = createContext(null); + export function useRootExports() { + return useContext(Context); + }; + `.trim() + }); + + api.writeTmpFile({ + path: `${namespace}/runtime.js`, + content: readFileSync(join(__dirname, 'runtime.js'), 'utf-8') + }); + + api.writeTmpFile({ + path: `${namespace}/lifecycles.js`, + content: readFileSync(join(__dirname, 'lifecycles.js'), 'utf-8') + }); + }); + + api.addPluginExports(() => [ + { + specifiers: ['useRootExports'], + source: `${namespace}/qiankunContext.js` + } + ]); + + api.addEntryImports(() => ({ + source: lifecyclePath, + specifier: '{ genMount as qiankun_genMount, genBootstrap as qiankun_genBootstrap, genUnmount as qiankun_genUnmount }' + })); + + api.addEntryCode(() => ` + export const bootstrap = qiankun_genBootstrap(Promise.resolve(), clientRender); + export const mount = qiankun_genMount(); + export const unmount = qiankun_genUnmount('${api.config.mountElementId}'); + + if (!window.__POWERED_BY_QIANKUN__) { + bootstrap().then(mount); + } + `); +} diff --git a/packages/fes-plugin-qiankun/src/mirco/lifecycles.js b/packages/fes-plugin-qiankun/src/mirco/lifecycles.js new file mode 100644 index 00000000..fd160b73 --- /dev/null +++ b/packages/fes-plugin-qiankun/src/mirco/lifecycles.js @@ -0,0 +1,60 @@ +import { plugin, ApplyPluginsType } from '@@/core/coreExports'; + +const defer = {}; +defer.promise = new Promise((resolve) => { + defer.resolve = resolve; +}); + +let render = () => { }; +let hasMountedAtLeastOnce = false; + +export default () => defer.promise; + +function getSlaveRuntime() { + const config = plugin.applyPlugins({ + key: 'qiankun', + type: ApplyPluginsType.modify, + initialValue: {} + }); + const { slave } = config; + return slave || config; +} + +// 子应用生命周期钩子Bootstrap +export function genBootstrap(promise, oldRender) { + return async (...args) => { + const slaveRuntime = getSlaveRuntime(); + if (slaveRuntime.bootstrap) { await slaveRuntime.bootstrap(...args); } + render = () => promise.then(oldRender).catch((e) => { + if (process.env.NODE_ENV === 'development') { + console.error('Render failed', e); + } + }); + }; +} + +// 子应用生命周期钩子Mount +export function genMount() { + return async (...args) => { + defer.resolve(); + const slaveRuntime = getSlaveRuntime(); + if (slaveRuntime.mount) { await slaveRuntime.mount(...args); } + // 第一次 mount 会自动触发 render，非第一次 mount 则需手动触发 + if (hasMountedAtLeastOnce) { + render(); + } + hasMountedAtLeastOnce = true; + }; +} + +// 子应用生命周期钩子Unmount +export function genUnmount(mountElementId, app) { + return async (...args) => { + const container = document.getElementById(mountElementId); + if (container) { + app.unmount(container); + } + const slaveRuntime = getSlaveRuntime(); + if (slaveRuntime.unmount) { await slaveRuntime.unmount(...args); } + }; +} diff --git a/packages/fes-plugin-qiankun/src/mirco/runtime.js b/packages/fes-plugin-qiankun/src/mirco/runtime.js new file mode 100644 index 00000000..96180844 --- /dev/null +++ b/packages/fes-plugin-qiankun/src/mirco/runtime.js @@ -0,0 +1,12 @@ +import { h } from 'vue'; +import qiankunRender from './lifecycles'; + +export function rootContainer(container) { + const value = window.g_rootExports; + const { Context } = require('@@/plugin-qiankun/qiankunContext'); + return h(Context.Provider, { value }, container); +} + +export const render = oldRender => qiankunRender().then(() => { + oldRender(); +}); diff --git a/packages/fes-preset-built-in/src/plugins/registerMethods.js b/packages/fes-preset-built-in/src/plugins/registerMethods.js index 5b5749c5..4748a62e 100644 --- a/packages/fes-preset-built-in/src/plugins/registerMethods.js +++ b/packages/fes-preset-built-in/src/plugins/registerMethods.js @@ -28,7 +28,9 @@ export default function (api) { 'modifyBabelOpts', 'modifyBabelPresetOpts', 'chainWebpack', - 'addTmpGenerateWatcherPaths' + 'addTmpGenerateWatcherPaths', + 'modifyPublicPathStr', + 'modifyHTML', ].forEach((name) => { api.registerMethod({ name }); }); diff --git a/packages/fes-template/package.json b/packages/fes-template/package.json index 25c5325d..09552223 100644 --- a/packages/fes-template/package.json +++ b/packages/fes-template/package.json @@ -55,6 +55,7 @@ "@fesjs/plugin-jest": "^2.0.0-rc.0", "@fesjs/plugin-vuex": "^2.0.0-rc.0", "@fesjs/plugin-request": "^2.0.0-rc.0", + "@fesjs/plugin-qiankun": "^2.0.0-alpha.0", "ant-design-vue": "2.0.0", "vue": "^3.0.5", "vuex": "^4.0.0" diff --git a/yarn.lock b/yarn.lock index b80580c3..c3fa89d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1587,6 +1587,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.7.2": + version "7.13.10" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d" + integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.0.0", "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3", "@babel/template@^7.4.0": version "7.12.13" resolved "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327" @@ -4644,7 +4651,7 @@ acorn@^8.0.4: resolved "https://registry.npmjs.org/acorn/-/acorn-8.0.5.tgz#a3bfb872a74a6a7f661bc81b9849d9cac12601b7" integrity sha512-v+DieK/HJkJOpFBETDJioequtc3PfxsWMaxIdIwujtF7FEV/MAyDQLlm6/zPvr7Mix07mLh6ccVwIsloceodlg== -address@1.1.2: +address@1.1.2, address@^1.1.2: version "1.1.2" resolved "https://registry.npmjs.org/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6" integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA== @@ -9545,6 +9552,13 @@ import-from@^3.0.0: dependencies: resolve-from "^5.0.0" +import-html-entry@^1.9.0: + version "1.11.1" + resolved "https://registry.yarnpkg.com/import-html-entry/-/import-html-entry-1.11.1.tgz#3d8c5977926bdd122ab8e658965c102068b4af8d" + integrity sha512-O7mCUTwKdYU49/LH6nq1adWPnUlZQpKeGWIEcDq07KTcqP/v0jBLEIVc0oE0Mtlw3CEe0eeKGMyhl6LwfXCV7A== + dependencies: + "@babel/runtime" "^7.7.2" + import-lazy@^2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43" @@ -12892,6 +12906,11 @@ path-to-regexp@0.1.7: resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w= +path-to-regexp@^6.2.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.0.tgz#f7b3803336104c346889adece614669230645f38" + integrity sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg== + path-type@^1.0.0: version "1.1.0" resolved "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441" @@ -13706,6 +13725,17 @@ q@^1.1.2, q@^1.5.1: resolved "https://registry.npmjs.org/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= +qiankun@2.3.4: + version "2.3.4" + resolved "https://registry.yarnpkg.com/qiankun/-/qiankun-2.3.4.tgz#a6a6382c1e909a76f9aea1708ff46276432428f2" + integrity sha512-LJ3luGH0eAQ3xd7vH7xUtAS57eGUs4bMiCcFQx1OJ94XJ3VdKIb97jqT5p5ibOj82EPQdLJhVsB5+phm4iEXfw== + dependencies: + "@babel/runtime" "^7.10.5" + import-html-entry "^1.9.0" + lodash "^4.17.11" + single-spa "5.8.1" + tslib "^1.10.0" + qs@6.7.0: version "6.7.0" resolved "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc" @@ -14783,6 +14813,11 @@ simple-swizzle@^0.2.2: dependencies: is-arrayish "^0.3.1" +single-spa@5.8.1: + version "5.8.1" + resolved "https://registry.yarnpkg.com/single-spa/-/single-spa-5.8.1.tgz#86c2575e297e31d8f06945944ec97e31851a59ae" + integrity sha512-RlyLZ1IDIPdzI6mQPzCQnlgTt9jmbAXBZODmifoDut840wksPDSPhcSS8jXMpuUlqOidQiX2YuLVQSR9DEgsXw== + sirv@^1.0.7: version "1.0.11" resolved "https://registry.npmjs.org/sirv/-/sirv-1.0.11.tgz#81c19a29202048507d6ec0d8ba8910fda52eb5a4" From 170877dcb988cdc9db0e76443addfee99ec3c31d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Mon, 22 Mar 2021 16:23:02 +0800 Subject: [PATCH 02/18] =?UTF-8?q?feat:=20=20plugin-qiankun=E5=AE=8C?= =?UTF-8?q?=E6=88=90=E5=AD=90=E5=BA=94=E7=94=A8=E6=8C=82=E8=BD=BD=E9=80=BB?= =?UTF-8?q?=E8=BE=91=E3=80=81=E4=B8=BB=E5=BA=94=E7=94=A8=E6=8F=90=E4=BE=9B?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=AD=90=E5=BA=94=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fes-plugin-qiankun/package.json | 2 +- packages/fes-plugin-qiankun/src/constants.js | 2 + packages/fes-plugin-qiankun/src/index.js | 10 +- packages/fes-plugin-qiankun/src/main/index.js | 282 +++++++++++------- .../fes-plugin-qiankun/src/main/runtime.js | 85 ------ .../src/main/runtime/MicroApp.tpl | 123 ++++++++ .../src/main/runtime/runtime.tpl | 85 ++++++ .../fes-plugin-qiankun/src/mirco/index.js | 236 ++++++++++----- .../src/mirco/lifecycles.js | 60 ---- .../fes-plugin-qiankun/src/mirco/runtime.js | 12 - .../src/mirco/runtime/lifecycles.tpl | 92 ++++++ .../src/mirco/runtime/runtime.tpl | 12 + .../src/plugins/commands/buildDevUtils.js | 11 +- .../plugins/commands/webpackConfig/index.js | 5 +- .../src/plugins/generateFiles/fes/fes.tpl | 28 +- .../src/plugins/registerMethods.js | 3 +- 16 files changed, 677 insertions(+), 371 deletions(-) create mode 100644 packages/fes-plugin-qiankun/src/constants.js delete mode 100644 packages/fes-plugin-qiankun/src/main/runtime.js create mode 100644 packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl create mode 100644 packages/fes-plugin-qiankun/src/main/runtime/runtime.tpl delete mode 100644 packages/fes-plugin-qiankun/src/mirco/lifecycles.js delete mode 100644 packages/fes-plugin-qiankun/src/mirco/runtime.js create mode 100644 packages/fes-plugin-qiankun/src/mirco/runtime/lifecycles.tpl create mode 100644 packages/fes-plugin-qiankun/src/mirco/runtime/runtime.tpl diff --git a/packages/fes-plugin-qiankun/package.json b/packages/fes-plugin-qiankun/package.json index 3b8b27dc..a97831e4 100644 --- a/packages/fes-plugin-qiankun/package.json +++ b/packages/fes-plugin-qiankun/package.json @@ -33,7 +33,7 @@ "qiankun": "2.3.4" }, "peerDependencies": { - "@webank/fes": "^2.0.0-alpha.0", + "@webank/fes": "^2.0.0-rc.0", "vue": "^3.0.5" } } diff --git a/packages/fes-plugin-qiankun/src/constants.js b/packages/fes-plugin-qiankun/src/constants.js new file mode 100644 index 00000000..51451582 --- /dev/null +++ b/packages/fes-plugin-qiankun/src/constants.js @@ -0,0 +1,2 @@ +export const defaultMainRootId = '#root-master'; +export const defaultHistoryType = 'hash'; diff --git a/packages/fes-plugin-qiankun/src/index.js b/packages/fes-plugin-qiankun/src/index.js index a7d24c4e..fa0a8a02 100644 --- a/packages/fes-plugin-qiankun/src/index.js +++ b/packages/fes-plugin-qiankun/src/index.js @@ -1,6 +1,6 @@ -import { join } from 'path'; +// import { join } from 'path'; -const namespace = 'plugin-qiankun'; +// const namespace = 'plugin-qiankun'; export default (api) => { api.describe({ @@ -15,12 +15,14 @@ export default (api) => { } }); + api.addRuntimePluginKey(() => 'qiankun'); + api.registerPlugins([ require.resolve('./main'), require.resolve('./mirco') ]); - const absRuntimeFilePath = join(namespace, 'runtime.js'); + // const absRuntimeFilePath = join(namespace, 'runtime.js'); - api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`); + // api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`); }; diff --git a/packages/fes-plugin-qiankun/src/main/index.js b/packages/fes-plugin-qiankun/src/main/index.js index 618a2b6e..c3964f04 100644 --- a/packages/fes-plugin-qiankun/src/main/index.js +++ b/packages/fes-plugin-qiankun/src/main/index.js @@ -1,141 +1,195 @@ -import { existsSync, readFileSync } from 'fs'; +import { readFileSync } from 'fs'; import { join } from 'path'; -import { - defaultHistoryMode, - defaultMainRootId, - testPathWithPrefix, - toArray -} from '../common'; +import { defaultMainRootId, defaultHistoryType } from '../constants'; -export default function (api, options) { - const { registerRuntimeKeyInIndex = false } = options || {}; +const namespace = 'plugin-qiankun/main'; - api.addRuntimePlugin(() => require.resolve('./runtime')); +export function isMasterEnable(api) { + return ( + !!api.userConfig?.qiankun?.main + || !!process.env.INITIAL_QIANKUN_MAIN_OPTIONS + ); +} - if (!registerRuntimeKeyInIndex) { - api.addRuntimePluginKey(() => 'qiankun'); - } +export default function (api) { + api.describe({ + enableBy: () => isMasterEnable(api) + }); api.modifyDefaultConfig(config => ({ ...config, - mountElementId: defaultMainRootId, - disableGlobalVariables: true + mountElementId: defaultMainRootId })); - // apps 可能在构建期为空 - const { apps = [] } = options || {}; - if (apps.length) { - // 获取一组路由中以 basePath 为前缀的路由 - const findRouteWithPrefix = (routes, basePath) => { - for (const route of routes) { - if (route.path && testPathWithPrefix(basePath, route.path)) { return route; } - - if (route.routes && route.routes.length) { - return findRouteWithPrefix(route.routes, basePath); - } - } - - return null; - }; - - const modifyAppRoutes = () => { - // TODO: fes缺少修改路由API - api.modifyRoutes((routes) => { - const { - config: { history: mainHistory = defaultHistoryMode } - } = api; - - const newRoutes = routes.map((route) => { - if (route.path === '/' && route.routes && route.routes.length) { - apps.forEach(({ history: slaveHistory = 'history', base }) => { - // 当子应用的 history mode 跟主应用一致时，为避免出现 404 手动为主应用创建一个 path 为 子应用 rule 的空 div 路由组件 - if (slaveHistory === mainHistory) { - const baseConfig = toArray(base); - - baseConfig.forEach((basePath) => { - const routeWithPrefix = findRouteWithPrefix(routes, basePath); - - // 应用没有自己配置过 basePath 相关路由，则自动加入 mock 的路由 - if (!routeWithPrefix) { - route.routes.unshift({ - path: basePath, - exact: false, - component: `() => { - if (process.env.NODE_ENV === 'development') { - console.log('${basePath} 404 mock rendered'); - } - - return React.createElement('div'); - }` - }); - } else { - // 若用户已配置过跟应用 base 重名的路由，则强制将该路由 exact 设置为 false，目的是兼容之前遗留的错误用法的场景 - routeWithPrefix.exact = false; - } - }); - } - }); - } - - return route; - }); - - return newRoutes; - }); - }; - - modifyAppRoutes(); - } - - const rootExportsFile = join(api.paths.absSrcPath, 'rootExports.js'); - - api.addTmpGenerateWatcherPaths(() => rootExportsFile); - - const namespace = 'plugin-qiankun'; - const absCoreFilePath = join(namespace, 'qiankunDefer.js'); + const absMicroAppPath = join(namespace, 'MicroApp.js'); + const absRuntimePath = join(namespace, 'runtime.js'); + const absMasterOptionsPath = join(namespace, 'masterOptions.js'); api.onGenerateFiles(() => { - const { - config: { history = defaultHistoryMode } - } = api; - const rootExports = `window.g_rootExports = ${existsSync(rootExportsFile) ? 'require(\'@/rootExports\')' : '{}'};`.trim(); - api.writeTmpFile({ - path: `${namespace}/qiankunRootExports.js`, - content: rootExports + path: absMicroAppPath, + content: readFileSync(join(__dirname, 'runtime/MicroApp.tpl'), 'utf-8') }); api.writeTmpFile({ - path: `${namespace}/subAppsConfig.json`, - content: JSON.stringify({ - mainHistory: history, - ...options - }) + path: absRuntimePath, + content: readFileSync(join(__dirname, 'runtime/runtime.tpl'), 'utf-8') }); + + const { main: options } = api.config?.qiankun || {}; + const masterHistoryType = api.config?.router?.mode || defaultHistoryType; + const base = api.config.base || '/'; api.writeTmpFile({ - path: `${namespace}/qiankunDefer.js`, + path: absMasterOptionsPath, content: ` - class Deferred { - constructor() { - this.promise = new Promise(resolve => this.resolve = resolve); - } - } - export const deferred = new Deferred(); - export const qiankunStart = deferred.resolve; - `.trim() - }); - - api.writeTmpFile({ - path: `${namespace}/runtime.js`, - content: readFileSync(join(__dirname, 'runtime.js'), 'utf-8') + let options = ${JSON.stringify({ + masterHistoryType, + base, + ...options + })}; + export const getMasterOptions = () => options; + export const setMasterOptions = (newOpts) => options = ({ ...options, ...newOpts }); + ` }); }); api.addPluginExports(() => [ { - specifiers: ['qiankunStart'], - source: absCoreFilePath + specifiers: ['MicroApp'], + source: absMicroAppPath } ]); + + + // const { registerRuntimeKeyInIndex = false } = options || {}; + + // api.addRuntimePlugin(() => require.resolve('./runtime')); + + // if (!registerRuntimeKeyInIndex) { + // api.addRuntimePluginKey(() => 'qiankun'); + // } + + // api.modifyDefaultConfig(config => ({ + // ...config, + // mountElementId: defaultMainRootId, + // disableGlobalVariables: true + // })); + + // // apps 可能在构建期为空 + // const { apps = [] } = options || {}; + // if (apps.length) { + // // 获取一组路由中以 basePath 为前缀的路由 + // const findRouteWithPrefix = (routes, basePath) => { + // for (const route of routes) { + // if (route.path && testPathWithPrefix(basePath, route.path)) { return route; } + + // if (route.routes && route.routes.length) { + // return findRouteWithPrefix(route.routes, basePath); + // } + // } + + // return null; + // }; + + // const modifyAppRoutes = () => { + // // TODO: fes缺少修改路由API + // api.modifyRoutes((routes) => { + // const { + // config: { history: mainHistory = defaultHistoryMode } + // } = api; + + // const newRoutes = routes.map((route) => { + // if (route.path === '/' && route.routes && route.routes.length) { + // apps.forEach(({ history: slaveHistory = 'history', base }) => { + // // 当子应用的 history mode 跟主应用一致时，为避免出现 404 手动为主应用创建一个 path 为 子应用 rule 的空 div 路由组件 + // if (slaveHistory === mainHistory) { + // const baseConfig = toArray(base); + + // baseConfig.forEach((basePath) => { + // const routeWithPrefix = findRouteWithPrefix(routes, basePath); + + // // 应用没有自己配置过 basePath 相关路由，则自动加入 mock 的路由 + // if (!routeWithPrefix) { + // route.routes.unshift({ + // path: basePath, + // exact: false, + // component: `() => { + // if (process.env.NODE_ENV === 'development') { + // console.log('${basePath} 404 mock rendered'); + // } + + // return React.createElement('div'); + // }` + // }); + // } else { + // // 若用户已配置过跟应用 base 重名的路由，则强制将该路由 exact 设置为 false，目的是兼容之前遗留的错误用法的场景 + // routeWithPrefix.exact = false; + // } + // }); + // } + // }); + // } + + // return route; + // }); + + // return newRoutes; + // }); + // }; + + // modifyAppRoutes(); + // } + + // const rootExportsFile = join(api.paths.absSrcPath, 'rootExports.js'); + + // api.addTmpGenerateWatcherPaths(() => rootExportsFile); + + // const namespace = 'plugin-qiankun'; + // const absCoreFilePath = join(namespace, 'qiankunDefer.js'); + + // api.onGenerateFiles(() => { + // const { + // config: { history = defaultHistoryMode } + // } = api; + // const rootExports = `window.g_rootExports = ${existsSync(rootExportsFile) ? 'require(\'@/rootExports\')' : '{}'};`.trim(); + + // api.writeTmpFile({ + // path: `${namespace}/qiankunRootExports.js`, + // content: rootExports + // }); + + // api.writeTmpFile({ + // path: `${namespace}/subAppsConfig.json`, + // content: JSON.stringify({ + // mainHistory: history, + // ...options + // }) + // }); + + // api.writeTmpFile({ + // path: `${namespace}/qiankunDefer.js`, + // content: ` + // class Deferred { + // constructor() { + // this.promise = new Promise(resolve => this.resolve = resolve); + // } + // } + // export const deferred = new Deferred(); + // export const qiankunStart = deferred.resolve; + // `.trim() + // }); + + // api.writeTmpFile({ + // path: `${namespace}/runtime.js`, + // content: readFileSync(join(__dirname, 'runtime.js'), 'utf-8') + // }); + // }); + + // api.addPluginExports(() => [ + // { + // specifiers: ['qiankunStart'], + // source: absCoreFilePath + // } + // ]); } diff --git a/packages/fes-plugin-qiankun/src/main/runtime.js b/packages/fes-plugin-qiankun/src/main/runtime.js deleted file mode 100644 index 2a8ba764..00000000 --- a/packages/fes-plugin-qiankun/src/main/runtime.js +++ /dev/null @@ -1,85 +0,0 @@ -import { deferred } from '@@/plugin-qiankun/qiankunDefer.js'; -import '@@/plugin-qiankun/qiankunRootExports.js'; -import subAppConfig from '@@/plugin-qiankun/subAppsConfig.json'; -import { registerMicroApps, start } from 'qiankun'; -import { createApp, h } from 'vue'; -import { plugin, ApplyPluginsType } from '@@/core/coreExports'; -import { defaultMountContainerId, testPathWithPrefix, toArray } from '../common'; - -async function getMasterRuntime() { - const config = plugin.applyPlugins({ - key: 'qiankun', - type: ApplyPluginsType.modify, - initialValue: {}, - async: true - }); - const { master } = config; - return master || config; -} - -export async function render(oldRender) { - oldRender(); - function isAppActive(location, history, base) { - const baseConfig = toArray(base); - switch (history.type || history) { - case 'hash': - return baseConfig.some(pathPrefix => testPathWithPrefix(`#${pathPrefix}`, location.hash)); - case 'browser': - return baseConfig.some(pathPrefix => testPathWithPrefix(pathPrefix, location.pathname)); - default: - return false; - } - } - const runtimeConfig = await getMasterRuntime(); - const { - apps, jsSandbox = false, prefetch = true, defer = false, lifeCycles, masterHistory, ...otherConfigs - } = { - ...subAppConfig, - ...runtimeConfig - }; - - assert(apps && apps.length, 'sub apps must be config when using fes-plugin-qiankun'); - - registerMicroApps(apps.map(({ - name, entry, base, history = masterHistory, mountElementId = defaultMountContainerId, props - }) => ({ - name, - entry, - activeRule: location => isAppActive(location, history, base), - render: ({ appContent, loading }) => { - if (process.env.NODE_ENV === 'development') { - console.info(`app ${name} loading ${loading}`); - } - if (mountElementId) { - const container = document.getElementById(mountElementId); - if (container) { - const subApp = { - setup() { - - }, - render() { - h('div', { - dangerouslySetInnerHTML: { - __html: appContent - } - }); - } - }; - const app = createApp(); - app.mount(subApp, container); - } - } - }, - props: { - base, - history, - ...props - } - })), lifeCycles); - - if (defer) { - await deferred.promise; - } - - start({ jsSandbox, prefetch, ...otherConfigs }); -} diff --git a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl new file mode 100644 index 00000000..3c275925 --- /dev/null +++ b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl @@ -0,0 +1,123 @@ +import { + defineComponent, + ref, + watch, + computed, + onBeforeUnmount, + onMounted +} from 'vue'; +import { loadMicroApp } from 'qiankun'; +// eslint-disable-next-line import/extensions +import { getMasterOptions } from './masterOptions'; + +function unmountMicroApp(microApp) { + if (microApp) { + microApp.mountPromise.then(() => microApp.unmount()); + } +} + +export const MicroApp = defineComponent({ + props: { + name: { + type: String, + required: true + } + }, + setup(props) { + const { + masterHistoryType, + apps = [], + lifeCycles: globalLifeCycles, + ...globalSettings + } = getMasterOptions(); + + const containerRef = ref(null); + const microAppRef = ref(); + const updatingPromise = ref(); + const updatingTimestamp = ref(Date.now()); + + const appConfigRef = computed(() => { + const _appConfig = apps.find(app => app.name === props.name); + if (!_appConfig) { + throw new Error( + `[@fesjs/plugin-qiankun]: Can not find the configuration of ${props.name} app!` + ); + } + return _appConfig; + }); + + const loadApp = () => { + const appConfig = appConfigRef.value; + // 加载新的 + microAppRef.value = loadMicroApp( + { + name: appConfig.name, + entry: appConfig.entry, + container: containerRef.value, + props: { ...appConfig.props } + }, + { + ...globalSettings, + ...(props.settings || {}), + globalLifeCycles, + lifeCycles: props.lifeCycles + } + ); + }; + + onMounted(() => { + loadApp(); + }); + + onBeforeUnmount(() => { + unmountMicroApp(microAppRef.value); + }); + + watch(appConfigRef, () => { + unmountMicroApp(microAppRef.value); + + loadApp(); + }); + + watch(microAppRef, () => { + const microApp = microAppRef.value; + const appConfig = appConfigRef.value; + if (microApp) { + if (!updatingPromise.value) { + // 初始化 updatingPromise 为 microApp.mountPromise，从而确保后续更新是在应用 mount 完成之后 + updatingPromise.value = microApp.mountPromise; + } else { + // 确保 microApp.update 调用是跟组件状态变更顺序一致的，且后一个微应用更新必须等待前一个更新完成 + updatingPromise.value = updatingPromise.value.then(() => { + const canUpdate = app => app?.update && app.getStatus() === 'MOUNTED'; + if (canUpdate(microApp)) { + if (process.env.NODE_ENV === 'development') { + if ( + Date.now() - updatingTimestamp.value + < 200 + ) { + console.warn( + `[@fesjs/plugin-qiankun] It seems like microApp ${props.name} is updating too many times in a short time(200ms), you may need to do some optimization to avoid the unnecessary re-rendering.` + ); + } + + console.info( + `[@umijs/plugin-qiankun] MicroApp ${props.name} is updating with props: `, + props + ); + updatingTimestamp.value = Date.now(); + } + + // 返回 microApp.update 形成链式调用 + return microApp.update({ + ...appConfig.props + }); + } + }); + } + } + }); + + return () =>
; + } +}); diff --git a/packages/fes-plugin-qiankun/src/main/runtime/runtime.tpl b/packages/fes-plugin-qiankun/src/main/runtime/runtime.tpl new file mode 100644 index 00000000..0beb6f37 --- /dev/null +++ b/packages/fes-plugin-qiankun/src/main/runtime/runtime.tpl @@ -0,0 +1,85 @@ +// import { deferred } from '@@/plugin-qiankun/qiankunDefer.js'; +// import '@@/plugin-qiankun/qiankunRootExports.js'; +// import subAppConfig from '@@/plugin-qiankun/subAppsConfig.json'; +// import { registerMicroApps, start } from 'qiankun'; +// import { createApp, h } from 'vue'; +// import { plugin, ApplyPluginsType } from '@@/core/coreExports'; +// import { defaultMountContainerId, testPathWithPrefix, toArray } from '../common'; + +// async function getMasterRuntime() { +// const config = plugin.applyPlugins({ +// key: 'qiankun', +// type: ApplyPluginsType.modify, +// initialValue: {}, +// async: true +// }); +// const { master } = config; +// return master || config; +// } + +// export async function render(oldRender) { +// oldRender(); +// function isAppActive(location, history, base) { +// const baseConfig = toArray(base); +// switch (history.type || history) { +// case 'hash': +// return baseConfig.some(pathPrefix => testPathWithPrefix(`#${pathPrefix}`, location.hash)); +// case 'browser': +// return baseConfig.some(pathPrefix => testPathWithPrefix(pathPrefix, location.pathname)); +// default: +// return false; +// } +// } +// const runtimeConfig = await getMasterRuntime(); +// const { +// apps, jsSandbox = false, prefetch = true, defer = false, lifeCycles, masterHistory, ...otherConfigs +// } = { +// ...subAppConfig, +// ...runtimeConfig +// }; + +// assert(apps && apps.length, 'sub apps must be config when using fes-plugin-qiankun'); + +// registerMicroApps(apps.map(({ +// name, entry, base, history = masterHistory, mountElementId = defaultMountContainerId, props +// }) => ({ +// name, +// entry, +// activeRule: location => isAppActive(location, history, base), +// render: ({ appContent, loading }) => { +// if (process.env.NODE_ENV === 'development') { +// console.info(`app ${name} loading ${loading}`); +// } +// if (mountElementId) { +// const container = document.getElementById(mountElementId); +// if (container) { +// const subApp = { +// setup() { + +// }, +// render() { +// h('div', { +// dangerouslySetInnerHTML: { +// __html: appContent +// } +// }); +// } +// }; +// const app = createApp(); +// app.mount(subApp, container); +// } +// } +// }, +// props: { +// base, +// history, +// ...props +// } +// })), lifeCycles); + +// if (defer) { +// await deferred.promise; +// } + +// start({ jsSandbox, prefetch, ...otherConfigs }); +// } diff --git a/packages/fes-plugin-qiankun/src/mirco/index.js b/packages/fes-plugin-qiankun/src/mirco/index.js index 6c81e1d8..3a7d3bba 100644 --- a/packages/fes-plugin-qiankun/src/mirco/index.js +++ b/packages/fes-plugin-qiankun/src/mirco/index.js @@ -1,103 +1,187 @@ +import assert from 'assert'; +import { lodash } from '@umijs/utils'; import { readFileSync } from 'fs'; import { join } from 'path'; -import { defaultMircoRootId } from '../common'; +// import { defaultMircoRootId } from '../common'; -export default function (api, options) { - const { registerRuntimeKeyInIndex = false } = options || {}; +const namespace = 'plugin-qiankun/mirco'; - api.addRuntimePlugin(() => require.resolve('./runtime')); +export function isSlaveEnable(api) { + return ( + !!api.userConfig?.qiankun?.mirco + || lodash.isEqual(api.userConfig?.qiankun, {}) + || !!process.env.INITIAL_QIANKUN_MIRCO_OPTIONS + ); +} - if (!registerRuntimeKeyInIndex) { - api.addRuntimePluginKey(() => 'qiankun'); - } +export default function (api) { + api.describe({ + enableBy: () => isSlaveEnable(api) + }); - const lifecyclePath = require.resolve('./lifecycles'); - const { name: pkgName } = require(join(api.cwd, 'package.json')); - - // TODO: fes缺少修改默认配置API - api.modifyDefaultConfig(memo => (Object.assign(Object.assign({}, memo), { - disableGlobalVariables: true, - base: `/${pkgName}`, - mountElementId: defaultMircoRootId, - // 默认开启 runtimePublicPath，避免出现 dynamic import 场景子应用资源地址出问题 + api.modifyDefaultConfig(memo => ({ + ...memo, runtimePublicPath: true - }))); + })); - if (api.service.userConfig.runtimePublicPath !== false) { - // TODO: fes缺少修改 publicPath API - api.modifyPublicPathStr(() => `window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "${ - // 开发阶段 publicPath 配置无效，默认为 / - process.env.NODE_ENV !== 'development' - ? api.config.publicPath || '/' - : '/'}"`); - } + api.modifyPublicPathStr((publicPathStr) => { + const { runtimePublicPath } = api.config; + const qiankunConfig = api.config.qiankun || {}; + if (!qiankunConfig || !qiankunConfig.mirco) { + return publicPathStr; + } + const { shouldNotModifyRuntimePublicPath } = qiankunConfig; + + if (runtimePublicPath === true && !shouldNotModifyRuntimePublicPath) { + return `window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "${ + api.config.publicPath || '/' + }"`; + } + + return publicPathStr; + }); api.chainWebpack((config) => { assert(api.pkg.name, 'You should have name in package.json'); - config.output - .libraryTarget('umd') - .library(`${api.pkg.name}-[name]`); + config.output.libraryTarget('umd').library(`${api.pkg.name}-[name]`); + return config; }); - // bundle 添加 entry 标记 - // TODO: fes缺少修改HTML API - api.modifyHTML(($) => { - $('script').each((_, el) => { - const scriptEl = $(el); - const umiEntryJs = /\/?umi(\.\w+)?\.js$/g; - const scriptElSrc = scriptEl.attr('src'); - - if (umiEntryJs.test((scriptElSrc) !== null && scriptElSrc !== 0 ? scriptElSrc : '')) { - scriptEl.attr('entry', ''); - } - }); - return $; - }); - - const namespace = 'plugin-qiankun'; + const absRuntimePath = join(namespace, 'runtime.js'); + const absLifeclesPath = join(namespace, 'lifecycles.js'); api.onGenerateFiles(() => { api.writeTmpFile({ - path: `${namespace}/qiankunContext.js`, - content: ` - import { createApp, h } from 'vue'; - export const Context = createContext(null); - export function useRootExports() { - return useContext(Context); - }; - `.trim() + path: absRuntimePath, + content: readFileSync(join(__dirname, 'runtime/runtime.tpl'), 'utf-8') }); api.writeTmpFile({ - path: `${namespace}/runtime.js`, - content: readFileSync(join(__dirname, 'runtime.js'), 'utf-8') - }); - - api.writeTmpFile({ - path: `${namespace}/lifecycles.js`, - content: readFileSync(join(__dirname, 'lifecycles.js'), 'utf-8') + path: absLifeclesPath, + content: readFileSync(join(__dirname, 'runtime/lifecycles.tpl'), 'utf-8') }); }); - api.addPluginExports(() => [ - { - specifiers: ['useRootExports'], - source: `${namespace}/qiankunContext.js` - } - ]); - api.addEntryImports(() => ({ - source: lifecyclePath, - specifier: '{ genMount as qiankun_genMount, genBootstrap as qiankun_genBootstrap, genUnmount as qiankun_genUnmount }' + source: `@@/${absLifeclesPath}`, + specifier: + '{ genMount as qiankun_genMount, genBootstrap as qiankun_genBootstrap, genUnmount as qiankun_genUnmount, genUpdate as qiankun_genUpdate }' })); - api.addEntryCode(() => ` - export const bootstrap = qiankun_genBootstrap(Promise.resolve(), clientRender); - export const mount = qiankun_genMount(); - export const unmount = qiankun_genUnmount('${api.config.mountElementId}'); + api.addEntryCode( + () => ` +export const bootstrap = qiankun_genBootstrap(completeClientRender, app); +export const mount = qiankun_genMount('${api.config.mountElementId}'); +export const unmount = qiankun_genUnmount('${api.config.mountElementId}'); +export const update = qiankun_genUpdate(); - if (!window.__POWERED_BY_QIANKUN__) { - bootstrap().then(mount); - } - `); +if (!window.__POWERED_BY_QIANKUN__) { + bootstrap().then(mount); +} +` + ); + + // const { registerRuntimeKeyInIndex = false } = options || {}; + + // api.addRuntimePlugin(() => require.resolve('./runtime')); + + // // if (!registerRuntimeKeyInIndex) { + // // api.addRuntimePluginKey(() => 'qiankun'); + // // } + + // const lifecyclePath = require.resolve('./lifecycles'); + // const { name: pkgName } = require(join(api.cwd, 'package.json')); + + // // TODO: fes缺少修改默认配置API + // api.modifyDefaultConfig(memo => Object.assign(Object.assign({}, memo), { + // disableGlobalVariables: true, + // base: `/${pkgName}`, + // mountElementId: defaultMircoRootId, + // // 默认开启 runtimePublicPath，避免出现 dynamic import 场景子应用资源地址出问题 + // runtimePublicPath: true + // })); + + // if (api.service.userConfig.runtimePublicPath !== false) { + // // TODO: fes缺少修改 publicPath API + // api.modifyPublicPathStr( + // () => `window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "${ + // // 开发阶段 publicPath 配置无效，默认为 / + // process.env.NODE_ENV !== 'development' + // ? api.config.publicPath || '/' + // : '/' + // }"` + // ); + // } + + // api.chainWebpack((config) => { + // assert(api.pkg.name, 'You should have name in package.json'); + // config.output.libraryTarget('umd').library(`${api.pkg.name}-[name]`); + // }); + + // // bundle 添加 entry 标记 + // // TODO: fes缺少修改HTML API + // api.modifyHTML(($) => { + // $('script').each((_, el) => { + // const scriptEl = $(el); + // const umiEntryJs = /\/?umi(\.\w+)?\.js$/g; + // const scriptElSrc = scriptEl.attr('src'); + + // if ( + // umiEntryJs.test( + // scriptElSrc !== null && scriptElSrc !== 0 ? scriptElSrc : '' + // ) + // ) { + // scriptEl.attr('entry', ''); + // } + // }); + // return $; + // }); + + // api.onGenerateFiles(() => { + // api.writeTmpFile({ + // path: `${namespace}/qiankunContext.js`, + // content: ` + // import { createApp, h } from 'vue'; + // export const Context = createContext(null); + // export function useRootExports() { + // return useContext(Context); + // }; + // `.trim() + // }); + + // api.writeTmpFile({ + // path: `${namespace}/runtime.js`, + // content: readFileSync(join(__dirname, 'runtime.js'), 'utf-8') + // }); + + // api.writeTmpFile({ + // path: `${namespace}/lifecycles.js`, + // content: readFileSync(join(__dirname, 'lifecycles.js'), 'utf-8') + // }); + // }); + + // api.addPluginExports(() => [ + // { + // specifiers: ['useRootExports'], + // source: `${namespace}/qiankunContext.js` + // } + // ]); + + // api.addEntryImports(() => ({ + // source: lifecyclePath, + // specifier: + // '{ genMount as qiankun_genMount, genBootstrap as qiankun_genBootstrap, genUnmount as qiankun_genUnmount }' + // })); + + // api.addEntryCode( + // () => ` + // export const bootstrap = qiankun_genBootstrap(Promise.resolve(), clientRender); + // export const mount = qiankun_genMount(); + // export const unmount = qiankun_genUnmount('${api.config.mountElementId}'); + + // if (!window.__POWERED_BY_QIANKUN__) { + // bootstrap().then(mount); + // } + // ` + // ); } diff --git a/packages/fes-plugin-qiankun/src/mirco/lifecycles.js b/packages/fes-plugin-qiankun/src/mirco/lifecycles.js deleted file mode 100644 index fd160b73..00000000 --- a/packages/fes-plugin-qiankun/src/mirco/lifecycles.js +++ /dev/null @@ -1,60 +0,0 @@ -import { plugin, ApplyPluginsType } from '@@/core/coreExports'; - -const defer = {}; -defer.promise = new Promise((resolve) => { - defer.resolve = resolve; -}); - -let render = () => { }; -let hasMountedAtLeastOnce = false; - -export default () => defer.promise; - -function getSlaveRuntime() { - const config = plugin.applyPlugins({ - key: 'qiankun', - type: ApplyPluginsType.modify, - initialValue: {} - }); - const { slave } = config; - return slave || config; -} - -// 子应用生命周期钩子Bootstrap -export function genBootstrap(promise, oldRender) { - return async (...args) => { - const slaveRuntime = getSlaveRuntime(); - if (slaveRuntime.bootstrap) { await slaveRuntime.bootstrap(...args); } - render = () => promise.then(oldRender).catch((e) => { - if (process.env.NODE_ENV === 'development') { - console.error('Render failed', e); - } - }); - }; -} - -// 子应用生命周期钩子Mount -export function genMount() { - return async (...args) => { - defer.resolve(); - const slaveRuntime = getSlaveRuntime(); - if (slaveRuntime.mount) { await slaveRuntime.mount(...args); } - // 第一次 mount 会自动触发 render，非第一次 mount 则需手动触发 - if (hasMountedAtLeastOnce) { - render(); - } - hasMountedAtLeastOnce = true; - }; -} - -// 子应用生命周期钩子Unmount -export function genUnmount(mountElementId, app) { - return async (...args) => { - const container = document.getElementById(mountElementId); - if (container) { - app.unmount(container); - } - const slaveRuntime = getSlaveRuntime(); - if (slaveRuntime.unmount) { await slaveRuntime.unmount(...args); } - }; -} diff --git a/packages/fes-plugin-qiankun/src/mirco/runtime.js b/packages/fes-plugin-qiankun/src/mirco/runtime.js deleted file mode 100644 index 96180844..00000000 --- a/packages/fes-plugin-qiankun/src/mirco/runtime.js +++ /dev/null @@ -1,12 +0,0 @@ -import { h } from 'vue'; -import qiankunRender from './lifecycles'; - -export function rootContainer(container) { - const value = window.g_rootExports; - const { Context } = require('@@/plugin-qiankun/qiankunContext'); - return h(Context.Provider, { value }, container); -} - -export const render = oldRender => qiankunRender().then(() => { - oldRender(); -}); diff --git a/packages/fes-plugin-qiankun/src/mirco/runtime/lifecycles.tpl b/packages/fes-plugin-qiankun/src/mirco/runtime/lifecycles.tpl new file mode 100644 index 00000000..a74b0d88 --- /dev/null +++ b/packages/fes-plugin-qiankun/src/mirco/runtime/lifecycles.tpl @@ -0,0 +1,92 @@ +import { plugin, ApplyPluginsType } from '@@/core/coreExports'; + +const defer = {}; +defer.promise = new Promise((resolve) => { + defer.resolve = resolve; +}); + +function isPromise(obj) { + return !!obj // 有实际含义的变量才执行方法，变量null，undefined和''空串都为false + && (typeof obj === 'object' || typeof obj === 'function') // 初始promise 或 promise.then返回的 + && typeof obj.then === 'function'; +} + + +let render = () => {}; +let app = null; +let hasMountedAtLeastOnce = false; + +export default () => defer.promise; + +function getSlaveRuntime() { + const config = plugin.applyPlugins({ + key: 'qiankun', + type: ApplyPluginsType.modify, + initialValue: {} + }); + const { slave } = config; + return slave || config; +} + +// 子应用生命周期钩子Bootstrap +export function genBootstrap(oldRender, appPromise) { + return async (props) => { + const slaveRuntime = getSlaveRuntime(); + if (slaveRuntime.bootstrap) { + await slaveRuntime.bootstrap(props); + } + render = oldRender; + if (isPromise(appPromise)) { + app = await appPromise; + } + }; +} + +// 子应用生命周期钩子Mount +export function genMount() { + return async (props) => { + // props 有值时说明应用是通过 lifecycle 被主应用唤醒的，而不是独立运行时自己 mount + if (typeof props !== 'undefined') { + const slaveRuntime = getSlaveRuntime(); + if (slaveRuntime.mount) { + await slaveRuntime.mount(props); + } + } + + // 第一次 mount 会自动触发 render，非第一次 mount 则需手动触发 + if (hasMountedAtLeastOnce) { + const appPromise = render(); + if (isPromise(appPromise)) { + app = await appPromise; + } + } else { + defer.resolve(); + } + hasMountedAtLeastOnce = true; + }; +} + +export function genUpdate() { + return async (props) => { + const slaveRuntime = await getSlaveRuntime(); + if (slaveRuntime.update) { + await slaveRuntime.update(props); + } + }; +} + +// 子应用生命周期钩子Unmount +export function genUnmount(mountElementId) { + return async (props) => { + const container = props?.container + ? props.container.querySelector(`#${mountElementId}`) + : document.getElementById(mountElementId); + if (container && app) { + app.unmount(container); + } + const slaveRuntime = getSlaveRuntime(); + if (slaveRuntime.unmount) { + await slaveRuntime.unmount(props); + } + }; +} diff --git a/packages/fes-plugin-qiankun/src/mirco/runtime/runtime.tpl b/packages/fes-plugin-qiankun/src/mirco/runtime/runtime.tpl new file mode 100644 index 00000000..3d6cd99c --- /dev/null +++ b/packages/fes-plugin-qiankun/src/mirco/runtime/runtime.tpl @@ -0,0 +1,12 @@ +// import { h } from 'vue'; +// import qiankunRender from './lifecycles'; + +// export function rootContainer(container) { +// const value = typeof window !== 'undefined' ? window.g_rootExports : {}; +// const { Context } = require('@@/plugin-qiankun/qiankunContext'); +// return h(Context.Provider, { value }, container); +// } + +// export const render = oldRender => qiankunRender().then(() => { +// oldRender(); +// }); diff --git a/packages/fes-preset-built-in/src/plugins/commands/buildDevUtils.js b/packages/fes-preset-built-in/src/plugins/commands/buildDevUtils.js index 1d7af459..b2b86505 100644 --- a/packages/fes-preset-built-in/src/plugins/commands/buildDevUtils.js +++ b/packages/fes-preset-built-in/src/plugins/commands/buildDevUtils.js @@ -55,7 +55,16 @@ export async function getBundleAndConfigs({ type: api.ApplyPluginsType.add, initialState: [] }); - } + }, + publicPath: await api.applyPlugins({ + key: 'modifyPublicPathStr', + type: api.ApplyPluginsType.modify, + initialValue: api.config.publicPath || '', + args: { + // route: args.route + } + }) + }, args: { } diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js index dd79b2b2..c3227ada 100644 --- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js +++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js @@ -66,7 +66,8 @@ export default async function getConfig({ modifyBabelOpts, modifyBabelPresetOpts, chainWebpack, - headScripts + headScripts, + publicPath }) { const isDev = env === 'development'; const isProd = env === 'production'; @@ -93,7 +94,7 @@ export default async function getConfig({ // --------------- output ----------- webpackConfig.output .path(absoluteOutput) - .publicPath(config.publicPath || '') + .publicPath(publicPath) .filename('[name].[contenthash:8].js') .chunkFilename('[name].[contenthash:8].chunk.js'); diff --git a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl b/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl index 0ae0e18c..8c809211 100644 --- a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl +++ b/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl @@ -62,18 +62,15 @@ const getClientRender = (args = {}) => plugin.applyPlugins({ args, }); - - -const beforeRenderConfig = plugin.applyPlugins({ - key: "beforeRender", - type: ApplyPluginsType.modify, - initialValue: { - loading: null, - action: null - }, -}); - const beforeRender = async () => { + const beforeRenderConfig = plugin.applyPlugins({ + key: "beforeRender", + type: ApplyPluginsType.modify, + initialValue: { + loading: null, + action: null + }, + }); let initialState = {}; if (typeof beforeRenderConfig.action === "function") { const app = createApp(beforeRenderConfig.loading); @@ -89,13 +86,16 @@ const beforeRender = async () => { return initialState; }; -const render = async () => { +const completeClientRender = async () => { const initialState = await beforeRender(); const clientRender = getClientRender({initialState}); - clientRender(); + const app = clientRender(); + return app; }; -render(); +const app = completeClientRender(); + +export default app; {{{ entryCode }}} diff --git a/packages/fes-preset-built-in/src/plugins/registerMethods.js b/packages/fes-preset-built-in/src/plugins/registerMethods.js index 4748a62e..0edfb52b 100644 --- a/packages/fes-preset-built-in/src/plugins/registerMethods.js +++ b/packages/fes-preset-built-in/src/plugins/registerMethods.js @@ -29,8 +29,7 @@ export default function (api) { 'modifyBabelPresetOpts', 'chainWebpack', 'addTmpGenerateWatcherPaths', - 'modifyPublicPathStr', - 'modifyHTML', + 'modifyPublicPathStr' ].forEach((name) => { api.registerMethod({ name }); }); From e95361a5725d6690305aadd7a5d905e69b09e2e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Mon, 22 Mar 2021 20:24:08 +0800 Subject: [PATCH 03/18] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AD=90?= =?UTF-8?q?=E5=BA=94=E7=94=A8=E5=8A=A0=E8=BD=BD=E8=B5=84=E6=BA=90404?= =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E8=BF=98=E9=9C=80=E8=A6=81=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E8=BF=90=E8=A1=8C=E6=97=B6publicPath?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://v1.qiankun.umijs.org/zh/faq/#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%AD%90%E5%BA%94%E7%94%A8%E5%8A%A0%E8%BD%BD%E7%9A%84%E8%B5%84%E6%BA%90%E4%BC%9A-404%EF%BC%9F --- packages/fes-plugin-qiankun/src/index.js | 4 +- .../src/{mirco => micro}/index.js | 53 ++++++++++++++++--- .../{mirco => micro}/runtime/lifecycles.tpl | 9 ++-- .../src/{mirco => micro}/runtime/runtime.tpl | 0 packages/fes-preset-built-in/src/index.js | 1 + .../commands/webpackConfig/resolveDefine.js | 2 +- .../src/plugins/features/runtimePublicPath.js | 12 +++++ 7 files changed, 69 insertions(+), 12 deletions(-) rename packages/fes-plugin-qiankun/src/{mirco => micro}/index.js (73%) rename packages/fes-plugin-qiankun/src/{mirco => micro}/runtime/lifecycles.tpl (91%) rename packages/fes-plugin-qiankun/src/{mirco => micro}/runtime/runtime.tpl (100%) create mode 100644 packages/fes-preset-built-in/src/plugins/features/runtimePublicPath.js diff --git a/packages/fes-plugin-qiankun/src/index.js b/packages/fes-plugin-qiankun/src/index.js index fa0a8a02..c404883a 100644 --- a/packages/fes-plugin-qiankun/src/index.js +++ b/packages/fes-plugin-qiankun/src/index.js @@ -8,7 +8,7 @@ export default (api) => { config: { schema(joi) { return joi.object().keys({ - mirco: joi.object(), + micro: joi.object(), main: joi.object() }); } @@ -19,7 +19,7 @@ export default (api) => { api.registerPlugins([ require.resolve('./main'), - require.resolve('./mirco') + require.resolve('./micro') ]); // const absRuntimeFilePath = join(namespace, 'runtime.js'); diff --git a/packages/fes-plugin-qiankun/src/mirco/index.js b/packages/fes-plugin-qiankun/src/micro/index.js similarity index 73% rename from packages/fes-plugin-qiankun/src/mirco/index.js rename to packages/fes-plugin-qiankun/src/micro/index.js index 3a7d3bba..e4915893 100644 --- a/packages/fes-plugin-qiankun/src/mirco/index.js +++ b/packages/fes-plugin-qiankun/src/micro/index.js @@ -1,14 +1,15 @@ import assert from 'assert'; +import address from 'address'; import { lodash } from '@umijs/utils'; import { readFileSync } from 'fs'; import { join } from 'path'; // import { defaultMircoRootId } from '../common'; -const namespace = 'plugin-qiankun/mirco'; +const namespace = 'plugin-qiankun/micro'; export function isSlaveEnable(api) { return ( - !!api.userConfig?.qiankun?.mirco + !!api.userConfig?.qiankun?.micro || lodash.isEqual(api.userConfig?.qiankun, {}) || !!process.env.INITIAL_QIANKUN_MIRCO_OPTIONS ); @@ -27,15 +28,17 @@ export default function (api) { api.modifyPublicPathStr((publicPathStr) => { const { runtimePublicPath } = api.config; const qiankunConfig = api.config.qiankun || {}; - if (!qiankunConfig || !qiankunConfig.mirco) { + if (!qiankunConfig || !qiankunConfig.micro) { return publicPathStr; } const { shouldNotModifyRuntimePublicPath } = qiankunConfig; if (runtimePublicPath === true && !shouldNotModifyRuntimePublicPath) { - return `window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "${ - api.config.publicPath || '/' - }"`; + // 这里必须使用__INJECTED_PUBLIC_PATH_BY_QIANKUN__，因为绝对地址只在开发时生效。 + // return `window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "${api.config.publicPath || '/'}"`; + const port = api.getPort(); + + return `//localhost:${port}${api.config.publicPath || '/'}`; } return publicPathStr; @@ -47,8 +50,37 @@ export default function (api) { return config; }); + const port = process.env.PORT; + // source-map 跨域设置 + if (process.env.NODE_ENV === 'development' && port) { + const localHostname = process.env.USE_REMOTE_IP + ? address.ip() + : process.env.HOST || 'localhost'; + + const protocol = process.env.HTTPS ? 'https' : 'http'; + // // 变更 webpack-dev-server websocket 默认监听地址 + // process.env.SOCKET_SERVER = `${protocol}://${localHostname}:${port}/`; + api.chainWebpack((memo, { webpack }) => { + // 开启了 devSourceMap 配置，默认为 true + if (api.config.qiankun && api.config.qiankun.micro && api.config.qiankun.micro.devSourceMap !== false) { + // 禁用 devtool，启用 SourceMapDevToolPlugin + memo.devtool(false); + memo.plugin('source-map').use(webpack.SourceMapDevToolPlugin, [ + { + // @ts-ignore + namespace: api.pkg.name, + append: `\n//# sourceMappingURL=${protocol}://${localHostname}:${port}/[url]`, + filename: '[file].map' + } + ]); + } + return memo; + }); + } + const absRuntimePath = join(namespace, 'runtime.js'); const absLifeclesPath = join(namespace, 'lifecycles.js'); + const absMicroOptionsPath = join(namespace, 'slaveOptions.js'); api.onGenerateFiles(() => { api.writeTmpFile({ @@ -60,6 +92,15 @@ export default function (api) { path: absLifeclesPath, content: readFileSync(join(__dirname, 'runtime/lifecycles.tpl'), 'utf-8') }); + + api.writeTmpFile({ + path: absMicroOptionsPath, + content: ` + let options = ${JSON.stringify((api.config.qiankun || {}).micro || {})}; + export const getSlaveOptions = () => options; + export const setSlaveOptions = (newOpts) => options = ({ ...options, ...newOpts }); + ` + }); }); api.addEntryImports(() => ({ diff --git a/packages/fes-plugin-qiankun/src/mirco/runtime/lifecycles.tpl b/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl similarity index 91% rename from packages/fes-plugin-qiankun/src/mirco/runtime/lifecycles.tpl rename to packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl index a74b0d88..7781329f 100644 --- a/packages/fes-plugin-qiankun/src/mirco/runtime/lifecycles.tpl +++ b/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl @@ -78,9 +78,12 @@ export function genUpdate() { // 子应用生命周期钩子Unmount export function genUnmount(mountElementId) { return async (props) => { - const container = props?.container - ? props.container.querySelector(`#${mountElementId}`) - : document.getElementById(mountElementId); + let container; + try { + container = props?.container + ? props.container.querySelector(mountElementId) + : document.querySelector(mountElementId); + } catch (e) {} if (container && app) { app.unmount(container); } diff --git a/packages/fes-plugin-qiankun/src/mirco/runtime/runtime.tpl b/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl similarity index 100% rename from packages/fes-plugin-qiankun/src/mirco/runtime/runtime.tpl rename to packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl diff --git a/packages/fes-preset-built-in/src/index.js b/packages/fes-preset-built-in/src/index.js index 0a2883dd..e491f6a2 100644 --- a/packages/fes-preset-built-in/src/index.js +++ b/packages/fes-preset-built-in/src/index.js @@ -44,6 +44,7 @@ export default function () { require.resolve('./plugins/features/vueLoader'), require.resolve('./plugins/features/mock'), require.resolve('./plugins/features/dynamicImport'), + require.resolve('./plugins/features/runtimePublicPath'), // misc require.resolve('./plugins/misc/route'), diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/resolveDefine.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/resolveDefine.js index e9a41c2b..8356d9a9 100644 --- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/resolveDefine.js +++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/resolveDefine.js @@ -1,6 +1,6 @@ const prefixRE = /^FES_APP_/; -const ENV_SHOULD_PASS = ['NODE_ENV', 'FES_ENV', 'HMR', 'SOCKET_SERVER', 'ERROR_OVERLAY']; +const ENV_SHOULD_PASS = ['NODE_ENV', 'FES_ENV']; export default function resolveDefine(opts = {}, raw) { const env = {}; diff --git a/packages/fes-preset-built-in/src/plugins/features/runtimePublicPath.js b/packages/fes-preset-built-in/src/plugins/features/runtimePublicPath.js new file mode 100644 index 00000000..6d8ed4fe --- /dev/null +++ b/packages/fes-preset-built-in/src/plugins/features/runtimePublicPath.js @@ -0,0 +1,12 @@ + +export default (api) => { + api.describe({ + key: 'runtimePublicPath', + config: { + schema(joi) { + return joi.boolean(); + } + }, + default: false + }); +}; From 4870e093ac71ea70d3e9b8b4b2207f10f2d0fbae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Tue, 23 Mar 2021 14:35:38 +0800 Subject: [PATCH 04/18] =?UTF-8?q?fix(plugin-qiankun):=20=20=E5=A4=84?= =?UTF-8?q?=E7=90=86publicPath?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fes-plugin-qiankun/src/micro/index.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/fes-plugin-qiankun/src/micro/index.js b/packages/fes-plugin-qiankun/src/micro/index.js index e4915893..7deb76a6 100644 --- a/packages/fes-plugin-qiankun/src/micro/index.js +++ b/packages/fes-plugin-qiankun/src/micro/index.js @@ -34,11 +34,9 @@ export default function (api) { const { shouldNotModifyRuntimePublicPath } = qiankunConfig; if (runtimePublicPath === true && !shouldNotModifyRuntimePublicPath) { - // 这里必须使用__INJECTED_PUBLIC_PATH_BY_QIANKUN__，因为绝对地址只在开发时生效。 - // return `window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "${api.config.publicPath || '/'}"`; - const port = api.getPort(); - - return `//localhost:${port}${api.config.publicPath || '/'}`; + return `window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "${ + api.config.publicPath || '/' + }"`; } return publicPathStr; From cf5e8a74544de35972fce1f1a6d53242a5b80bac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Tue, 23 Mar 2021 15:53:25 +0800 Subject: [PATCH 05/18] =?UTF-8?q?fix:=20=20router=E4=B8=AD=20createWebHist?= =?UTF-8?q?ory=20=E7=9A=84=20id=20=E4=BB=8E=20h5=20=E6=94=B9=E4=B8=BA=20hi?= =?UTF-8?q?story?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/guide/route.md | 4 +++- docs/zh/guide/route.md | 4 +++- packages/fes-preset-built-in/src/plugins/misc/route/index.js | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/guide/route.md b/docs/guide/route.md index 642929d8..0200633b 100644 --- a/docs/guide/route.md +++ b/docs/guide/route.md @@ -20,10 +20,12 @@ export default { ### mode 创建历史记录的类型： -- **h5**，对应 [createWebHistory](https://next.router.vuejs.org/zh/api/#createwebhistory) +- **history**，对应 [createWebHistory](https://next.router.vuejs.org/zh/api/#createwebhistory) - **hash**，对应 [createWebHashHistory](https://next.router.vuejs.org/zh/api/#createWebHashHistory) - **memory**，对应 [createMemoryHistory](https://next.router.vuejs.org/zh/api/#createWebHashHistory) +默认是`hash`模式。 + ## 约定式路由 约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。 diff --git a/docs/zh/guide/route.md b/docs/zh/guide/route.md index 642929d8..0200633b 100644 --- a/docs/zh/guide/route.md +++ b/docs/zh/guide/route.md @@ -20,10 +20,12 @@ export default { ### mode 创建历史记录的类型： -- **h5**，对应 [createWebHistory](https://next.router.vuejs.org/zh/api/#createwebhistory) +- **history**，对应 [createWebHistory](https://next.router.vuejs.org/zh/api/#createwebhistory) - **hash**，对应 [createWebHashHistory](https://next.router.vuejs.org/zh/api/#createWebHashHistory) - **memory**，对应 [createMemoryHistory](https://next.router.vuejs.org/zh/api/#createWebHashHistory) +默认是`hash`模式。 + ## 约定式路由 约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。 diff --git a/packages/fes-preset-built-in/src/plugins/misc/route/index.js b/packages/fes-preset-built-in/src/plugins/misc/route/index.js index 1d572c6b..c51e709e 100644 --- a/packages/fes-preset-built-in/src/plugins/misc/route/index.js +++ b/packages/fes-preset-built-in/src/plugins/misc/route/index.js @@ -265,7 +265,7 @@ export default function (api) { const absRuntimeFilePath = join(namespace, 'runtime.js'); const historyType = { - h5: 'createWebHistory', + history: 'createWebHistory', hash: 'createWebHashHistory', memory: 'createMemoryHistory' }; From 6dc8291f0b81ea480d7397ee3e31f4360c9c3884 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Tue, 23 Mar 2021 15:55:30 +0800 Subject: [PATCH 06/18] =?UTF-8?q?fix(plugin-qiankun):=20=20=E5=A4=84?= =?UTF-8?q?=E7=90=86public-path?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fes-plugin-qiankun/src/micro/index.js | 77 ++++++++++++------- 1 file changed, 51 insertions(+), 26 deletions(-) diff --git a/packages/fes-plugin-qiankun/src/micro/index.js b/packages/fes-plugin-qiankun/src/micro/index.js index 7deb76a6..38a00448 100644 --- a/packages/fes-plugin-qiankun/src/micro/index.js +++ b/packages/fes-plugin-qiankun/src/micro/index.js @@ -3,15 +3,14 @@ import address from 'address'; import { lodash } from '@umijs/utils'; import { readFileSync } from 'fs'; import { join } from 'path'; -// import { defaultMircoRootId } from '../common'; const namespace = 'plugin-qiankun/micro'; export function isSlaveEnable(api) { return ( !!api.userConfig?.qiankun?.micro - || lodash.isEqual(api.userConfig?.qiankun, {}) - || !!process.env.INITIAL_QIANKUN_MIRCO_OPTIONS + || lodash.isEqual(api.userConfig?.qiankun, {}) + || !!process.env.INITIAL_QIANKUN_MIRCO_OPTIONS ); } @@ -20,26 +19,28 @@ export default function (api) { enableBy: () => isSlaveEnable(api) }); - api.modifyDefaultConfig(memo => ({ - ...memo, - runtimePublicPath: true - })); + api.modifyDefaultConfig((memo) => { + const initialMicroOptions = { + devSourceMap: true, + ...JSON.parse(process.env.INITIAL_QIANKUN_MIRCO_OPTIONS || '{}'), + ...(memo.qiankun || {}).micro + }; + const modifiedDefaultConfig = { + ...memo, + runtimePublicPath: true, + qiankun: { + ...memo.qiankun, + slave: initialMicroOptions + } + }; - api.modifyPublicPathStr((publicPathStr) => { - const { runtimePublicPath } = api.config; - const qiankunConfig = api.config.qiankun || {}; - if (!qiankunConfig || !qiankunConfig.micro) { - return publicPathStr; - } - const { shouldNotModifyRuntimePublicPath } = qiankunConfig; - - if (runtimePublicPath === true && !shouldNotModifyRuntimePublicPath) { - return `window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "${ - api.config.publicPath || '/' - }"`; + const shouldNotModifyDefaultBase = api.userConfig.qiankun?.slave?.shouldNotModifyDefaultBase + ?? initialMicroOptions.shouldNotModifyDefaultBase; + if (!shouldNotModifyDefaultBase) { + modifiedDefaultConfig.base = `/${api.pkg.name}`; } - return publicPathStr; + return modifiedDefaultConfig; }); api.chainWebpack((config) => { @@ -56,11 +57,14 @@ export default function (api) { : process.env.HOST || 'localhost'; const protocol = process.env.HTTPS ? 'https' : 'http'; - // // 变更 webpack-dev-server websocket 默认监听地址 - // process.env.SOCKET_SERVER = `${protocol}://${localHostname}:${port}/`; + // TODO: 变更 webpack-dev-server websocket 默认监听地址 api.chainWebpack((memo, { webpack }) => { // 开启了 devSourceMap 配置，默认为 true - if (api.config.qiankun && api.config.qiankun.micro && api.config.qiankun.micro.devSourceMap !== false) { + if ( + api.config.qiankun + && api.config.qiankun.micro + && api.config.qiankun.micro.devSourceMap !== false + ) { // 禁用 devtool，启用 SourceMapDevToolPlugin memo.devtool(false); memo.plugin('source-map').use(webpack.SourceMapDevToolPlugin, [ @@ -79,22 +83,43 @@ export default function (api) { const absRuntimePath = join(namespace, 'runtime.js'); const absLifeclesPath = join(namespace, 'lifecycles.js'); const absMicroOptionsPath = join(namespace, 'slaveOptions.js'); + const absPublicPath = join(namespace, 'publicPath.js'); + + // 更改public path + api.addEntryImportsAhead(() => [{ source: `@@/${absPublicPath}` }]); api.onGenerateFiles(() => { api.writeTmpFile({ path: absRuntimePath, - content: readFileSync(join(__dirname, 'runtime/runtime.tpl'), 'utf-8') + content: readFileSync( + join(__dirname, 'runtime/runtime.tpl'), + 'utf-8' + ) }); api.writeTmpFile({ path: absLifeclesPath, - content: readFileSync(join(__dirname, 'runtime/lifecycles.tpl'), 'utf-8') + content: readFileSync( + join(__dirname, 'runtime/lifecycles.tpl'), + 'utf-8' + ) + }); + + api.writeTmpFile({ + path: absPublicPath, + content: ` + if (window.__POWERED_BY_QIANKUN__) { + __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; + } + ` }); api.writeTmpFile({ path: absMicroOptionsPath, content: ` - let options = ${JSON.stringify((api.config.qiankun || {}).micro || {})}; + let options = ${JSON.stringify( + (api.config.qiankun || {}).micro || {} + )}; export const getSlaveOptions = () => options; export const setSlaveOptions = (newOpts) => options = ({ ...options, ...newOpts }); ` From f179419757109325742a75deec16b008485c2ddb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Tue, 23 Mar 2021 20:41:53 +0800 Subject: [PATCH 07/18] =?UTF-8?q?feat(plugin-qiankun):=20=E4=B8=BB?= =?UTF-8?q?=E5=BA=94=E7=94=A8=E6=94=AF=E6=8C=81=E8=B7=AF=E7=94=B1=E4=B8=8A?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=BE=AE=E5=BA=94=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fes-plugin-layout/src/index.js | 1 - packages/fes-plugin-qiankun/src/main/index.js | 15 +++++ .../src/main/modifyRoutes.js | 58 +++++++++++++++++++ .../runtime/getMicroAppRouteComponent.tpl | 11 ++++ 4 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 packages/fes-plugin-qiankun/src/main/modifyRoutes.js create mode 100644 packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.tpl diff --git a/packages/fes-plugin-layout/src/index.js b/packages/fes-plugin-layout/src/index.js index 860ac017..99325149 100644 --- a/packages/fes-plugin-layout/src/index.js +++ b/packages/fes-plugin-layout/src/index.js @@ -79,7 +79,6 @@ export default (api) => { api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`); // 把BaseLayout插入到路由配置中，作为根路由 - // TODO: fes缺少修改路由API api.modifyRoutes(routes => [ { path: '/', diff --git a/packages/fes-plugin-qiankun/src/main/index.js b/packages/fes-plugin-qiankun/src/main/index.js index c3964f04..83161a81 100644 --- a/packages/fes-plugin-qiankun/src/main/index.js +++ b/packages/fes-plugin-qiankun/src/main/index.js @@ -1,6 +1,7 @@ import { readFileSync } from 'fs'; import { join } from 'path'; import { defaultMainRootId, defaultHistoryType } from '../constants'; +import modifyRoutes from './modifyRoutes'; const namespace = 'plugin-qiankun/main'; @@ -21,9 +22,12 @@ export default function (api) { mountElementId: defaultMainRootId })); + modifyRoutes({ api, namespace }); + const absMicroAppPath = join(namespace, 'MicroApp.js'); const absRuntimePath = join(namespace, 'runtime.js'); const absMasterOptionsPath = join(namespace, 'masterOptions.js'); + const absGetMicroAppRouteCompPath = join(namespace, 'getMicroAppRouteComponent.js'); api.onGenerateFiles(() => { api.writeTmpFile({ @@ -36,6 +40,10 @@ export default function (api) { content: readFileSync(join(__dirname, 'runtime/runtime.tpl'), 'utf-8') }); + api.writeTmpFile({ + path: absGetMicroAppRouteCompPath, + content: readFileSync(join(__dirname, 'runtime/getMicroAppRouteComponent.tpl'), 'utf-8') + }); const { main: options } = api.config?.qiankun || {}; const masterHistoryType = api.config?.router?.mode || defaultHistoryType; @@ -61,6 +69,13 @@ export default function (api) { } ]); + api.addPluginExports(() => [ + { + specifiers: ['getMicroAppRouteComponent'], + source: absGetMicroAppRouteCompPath + } + ]); + // const { registerRuntimeKeyInIndex = false } = options || {}; diff --git a/packages/fes-plugin-qiankun/src/main/modifyRoutes.js b/packages/fes-plugin-qiankun/src/main/modifyRoutes.js new file mode 100644 index 00000000..8a1ff4e0 --- /dev/null +++ b/packages/fes-plugin-qiankun/src/main/modifyRoutes.js @@ -0,0 +1,58 @@ +import { defaultHistoryType } from '../constants'; + +function getMicroApp(options) { + const { + microAppName, masterHistoryType, base, namespace, ...normalizedRouteProps + } = options; + return `(() => { +const { getMicroAppRouteComponent } = require('@@/${namespace}/getMicroAppRouteComponent'); +return getMicroAppRouteComponent({ appName: '${microAppName}', base: '${base}', masterHistoryType: '${masterHistoryType}', routeProps: ${JSON.stringify(normalizedRouteProps)} }) +})()`; +} + +function modifyRoutesWithAttachMode({ + routes, masterHistoryType, base, namespace +}) { + const patchRoutes = (_routes) => { + if (_routes.length) { + _routes.forEach((route) => { + if (route.meta && route.meta.microApp) { + route.component = getMicroApp({ + microAppName: route.meta.microApp, + masterHistoryType, + base, + namespace + }); + } + if (route.children?.length) { + modifyRoutesWithAttachMode({ + routes: route.children, + masterHistoryType, + base, + namespace + }); + } + }); + } + }; + + patchRoutes(routes); + + return routes; +} + +export default function modifyRoutes({ api, namespace }) { + api.modifyRoutes((routes) => { + const { router, base } = api.config; + const masterHistoryType = (router && router?.mode) || defaultHistoryType; + + modifyRoutesWithAttachMode({ + routes, + masterHistoryType, + base: base || '/', + namespace + }); + + return routes; + }); +} diff --git a/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.tpl b/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.tpl new file mode 100644 index 00000000..55b3776b --- /dev/null +++ b/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.tpl @@ -0,0 +1,11 @@ +import { MicroApp } from './MicroApp'; + +export function getMicroAppRouteComponent({ + appName, + base, + masterHistoryType, + routeProps +}) { + + return ; +} From d32006e61a7ca2de45fdad3b762a75325aa545ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Tue, 23 Mar 2021 21:26:37 +0800 Subject: [PATCH 08/18] =?UTF-8?q?chore(plugin-qiankun):=20=E5=8E=BB?= =?UTF-8?q?=E6=8E=89=E6=97=A0=E7=94=A8=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fes-plugin-qiankun/package.json | 2 +- packages/fes-plugin-qiankun/src/index.js | 8 -- packages/fes-plugin-qiankun/src/main/index.js | 132 ------------------ .../src/main/runtime/MicroApp.tpl | 77 ++++++---- .../fes-plugin-qiankun/src/micro/index.js | 104 -------------- 5 files changed, 47 insertions(+), 276 deletions(-) diff --git a/packages/fes-plugin-qiankun/package.json b/packages/fes-plugin-qiankun/package.json index a97831e4..b9fe443c 100644 --- a/packages/fes-plugin-qiankun/package.json +++ b/packages/fes-plugin-qiankun/package.json @@ -29,7 +29,7 @@ "dependencies": { "@umijs/utils": "3.3.3", "address": "^1.1.2", - "path-to-regexp": "^6.2.0", + "lodash": "^4.17.15", "qiankun": "2.3.4" }, "peerDependencies": { diff --git a/packages/fes-plugin-qiankun/src/index.js b/packages/fes-plugin-qiankun/src/index.js index c404883a..33f82ba1 100644 --- a/packages/fes-plugin-qiankun/src/index.js +++ b/packages/fes-plugin-qiankun/src/index.js @@ -1,7 +1,3 @@ -// import { join } from 'path'; - -// const namespace = 'plugin-qiankun'; - export default (api) => { api.describe({ key: 'qiankun', @@ -21,8 +17,4 @@ export default (api) => { require.resolve('./main'), require.resolve('./micro') ]); - - // const absRuntimeFilePath = join(namespace, 'runtime.js'); - - // api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`); }; diff --git a/packages/fes-plugin-qiankun/src/main/index.js b/packages/fes-plugin-qiankun/src/main/index.js index 83161a81..78c7da2a 100644 --- a/packages/fes-plugin-qiankun/src/main/index.js +++ b/packages/fes-plugin-qiankun/src/main/index.js @@ -75,136 +75,4 @@ export default function (api) { source: absGetMicroAppRouteCompPath } ]); - - - // const { registerRuntimeKeyInIndex = false } = options || {}; - - // api.addRuntimePlugin(() => require.resolve('./runtime')); - - // if (!registerRuntimeKeyInIndex) { - // api.addRuntimePluginKey(() => 'qiankun'); - // } - - // api.modifyDefaultConfig(config => ({ - // ...config, - // mountElementId: defaultMainRootId, - // disableGlobalVariables: true - // })); - - // // apps 可能在构建期为空 - // const { apps = [] } = options || {}; - // if (apps.length) { - // // 获取一组路由中以 basePath 为前缀的路由 - // const findRouteWithPrefix = (routes, basePath) => { - // for (const route of routes) { - // if (route.path && testPathWithPrefix(basePath, route.path)) { return route; } - - // if (route.routes && route.routes.length) { - // return findRouteWithPrefix(route.routes, basePath); - // } - // } - - // return null; - // }; - - // const modifyAppRoutes = () => { - // // TODO: fes缺少修改路由API - // api.modifyRoutes((routes) => { - // const { - // config: { history: mainHistory = defaultHistoryMode } - // } = api; - - // const newRoutes = routes.map((route) => { - // if (route.path === '/' && route.routes && route.routes.length) { - // apps.forEach(({ history: slaveHistory = 'history', base }) => { - // // 当子应用的 history mode 跟主应用一致时，为避免出现 404 手动为主应用创建一个 path 为 子应用 rule 的空 div 路由组件 - // if (slaveHistory === mainHistory) { - // const baseConfig = toArray(base); - - // baseConfig.forEach((basePath) => { - // const routeWithPrefix = findRouteWithPrefix(routes, basePath); - - // // 应用没有自己配置过 basePath 相关路由，则自动加入 mock 的路由 - // if (!routeWithPrefix) { - // route.routes.unshift({ - // path: basePath, - // exact: false, - // component: `() => { - // if (process.env.NODE_ENV === 'development') { - // console.log('${basePath} 404 mock rendered'); - // } - - // return React.createElement('div'); - // }` - // }); - // } else { - // // 若用户已配置过跟应用 base 重名的路由，则强制将该路由 exact 设置为 false，目的是兼容之前遗留的错误用法的场景 - // routeWithPrefix.exact = false; - // } - // }); - // } - // }); - // } - - // return route; - // }); - - // return newRoutes; - // }); - // }; - - // modifyAppRoutes(); - // } - - // const rootExportsFile = join(api.paths.absSrcPath, 'rootExports.js'); - - // api.addTmpGenerateWatcherPaths(() => rootExportsFile); - - // const namespace = 'plugin-qiankun'; - // const absCoreFilePath = join(namespace, 'qiankunDefer.js'); - - // api.onGenerateFiles(() => { - // const { - // config: { history = defaultHistoryMode } - // } = api; - // const rootExports = `window.g_rootExports = ${existsSync(rootExportsFile) ? 'require(\'@/rootExports\')' : '{}'};`.trim(); - - // api.writeTmpFile({ - // path: `${namespace}/qiankunRootExports.js`, - // content: rootExports - // }); - - // api.writeTmpFile({ - // path: `${namespace}/subAppsConfig.json`, - // content: JSON.stringify({ - // mainHistory: history, - // ...options - // }) - // }); - - // api.writeTmpFile({ - // path: `${namespace}/qiankunDefer.js`, - // content: ` - // class Deferred { - // constructor() { - // this.promise = new Promise(resolve => this.resolve = resolve); - // } - // } - // export const deferred = new Deferred(); - // export const qiankunStart = deferred.resolve; - // `.trim() - // }); - - // api.writeTmpFile({ - // path: `${namespace}/runtime.js`, - // content: readFileSync(join(__dirname, 'runtime.js'), 'utf-8') - // }); - // }); - - // api.addPluginExports(() => [ - // { - // specifiers: ['qiankunStart'], - // source: absCoreFilePath - // } - // ]); } diff --git a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl index 3c275925..08f8072e 100644 --- a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl +++ b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl @@ -4,14 +4,15 @@ import { watch, computed, onBeforeUnmount, - onMounted -} from 'vue'; -import { loadMicroApp } from 'qiankun'; + onMounted, +} from "vue"; +import { loadMicroApp } from "qiankun"; +import mergeWith from "lodash/mergeWith"; // eslint-disable-next-line import/extensions -import { getMasterOptions } from './masterOptions'; +import { getMasterOptions } from "./masterOptions"; function unmountMicroApp(microApp) { - if (microApp) { + if (microApp && microApp.mountPromise) { microApp.mountPromise.then(() => microApp.unmount()); } } @@ -20,8 +21,8 @@ export const MicroApp = defineComponent({ props: { name: { type: String, - required: true - } + required: true, + }, }, setup(props) { const { @@ -31,37 +32,48 @@ export const MicroApp = defineComponent({ ...globalSettings } = getMasterOptions(); + const { + name, + settings: settingsFromProps = {}, + loader, + lifeCycles, + className, + ...propsFromParams + } = props; + const containerRef = ref(null); const microAppRef = ref(); const updatingPromise = ref(); const updatingTimestamp = ref(Date.now()); - const appConfigRef = computed(() => { - const _appConfig = apps.find(app => app.name === props.name); - if (!_appConfig) { + const getAppConfig = () => { + const appConfig = apps.find((app) => app.name === name); + if (!appConfig) { throw new Error( - `[@fesjs/plugin-qiankun]: Can not find the configuration of ${props.name} app!` + `[@fesjs/plugin-qiankun]: Can not find the configuration of ${name} app!` ); } - return _appConfig; - }); + return appConfig; + }; const loadApp = () => { - const appConfig = appConfigRef.value; + const appConfig = getAppConfig(); + const { name, entry, props: propsFromConfig = {} } = appConfig; // 加载新的 microAppRef.value = loadMicroApp( { - name: appConfig.name, - entry: appConfig.entry, + name: name, + entry: entry, container: containerRef.value, - props: { ...appConfig.props } + props: { ...propsFromConfig, ...propsFromParams }, }, { ...globalSettings, - ...(props.settings || {}), - globalLifeCycles, - lifeCycles: props.lifeCycles - } + ...settingsFromProps, + }, + mergeWith({}, globalLifeCycles, lifeCycles, (v1, v2) => + concat(v1 ?? [], v2 ?? []) + ) ); }; @@ -73,7 +85,7 @@ export const MicroApp = defineComponent({ unmountMicroApp(microAppRef.value); }); - watch(appConfigRef, () => { + watch(props, () => { unmountMicroApp(microAppRef.value); loadApp(); @@ -81,7 +93,8 @@ export const MicroApp = defineComponent({ watch(microAppRef, () => { const microApp = microAppRef.value; - const appConfig = appConfigRef.value; + const appConfig = getAppConfig(); + const { props: propsFromConfig = {} } = appConfig; if (microApp) { if (!updatingPromise.value) { // 初始化 updatingPromise 为 microApp.mountPromise，从而确保后续更新是在应用 mount 完成之后 @@ -89,12 +102,13 @@ export const MicroApp = defineComponent({ } else { // 确保 microApp.update 调用是跟组件状态变更顺序一致的，且后一个微应用更新必须等待前一个更新完成 updatingPromise.value = updatingPromise.value.then(() => { - const canUpdate = app => app?.update && app.getStatus() === 'MOUNTED'; + const canUpdate = (app) => + app?.update && app.getStatus() === "MOUNTED"; if (canUpdate(microApp)) { - if (process.env.NODE_ENV === 'development') { + if (process.env.NODE_ENV === "development") { if ( - Date.now() - updatingTimestamp.value - < 200 + Date.now() - updatingTimestamp.value < + 200 ) { console.warn( `[@fesjs/plugin-qiankun] It seems like microApp ${props.name} is updating too many times in a short time(200ms), you may need to do some optimization to avoid the unnecessary re-rendering.` @@ -102,7 +116,7 @@ export const MicroApp = defineComponent({ } console.info( - `[@umijs/plugin-qiankun] MicroApp ${props.name} is updating with props: `, + `[@fesjs/plugin-qiankun] MicroApp ${props.name} is updating with props: `, props ); updatingTimestamp.value = Date.now(); @@ -110,7 +124,8 @@ export const MicroApp = defineComponent({ // 返回 microApp.update 形成链式调用 return microApp.update({ - ...appConfig.props + ...propsFromConfig, + ...propsFromParams, }); } }); @@ -118,6 +133,6 @@ export const MicroApp = defineComponent({ } }); - return () =>
; - } + return () =>
; + }, }); diff --git a/packages/fes-plugin-qiankun/src/micro/index.js b/packages/fes-plugin-qiankun/src/micro/index.js index 38a00448..31c22d59 100644 --- a/packages/fes-plugin-qiankun/src/micro/index.js +++ b/packages/fes-plugin-qiankun/src/micro/index.js @@ -144,108 +144,4 @@ if (!window.__POWERED_BY_QIANKUN__) { } ` ); - - // const { registerRuntimeKeyInIndex = false } = options || {}; - - // api.addRuntimePlugin(() => require.resolve('./runtime')); - - // // if (!registerRuntimeKeyInIndex) { - // // api.addRuntimePluginKey(() => 'qiankun'); - // // } - - // const lifecyclePath = require.resolve('./lifecycles'); - // const { name: pkgName } = require(join(api.cwd, 'package.json')); - - // // TODO: fes缺少修改默认配置API - // api.modifyDefaultConfig(memo => Object.assign(Object.assign({}, memo), { - // disableGlobalVariables: true, - // base: `/${pkgName}`, - // mountElementId: defaultMircoRootId, - // // 默认开启 runtimePublicPath，避免出现 dynamic import 场景子应用资源地址出问题 - // runtimePublicPath: true - // })); - - // if (api.service.userConfig.runtimePublicPath !== false) { - // // TODO: fes缺少修改 publicPath API - // api.modifyPublicPathStr( - // () => `window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "${ - // // 开发阶段 publicPath 配置无效，默认为 / - // process.env.NODE_ENV !== 'development' - // ? api.config.publicPath || '/' - // : '/' - // }"` - // ); - // } - - // api.chainWebpack((config) => { - // assert(api.pkg.name, 'You should have name in package.json'); - // config.output.libraryTarget('umd').library(`${api.pkg.name}-[name]`); - // }); - - // // bundle 添加 entry 标记 - // // TODO: fes缺少修改HTML API - // api.modifyHTML(($) => { - // $('script').each((_, el) => { - // const scriptEl = $(el); - // const umiEntryJs = /\/?umi(\.\w+)?\.js$/g; - // const scriptElSrc = scriptEl.attr('src'); - - // if ( - // umiEntryJs.test( - // scriptElSrc !== null && scriptElSrc !== 0 ? scriptElSrc : '' - // ) - // ) { - // scriptEl.attr('entry', ''); - // } - // }); - // return $; - // }); - - // api.onGenerateFiles(() => { - // api.writeTmpFile({ - // path: `${namespace}/qiankunContext.js`, - // content: ` - // import { createApp, h } from 'vue'; - // export const Context = createContext(null); - // export function useRootExports() { - // return useContext(Context); - // }; - // `.trim() - // }); - - // api.writeTmpFile({ - // path: `${namespace}/runtime.js`, - // content: readFileSync(join(__dirname, 'runtime.js'), 'utf-8') - // }); - - // api.writeTmpFile({ - // path: `${namespace}/lifecycles.js`, - // content: readFileSync(join(__dirname, 'lifecycles.js'), 'utf-8') - // }); - // }); - - // api.addPluginExports(() => [ - // { - // specifiers: ['useRootExports'], - // source: `${namespace}/qiankunContext.js` - // } - // ]); - - // api.addEntryImports(() => ({ - // source: lifecyclePath, - // specifier: - // '{ genMount as qiankun_genMount, genBootstrap as qiankun_genBootstrap, genUnmount as qiankun_genUnmount }' - // })); - - // api.addEntryCode( - // () => ` - // export const bootstrap = qiankun_genBootstrap(Promise.resolve(), clientRender); - // export const mount = qiankun_genMount(); - // export const unmount = qiankun_genUnmount('${api.config.mountElementId}'); - - // if (!window.__POWERED_BY_QIANKUN__) { - // bootstrap().then(mount); - // } - // ` - // ); } From d5c267f5d134f1bb3263e9c9093fbfb5e65cb5ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Wed, 24 Mar 2021 15:25:51 +0800 Subject: [PATCH 09/18] =?UTF-8?q?fix:=20=20=E4=BF=AE=E5=A4=8DbeforRender?= =?UTF-8?q?=E4=B8=ADloading=E5=8A=A8=E7=94=BB=E6=9C=AA=E6=AD=A3=E7=A1=AE?= =?UTF-8?q?=E6=8C=82=E8=BD=BD=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl b/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl index 8c809211..927a6382 100644 --- a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl +++ b/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl @@ -74,7 +74,7 @@ const beforeRender = async () => { let initialState = {}; if (typeof beforeRenderConfig.action === "function") { const app = createApp(beforeRenderConfig.loading); - app.mount("#app"); + app.mount('{{{ rootElement }}}'); try { initialState = await beforeRenderConfig.action(); } catch(e){ From 8cb00db93cd490d2a8abe850e79a0d9d70a6b4fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Wed, 24 Mar 2021 15:27:41 +0800 Subject: [PATCH 10/18] =?UTF-8?q?feat(plugin-qiankun):=20=20=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=BE=AE=E5=BA=94=E7=94=A8=E4=BD=BF=E7=94=A8useModel(?= =?UTF-8?q?'@@qiankunStateFromMain')=E8=8E=B7=E5=8F=96=E4=B8=BB=E5=BA=94?= =?UTF-8?q?=E7=94=A8=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fes-plugin-qiankun/src/constants.js | 2 + .../src/main/runtime/MicroApp.tpl | 149 ++++++++++-------- .../src/main/runtime/qiankunModel.tpl | 11 ++ .../fes-plugin-qiankun/src/micro/index.js | 33 +++- .../src/micro/runtime/lifecycles.tpl | 9 ++ .../src/micro/runtime/qiankunModel.tpl | 11 ++ 6 files changed, 150 insertions(+), 65 deletions(-) create mode 100644 packages/fes-plugin-qiankun/src/main/runtime/qiankunModel.tpl create mode 100644 packages/fes-plugin-qiankun/src/micro/runtime/qiankunModel.tpl diff --git a/packages/fes-plugin-qiankun/src/constants.js b/packages/fes-plugin-qiankun/src/constants.js index 51451582..1bd6bbc5 100644 --- a/packages/fes-plugin-qiankun/src/constants.js +++ b/packages/fes-plugin-qiankun/src/constants.js @@ -1,2 +1,4 @@ export const defaultMainRootId = '#root-master'; export const defaultHistoryType = 'hash'; +export const qiankunStateForMicroModelNamespace = '@@qiankunStateForMicro'; +export const qiankunStateFromMainModelNamespace = '@@qiankunStateFromMain'; diff --git a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl index 08f8072e..43c21cd0 100644 --- a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl +++ b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl @@ -23,6 +23,9 @@ export const MicroApp = defineComponent({ type: String, required: true, }, + settings: Object, + lifeCycles: Object, + className: String, }, setup(props) { const { @@ -32,51 +35,110 @@ export const MicroApp = defineComponent({ ...globalSettings } = getMasterOptions(); - const { - name, - settings: settingsFromProps = {}, - loader, - lifeCycles, - className, - ...propsFromParams - } = props; - + // 挂载节点 const containerRef = ref(null); const microAppRef = ref(); - const updatingPromise = ref(); - const updatingTimestamp = ref(Date.now()); + const updatingPromiseRef = ref(); + const updatingTimestampRef = ref(Date.now()); - const getAppConfig = () => { - const appConfig = apps.find((app) => app.name === name); + const appConfigRef = computed(() => { + const appConfig = apps.find((app) => app.name === props.name); if (!appConfig) { throw new Error( - `[@fesjs/plugin-qiankun]: Can not find the configuration of ${name} app!` + `[@fesjs/plugin-qiankun]: Can not find the configuration of ${props.name} app!` ); } return appConfig; - }; + }); + const propsFromConfigRef = computed(() => { + const appConfig = appConfigRef.value; + if (appConfig) { + return appConfig.props; + } + return {}; + }); + + const propsFromParamsRef = computed(() => { + const { + name, + settings, + lifeCycles, + className, + ...propsFromParams + } = props; + return propsFromParams || {}; + }); + + // 只有当name变化时才重新加载新的子应用 const loadApp = () => { - const appConfig = getAppConfig(); - const { name, entry, props: propsFromConfig = {} } = appConfig; + const appConfig = appConfigRef.value; + const { name, entry } = appConfig; // 加载新的 microAppRef.value = loadMicroApp( { name: name, entry: entry, container: containerRef.value, - props: { ...propsFromConfig, ...propsFromParams }, + props: { + ...propsFromConfigRef.value, + ...propsFromParamsRef.value, + }, }, { ...globalSettings, - ...settingsFromProps, + ...(props.settings || {}), }, - mergeWith({}, globalLifeCycles, lifeCycles, (v1, v2) => + mergeWith({}, globalLifeCycles || {}, props.lifeCycles || {}, (v1, v2) => concat(v1 ?? [], v2 ?? []) ) ); }; + // 当参数变化时，update子应用 + const updateApp = () => { + const microApp = microAppRef.value; + if (microApp) { + if (!updatingPromiseRef.value) { + // 初始化 updatingPromiseRef 为 microApp.mountPromise，从而确保后续更新是在应用 mount 完成之后 + updatingPromiseRef.value = microApp.mountPromise; + } else { + // 确保 microApp.update 调用是跟组件状态变更顺序一致的，且后一个微应用更新必须等待前一个更新完成 + updatingPromiseRef.value = updatingPromiseRef.value.then( + () => { + const canUpdate = (app) => + app?.update && app.getStatus() === "MOUNTED"; + if (canUpdate(microApp)) { + if (process.env.NODE_ENV === "development") { + if ( + Date.now() - + updatingTimestampRef.value < + 200 + ) { + console.warn( + `[@fesjs/plugin-qiankun] It seems like microApp ${props.name} is updating too many times in a short time(200ms), you may need to do some optimization to avoid the unnecessary re-rendering.` + ); + } + + console.info( + `[@fesjs/plugin-qiankun] MicroApp ${props.name} is updating with props: `, + props + ); + updatingTimestampRef.value = Date.now(); + } + + // 返回 microApp.update 形成链式调用 + return microApp.update({ + ...propsFromConfigRef.value, + ...propsFromParamsRef.value, + }); + } + } + ); + } + } + }; + onMounted(() => { loadApp(); }); @@ -85,54 +147,15 @@ export const MicroApp = defineComponent({ unmountMicroApp(microAppRef.value); }); - watch(props, () => { + watch(appConfigRef, () => { unmountMicroApp(microAppRef.value); - loadApp(); }); - watch(microAppRef, () => { - const microApp = microAppRef.value; - const appConfig = getAppConfig(); - const { props: propsFromConfig = {} } = appConfig; - if (microApp) { - if (!updatingPromise.value) { - // 初始化 updatingPromise 为 microApp.mountPromise，从而确保后续更新是在应用 mount 完成之后 - updatingPromise.value = microApp.mountPromise; - } else { - // 确保 microApp.update 调用是跟组件状态变更顺序一致的，且后一个微应用更新必须等待前一个更新完成 - updatingPromise.value = updatingPromise.value.then(() => { - const canUpdate = (app) => - app?.update && app.getStatus() === "MOUNTED"; - if (canUpdate(microApp)) { - if (process.env.NODE_ENV === "development") { - if ( - Date.now() - updatingTimestamp.value < - 200 - ) { - console.warn( - `[@fesjs/plugin-qiankun] It seems like microApp ${props.name} is updating too many times in a short time(200ms), you may need to do some optimization to avoid the unnecessary re-rendering.` - ); - } - - console.info( - `[@fesjs/plugin-qiankun] MicroApp ${props.name} is updating with props: `, - props - ); - updatingTimestamp.value = Date.now(); - } - - // 返回 microApp.update 形成链式调用 - return microApp.update({ - ...propsFromConfig, - ...propsFromParams, - }); - } - }); - } - } + watch([propsFromConfigRef, propsFromParamsRef], () => { + updateApp(); }); - return () =>
; + return () =>
; }, }); diff --git a/packages/fes-plugin-qiankun/src/main/runtime/qiankunModel.tpl b/packages/fes-plugin-qiankun/src/main/runtime/qiankunModel.tpl new file mode 100644 index 00000000..7348a0b5 --- /dev/null +++ b/packages/fes-plugin-qiankun/src/main/runtime/qiankunModel.tpl @@ -0,0 +1,11 @@ + +import { reactive } from 'vue'; + +let initState; +const setModelState = (val) => { + initState = val; +}; + +export default () => reactive(initState); + +export { setModelState }; diff --git a/packages/fes-plugin-qiankun/src/micro/index.js b/packages/fes-plugin-qiankun/src/micro/index.js index 31c22d59..2540031e 100644 --- a/packages/fes-plugin-qiankun/src/micro/index.js +++ b/packages/fes-plugin-qiankun/src/micro/index.js @@ -3,6 +3,7 @@ import address from 'address'; import { lodash } from '@umijs/utils'; import { readFileSync } from 'fs'; import { join } from 'path'; +import { qiankunStateFromMainModelNamespace } from '../constants'; const namespace = 'plugin-qiankun/micro'; @@ -15,6 +16,10 @@ export function isSlaveEnable(api) { } export default function (api) { + const { + utils: { Mustache } + } = api; + api.describe({ enableBy: () => isSlaveEnable(api) }); @@ -84,11 +89,25 @@ export default function (api) { const absLifeclesPath = join(namespace, 'lifecycles.js'); const absMicroOptionsPath = join(namespace, 'slaveOptions.js'); const absPublicPath = join(namespace, 'publicPath.js'); + const absModelPath = join(namespace, 'qiankunModel.js'); // 更改public path api.addEntryImportsAhead(() => [{ source: `@@/${absPublicPath}` }]); + api.register({ + key: 'addExtraModels', + fn: () => { + const HAS_PLUGIN_MODEL = api.hasPlugins(['@fesjs/plugin-model']); + return HAS_PLUGIN_MODEL ? [{ + absPath: `@@/${absModelPath}`, + namespace: qiankunStateFromMainModelNamespace + }] : []; + } + }); + api.onGenerateFiles(() => { + const HAS_PLUGIN_MODEL = api.hasPlugins(['@fesjs/plugin-model']); + api.writeTmpFile({ path: absRuntimePath, content: readFileSync( @@ -99,10 +118,12 @@ export default function (api) { api.writeTmpFile({ path: absLifeclesPath, - content: readFileSync( + content: Mustache.render(readFileSync( join(__dirname, 'runtime/lifecycles.tpl'), 'utf-8' - ) + ), { + HAS_PLUGIN_MODEL + }) }); api.writeTmpFile({ @@ -110,6 +131,7 @@ export default function (api) { content: ` if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; + window.public_path = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } ` }); @@ -124,6 +146,13 @@ export default function (api) { export const setSlaveOptions = (newOpts) => options = ({ ...options, ...newOpts }); ` }); + + if (HAS_PLUGIN_MODEL) { + api.writeTmpFile({ + path: absModelPath, + content: readFileSync(join(__dirname, 'runtime/qiankunModel.tpl'), 'utf-8') + }); + } }); api.addEntryImports(() => ({ diff --git a/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl b/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl index 7781329f..4c71315d 100644 --- a/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl +++ b/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl @@ -1,4 +1,7 @@ import { plugin, ApplyPluginsType } from '@@/core/coreExports'; +{{#HAS_PLUGIN_MODEL}} +import { setModelState } from './qiankunModel'; +{{/HAS_PLUGIN_MODEL}} const defer = {}; defer.promise = new Promise((resolve) => { @@ -47,6 +50,9 @@ export function genMount() { return async (props) => { // props 有值时说明应用是通过 lifecycle 被主应用唤醒的，而不是独立运行时自己 mount if (typeof props !== 'undefined') { +{{#HAS_PLUGIN_MODEL}} + setModelState(props); +{{/HAS_PLUGIN_MODEL}} const slaveRuntime = getSlaveRuntime(); if (slaveRuntime.mount) { await slaveRuntime.mount(props); @@ -68,6 +74,9 @@ export function genMount() { export function genUpdate() { return async (props) => { +{{#HAS_PLUGIN_MODEL}} + setModelState(props); +{{/HAS_PLUGIN_MODEL}} const slaveRuntime = await getSlaveRuntime(); if (slaveRuntime.update) { await slaveRuntime.update(props); diff --git a/packages/fes-plugin-qiankun/src/micro/runtime/qiankunModel.tpl b/packages/fes-plugin-qiankun/src/micro/runtime/qiankunModel.tpl new file mode 100644 index 00000000..7348a0b5 --- /dev/null +++ b/packages/fes-plugin-qiankun/src/micro/runtime/qiankunModel.tpl @@ -0,0 +1,11 @@ + +import { reactive } from 'vue'; + +let initState; +const setModelState = (val) => { + initState = val; +}; + +export default () => reactive(initState); + +export { setModelState }; From 1394f72f6eb39154e9a50f4daf2ba53131e866c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Wed, 24 Mar 2021 18:56:41 +0800 Subject: [PATCH 11/18] =?UTF-8?q?fix(plugin-layout):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=88=A4=E6=96=ADicon=E4=B8=BA=E9=9D=9E=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fes-plugin-layout/src/node/helper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fes-plugin-layout/src/node/helper.js b/packages/fes-plugin-layout/src/node/helper.js index 6065365d..a14a01e6 100644 --- a/packages/fes-plugin-layout/src/node/helper.js +++ b/packages/fes-plugin-layout/src/node/helper.js @@ -40,7 +40,7 @@ export const fillMenuByRoute = (menuConfig, routeConfig, dep = 0) => { if (menu.icon) { const icon = menu.icon; const urlReg = /^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/; - if (!(urlReg.test(icon) || icon.includes('.svg'))) { + if (typeof icon === 'string' && !((urlReg.test(icon) || icon.includes('.svg')))) { if (!allIcons[icon]) { menu.icon = { type: 'icon', From d31e4d761393f0bbee96c91102568876b7c9de63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Wed, 24 Mar 2021 18:57:53 +0800 Subject: [PATCH 12/18] =?UTF-8?q?feat(plugin-qiankun):=20=20=E4=B8=BB?= =?UTF-8?q?=E5=BA=94=E7=94=A8=E9=80=9A=E8=BF=87model=E8=B7=9F=E5=AD=90?= =?UTF-8?q?=E5=BA=94=E7=94=A8=E9=80=9A=E8=AE=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fes-plugin-qiankun/src/constants.js | 4 +- packages/fes-plugin-qiankun/src/main/index.js | 47 ++++++++++++++++--- .../src/main/runtime/MicroApp.tpl | 34 ++++++++------ 3 files changed, 62 insertions(+), 23 deletions(-) diff --git a/packages/fes-plugin-qiankun/src/constants.js b/packages/fes-plugin-qiankun/src/constants.js index 1bd6bbc5..3d0e6263 100644 --- a/packages/fes-plugin-qiankun/src/constants.js +++ b/packages/fes-plugin-qiankun/src/constants.js @@ -1,4 +1,4 @@ export const defaultMainRootId = '#root-master'; export const defaultHistoryType = 'hash'; -export const qiankunStateForMicroModelNamespace = '@@qiankunStateForMicro'; -export const qiankunStateFromMainModelNamespace = '@@qiankunStateFromMain'; +export const qiankunStateForMicroModelNamespace = 'qiankunStateForMicro'; +export const qiankunStateFromMainModelNamespace = 'qiankunStateFromMain'; diff --git a/packages/fes-plugin-qiankun/src/main/index.js b/packages/fes-plugin-qiankun/src/main/index.js index 78c7da2a..2caea696 100644 --- a/packages/fes-plugin-qiankun/src/main/index.js +++ b/packages/fes-plugin-qiankun/src/main/index.js @@ -1,6 +1,10 @@ -import { readFileSync } from 'fs'; +import { readFileSync, existsSync } from 'fs'; import { join } from 'path'; -import { defaultMainRootId, defaultHistoryType } from '../constants'; +import { + defaultMainRootId, + defaultHistoryType, + qiankunStateForMicroModelNamespace +} from '../constants'; import modifyRoutes from './modifyRoutes'; const namespace = 'plugin-qiankun/main'; @@ -8,11 +12,15 @@ const namespace = 'plugin-qiankun/main'; export function isMasterEnable(api) { return ( !!api.userConfig?.qiankun?.main - || !!process.env.INITIAL_QIANKUN_MAIN_OPTIONS + || !!process.env.INITIAL_QIANKUN_MAIN_OPTIONS ); } export default function (api) { + const { + utils: { Mustache, winPath } + } = api; + api.describe({ enableBy: () => isMasterEnable(api) }); @@ -27,22 +35,47 @@ export default function (api) { const absMicroAppPath = join(namespace, 'MicroApp.js'); const absRuntimePath = join(namespace, 'runtime.js'); const absMasterOptionsPath = join(namespace, 'masterOptions.js'); - const absGetMicroAppRouteCompPath = join(namespace, 'getMicroAppRouteComponent.js'); + const absGetMicroAppRouteCompPath = join( + namespace, + 'getMicroAppRouteComponent.js' + ); api.onGenerateFiles(() => { + const HAS_PLUGIN_MODEL = api.hasPlugins(['@fesjs/plugin-model']); api.writeTmpFile({ path: absMicroAppPath, - content: readFileSync(join(__dirname, 'runtime/MicroApp.tpl'), 'utf-8') + content: Mustache.render( + readFileSync(join(__dirname, 'runtime/MicroApp.tpl'), 'utf-8'), + { + qiankunStateForMicroModelNamespace, + HAS_PLUGIN_MODEL: + HAS_PLUGIN_MODEL + && existsSync( + winPath( + join( + api.paths.absSrcPath, + 'models/qiankunStateForMicro.js' + ) + ) + ) + } + ) }); api.writeTmpFile({ path: absRuntimePath, - content: readFileSync(join(__dirname, 'runtime/runtime.tpl'), 'utf-8') + content: readFileSync( + join(__dirname, 'runtime/runtime.tpl'), + 'utf-8' + ) }); api.writeTmpFile({ path: absGetMicroAppRouteCompPath, - content: readFileSync(join(__dirname, 'runtime/getMicroAppRouteComponent.tpl'), 'utf-8') + content: readFileSync( + join(__dirname, 'runtime/getMicroAppRouteComponent.tpl'), + 'utf-8' + ) }); const { main: options } = api.config?.qiankun || {}; diff --git a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl index 43c21cd0..45514077 100644 --- a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl +++ b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl @@ -10,6 +10,9 @@ import { loadMicroApp } from "qiankun"; import mergeWith from "lodash/mergeWith"; // eslint-disable-next-line import/extensions import { getMasterOptions } from "./masterOptions"; +{{#HAS_PLUGIN_MODEL}} +import { useModel } from '@@/core/pluginExports'; +{{/HAS_PLUGIN_MODEL}} function unmountMicroApp(microApp) { if (microApp && microApp.mountPromise) { @@ -27,7 +30,7 @@ export const MicroApp = defineComponent({ lifeCycles: Object, className: String, }, - setup(props) { + setup(props, { attrs }) { const { masterHistoryType, apps = [], @@ -35,6 +38,14 @@ export const MicroApp = defineComponent({ ...globalSettings } = getMasterOptions(); +{{#HAS_PLUGIN_MODEL}} + // 约定使用 src/models/qiankunStateForMicro 中的数据作为主应用透传给微应用的 props，优先级高于 propsFromConfig + const stateForSlave = useModel('{{{qiankunStateForMicroModelNamespace}}}'); +{{/HAS_PLUGIN_MODEL}} +{{^HAS_PLUGIN_MODEL}} + const stateForSlave = reactive({}); +{{/HAS_PLUGIN_MODEL}} + // 挂载节点 const containerRef = ref(null); const microAppRef = ref(); @@ -59,16 +70,7 @@ export const MicroApp = defineComponent({ return {}; }); - const propsFromParamsRef = computed(() => { - const { - name, - settings, - lifeCycles, - className, - ...propsFromParams - } = props; - return propsFromParams || {}; - }); + const propsFromParams = attrs; // 只有当name变化时才重新加载新的子应用 const loadApp = () => { @@ -82,7 +84,8 @@ export const MicroApp = defineComponent({ container: containerRef.value, props: { ...propsFromConfigRef.value, - ...propsFromParamsRef.value, + ...stateForSlave, + ...propsFromParams, }, }, { @@ -130,7 +133,8 @@ export const MicroApp = defineComponent({ // 返回 microApp.update 形成链式调用 return microApp.update({ ...propsFromConfigRef.value, - ...propsFromParamsRef.value, + ...stateForSlave, + ...propsFromParams, }); } } @@ -152,7 +156,9 @@ export const MicroApp = defineComponent({ loadApp(); }); - watch([propsFromConfigRef, propsFromParamsRef], () => { + watch(()=>{ + return {...{}, ...propsFromConfigRef.value, ...stateForSlave, ...propsFromParams} + }, () => { updateApp(); }); From 444ac52e93818ca76cc82c184f428741f1920e13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Wed, 24 Mar 2021 19:36:51 +0800 Subject: [PATCH 13/18] =?UTF-8?q?fix:=20=20mountElementId=E6=94=B9?= =?UTF-8?q?=E4=B8=BAapp=EF=BC=8C=E4=B8=8D=E5=B8=A6#?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fes-plugin-qiankun/src/constants.js | 2 +- .../src/main/runtime/runtime.tpl | 85 ------------------- .../fes-plugin-qiankun/src/micro/index.js | 4 +- .../src/micro/runtime/runtime.tpl | 12 --- .../plugins/commands/webpackConfig/html.js | 6 +- .../commands/webpackConfig/index-default.html | 2 +- .../src/plugins/features/mountElementId.js | 2 +- .../src/plugins/generateFiles/fes/index.js | 2 +- 8 files changed, 9 insertions(+), 106 deletions(-) diff --git a/packages/fes-plugin-qiankun/src/constants.js b/packages/fes-plugin-qiankun/src/constants.js index 3d0e6263..92f19f5b 100644 --- a/packages/fes-plugin-qiankun/src/constants.js +++ b/packages/fes-plugin-qiankun/src/constants.js @@ -1,4 +1,4 @@ -export const defaultMainRootId = '#root-master'; +export const defaultMainRootId = 'root-master'; export const defaultHistoryType = 'hash'; export const qiankunStateForMicroModelNamespace = 'qiankunStateForMicro'; export const qiankunStateFromMainModelNamespace = 'qiankunStateFromMain'; diff --git a/packages/fes-plugin-qiankun/src/main/runtime/runtime.tpl b/packages/fes-plugin-qiankun/src/main/runtime/runtime.tpl index 0beb6f37..e69de29b 100644 --- a/packages/fes-plugin-qiankun/src/main/runtime/runtime.tpl +++ b/packages/fes-plugin-qiankun/src/main/runtime/runtime.tpl @@ -1,85 +0,0 @@ -// import { deferred } from '@@/plugin-qiankun/qiankunDefer.js'; -// import '@@/plugin-qiankun/qiankunRootExports.js'; -// import subAppConfig from '@@/plugin-qiankun/subAppsConfig.json'; -// import { registerMicroApps, start } from 'qiankun'; -// import { createApp, h } from 'vue'; -// import { plugin, ApplyPluginsType } from '@@/core/coreExports'; -// import { defaultMountContainerId, testPathWithPrefix, toArray } from '../common'; - -// async function getMasterRuntime() { -// const config = plugin.applyPlugins({ -// key: 'qiankun', -// type: ApplyPluginsType.modify, -// initialValue: {}, -// async: true -// }); -// const { master } = config; -// return master || config; -// } - -// export async function render(oldRender) { -// oldRender(); -// function isAppActive(location, history, base) { -// const baseConfig = toArray(base); -// switch (history.type || history) { -// case 'hash': -// return baseConfig.some(pathPrefix => testPathWithPrefix(`#${pathPrefix}`, location.hash)); -// case 'browser': -// return baseConfig.some(pathPrefix => testPathWithPrefix(pathPrefix, location.pathname)); -// default: -// return false; -// } -// } -// const runtimeConfig = await getMasterRuntime(); -// const { -// apps, jsSandbox = false, prefetch = true, defer = false, lifeCycles, masterHistory, ...otherConfigs -// } = { -// ...subAppConfig, -// ...runtimeConfig -// }; - -// assert(apps && apps.length, 'sub apps must be config when using fes-plugin-qiankun'); - -// registerMicroApps(apps.map(({ -// name, entry, base, history = masterHistory, mountElementId = defaultMountContainerId, props -// }) => ({ -// name, -// entry, -// activeRule: location => isAppActive(location, history, base), -// render: ({ appContent, loading }) => { -// if (process.env.NODE_ENV === 'development') { -// console.info(`app ${name} loading ${loading}`); -// } -// if (mountElementId) { -// const container = document.getElementById(mountElementId); -// if (container) { -// const subApp = { -// setup() { - -// }, -// render() { -// h('div', { -// dangerouslySetInnerHTML: { -// __html: appContent -// } -// }); -// } -// }; -// const app = createApp(); -// app.mount(subApp, container); -// } -// } -// }, -// props: { -// base, -// history, -// ...props -// } -// })), lifeCycles); - -// if (defer) { -// await deferred.promise; -// } - -// start({ jsSandbox, prefetch, ...otherConfigs }); -// } diff --git a/packages/fes-plugin-qiankun/src/micro/index.js b/packages/fes-plugin-qiankun/src/micro/index.js index 2540031e..1945e4f7 100644 --- a/packages/fes-plugin-qiankun/src/micro/index.js +++ b/packages/fes-plugin-qiankun/src/micro/index.js @@ -164,8 +164,8 @@ export default function (api) { api.addEntryCode( () => ` export const bootstrap = qiankun_genBootstrap(completeClientRender, app); -export const mount = qiankun_genMount('${api.config.mountElementId}'); -export const unmount = qiankun_genUnmount('${api.config.mountElementId}'); +export const mount = qiankun_genMount('#${api.config.mountElementId}'); +export const unmount = qiankun_genUnmount('#${api.config.mountElementId}'); export const update = qiankun_genUpdate(); if (!window.__POWERED_BY_QIANKUN__) { diff --git a/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl b/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl index 3d6cd99c..e69de29b 100644 --- a/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl +++ b/packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl @@ -1,12 +0,0 @@ -// import { h } from 'vue'; -// import qiankunRender from './lifecycles'; - -// export function rootContainer(container) { -// const value = typeof window !== 'undefined' ? window.g_rootExports : {}; -// const { Context } = require('@@/plugin-qiankun/qiankunContext'); -// return h(Context.Provider, { value }, container); -// } - -// export const render = oldRender => qiankunRender().then(() => { -// oldRender(); -// }); diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js index 7b08e919..5f35271a 100644 --- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js +++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js @@ -13,12 +13,12 @@ export default async function createHtmlWebpackConfig({ isProd }) { const htmlOptions = { + title: 'fes.js', filename: '[name].html', ...config.html, - templateParameters: resolveDefine(null, true) + templateParameters: resolveDefine(null, true), + mountElementId: config.mountElementId }; - htmlOptions.title = htmlOptions.title || 'fes.js'; - if (isProd) { Object.assign(htmlOptions, { diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index-default.html b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index-default.html index 4b9c8375..cf7300b6 100644 --- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index-default.html +++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index-default.html @@ -7,6 +7,6 @@ <%= htmlWebpackPlugin.options.title %> -
+
diff --git a/packages/fes-preset-built-in/src/plugins/features/mountElementId.js b/packages/fes-preset-built-in/src/plugins/features/mountElementId.js index 686b1ca7..11a7a105 100644 --- a/packages/fes-preset-built-in/src/plugins/features/mountElementId.js +++ b/packages/fes-preset-built-in/src/plugins/features/mountElementId.js @@ -3,7 +3,7 @@ export default (api) => { api.describe({ key: 'mountElementId', config: { - default: '#app', + default: 'app', schema(joi) { return joi.string().allow(''); } diff --git a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/index.js b/packages/fes-preset-built-in/src/plugins/generateFiles/fes/index.js index f74aaa2f..b4bed847 100644 --- a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/index.js +++ b/packages/fes-preset-built-in/src/plugins/generateFiles/fes/index.js @@ -26,7 +26,7 @@ export default function (api) { enableTitle: api.config.title !== false, defaultTitle: api.config.title || '', runtimePath, - rootElement: api.config.mountElementId || '#app', + rootElement: `#${api.config.mountElementId || 'app'}`, entryCode: ( await api.applyPlugins({ key: 'addEntryCode', From 34691cbb894472e7da9564e8024261714531129d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Wed, 24 Mar 2021 20:27:13 +0800 Subject: [PATCH 14/18] =?UTF-8?q?fix(plugin-qiankun):=20=20=E5=BD=93?= =?UTF-8?q?=E5=AD=90=E5=BA=94=E7=94=A8=E5=AD=98=E5=9C=A8=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E8=80=8C=E4=B8=94=E5=AD=90=E5=BA=94=E7=94=A8=E4=BB=A5=E8=B7=AF?= =?UTF-8?q?=E7=94=B1=E7=9A=84=E5=BD=A2=E5=BC=8F=E6=8C=82=E8=BD=BD=E6=97=B6?= =?UTF-8?q?=EF=BC=8C=E9=9C=80=E8=A6=81=E5=9C=A8=E5=88=87=E6=8D=A2=E8=B7=AF?= =?UTF-8?q?=E7=94=B1=E4=B9=8B=E5=89=8Dunmount=E5=AD=90=E5=BA=94=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/runtime/MicroApp.tpl | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl index 45514077..c4804697 100644 --- a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl +++ b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl @@ -13,11 +13,20 @@ import { getMasterOptions } from "./masterOptions"; {{#HAS_PLUGIN_MODEL}} import { useModel } from '@@/core/pluginExports'; {{/HAS_PLUGIN_MODEL}} +import { onBeforeRouteLeave } from "@@/core/coreExports"; -function unmountMicroApp(microApp) { - if (microApp && microApp.mountPromise) { - microApp.mountPromise.then(() => microApp.unmount()); +let unmountPromise; +async function unmountMicroApp(microApp) { + if (microApp) { + if (microApp.mountPromise) { + await microApp.mountPromise; + } + if (!unmountPromise) { + unmountPromise = microApp.unmount(); + } + return await unmountPromise; } + return Promise.resolve(); } export const MicroApp = defineComponent({ @@ -156,6 +165,10 @@ export const MicroApp = defineComponent({ loadApp(); }); + onBeforeRouteLeave(async () => { + return await unmountMicroApp(microAppRef.value); + }); + watch(()=>{ return {...{}, ...propsFromConfigRef.value, ...stateForSlave, ...propsFromParams} }, () => { From 77e074d03ab75775e40278c6f38c2cb21d7ef935 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Thu, 25 Mar 2021 15:23:36 +0800 Subject: [PATCH 15/18] =?UTF-8?q?fix(qiankun):=20=20=E5=88=87=E5=87=BA?= =?UTF-8?q?=E5=AD=90=E5=BA=94=E7=94=A8=E6=97=B6=EF=BC=8C=E5=9B=A0=E4=B8=BA?= =?UTF-8?q?app=E6=98=AF=E5=BC=82=E6=AD=A5=E6=95=B0=E6=8D=AE=E5=AF=BC?= =?UTF-8?q?=E8=87=B4=E6=9C=AA=E5=8F=8A=E6=97=B6unmount?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl b/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl index 4c71315d..0bebf7c1 100644 --- a/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl +++ b/packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl @@ -16,7 +16,7 @@ function isPromise(obj) { let render = () => {}; -let app = null; +let cacheAppPromise = null; let hasMountedAtLeastOnce = false; export default () => defer.promise; @@ -40,7 +40,7 @@ export function genBootstrap(oldRender, appPromise) { } render = oldRender; if (isPromise(appPromise)) { - app = await appPromise; + cacheAppPromise = appPromise; } }; } @@ -63,7 +63,7 @@ export function genMount() { if (hasMountedAtLeastOnce) { const appPromise = render(); if (isPromise(appPromise)) { - app = await appPromise; + cacheAppPromise = appPromise; } } else { defer.resolve(); @@ -93,7 +93,8 @@ export function genUnmount(mountElementId) { ? props.container.querySelector(mountElementId) : document.querySelector(mountElementId); } catch (e) {} - if (container && app) { + if (container && cacheAppPromise) { + const app = await cacheAppPromise; app.unmount(container); } const slaveRuntime = getSlaveRuntime(); From d828b16ce9bb0e7dfa9d650884cd9f00895bcdfd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Thu, 25 Mar 2021 16:04:02 +0800 Subject: [PATCH 16/18] =?UTF-8?q?refactor(plugin-model):=20=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E4=B8=8B=E4=BB=A3=E7=A0=81=EF=BC=8C=E5=8F=AA=E5=88=A4?= =?UTF-8?q?=E5=AE=9Asrc/models=E4=B8=8B=E7=9A=84=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E4=B8=BA=E6=A8=A1=E5=9D=97=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fes-plugin-model/src/index.js | 12 ++++++------ packages/fes-plugin-model/src/utils/getTmpFile.js | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/fes-plugin-model/src/index.js b/packages/fes-plugin-model/src/index.js index 4f08d782..a09165f4 100644 --- a/packages/fes-plugin-model/src/index.js +++ b/packages/fes-plugin-model/src/index.js @@ -24,12 +24,12 @@ export default (api) => { function getAllModels() { const srcModelsPath = getModelsPath(); return lodash.uniq([ - ...getModels(srcModelsPath), - ...getModels( - paths.absPagesPath, - `**/${getModelDir()}/**/*.{js,jsx}` - ), - ...getModels(paths.absPagesPath, '**/*.model.{js,jsx}') + ...getModels(srcModelsPath) + // ...getModels( + // paths.absPagesPath, + // `**/${getModelDir()}/**/*.{js,jsx}` + // ), + // ...getModels(paths.absPagesPath, '**/*.model.{js,jsx}') ]); } diff --git a/packages/fes-plugin-model/src/utils/getTmpFile.js b/packages/fes-plugin-model/src/utils/getTmpFile.js index c0bbdf13..bf832f9a 100644 --- a/packages/fes-plugin-model/src/utils/getTmpFile.js +++ b/packages/fes-plugin-model/src/utils/getTmpFile.js @@ -24,11 +24,11 @@ function getExtraImports(models = [], absSrcPath) { .map((ele) => { if (ele.exportName) { return `import { ${ele.exportName} } from '${winPath( - ele.importPath.replace(/'/g, "\\'"), + ele.importPath.replace(/'/g, "\\'") )}';`; } return `import ${ele.importName} from '${winPath( - ele.importPath.replace(/'/g, "\\'"), + ele.importPath.replace(/'/g, "\\'") )}';`; }) .join(EOL); @@ -37,7 +37,7 @@ function getExtraImports(models = [], absSrcPath) { export const getTmpFile = ( files, extra = [], - absSrcPath, + absSrcPath ) => { const userImports = genImports(files); const userModels = getModels(files, absSrcPath); From db38697a91114a8ca6198336d101bd288f1764ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Thu, 25 Mar 2021 16:04:31 +0800 Subject: [PATCH 17/18] =?UTF-8?q?docs:=20=20=E6=9B=B4=E6=96=B0plugin-model?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/reference/plugin/plugins/model.md | 65 +++++++++++++++++++++-- docs/zh/reference/plugin/plugins/model.md | 65 +++++++++++++++++++++-- 2 files changed, 124 insertions(+), 6 deletions(-) diff --git a/docs/reference/plugin/plugins/model.md b/docs/reference/plugin/plugins/model.md index 8f89ded8..16e4b5ed 100644 --- a/docs/reference/plugin/plugins/model.md +++ b/docs/reference/plugin/plugins/model.md @@ -1,8 +1,67 @@ # @fesjs/plugin-model - ## 启用方式 +在 package.json 中引入依赖： +```json +{ + "dependencies": { + "@fesjs/fes": "^2.0.0", + "@fesjs/plugin-model": "^2.0.0" + }, +} +``` +## 介绍 +一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动UI更新，提供 `reactive` 、 `ref` 等API把数据变成响应式的。我们使用`Provide / Inject`特性，在应用实例中共享响应式数据。 -## 配置 +我们约定`src/models` 目录下的文件为项目定义的 `model` 文件。每个文件需要默认导出一个 `function`。 + +文件名则对应最终 `model` 的 `name`，你可以通过插件提供的 `API` 来消费 `model` 中的数据。 + +### Model 文件 +**src/models/useAuthModel.js** +```js +import { reactive } from 'vue' + +export default function useAuthModel() { + const user = reactive({}); + + const signin = ()=>{ + // todo + } + + const signout = ()=>{ + // todo + } + + return { + user, + signin, + signout + } +} +``` + +### 在组件中使用 Model +```vue + +``` + + +## API + +### useModel + +**useModel(name)** +- **类型**：函数 + +- **详情**: 获取 Model 数据，也就是 Model 文件默认导出函数执行的结果。 +- **参数**： + - name，传入 Model 文件名 -## API \ No newline at end of file diff --git a/docs/zh/reference/plugin/plugins/model.md b/docs/zh/reference/plugin/plugins/model.md index 8f89ded8..16e4b5ed 100644 --- a/docs/zh/reference/plugin/plugins/model.md +++ b/docs/zh/reference/plugin/plugins/model.md @@ -1,8 +1,67 @@ # @fesjs/plugin-model - ## 启用方式 +在 package.json 中引入依赖： +```json +{ + "dependencies": { + "@fesjs/fes": "^2.0.0", + "@fesjs/plugin-model": "^2.0.0" + }, +} +``` +## 介绍 +一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动UI更新，提供 `reactive` 、 `ref` 等API把数据变成响应式的。我们使用`Provide / Inject`特性，在应用实例中共享响应式数据。 -## 配置 +我们约定`src/models` 目录下的文件为项目定义的 `model` 文件。每个文件需要默认导出一个 `function`。 + +文件名则对应最终 `model` 的 `name`，你可以通过插件提供的 `API` 来消费 `model` 中的数据。 + +### Model 文件 +**src/models/useAuthModel.js** +```js +import { reactive } from 'vue' + +export default function useAuthModel() { + const user = reactive({}); + + const signin = ()=>{ + // todo + } + + const signout = ()=>{ + // todo + } + + return { + user, + signin, + signout + } +} +``` + +### 在组件中使用 Model +```vue + +``` + + +## API + +### useModel + +**useModel(name)** +- **类型**：函数 + +- **详情**: 获取 Model 数据，也就是 Model 文件默认导出函数执行的结果。 +- **参数**： + - name，传入 Model 文件名 -## API \ No newline at end of file From 5f3caf0fb0fff8d3142348d1993289742979b2ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Thu, 25 Mar 2021 17:58:59 +0800 Subject: [PATCH 18/18] =?UTF-8?q?docs:=20=20=E6=9B=B4=E6=96=B0plugin-qiank?= =?UTF-8?q?un=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vuepress/configs/sidebar/en.ts | 1 + docs/.vuepress/configs/sidebar/zh.ts | 1 + docs/reference/plugin/plugins/qiankun.md | 247 ++++++++++++++++++++ docs/zh/reference/plugin/plugins/qiankun.md | 247 ++++++++++++++++++++ 4 files changed, 496 insertions(+) create mode 100644 docs/reference/plugin/plugins/qiankun.md create mode 100644 docs/zh/reference/plugin/plugins/qiankun.md diff --git a/docs/.vuepress/configs/sidebar/en.ts b/docs/.vuepress/configs/sidebar/en.ts index 45b97a43..33ffac35 100644 --- a/docs/.vuepress/configs/sidebar/en.ts +++ b/docs/.vuepress/configs/sidebar/en.ts @@ -60,6 +60,7 @@ export const en: SidebarConfig = { '/reference/plugin/plugins/model.md', '/reference/plugin/plugins/request.md', '/reference/plugin/plugins/vuex.md', + '/reference/plugin/plugins/qiankun.md', ], }, { diff --git a/docs/.vuepress/configs/sidebar/zh.ts b/docs/.vuepress/configs/sidebar/zh.ts index eb5967d6..60fa945a 100644 --- a/docs/.vuepress/configs/sidebar/zh.ts +++ b/docs/.vuepress/configs/sidebar/zh.ts @@ -60,6 +60,7 @@ export const zh: SidebarConfig = { '/zh/reference/plugin/plugins/model.md', '/zh/reference/plugin/plugins/request.md', '/zh/reference/plugin/plugins/vuex.md', + '/zh/reference/plugin/plugins/qiankun.md', ], }, { diff --git a/docs/reference/plugin/plugins/qiankun.md b/docs/reference/plugin/plugins/qiankun.md new file mode 100644 index 00000000..12340703 --- /dev/null +++ b/docs/reference/plugin/plugins/qiankun.md @@ -0,0 +1,247 @@ +# @fesjs/plugin-qiankun + +Fes.js plugin for [qiankun](https://qiankun.umijs.org/)，参考[@umijs/plugin-qiankun](https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp) 实现，喜欢 React 的同学推荐直接用 Umi。 + +## 启用方式 +在 `package.json` 中引入依赖： +```json +{ + "dependencies": { + "@fesjs/fes": "^2.0.0", + "@fesjs/plugin-qiankun": "^2.0.0" + }, +} +``` + +## 介绍 +有一种痛叫接手老项目，技术栈老旧，内容多，还要继续维护~ + +可能目前迁移、升级老项目最好的解决方案就是微前端。`plugin-qiankun` 是基于 `qiankun` 实现的 Fes.js 微前端解决方案。 + +## 主应用配置 + +### 第一步：注册子应用 +```js +export default { + qiankun: { + main: { + // 注册子应用信息 + apps: [ + { + name: 'app1', // 唯一 id + entry: '//localhost:8001', // html entry + props: {} // 传递给子应用的数据 + }, + { + name: 'app2', // 唯一 id + entry: '//localhost:8002', // html entry + }, + ], + }, + }, +}; +``` + +### 第二步：装载子应用 + +#### 使用路由绑定的方式 +:::warning +主应用和子应用需要自行适配路由路径！！！待完善... +::: + +假设我们的系统之前有这样的一些路由： +```js +export default { + router: { + routes: [{ + "path": "/", + "component": () => import('@/src/.fes/plugin-layout/index.js'), + "children": [ + { + "path": "/onepiece", + "component": () => import('@/pages/onepiece'), + "name": "onepiece", + "meta": { + "name": "onepiece", + "title": "onepiece" + } + } + ] + }] + } +} +``` +我们现在想在 `/son` 加载子应用 `app1`，只需要增加这样一些配置即可： +```js {16-23} +export default { + router: { + routes: [{ + "path": "/", + "component": () => import('@/src/.fes/plugin-layout/index.js'), + "children": [ + { + "path": "/onepiece", + "component": () => import('@/pages/onepiece'), + "name": "onepiece", + "meta": { + "name": "onepiece", + "title": "onepiece" + } + }, + { + "path": "/son", + "meta": { + "name": "son", + "title": "子应用", + "microApp": "app1" + } + } + ] + }] + } +} +``` +当前我们依然提倡约定路由的方式，在`src/pages` 目录新建 `son.vue`： +```vue + +{ + "name": "son", + "title": "子应用", + "microApp": "app1" +} + +``` + + +#### 使用 `` 组件的方式 +:::tip +建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上，否则很容易出现子应用加载了，但是页面没有渲染出来的情况。 +::: +```vue + + +``` + + +## 子应用配置 + +### 第一步：插件注册 +```js +export default { + qiankun: { + micro: {}, + } +}; +``` + +### 第二步：配置运行时生命周期钩子（可选） +插件会自动为你创建好 `qiankun` 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 `src/app.js` 里导出 `qiankun` 对象，并实现每一个生命周期钩子，其中钩子函数的入参 `props` 由主应用自动注入。 +```js +export const qiankun = { + // 应用加载之前 + async bootstrap(props) { + console.log('app1 bootstrap', props); + }, + // 应用 render 之前触发 + async mount(props) { + console.log('app1 mount', props); + }, + // 当 props 更新时触发 + async update(props){ + console.log('app1 update,' props); + }, + // 应用卸载之后触发 + async unmount(props) { + console.log('app1 unmount', props); + }, +}; + +``` + +## 父子应用通讯 + +有两种方式实现 + +### 配合 [useModel](./model.md) 使用 + +确保已经安装了 `@fesjs/plugin-model`： +```json +{ + "dependencies": { + "@fesjs/fes": "^2.0.0", + "@fesjs/plugin-model": "^2.0.0" + }, +} +``` + +#### 主应用传递 props + +- 如果使用 `MicroApp` 组件模式消费子应用，直接通过 props 传递即可： +```vue + + +``` + +- 如果使用路由绑定式消费子应用，那么约定`src/models/qiankunStateForMicro.js` 的模型数据将作为 `props` 船体给子应用，如： +```js +import { reactive } from 'vue'; + +export default () => { + const state = reactive({ c: 1 }); + return { + state + }; +}; +``` + +#### 子应用消费 props + +子应用中会自动生成一个全局名为 `qiankunStateFromMain` 的 `model`， 可以在任意组件中获取主应用透传的 `props` 的值。 + +```vue + +``` + +### 基于 props 传递 + +- 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节） +- 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节） diff --git a/docs/zh/reference/plugin/plugins/qiankun.md b/docs/zh/reference/plugin/plugins/qiankun.md new file mode 100644 index 00000000..12340703 --- /dev/null +++ b/docs/zh/reference/plugin/plugins/qiankun.md @@ -0,0 +1,247 @@ +# @fesjs/plugin-qiankun + +Fes.js plugin for [qiankun](https://qiankun.umijs.org/)，参考[@umijs/plugin-qiankun](https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp) 实现，喜欢 React 的同学推荐直接用 Umi。 + +## 启用方式 +在 `package.json` 中引入依赖： +```json +{ + "dependencies": { + "@fesjs/fes": "^2.0.0", + "@fesjs/plugin-qiankun": "^2.0.0" + }, +} +``` + +## 介绍 +有一种痛叫接手老项目，技术栈老旧，内容多，还要继续维护~ + +可能目前迁移、升级老项目最好的解决方案就是微前端。`plugin-qiankun` 是基于 `qiankun` 实现的 Fes.js 微前端解决方案。 + +## 主应用配置 + +### 第一步：注册子应用 +```js +export default { + qiankun: { + main: { + // 注册子应用信息 + apps: [ + { + name: 'app1', // 唯一 id + entry: '//localhost:8001', // html entry + props: {} // 传递给子应用的数据 + }, + { + name: 'app2', // 唯一 id + entry: '//localhost:8002', // html entry + }, + ], + }, + }, +}; +``` + +### 第二步：装载子应用 + +#### 使用路由绑定的方式 +:::warning +主应用和子应用需要自行适配路由路径！！！待完善... +::: + +假设我们的系统之前有这样的一些路由： +```js +export default { + router: { + routes: [{ + "path": "/", + "component": () => import('@/src/.fes/plugin-layout/index.js'), + "children": [ + { + "path": "/onepiece", + "component": () => import('@/pages/onepiece'), + "name": "onepiece", + "meta": { + "name": "onepiece", + "title": "onepiece" + } + } + ] + }] + } +} +``` +我们现在想在 `/son` 加载子应用 `app1`，只需要增加这样一些配置即可： +```js {16-23} +export default { + router: { + routes: [{ + "path": "/", + "component": () => import('@/src/.fes/plugin-layout/index.js'), + "children": [ + { + "path": "/onepiece", + "component": () => import('@/pages/onepiece'), + "name": "onepiece", + "meta": { + "name": "onepiece", + "title": "onepiece" + } + }, + { + "path": "/son", + "meta": { + "name": "son", + "title": "子应用", + "microApp": "app1" + } + } + ] + }] + } +} +``` +当前我们依然提倡约定路由的方式，在`src/pages` 目录新建 `son.vue`： +```vue + +{ + "name": "son", + "title": "子应用", + "microApp": "app1" +} + +``` + + +#### 使用 `` 组件的方式 +:::tip +建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上，否则很容易出现子应用加载了，但是页面没有渲染出来的情况。 +::: +```vue + + +``` + + +## 子应用配置 + +### 第一步：插件注册 +```js +export default { + qiankun: { + micro: {}, + } +}; +``` + +### 第二步：配置运行时生命周期钩子（可选） +插件会自动为你创建好 `qiankun` 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 `src/app.js` 里导出 `qiankun` 对象，并实现每一个生命周期钩子，其中钩子函数的入参 `props` 由主应用自动注入。 +```js +export const qiankun = { + // 应用加载之前 + async bootstrap(props) { + console.log('app1 bootstrap', props); + }, + // 应用 render 之前触发 + async mount(props) { + console.log('app1 mount', props); + }, + // 当 props 更新时触发 + async update(props){ + console.log('app1 update,' props); + }, + // 应用卸载之后触发 + async unmount(props) { + console.log('app1 unmount', props); + }, +}; + +``` + +## 父子应用通讯 + +有两种方式实现 + +### 配合 [useModel](./model.md) 使用 + +确保已经安装了 `@fesjs/plugin-model`： +```json +{ + "dependencies": { + "@fesjs/fes": "^2.0.0", + "@fesjs/plugin-model": "^2.0.0" + }, +} +``` + +#### 主应用传递 props + +- 如果使用 `MicroApp` 组件模式消费子应用，直接通过 props 传递即可： +```vue + + +``` + +- 如果使用路由绑定式消费子应用，那么约定`src/models/qiankunStateForMicro.js` 的模型数据将作为 `props` 船体给子应用，如： +```js +import { reactive } from 'vue'; + +export default () => { + const state = reactive({ c: 1 }); + return { + state + }; +}; +``` + +#### 子应用消费 props + +子应用中会自动生成一个全局名为 `qiankunStateFromMain` 的 `model`， 可以在任意组件中获取主应用透传的 `props` 的值。 + +```vue + +``` + +### 基于 props 传递 + +- 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节） +- 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）