xhs-mp-compiler-cli 1.9.8 → 1.9.10

package/dist/presets/configs/miniprogram/render/renderChunkPlugin.js

@@ -10,17 +10,43 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const packs_1 = require("../../../../packs");
-    const injectCSS = `
-globalThis.__XHS_IS_WEBVIEW = (globalThis.localStorage && globalThis.document && globalThis.document.querySelectorAll)
-globalThis.__XHS_APPEND_CSS = function(cssText, src){
-    if (!globalThis.__XHS_IS_WEBVIEW) return;
-    var headTags = document.getElementsByTagName('head')
-    var head = document.head || (headTags && headTags[0])
-    var cssTextNode = document.createTextNode(String(cssText))
-    var styleNode = document.createElement('style')
-    styleNode.setAttribute('xhs:path', src)
+    /**
+     * 注入变量不可以使用 let const var 变量形式
+     * 因为2.0 架构下 render.js 和 component.js 运行在逻辑层（只有一个环境） 会导致变量冲突
+     */
+    const common = `
+globalThis.__XHS_WEBVIEW = (globalThis.localStorage && globalThis.document && globalThis.document.querySelectorAll);
+`;
+    const injectLink = `
+${common}
+globalThis.__XHS_ADD_LINK = function(src){
+    if (!globalThis.__XHS_WEBVIEW) return;
+    const host = globalThis.SmallApp && globalThis.SmallApp.__BOOTSTRAP_HOST__
+    const link = document.createElement('link')
+    link.href = host + "/" + src
+    link.type = 'text/css'
+    link.rel = 'stylesheet'
+    link.setAttribute('xhs-p', src)
+    document.head.appendChild(link);
+};
+`;
+    /**
+     * 2.0模式下 render.js 和 component.js 运行在逻辑层
+     * 目前 2.0 各项功能已经稳定 降级可能性不大
+     * 2.0中原先css打包了两份 一份是 .css 文件 一份是 在render.js中注入的style标签
+     * 现在2.0 打包 render.js 中改为使用link标签注入，这样降级到 1.0 时仍然正常运行
+     * 且不会使得包体积变大
+     * 2.0 后面量起来后，可全部采用加载link方式打包，不必区分1.0 2.0
+     */
+    const injectStyle = `
+${common}
+globalThis.__XHS_ADD_STYLE = function(style, src){
+    if (!globalThis.__XHS_WEBVIEW) return;
+    const cssTextNode = document.createTextNode(String(style))
+    const styleNode = document.createElement('style')
+    styleNode.setAttribute('xhs-p', src)
     styleNode.appendChild(cssTextNode)
-    head.appendChild(styleNode)
+    document.head.appendChild(styleNode)
 };
 `;
     // 注入css跟webpack runtime
@@ -35,9 +61,9 @@ globalThis.__XHS_APPEND_CSS = function(cssText, src){
                     stage: packs_1.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
                 }, assets => {
                     var _a, _b;
-                    const { project } = this.options;
+                    const { project, packSetting } = this.options;
                     // 注入css逻辑
-                    const injectCode = injectCSS;
+                    const injectCode = packSetting.enableVDom ? injectLink : injectStyle;
                     const appJSON = project.appJSON;
                     const pathMap = [
                         (_a = appJSON.pages) === null || _a === void 0 ? void 0 : _a.map(({ path }) => path),

package/dist/presets/loaders/mini-style-loader.js

@@ -67,8 +67,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
                 return `export default void 0;`;
             }
             // 判断浏览器环境，注入css添加逻辑
-            return new packs_1.RawSource(`globalThis.__XHS_IS_WEBVIEW && globalThis.__XHS_APPEND_CSS(${JSON.stringify(code)}, '${shortPath}');` +
-                `export default ${JSON.stringify(shortPath)};`).source();
+            if (enableVDom) {
+                return new packs_1.RawSource(`globalThis.__XHS_ADD_LINK(${JSON.stringify(shortPath)});` +
+                    `export default ${JSON.stringify(shortPath)};`).source();
+            }
+            else {
+                return new packs_1.RawSource(`globalThis.__XHS_ADD_STYLE(${JSON.stringify(code)}, ${JSON.stringify(shortPath)});` +
+                    `export default ${JSON.stringify(shortPath)};`).source();
+            }
         };
         if (packSetting.compressCss) {
             // 压缩css

package/dist/presets/loaders/mp-entry-loader.js

@@ -21,9 +21,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 (function (factory) {
     if (typeof module === "object" && typeof module.exports === "object") {
         var v = factory(require, exports);
@@ -35,12 +32,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    const fs_extra_1 = __importDefault(require("fs-extra"));
+    const fs_extra_1 = __importStar(require("fs-extra"));
     const path_1 = __importStar(require("path"));
     const xhs_mp_pack_1 = require("xhs-mp-pack");
     const loader_utils_1 = require("../../utils/loader-utils");
     const getSuffixName_1 = require("../../utils/getSuffixName");
-    function genComponentLoaderScript(project, packSetting, context, opts) {
+    function genComponentLoaderScript(project, context, opts) {
         const { pkg, root, mode, compPath } = opts;
         const { projectMiniprogramPath, jsonDependencies = [] } = project;
         const componentsMap = project.getComponentsMap();
@@ -77,24 +74,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
   ;${entries.join('\n  ')}
   `;
     }
