@tuya-sat/micro-dev-loader 2.1.3 → 2.2.5

package/dist/plugins/theme/bundle.d.ts

@@ -1 +1,3 @@
-export default function compress(data: string, path: string): Promise<string>;
+export default function compress(data: string, path: string, lessVarible: {
+    [key: string]: any;
+}): Promise<string>;

package/dist/plugins/theme/bundle.js

@@ -16,7 +16,7 @@ const cssFileRegex = /.css$/;
 const imports = [];
 const writers = [];
 const output = [];
-function buildContents(lines, filePath) {
+function buildContents(lines, filePath, lessVarible) {
     let currentLines = [];
     let line;
     let hashPath;
@@ -35,11 +35,18 @@ function buildContents(lines, filePath) {
                 currentLines = [];
             }
             imported = line.replace(stringLiteralRegex, "$1");
+            //处理变量路径(目前，处理不了文件内的变量)
+            imported = imported.replace(/\@\{([^}]+)\}/, (match, p1) => {
+                if (lessVarible[p1] !== undefined) {
+                    return lessVarible[p1];
+                }
+                return p1;
+            });
             if (!(lessFileRegex.test(imported) || cssFileRegex.test(imported))) {
                 imported += ".less";
             }
             if (imported.match(/^~/)) {
-                hashPath = imported.replace("~", path__default["default"].join(__dirname, "../../"));
+                hashPath = require.resolve(imported.replace("~", ""));
             }
             else {
                 hashPath = path__default["default"].resolve(filePath, "..", imported);
@@ -49,7 +56,7 @@ function buildContents(lines, filePath) {
                 file = fs__default["default"].readFileSync(hashPath, "utf8");
                 splitLines = file.split(/\r\n|\n/);
                 splitLines[0] = splitLines[0].trim();
-                buildContents(splitLines, hashPath);
+                buildContents(splitLines, hashPath, lessVarible);
             }
             continue;
         }
@@ -59,11 +66,11 @@ function buildContents(lines, filePath) {
     writers.push(new Writer(currentLines));
     return index;
 }
-function compress(data, path) {
+function compress(data, path, lessVarible) {
     return new Promise(function (resolve, reject) {
         var splitLines = data.split(/\r\n|\n/);
         splitLines[0] = splitLines[0].trim();
-        buildContents(splitLines, path);
+        buildContents(splitLines, path, lessVarible);
         let previousLine = "";
         writers.forEach((writer) => {
             previousLine = writer.write(output, previousLine);

package/dist/plugins/theme/index.d.ts

@@ -1,26 +1,16 @@
 import { Compiler } from "webpack";
-interface StringObject {
-    [key: string]: string;
-}
-interface CustomLessVarible {
-    light: StringObject;
-    dark: StringObject;
-}
 export default class ThemePlugin {
-    private filePath;
-    private customLessVarible;
+    private stylePath;
     private pluginName;
-    private hash;
-    private outputPath;
+    private jsFilePrefix;
     private lessFiles;
-    constructor(filePath?: string, customLessVarible?: CustomLessVarible);
+    constructor(stylePath?: string);
     apply(compiler: Compiler): void;
     getBundledLessFile(): Promise<string>;
     runCssbundle(): Promise<string>;
-    getLessScript(): any[];
-    getLessVarible(): {
-        key: string;
+    private getCustomeVarible;
+    getLessVarible(contentHash: any): Promise<{
+        fileName: string;
         content: string;
-    }[];
+    }[]>;
 }
-export {};

package/dist/plugins/theme/index.js

@@ -10,6 +10,7 @@ var less = require('less');
 var path = require('path');
 var fse = require('fs-extra');
 var bundle = require('./bundle.js');
+var microUtils = require('@tuya-sat/micro-utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -20,10 +21,10 @@ var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
 var fse__default = /*#__PURE__*/_interopDefaultLegacy(fse);
 
 class ThemePlugin {
-    constructor(filePath = "static/css", customLessVarible = { dark: {}, light: {} }) {
-        this.filePath = filePath;
-        this.customLessVarible = customLessVarible;
+    constructor(stylePath = "static/css") {
+        this.stylePath = stylePath;
         this.pluginName = "ThemePlugin";
+        this.jsFilePrefix = "static/js";
         this.lessFiles = [];
     }
     apply(compiler) {
@@ -47,22 +48,34 @@ class ThemePlugin {
                     const { contenthash } = compilation.assetsInfo.get(pathname);
                     const darkCssFileName = `dark.${contenthash}.css`;
                     const lessFileName = `theme.${contenthash}.less`;
-                    compilation.emitAsset(`${this.filePath}/${darkCssFileName}`, new RawSource(content));
-                    compilation.emitAsset(`${this.filePath}/${lessFileName}`, new RawSource(lessContent));
-                    HtmlWebpackPlugin__default["default"].getHooks(compilation).beforeEmit.tapAsync("LayoutMockPlugin", (data, cb) => {
-                        const $ = cheerio__default["default"].load(data.html);
-                        const firstJs = $("script")[0];
-                        $("link").map(function () {
-                            const reg = /(?<=\/)light.([\s\S]+?).css$/;
-                            const href = $(this).attr("href");
-                            if (reg.test(href)) {
-                                $(this).attr("id", "micro-default-theme-css");
-                                $(`<link href="${href}" rel="stylesheet/light" id="micro-light-theme-css">`).insertBefore($(this));
-                                $(`<link href="${href.replace(reg, darkCssFileName)}" rel="stylesheet/dark" id="micro-dark-theme-css">`).insertBefore($(this));
-                                $(`<link href="${href.replace(reg, lessFileName)}" rel="stylesheet/less" id="micro-theme-less">`).insertBefore(firstJs);
-                            }
+                    const lessVarible = yield this.getLessVarible(contenthash);
+                    compilation.emitAsset(`${this.stylePath}/${darkCssFileName}`, new RawSource(content));
+                    compilation.emitAsset(`${this.stylePath}/${lessFileName}`, new RawSource(lessContent));
+                    lessVarible.forEach(({ fileName, content }) => {
+                        compilation.emitAsset(fileName, new RawSource(content));
+                    });
+                    HtmlWebpackPlugin__default["default"].getHooks(compilation).beforeAssetTagGeneration.tapAsync(this.pluginName, (data, cb) => {
+                        const { publicPath } = data.assets;
+                        HtmlWebpackPlugin__default["default"].getHooks(compilation).beforeEmit.tapAsync(this.pluginName, (data, cb) => {
+                            const $ = cheerio__default["default"].load(data.html);
+                            const firstJs = $("script")[0];
+                            $("link").map(function () {
+                                const reg = /(?<=\/)light.([\s\S]+?).css$/;
+                                const href = $(this).attr("href");
+                                if (reg.test(href)) {
+                                    $(this).attr("id", "micro-default-theme-css");
+                                    $(`<link href="${href}" rel="stylesheet/light" id="micro-light-theme-css">`).insertBefore($(this));
+                                    $(`<link href="${href.replace(reg, darkCssFileName)}" rel="stylesheet/dark" id="micro-dark-theme-css">`).insertBefore($(this));
+                                    lessVarible.forEach(({ fileName }) => {
+                                        const src = path__default["default"].join(publicPath, fileName);
+                                        $(`<script src="${src}" type="javascript/less" />`).insertBefore(firstJs);
+                                    });
+                                    $(`<link href="${href.replace(reg, lessFileName)}" rel="stylesheet/less" id="micro-theme-less">`).insertBefore(firstJs);
+                                }
+                            });
+                            data.html = $.html();
+                            cb(null, data);
                         });
-                        data.html = $.html();
                         cb(null, data);
                     });
                     callback();
@@ -78,7 +91,7 @@ class ThemePlugin {
                 const relativePath = path__default["default"].relative(cwd, file);
                 fakefile += `@import "${relativePath}";\n`;
             });
-            const file = yield bundle["default"](fakefile, path__default["default"].resolve(cwd, "fake.less"));
+            const file = yield bundle["default"](fakefile, path__default["default"].resolve(cwd, "fake.less"), Object.assign(Object.assign({}, theme.getThemeVariables({ dark: true })), { "entry-name": "light" }));
             return file;
         });
     }
@@ -89,9 +102,9 @@ class ThemePlugin {
                 return less__default["default"].render(bufferString, {
                     filename: file,
                     javascriptEnabled: true,
-                    modifyVars: theme.getThemeVariables({
+                    modifyVars: Object.assign(Object.assign(Object.assign({}, theme.getThemeVariables({
                         dark: true,
-                    }),
+                    })), microUtils.theme.getAntdOverWriteFile().dark), { "entry-name": "dark" }),
                     plugins: [createHandleImportPlugin()],
                 });
             });
@@ -103,32 +116,35 @@ class ThemePlugin {
             return singleCssContent;
         });
     }
-    getLessScript() {
-        let jsSrc = [];
-        this.getLessVarible().forEach(({ key, content }) => {
-            fse__default["default"].writeFileSync(path__default["default"].join(this.outputPath, "static/js", key), content);
-            jsSrc.push(path__default["default"].join("static/js", key));
+    getCustomeVarible() {
+        return tslib.__awaiter(this, void 0, void 0, function* () {
+            return [
+                yield microUtils.theme.getCustomLightVaribleFile(),
+                yield microUtils.theme.getCustomDarkVaribleFile(),
+            ];
         });
-        return jsSrc;
     }
-    getLessVarible() {
-        let antdLightVarible = theme.getThemeVariables();
-        let antdDarkVarible = theme.getThemeVariables({ dark: true });
-        delete antdDarkVarible.hack;
-        delete antdLightVarible.hack;
-        const { dark, light } = this.customLessVarible;
-        let lightLessVarible = Object.assign(Object.assign({}, antdLightVarible), light);
-        let darkLessVarible = Object.assign(Object.assign({}, antdDarkVarible), dark);
-        return [
-            {
-                key: `dark.${this.hash}.less.js`,
-                content: `var dark = ${JSON.stringify(darkLessVarible)}`,
-            },
-            {
-                key: `light.${this.hash}.less.js`,
-                content: `var light = ${JSON.stringify(lightLessVarible)}`,
-            },
-        ];
+    getLessVarible(contentHash) {
+        return tslib.__awaiter(this, void 0, void 0, function* () {
+            let antdLightVarible = theme.getThemeVariables();
+            let antdDarkVarible = theme.getThemeVariables({ dark: true });
+            const antdOverWriteVarible = microUtils.theme.getAntdOverWriteFile();
+            delete antdDarkVarible.hack;
+            delete antdLightVarible.hack;
+            const [customLightVarible, customDarkVarible] = yield this.getCustomeVarible();
+            let lightLessVarible = Object.assign(Object.assign(Object.assign({}, antdLightVarible), antdOverWriteVarible.light), customLightVarible);
+            let darkLessVarible = Object.assign(Object.assign(Object.assign({}, antdDarkVarible), antdOverWriteVarible.dark), customDarkVarible);
+            return [
+                {
+                    fileName: `${this.jsFilePrefix}/dark.${contentHash}.less.js`,
+                    content: `window.darkLessVarible = ${JSON.stringify(darkLessVarible)}`,
+                },
+                {
+                    fileName: `${this.jsFilePrefix}/light.${contentHash}.less.js`,
+                    content: `window.lightLessVarible = ${JSON.stringify(lightLessVarible)}`,
+                },
+            ];
+        });
     }
 }
 function createHandleImportPlugin() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-sat/micro-dev-loader",
-  "version": "2.1.3",
+  "version": "2.2.5",
   "main": "dist/index.js",
   "license": "MIT",
   "scripts": {
@@ -14,7 +14,7 @@
     "@babel/generator": "7.17.7",
     "@babel/plugin-syntax-typescript": "7.16.7",
     "@babel/template": "7.16.7",
-    "@tuya-sat/micro-utils": "2.0.0",
+    "@tuya-sat/micro-utils": "2.2.5",
     "cheerio": "1.0.0-rc.10",
     "ejs": "3.1.6",
     "fs-extra": "10.0.1",