From 709a9538a776539c8085655826a81b2ec5badbbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=80=86=E8=91=B5?= Date: Sun, 26 Sep 2021 16:48:08 +0800 Subject: [PATCH 1/6] feat(miniapp): add isMiniappPlatform function --- packages/miniapp-builder-shared/src/index.js | 4 +++- .../src/isMiniappPlatform.js | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 packages/miniapp-builder-shared/src/isMiniappPlatform.js diff --git a/packages/miniapp-builder-shared/src/index.js b/packages/miniapp-builder-shared/src/index.js index 4c9485f0..14d04cef 100644 --- a/packages/miniapp-builder-shared/src/index.js +++ b/packages/miniapp-builder-shared/src/index.js @@ -5,6 +5,7 @@ const pathHelper = require('./pathHelper'); const platformMap = require('./platformMap'); const constants = require('./constants'); const autoInstallNpm = require('./autoInstallNpm'); +const isMiniappPlatform = require('./isMiniappPlatform'); module.exports = { filterNativePages, @@ -13,5 +14,6 @@ module.exports = { pathHelper, platformMap, constants, - autoInstallNpm + autoInstallNpm, + isMiniappPlatform }; diff --git a/packages/miniapp-builder-shared/src/isMiniappPlatform.js b/packages/miniapp-builder-shared/src/isMiniappPlatform.js new file mode 100644 index 00000000..65f2eecb --- /dev/null +++ b/packages/miniapp-builder-shared/src/isMiniappPlatform.js @@ -0,0 +1,14 @@ +const constants = require('./constants'); +const { MINIAPP, WECHAT_MINIPROGRAM, BYTEDANCE_MICROAPP, BAIDU_SMARTPROGRAM, KUAISHOU_MINIPROGRAM } = constants; + +/** + * Check whether the target is miniapp platform + * + * @param {string} target + * @returns boolean + */ +function isMiniappPlatform(target) { + return [MINIAPP, WECHAT_MINIPROGRAM, BYTEDANCE_MICROAPP, BAIDU_SMARTPROGRAM, KUAISHOU_MINIPROGRAM].includes(target); +} + +module.exports = isMiniappPlatform; From 07908382231f559b30f5299454e9f1b72707b25c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=80=86=E8=91=B5?= Date: Sun, 26 Sep 2021 16:50:55 +0800 Subject: [PATCH 2/6] chore: modify isMiniappPlatform to checkIsMiniappPlatform --- .../src/{isMiniappPlatform.js => checkIsMiniappPlatform.js} | 4 ++-- packages/miniapp-builder-shared/src/index.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename packages/miniapp-builder-shared/src/{isMiniappPlatform.js => checkIsMiniappPlatform.js} (82%) diff --git a/packages/miniapp-builder-shared/src/isMiniappPlatform.js b/packages/miniapp-builder-shared/src/checkIsMiniappPlatform.js similarity index 82% rename from packages/miniapp-builder-shared/src/isMiniappPlatform.js rename to packages/miniapp-builder-shared/src/checkIsMiniappPlatform.js index 65f2eecb..699e1f4f 100644 --- a/packages/miniapp-builder-shared/src/isMiniappPlatform.js +++ b/packages/miniapp-builder-shared/src/checkIsMiniappPlatform.js @@ -7,8 +7,8 @@ const { MINIAPP, WECHAT_MINIPROGRAM, BYTEDANCE_MICROAPP, BAIDU_SMARTPROGRAM, KUA * @param {string} target * @returns boolean */ -function isMiniappPlatform(target) { +function checkIsMiniappPlatform(target) { return [MINIAPP, WECHAT_MINIPROGRAM, BYTEDANCE_MICROAPP, BAIDU_SMARTPROGRAM, KUAISHOU_MINIPROGRAM].includes(target); } -module.exports = isMiniappPlatform; +module.exports = checkIsMiniappPlatform; diff --git a/packages/miniapp-builder-shared/src/index.js b/packages/miniapp-builder-shared/src/index.js index 14d04cef..49efa3bd 100644 --- a/packages/miniapp-builder-shared/src/index.js +++ b/packages/miniapp-builder-shared/src/index.js @@ -5,7 +5,7 @@ const pathHelper = require('./pathHelper'); const platformMap = require('./platformMap'); const constants = require('./constants'); const autoInstallNpm = require('./autoInstallNpm'); -const isMiniappPlatform = require('./isMiniappPlatform'); +const checkIsMiniappPlatform = require('./checkIsMiniappPlatform'); module.exports = { filterNativePages, @@ -15,5 +15,5 @@ module.exports = { platformMap, constants, autoInstallNpm, - isMiniappPlatform + checkIsMiniappPlatform }; From 941c5b67ab03dd040bd049bb2d74e8584aedb5ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=80=86=E8=91=B5?= Date: Tue, 12 Oct 2021 11:50:04 +0800 Subject: [PATCH 3/6] feat(miniapp): support split page files --- .../miniapp-render/src/createConfig/page.js | 19 ++++++++++--- .../src/generators/app.js | 14 +++++----- .../src/generators/page.js | 20 +++++++++++--- .../src/index.js | 27 ++++++++++--------- 4 files changed, 56 insertions(+), 24 deletions(-) diff --git a/packages/miniapp-render/src/createConfig/page.js b/packages/miniapp-render/src/createConfig/page.js index 42efbce8..c31e419d 100644 --- a/packages/miniapp-render/src/createConfig/page.js +++ b/packages/miniapp-render/src/createConfig/page.js @@ -7,10 +7,15 @@ import createEventProxy from '../bridge/createEventProxy'; import createDocument from '../document'; import { BODY_NODE_ID, INDEX_PAGE } from '../constants'; import createWindow from '../window'; +import { isFunction } from '../utils/tool'; export function getBaseLifeCycles(route, init, packageName = '') { return { onLoad(query) { + // TODO: rename + // old: init is a function that contains all the logic code + // now: init is a object that contains page code and bundle code (app.js) + const isBundled = isFunction(init); this.pageId = route + '-' + cache.getRouteId(route); // getApp may not exist in situations like plugin project // eslint-disable-next-line no-undef @@ -40,7 +45,11 @@ export function getBaseLifeCycles(route, init, packageName = '') { } else { this.window = createWindow(); cache.setWindow(packageName, this.window); - init(this.window, this.document); + isBundled ? init(this.window, this.document) : init.bundle(this.window, this.document); + } + + if (!isBundled) { + init.page(this.window, this.document); } // Bind page internal to page document @@ -61,9 +70,13 @@ export function getBaseLifeCycles(route, init, packageName = '') { if (!this.renderInfo && process.env.NODE_ENV === 'development') { throw new Error("Could't find target render method."); } - this.renderInfo.setDocument(this.document); - this.renderInfo.render(); + this.renderInfo.setDocument(this.document); + if (isBundled) { + this.renderInfo.render(); + } else { + this.window.__render(this.renderInfo.component); + } this.document._trigger('DOMContentLoaded'); }, onShow() { diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/app.js b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/app.js index c2bd2639..5d5f4b68 100644 --- a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/app.js +++ b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/app.js @@ -51,14 +51,16 @@ function generateAppCSS(compilation, { target, command, pluginDir, subPackages } let content = `@import "./default${platformMap[target].extension.css}";`; - const isCssExtension = platformMap[target].extension.css === '.css'; Object.keys(compilation.assets).forEach(asset => { - if (extname(asset) === '.css' && !isCssExtension) { - delete compilation.assets[asset]; - } + /* past: + non-subPackage: app.css would import bundle.css and native page css (which is a bug) + subpackage: app.css would only import vendor.css + */ + /* now: + app.acss only import vendor.css. page css will be loaded in each page + */ if (extname(asset) === platformMap[target].extension.css && asset !== `default${platformMap[target].extension.css}`) { - if (!subPackages || asset.includes('vendors.css')) { - // In sub packages mode, only vendors.css should be imported in app.css + if (asset.includes('vendors.css')) { content += `@import "./${asset}";`; } } diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/page.js b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/page.js index a03f3136..0407142c 100644 --- a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/page.js +++ b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/page.js @@ -18,11 +18,19 @@ function generatePageCSS( let pageCssContent = '/* required by usingComponents */\n'; const pageCssPath = `${pageRoute}${platformMap[target].extension.css}`; const isCssExtension = platformMap[target].extension.css === '.css'; - const subAppCssPath = `${getBundlePath(subAppRoot)}.css${isCssExtension ? '' : platformMap[target].extension.css}`; + const cssFileExtname = `.css${isCssExtension ? '' : platformMap[target].extension.css}`; + const subAppCssPath = `${getBundlePath(subAppRoot)}${cssFileExtname}`; if (compilation.assets[subAppCssPath]) { pageCssContent += `@import "${getAssetPath(subAppCssPath, pageCssPath)}";`; } + /* page css will be outputed to ${pageRouts}.bundle.css + so page css should import ${pageRouts}.bundle.css + */ + if (compilation.assets[`${pageRoute}.bundle${cssFileExtname}`]) { + pageCssContent += `@import "./${getAssetPath(pageRoute + '.bundle', pageRoute)}${cssFileExtname}";`; + } + addFileToCompilation(compilation, { filename: pageCssPath, @@ -44,12 +52,18 @@ function generatePageJS( const renderPath = getAssetPath('render', pageRoute); const route = getSepProcessedPath(pagePath); const nativeLifeCycles = `[${Object.keys(nativeLifeCyclesMap).reduce((total, current, index) => index === 0 ? `${total}'${current}'` : `${total},'${current}'`, '')}]`; - const requirePageBundle = commonPageJSFilePaths.reduce((prev, filePath) => { + const requireAppBundle = commonPageJSFilePaths.reduce((prev, filePath) => { if (filePath === 'webpack-runtime.js') return prev; return `${prev}require('${getAssetPath(filePath, pageRoute)}')(window, document);`; }, ''); + const requirePageBundle = `require('${getAssetPath(pageRoute + '.bundle', pageRoute)}')(window, document);` + // init will change into a object which contains page entry code and app.js entry code const init = ` -function init(window, document) {${requirePageBundle}}`; +const init = { + bundle: function(window, document) {${requireAppBundle}}, + page: function(window, document) {${requirePageBundle}} +} +` const pageJsContent = ` const render = require('${renderPath}'); diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/index.js b/packages/rax-miniapp-runtime-webpack-plugin/src/index.js index 7abddcc3..bcf2cca8 100755 --- a/packages/rax-miniapp-runtime-webpack-plugin/src/index.js +++ b/packages/rax-miniapp-runtime-webpack-plugin/src/index.js @@ -1,7 +1,8 @@ -const { resolve, join, dirname } = require('path'); +const { resolve, join, dirname, extname } = require('path'); const { readJsonSync, existsSync } = require('fs-extra'); const isEqual = require('lodash.isequal'); -const { constants: { MINIAPP } } = require('miniapp-builder-shared'); +const { platformMap, constants: { MINIAPP } } = require('miniapp-builder-shared'); + const { UNRECURSIVE_TEMPLATE_TYPE } = require('./constants'); const isCSSFile = require('./utils/isCSSFile'); const wrapChunks = require('./utils/wrapChunks'); @@ -55,6 +56,7 @@ class MiniAppRuntimePlugin { } = api; const userConfig = rootUserConfig[target] || {}; const { subPackages, template: modifyTemplate = {}, nativePackage = {} } = userConfig; + const isCssExtension = platformMap[target].extension.css === '.css'; let isFirstRender = true; let lastUsingComponents = {}; let lastUsingPlugins = {}; @@ -78,11 +80,6 @@ class MiniAppRuntimePlugin { const sourcePath = join(rootDir, 'src'); const pages = []; const finalRouteMap = getFinalRouteMap(getValue('staticConfig')); - const changedFiles = Object.keys( - compiler.watchFileSystem.watcher.mtimes - ).map((filePath) => { - return filePath.replace(sourcePath, ''); - }); const useNativeComponentCount = Object.keys(usingComponents).length; // For sub packages mode use @@ -122,11 +119,17 @@ class MiniAppRuntimePlugin { } } - if ( - (isFirstRender || - changedFiles.some((filePath) => isCSSFile(filePath))) && - !isPluginProject - ) { + // xxx.css will be transformed into xxx.css.acss (in alibaba miniapp) + // and xxx.css should be deleted + if (!isCssExtension) { + Object.keys(compilation.assets).forEach(asset => { + if (extname(asset) === '.css') { + delete compilation.assets[asset]; + } + }); + } + + if (isFirstRender && !isPluginProject) { generateAppCSS(compilation, { subPackages, target, From 4e05813ed4616034bfe2c3217ea153ff9f0a6fc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=80=86=E8=91=B5?= Date: Tue, 12 Oct 2021 12:17:50 +0800 Subject: [PATCH 4/6] chore: remove comment --- packages/miniapp-render/src/createConfig/page.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/miniapp-render/src/createConfig/page.js b/packages/miniapp-render/src/createConfig/page.js index c31e419d..e0caa8c3 100644 --- a/packages/miniapp-render/src/createConfig/page.js +++ b/packages/miniapp-render/src/createConfig/page.js @@ -12,7 +12,6 @@ import { isFunction } from '../utils/tool'; export function getBaseLifeCycles(route, init, packageName = '') { return { onLoad(query) { - // TODO: rename // old: init is a function that contains all the logic code // now: init is a object that contains page code and bundle code (app.js) const isBundled = isFunction(init); From 35438aaf31c4bbdbfb162b1914b468ae7588b485 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=80=86=E8=91=B5?= Date: Tue, 12 Oct 2021 12:24:39 +0800 Subject: [PATCH 5/6] fix: lint error --- packages/miniapp-builder-shared/src/checkIsMiniappPlatform.js | 1 + .../rax-miniapp-runtime-webpack-plugin/src/generators/app.js | 2 +- .../rax-miniapp-runtime-webpack-plugin/src/generators/page.js | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/miniapp-builder-shared/src/checkIsMiniappPlatform.js b/packages/miniapp-builder-shared/src/checkIsMiniappPlatform.js index 699e1f4f..0fbe961d 100644 --- a/packages/miniapp-builder-shared/src/checkIsMiniappPlatform.js +++ b/packages/miniapp-builder-shared/src/checkIsMiniappPlatform.js @@ -1,4 +1,5 @@ const constants = require('./constants'); + const { MINIAPP, WECHAT_MINIPROGRAM, BYTEDANCE_MICROAPP, BAIDU_SMARTPROGRAM, KUAISHOU_MINIPROGRAM } = constants; /** diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/app.js b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/app.js index 5d5f4b68..a4f41b55 100644 --- a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/app.js +++ b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/app.js @@ -56,7 +56,7 @@ function generateAppCSS(compilation, { target, command, pluginDir, subPackages } non-subPackage: app.css would import bundle.css and native page css (which is a bug) subpackage: app.css would only import vendor.css */ - /* now: + /* now: app.acss only import vendor.css. page css will be loaded in each page */ if (extname(asset) === platformMap[target].extension.css && asset !== `default${platformMap[target].extension.css}`) { diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/page.js b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/page.js index 0407142c..f17a0c19 100644 --- a/packages/rax-miniapp-runtime-webpack-plugin/src/generators/page.js +++ b/packages/rax-miniapp-runtime-webpack-plugin/src/generators/page.js @@ -56,14 +56,14 @@ function generatePageJS( if (filePath === 'webpack-runtime.js') return prev; return `${prev}require('${getAssetPath(filePath, pageRoute)}')(window, document);`; }, ''); - const requirePageBundle = `require('${getAssetPath(pageRoute + '.bundle', pageRoute)}')(window, document);` + const requirePageBundle = `require('${getAssetPath(pageRoute + '.bundle', pageRoute)}')(window, document);`; // init will change into a object which contains page entry code and app.js entry code const init = ` const init = { bundle: function(window, document) {${requireAppBundle}}, page: function(window, document) {${requirePageBundle}} } -` +`; const pageJsContent = ` const render = require('${renderPath}'); From b91969fdd0f7f55d760e41d2563c8e6129108eb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=80=86=E8=91=B5?= Date: Thu, 14 Oct 2021 17:24:33 +0800 Subject: [PATCH 6/6] feat(miniapp): use the same window in subPackages mode --- packages/miniapp-render/src/window.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/miniapp-render/src/window.js b/packages/miniapp-render/src/window.js index c6d6ddce..0a7b8d02 100755 --- a/packages/miniapp-render/src/window.js +++ b/packages/miniapp-render/src/window.js @@ -159,12 +159,13 @@ class Window extends EventTarget { } export default function createWindow() { - const { mainPackageName, subPackages } = cache.getConfig(); - const { shareMemory } = subPackages || {}; - if (mainPackageName === '' || !shareMemory) { + const { mainPackageName } = cache.getConfig(); + if (mainPackageName === '') { return new Window(); } const mainPackageWindow = cache.getWindow(mainPackageName); - if (mainPackageWindow) return mainPackageWindow; + if (mainPackageWindow) { + return mainPackageWindow; + } return new Window(); }