-    const genRenderLoaderScript = (project, packSetting, context, opts) => {
+    const genRenderLoaderScript = (project, context, opts) => {
         const { projectMiniprogramPath, appJSON, jsonDependencies } = project;
-        const { enableVDom } = packSetting;
         const { pkg, mode } = opts;
         const isFull = pkg === 'full';
-        const appCssPath = (0, path_1.resolve)(projectMiniprogramPath, 'app.css');
         for (const file of jsonDependencies) {
             context.addDependency(file);
         }
+        const appCssPath = (0, path_1.resolve)(projectMiniprogramPath, 'app.css');
+        const appCssExist = (0, fs_extra_1.existsSync)(appCssPath);
         const resourcePath = (0, loader_utils_1.formatPath)(context.resourcePath);
         const path = (0, loader_utils_1.formatPath)(resourcePath.replace(`${projectMiniprogramPath}/`, '').replace(`.${(0, getSuffixName_1.getMlSuffixName)()}`, ''));
         const subPackage = (appJSON.subPackages || []).find(subPack => !!subPack.pages.find(page => page.path === path));
         const enableLazyCodeLoading = mode === 'v2';
         // 资源文件
-        const { resourceList, appCssCode } = (0, loader_utils_1.getResourceUris)({
-            appCssPath,
+        const resources = (0, loader_utils_1.getResourceUris)({
+            appCssExist,
             subPackage,
-            enableVDom,
             enableLazyCodeLoading
         });
         // 开启了按需注入，注入依赖组件
@@ -112,18 +108,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
                 depends.push(uri);
             }
             return `
-      ${appCssCode};
       import Component from '${resourcePath}';
-      globalThis.__render.mount(Component, '${path}', ${JSON.stringify(resourceList)}, ${JSON.stringify(depends)})
+      globalThis.__render.mount(Component, '${path}', ${JSON.stringify(resources)}, ${JSON.stringify(depends)})
     `;
         }
         return `
-    ${appCssCode}
     import Component from '${resourcePath}';
-    globalThis.__render.mount(Component, '${path}', ${JSON.stringify(resourceList)})
+    globalThis.__render.mount(Component, '${path}', ${JSON.stringify(resources)})
   `;
     };
-    function genServiceLoderScript(project, packSetting, context, opts) {
+    function genServiceLoderScript(project, context, opts) {
         const { appJSON, legacyAppJSON, projectMiniprogramPath, jsonDependencies } = project;
         const { pkg, root } = opts;
         const modules = [];
@@ -205,7 +199,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         if (!handler) {
             throw new Error(`not found loader handler of ${type}`);
         }
-        return handler(this._compiler.project, this._compiler.packSetting, this, options);
+        return handler(this._compiler.project, this, options);
     }
     module.exports = entryLoader;
 });

package/dist/utils/loader-utils.d.ts

