[WIP]feat(miniapp): split page files

packages/miniapp-builder-shared/src/checkIsMiniappPlatform.js

@@ -0,0 +1,15 @@
+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 checkIsMiniappPlatform(target) {
+  return [MINIAPP, WECHAT_MINIPROGRAM, BYTEDANCE_MICROAPP, BAIDU_SMARTPROGRAM, KUAISHOU_MINIPROGRAM].includes(target);
+}
+
+module.exports = checkIsMiniappPlatform;

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 checkIsMiniappPlatform = require('./checkIsMiniappPlatform');
 const { transformAppConfig, transformPageConfig } = require('./transformConfig');
 
 module.exports = {
@@ -15,6 +16,7 @@ module.exports = {
   platformMap,
   constants,
   autoInstallNpm,
+  checkIsMiniappPlatform,
   transformAppConfig,
   transformPageConfig
 };

packages/miniapp-render/src/createConfig/page.js

@@ -7,10 +7,14 @@ 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) {
+      // 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 +44,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 +69,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() {

packages/miniapp-render/src/window.js

@@ -167,12 +167,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();
 }

packages/rax-miniapp-runtime-webpack-plugin/src/generators/app.js

@@ -52,10 +52,16 @@ function generateAppCSS(compilation, { target, pluginDir, subPackages, assets })
   let content = `@import "./${defaultCSSFileName}";`;
 
   Object.keys(assets).forEach(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 (/\.css/.test(asset) && asset !== defaultCSSFileName) {
-      if (!subPackages || asset === 'vendors.css') {
+      if (asset === 'vendors.css') {
         const newCssFileName = asset.replace(/\.css/, cssExt);
-        // In sub packages mode, only vendors.css should be imported in app.css
         content += `@import "./${newCssFileName}";`;
       }
     }

packages/rax-miniapp-runtime-webpack-plugin/src/generators/page.js

@@ -19,8 +19,18 @@ function generatePageCSS(
   let pageCssContent = '/* required by usingComponents */\n';
   const pageCssPath = `${pageRoute}${cssExt}`;
   const bundlePath = getBundlePath(subAppRoot);
-  if (assets[`${bundlePath}.css`]) {
-    pageCssContent += `@import "${getAssetPath(`${bundlePath}${cssExt}`, pageCssPath)}";`;
+  const isCssExtension = platformMap[target].extension.css === '.css';
+  const cssFileExtname = `.css${isCssExtension ? '' : platformMap[target].extension.css}`;
+  const subAppCssPath = `${bundlePath}${cssFileExtname}`;
+  if (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 (assets[`${pageRoute}.bundle${cssFileExtname}`]) {
+    pageCssContent += `@import "./${getAssetPath(pageRoute + '.bundle', pageRoute)}${cssFileExtname}";`;
   }
 
   addFileToCompilation(compilation, {
@@ -42,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}');

packages/rax-miniapp-runtime-webpack-plugin/src/index.js

@@ -1,7 +1,7 @@
-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 { processAssets: webpackProcessAssets } = require('@builder/compat-webpack4');
 const { UNRECURSIVE_TEMPLATE_TYPE } = require('./constants');
 const isCSSFile = require('./utils/isCSSFile');
@@ -56,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 = {};
@@ -120,6 +121,16 @@ class MiniAppRuntimePlugin {
         }
       }
 
+      // 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 ||
         changedFiles.some((filePath) => isCSSFile(filePath))) &&