@tuya-sat/micro-dev-loader 2.0.0 → 2.1.2

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import LayoutMockPlugin from "./plugins/layoutMock";
+import ThemePlugin from "./plugins/theme";
 declare const addjsLoader: (sourceCode: string) => string;
 export default addjsLoader;
-export { LayoutMockPlugin };
+export { LayoutMockPlugin, ThemePlugin };

package/dist/index.js

@@ -3,16 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var loaderUtils = require('loader-utils');
-var index$1 = require('./codeMaker/index.js');
+var index$2 = require('./codeMaker/index.js');
 var microUtils = require('@tuya-sat/micro-utils');
 var index = require('./plugins/layoutMock/index.js');
+var index$1 = require('./plugins/theme/index.js');
 
 const addjsLoader = function (sourceCode) {
     var _a;
     const { authedCode = [], microFramework } = loaderUtils.getOptions(this);
     const manifest = microUtils.parseManifest();
     const isMobile = ((_a = manifest.supportedPlatform) === null || _a === void 0 ? void 0 : _a[0]) === "MOBILE";
-    const codeMaker = new (index$1.createCodeMaker(isMobile))({
+    const codeMaker = new (index$2.createCodeMaker(isMobile))({
         sourceCode,
         microFramework,
     });
@@ -24,4 +25,5 @@ const addjsLoader = function (sourceCode) {
 };
 
 exports.LayoutMockPlugin = index["default"];
+exports.ThemePlugin = index$1["default"];
 exports["default"] = addjsLoader;

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

@@ -0,0 +1 @@
+export default function compress(data: string, path: string): Promise<string>;

package/dist/plugins/theme/bundle.js

@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var fs = require('fs');
+var path = require('path');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
+var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
+
+const stringLiteralRegex = /.*(?:'|")(.*)(?:'|").*/;
+const lessFileRegex = /.less$/;
+const cssFileRegex = /.css$/;
+const imports = [];
+const writers = [];
+const output = [];
+function buildContents(lines, filePath) {
+    let currentLines = [];
+    let line;
+    let hashPath;
+    let imported;
+    let file;
+    let splitLines;
+    if (typeof imports[filePath] === "undefined") {
+        imports[filePath] = true;
+    }
+    for (var index = 0; index < lines.length; ++index) {
+        line = lines[index].trim();
+        if (line.indexOf("@import ") === 0) {
+            // We found an import statement
+            if (currentLines.length > 0) {
+                writers.push(new Writer(currentLines));
+                currentLines = [];
+            }
+            imported = line.replace(stringLiteralRegex, "$1");
+            if (!(lessFileRegex.test(imported) || cssFileRegex.test(imported))) {
+                imported += ".less";
+            }
+            if (imported.match(/^~/)) {
+                hashPath = imported.replace("~", path__default["default"].join(__dirname, "../../"));
+            }
+            else {
+                hashPath = path__default["default"].resolve(filePath, "..", imported);
+            }
+            if (typeof imports[hashPath] === "undefined") {
+                imports[hashPath] = true;
+                file = fs__default["default"].readFileSync(hashPath, "utf8");
+                splitLines = file.split(/\r\n|\n/);
+                splitLines[0] = splitLines[0].trim();
+                buildContents(splitLines, hashPath);
+            }
+            continue;
+        }
+        currentLines.push(lines[index]);
+    }
+    // Push all remaining lines
+    writers.push(new Writer(currentLines));
+    return index;
+}
+function compress(data, path) {
+    return new Promise(function (resolve, reject) {
+        var splitLines = data.split(/\r\n|\n/);
+        splitLines[0] = splitLines[0].trim();
+        buildContents(splitLines, path);
+        let previousLine = "";
+        writers.forEach((writer) => {
+            previousLine = writer.write(output, previousLine);
+        });
+        while (!output[output.length - 1]) {
+            output.pop();
+        }
+        // Make sure the file ends in a new line.
+        if (!!output[output.length - 1].trim()) {
+            output.push("");
+        }
+        resolve(output.join("\n"));
+    });
+}
+class Writer {
+    /**
+     * Creates a new Writer.
+     *
+     * @param operator The array of lines to associate with this writer.
+     */
+    constructor(operator) {
+        if (Array.isArray(operator)) {
+            this.__lines = operator;
+            return;
+        }
+    }
+    /**
+     * Writes the lines for this writer into the output array.
+     *
+     * @param output The output lines to which the Writer's lines should be appended.
+     * @param previousLine The previous line that was added to output.
+     */
+    write(output, previousLine) {
+        // If this writer has a module associated with it, we want to first add the
+        // lines for the module before adding the lines for this writer.
+        var trim;
+        // Add every line to the output.
+        this.__lines.forEach((line) => {
+            trim = line.trim();
+            if (!previousLine && !trim) {
+                return;
+            }
+            output.push(line);
+            previousLine = trim;
+        });
+        return previousLine;
+    }
+}
+
+exports["default"] = compress;

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

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

package/dist/plugins/theme/index.js

@@ -0,0 +1,156 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var theme = require('../../node_modules/antd/dist/theme.js');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var cheerio = require('cheerio');
+var less = require('less');
+var path = require('path');
+var fse = require('fs-extra');
+var bundle = require('./bundle.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var HtmlWebpackPlugin__default = /*#__PURE__*/_interopDefaultLegacy(HtmlWebpackPlugin);
+var cheerio__default = /*#__PURE__*/_interopDefaultLegacy(cheerio);
+var less__default = /*#__PURE__*/_interopDefaultLegacy(less);
+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;
+        this.pluginName = "ThemePlugin";
+        this.lessFiles = [];
+    }
+    apply(compiler) {
+        const isProduction = process.env.NODE_ENV === "production";
+        if (isProduction) {
+            const { RawSource } = compiler.webpack.sources;
+            compiler.hooks.thisCompilation.tap(this.pluginName, (compilation) => {
+                compilation.hooks.processAssets.tapAsync({
+                    name: this.pluginName,
+                    stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+                }, (assets, callback) => tslib.__awaiter(this, void 0, void 0, function* () {
+                    const [pathname] = Object.entries(assets).find(([pathname]) => {
+                        return /\/light\.[\s\S]+?\.css$/.test(pathname);
+                    });
+                    const chunk = compilation.namedChunks.get("light");
+                    compilation.chunkGraph.getChunkModules(chunk).forEach((item) => {
+                        this.lessFiles.push(item.nameForCondition());
+                    });
+                    const content = yield this.runCssbundle();
+                    const lessContent = yield this.getBundledLessFile();
+                    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);
+                            }
+                        });
+                        data.html = $.html();
+                        cb(null, data);
+                    });
+                    callback();
+                }));
+            });
+        }
+    }
+    getBundledLessFile() {
+        return tslib.__awaiter(this, void 0, void 0, function* () {
+            let fakefile = "";
+            const cwd = process.cwd();
+            this.lessFiles.forEach((file) => {
+                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"));
+            return file;
+        });
+    }
+    runCssbundle() {
+        return tslib.__awaiter(this, void 0, void 0, function* () {
+            const lessTasks = this.lessFiles.map((file) => {
+                let bufferString = fse__default["default"].readFileSync(file, "utf-8");
+                return less__default["default"].render(bufferString, {
+                    filename: file,
+                    javascriptEnabled: true,
+                    modifyVars: theme["default"].getThemeVariables({
+                        dark: true,
+                    }),
+                    plugins: [createHandleImportPlugin()],
+                });
+            });
+            const cssContents = yield Promise.all(lessTasks);
+            let singleCssContent = "";
+            cssContents.forEach((content) => {
+                singleCssContent += content.css + "\n";
+            });
+            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));
+        });
+        return jsSrc;
+    }
+    getLessVarible() {
+        let antdLightVarible = theme["default"].getThemeVariables();
+        let antdDarkVarible = theme["default"].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)}`,
+            },
+        ];
+    }
+}
+function createHandleImportPlugin() {
+    return {
+        install(lessInstance, pluginManager) {
+            pluginManager.addFileManager(new HandleImport());
+        },
+        minVersion: [3, 0, 0],
+    };
+}
+class HandleImport extends less.FileManager {
+    loadFile(filename, currentDirectory, options, environment) {
+        const _super = Object.create(null, {
+            loadFile: { get: () => super.loadFile }
+        });
+        return tslib.__awaiter(this, void 0, void 0, function* () {
+            if (filename.startsWith("~")) {
+                return _super.loadFile.call(this, filename.replace("~", ""), currentDirectory, options, environment);
+            }
+            return _super.loadFile.call(this, filename, currentDirectory, options, environment);
+        });
+    }
+}
+
+exports["default"] = ThemePlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-sat/micro-dev-loader",
-  "version": "2.0.0",
+  "version": "2.1.2",
   "main": "dist/index.js",
   "license": "MIT",
   "scripts": {
@@ -20,13 +20,16 @@
     "fs-extra": "10.0.1",
     "html-webpack-plugin": "5.5.0",
     "less": "4.1.2",
+    "less-bundle-promise": "1.0.11",
     "loader-utils": "3.2.0",
-    "path": "0.12.7"
+    "path": "0.12.7",
+    "tslib": "^2.3.1"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "21.0.2",
     "@rollup/plugin-node-resolve": "13.1.3",
     "@types/jest": "27.4.1",
+    "@types/less": "3.0.3",
     "jest": "27.5.1",
     "rollup": "2.70.1",
     "rollup-plugin-copy": "3.4.0",