@@ -4,14 +4,10 @@ export declare const getShortPath: (projectMiniprogramPath: string, rootContext:
  * 根据是否分包获取资源路径
  */
 export declare const getResourceUris: (options: {
-    appCssPath: string;
-    enableVDom: boolean;
+    appCssExist: boolean;
     enableLazyCodeLoading: boolean;
     subPackage: any;
-}) => {
-    appCssCode: string;
-    resourceList: string[];
-};
+}) => string[];
 /**
  * @NOTE
  *  Create a request and handle the conversion of esModule modules

package/dist/utils/loader-utils.js

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "path", "./common", "./getSuffixName", "fs-extra"], factory);
+        define(["require", "exports", "path", "./common", "./getSuffixName"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -17,7 +17,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     const path_1 = __importDefault(require("path"));
     const common_1 = require("./common");
     const getSuffixName_1 = require("./getSuffixName");
-    const fs_extra_1 = __importDefault(require("fs-extra"));
     const formatPath = (pathStr = '') => pathStr.split(path_1.default.sep).join(path_1.default.posix.sep);
     exports.formatPath = formatPath;
     const getShortPath = (projectMiniprogramPath, rootContext) => {
@@ -35,26 +34,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
      */
     const getResourceUris = (options) => {
         const resourceList = [];
-        const { appCssPath, enableVDom, enableLazyCodeLoading, subPackage } = options;
-        const appCssExist = fs_extra_1.default.existsSync(appCssPath);
+        const { appCssExist, enableLazyCodeLoading, subPackage } = options;
         // sjs 无法识别是否引用 所以一律push
-        // 加载顺序 主包sjs  分包sjs  主包components.js  分包components.js
-        let appCssCode = '';
-        const genAppCss = () => {
-            if (appCssExist) {
-                // 运行时v2架构下，还是传递给运行时控制
-                if (enableVDom) {
-                    resourceList.push(`app.css`);
-                }
-                else {
-                    // 运行时v1架构下，需要放在appCssCode，避免页面样式优先级高于app.css
-                    appCssCode = `import '${(0, exports.formatPath)(appCssPath)}'`;
-                }
-            }
-        };
+        // 加载顺序 app.css  主包sjs  分包sjs  主包components.js  分包components.js 
         if (!subPackage) {
             // 主包
-            genAppCss();
+            appCssExist && resourceList.push(`app.css`);
             resourceList.push('sjs.js');
             !enableLazyCodeLoading && resourceList.push(`components.js`);
         }
@@ -64,14 +49,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
             !enableLazyCodeLoading && resourceList.push(`${subPackage === null || subPackage === void 0 ? void 0 : subPackage.root}/components.js`);
         }
         else if (subPackage) {
-            // 普通分包, 自己的components.js，主包components.js
-            genAppCss();
+            // 普通分包, 自己的components.js，主包components.js app.css
+            appCssExist && resourceList.push(`app.css`);
             resourceList.push('sjs.js');
             resourceList.push(`${subPackage === null || subPackage === void 0 ? void 0 : subPackage.root}/sjs.js`);
             !enableLazyCodeLoading && resourceList.push(`components.js`);
             !enableLazyCodeLoading && resourceList.push(`${subPackage === null || subPackage === void 0 ? void 0 : subPackage.root}/components.js`);
         }
-        return { appCssCode, resourceList };
+        return resourceList;
     };
     exports.getResourceUris = getResourceUris;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xhs-mp-compiler-cli",
-  "version": "1.9.8",
+  "version": "1.9.10",
   "description": "xhs mp command tool.",
   "preferGlobal": true,
   "category": "esm",
@@ -94,13 +94,13 @@
     "webpack-chain": "^6.5.1",
     "webpack-sources": "^3.2.2",
     "xhs-mp-workerpool": "^9.1.3",
-    "xhs-mp-compiler-ml-loader": "3.0.8",
-    "xhs-mp-compiler-utils": "1.9.8",
-    "xhs-mp-pack": "1.9.8",
-    "xhs-mp-project": "1.9.8",
-    "xhs-mp-utils": "1.9.8",
-    "xhs-mp-shared-fs": "1.4.8",
-    "xhs-mp-compiler-sjs-loader": "1.9.8",
+    "xhs-mp-compiler-ml-loader": "3.0.10",
+    "xhs-mp-compiler-utils": "1.9.10",
+    "xhs-mp-pack": "1.9.10",
+    "xhs-mp-project": "1.9.10",
+    "xhs-mp-utils": "1.9.10",
+    "xhs-mp-shared-fs": "1.4.10",
+    "xhs-mp-compiler-sjs-loader": "1.9.10",
     "yauzl": "^2.10.0"
   },
   "devDependencies": {