feat(): v1.4.0 release

GitOfZGT · Dec 6, 2021 · 126038a · 126038a
1 parent 54efaa1
commit 126038a
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -11,13 +11,17 @@
 - 不依赖 css3 vars
 - 浏览器兼容性良好（IE9+ ?，待验证 ，但 vite 构建的产物最低 Polyfill 到 IE11，需更低的，你可以用 webpack 版本的插件[@zougt/some-loader-utils](https://github.com/GitOfZGT/some-loader-utils)，所以兼容性问题取决用的框架）
 
+[demo仓库](https://github.com/GitOfZGT/dynamic-theme-demos)
+
 ## 动态主题模式
 
 > v1.4.0 + 支持
 
-可用颜色板选择任意的主题色，会自动处理项目中包括组件库涉及的梯度颜色替换，这里以less为例，同样适用于scss。
+可用颜色板选择任意的主题色，这里以less为例，同样适用于scss。
+
+[在线demo之一](https://gitofzgt.github.io/vite-dynamictheme-antd-vue-demo/) 
 
-[在线DEMO](https://gitofzgt.github.io/vite-dynamictheme-antd-vue-demo/)  [在线DEMO源码](https://github.com/GitOfZGT/vite-dynamictheme-antd-vue-demo)
+[demo源码之一](https://github.com/GitOfZGT/vite-dynamictheme-antd-vue-demo)
 
 ![效果图](https://img-blog.csdnimg.cn/9bee30d711c54933a7e4ac0e28cdb7c3.gif#pic_center)
 
@@ -32,7 +36,7 @@ yarn add  color @zougt/vite-plugin-theme-preprocessor @zougt/some-loader-utils -
 
 **vite.config.js**
 
-> 注意：以下的配置适用于 动态主题模式 ， 预设主题模式 请往文档下面对应的看。
+> 注意：以下的配置只适用于 动态主题模式 ， 预设主题模式 请往文档下面对应的看。
 
 ```js
 import { defineConfig } from "vite";
@@ -108,6 +112,8 @@ export default defineConfig({
 
 **在线切换主题**
 
+动态主题切换必须使用的 "@setCustomTheme" 模块，会自动处理项目中包括组件库涉及的梯度颜色替换
+
 ```js
 import Color from "color";
 // "@setCustomTheme" 是 themePreprocessorPlugin 提供的模块，setCustomTheme的参数必须提供Color模块，至于为什么不把 Color 直接依赖进去是有原因的
@@ -131,13 +137,15 @@ npx z-theme inspect
 
 **动态主题模式的原理**
 
-一言难尽
+> 一言难尽
 
 ## 预设主题模式
 
 预设多种主题，其实也可以用动态主题模式来做，如需类似效果图中有暗黑主题的，可能使用此模式更加方便
 
-[在线DEMO](https://gitofzgt.github.io/dynamic-theme-demos/vite-antd-vue-preset-theme/) [在线DEMO源码](https://github.com/GitOfZGT/dynamic-theme-demos/tree/master/projects/vite-antd-vue-preset-theme)
+[在线demo之一](https://gitofzgt.github.io/dynamic-theme-demos/vite-antd-vue-preset-theme/) 
+
+[demo源码之一](https://github.com/GitOfZGT/dynamic-theme-demos/tree/master/projects/vite-antd-vue-preset-theme)
 
 ![效果图](https://img-blog.csdnimg.cn/caa3ccb9949a4fc4a6a8c7442291ed07.gif)
 
@@ -152,7 +160,7 @@ yarn add @zougt/vite-plugin-theme-preprocessor -D
 
 **vite.config.js**
 
-> 注意：以下的配置适用于 预设主题模式。文档的参数值都是默认值。
+> 注意：以下的配置只适用于 预设主题模式。文档的参数值都是默认值。
 
 ```js
 import themePreprocessorPlugin from "@zougt/vite-plugin-theme-preprocessor";
@@ -221,7 +229,7 @@ export default {
 1、开发时只需，html标签的calss添加对应的scopeName，移除上个scopeName   
 2、打包后，如果开启extract: true，需要切换对应的link标签的href  
 
-可以选择使用如下封装好的方法，都默认做了这些事情。
+可以选择使用如下封装好的方法，默认做好了这些事情。
 
 ```js
 import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils";
@@ -245,7 +253,7 @@ toggleTheme({
 // vite.config.js
 export default {
   optimizeDeps: {
-    // 排除 browser-utils.js 在vite的缓存依赖
+    // 排除 browser-utils.js 在vite的缓存依赖，对应 import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils" 的路径
     exclude: ["@zougt/vite-plugin-theme-preprocessor/dist/browser-utils"],
   },
 };

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zougt/vite-plugin-theme-preprocessor",
-  "version": "1.4.0-beta.9",
+  "version": "1.4.0",
   "description": "css theme preprocessor plugin for vite",
   "license": "MIT",
   "repository": "GitOfZGT/vite-plugin-theme-preprocessor",

diff --git a/src/browser-utils.js b/src/browser-utils.js
@@ -34,6 +34,12 @@ function createThemeLinkTag({ id, href }) {
   styleLink.id = id;
   return styleLink;
 }
+/**
+ * 
+ * @param {object} opts 
+ * @param {string} opts.scopeName 
+ * @returns 
+ */
 export function toggleTheme(opts) {
   const options = {
     // multipleScopeVars: [],

diff --git a/src/index.js b/src/index.js
@@ -41,7 +41,8 @@ export default function themePreprocessorPlugin(options = {}) {
     .resolve(pack.name, {
       paths: [process.cwd()],
     })
-    .replace(/[\\/]dist[\\/]index\.js$/, "").replace(/\\/g,'/');
+    .replace(/[\\/]dist[\\/]index\.js$/, "")
+    .replace(/\\/g, "/");
   const customThemeOutputPath = `${targetRsoleved}/setCustomTheme.js`;
   let buildCommand;
   const processorNames = Object.keys(options);
@@ -99,6 +100,7 @@ export default function themePreprocessorPlugin(options = {}) {
 
       processorNames.forEach((lang) => {
         const langOptions = options[lang] || {};
+        // 合并参数
         defaultOptions = { ...defaultOptions, ...langOptions };
         if (
           Array.isArray(langOptions.multipleScopeVars) &&
@@ -112,29 +114,19 @@ export default function themePreprocessorPlugin(options = {}) {
             const founded = allmultipleScopeVars.find(
               (f) => f.scopeName === item.scopeName
             );
-            if (founded) {
-              let paths = [];
-              if (Array.isArray(founded.path)) {
-                paths = paths.concat(founded.path);
-              } else if (founded.path) {
-                paths.push(founded.path);
-              }
-              if (Array.isArray(item.path)) {
-                paths = paths.concat(item.path);
-              } else if (item.path) {
-                paths.push(item.path);
-              }
-              founded.path = Array.from(new Set(paths));
-            } else {
-              allmultipleScopeVars.push(item);
+            if (!founded) {
+              allmultipleScopeVars.push({
+                ...item,
+                path: null,
+              });
             }
           });
         }
       });
       css.preprocessorOptions = preprocessorOptions;
       const modulesOptions = css.modules !== false ? css.modules || {} : null;
 
-      if (modulesOptions) {
+      if (modulesOptions && !defaultOptions.arbitraryMode) {
         modulesOptions.generateScopedName = getModulesScopeGenerater({
           multipleScopeVars: allmultipleScopeVars,
           generateScopedName: modulesOptions.generateScopedName,
@@ -150,32 +142,34 @@ export default function themePreprocessorPlugin(options = {}) {
       // 存储最终解析的配置
       config = resolvedConfig;
 
-      const browerPreprocessorOptions = {
-        ...defaultOptions,
-        multipleScopeVars: allmultipleScopeVars,
-      };
-
       createPulignParamsFile({
         extract: buildCommand !== "build" ? false : defaultOptions.extract,
       });
-
-      const packRoot = require
-        .resolve(pack.name, {
-          paths: [config.root],
-        })
-        .replace(/[\\/]index\.js$/, "").replace(/\\/g,'/');
-      // 将一些参数打入到 toBrowerEnvs.js , 由brower-utils.js 获取
-      fsExtra.writeFileSync(
-        `${packRoot}/toBrowerEnvs.js`,
-        `export const browerPreprocessorOptions = ${JSON.stringify(
-          browerPreprocessorOptions
-        )};\nexport const basePath="${
-          config.base || ""
-        }";\nexport const assetsDir="${
-          config.build.assetsDir || ""
-        }";\nexport const buildCommand="${buildCommand}";
+      if (!defaultOptions.arbitraryMode) {
+        // 预设主题模式，提供 brower-utils.js 需要的参数
+        const browerPreprocessorOptions = {
+          ...defaultOptions,
+          multipleScopeVars: allmultipleScopeVars,
+        };
+        const packRoot = require
+          .resolve(pack.name, {
+            paths: [config.root],
+          })
+          .replace(/[\\/]index\.js$/, "")
+          .replace(/\\/g, "/");
+        // 将一些参数打入到 toBrowerEnvs.js , 由brower-utils.js 获取
+        fsExtra.writeFileSync(
+          `${packRoot}/toBrowerEnvs.js`,
+          `export const browerPreprocessorOptions = ${JSON.stringify(
+            browerPreprocessorOptions
+          )};\nexport const basePath="${
+            config.base || ""
+          }";\nexport const assetsDir="${
+            config.build.assetsDir || ""
+          }";\nexport const buildCommand="${buildCommand}";
         `
-      );
+        );
+      }
       if (
         defaultOptions.arbitraryMode &&
         preCustomThemeOutputPath !== defaultOptions.customThemeOutputPath
@@ -215,9 +209,9 @@ export default function themePreprocessorPlugin(options = {}) {
           const resolveDir = `${pathnames
             .slice(0, index)
             .join("/")}/${resolveName}`;
-          const originalDir = path.resolve(
-            "node_modules/.zougtTheme/original"
-          ) .replace(/\\/g, "/");
+          const originalDir = path
+            .resolve("node_modules/.zougtTheme/original")
+            .replace(/\\/g, "/");
           if (
             !fsExtra.existsSync(resolveDir) &&
             !fsExtra.existsSync(`${originalDir}/${resolveName}`)
@@ -269,22 +263,6 @@ export default function themePreprocessorPlugin(options = {}) {
                 });
                 `
             );
-            // 如果 源less中存在bin，生成一份替代品的bin
-            // if (fsExtra.existsSync(`${resolveDir}/bin`)) {
-            //   fsExtra.readdirSync(`${resolveDir}/bin`).forEach((name) => {
-            //     if (fsExtra.statSync(`${resolveDir}/bin/${name}`).isFile()) {
-            //       if (!fsExtra.existsSync(`${substitutePreprocessorDir}/bin`)) {
-            //         fsExtra.mkdirSync(`${substitutePreprocessorDir}/bin`);
-            //       }
-            //       fsExtra.writeFileSync(
-            //         `${substitutePreprocessorDir}/bin/${name}`,
-            //         `#!/usr/bin/env node\n"use strict";\n
-            //           require("${originalDir}/${resolveName}/bin/${name}");
-            //         `
-            //       );
-            //     }
-            //   });
-            // }
 
             // 替换了处理器的标识
 
@@ -325,12 +303,14 @@ export default function themePreprocessorPlugin(options = {}) {
       return null;
     },
     load(id) {
+      // 动态主题模式下 加载虚拟模块 "@setCustomTheme"
       if (
         id === "@setCustomTheme" &&
         defaultOptions.arbitraryMode &&
         defaultOptions.customThemeOutputPath
       ) {
         if (buildCommand !== "build") {
+          // 开发模式
           return `import { default as setCustomTheme } from "${defaultOptions.customThemeOutputPath}";
           export default setCustomTheme;
           import Color from "color";
@@ -339,11 +319,13 @@ export default function themePreprocessorPlugin(options = {}) {
           })
         `;
         }
+        // 打包时"@setCustomTheme"模块的内容，会在 renderChunk 进行源码替换
         return `${setCustomThemeCodeReplacer};export default setCustomTheme;`;
       }
       return null;
     },
     renderChunk(code) {
+      // 打包才会进入这个钩子
       if (
         defaultOptions.arbitraryMode &&
         code.includes(setCustomThemeCodeReplacer)
@@ -457,15 +439,17 @@ export default function themePreprocessorPlugin(options = {}) {
 }
 
 /**
- * 主题热更新插件
+ * 动态主题模式的热更新插件
  * @returns object
  */
 
 function themePreprocessorHmrPlugin() {
   let parentApi = null;
   let cacheThemeStyleContent = "";
   let buildCommand = "";
+  // 触发热更新时的 样式文件
   const hotUpdateStyleFiles = new Set();
+  // 进入transform的样式文件
   const transformStyleFiles = new Set();
   let hotServer = null;
   let config = {};
@@ -481,6 +465,7 @@ function themePreprocessorHmrPlugin() {
       config = resolvedConfig;
     },
     buildStart() {
+      // 获取依赖插件提供的 方法
       const parentName = "vite-plugin-theme-preprocessor";
       const parentPlugin = config.plugins.find(
         (plugin) => plugin.name === parentName
@@ -492,15 +477,18 @@ function themePreprocessorHmrPlugin() {
       parentApi = parentPlugin.api;
     },
     transform(code, id) {
+      // vite:css插件内的transform使用less/sass，需要在less/sass编译完后调用 getThemeStyleContent
       const defaultOptions = parentApi.getOptions();
       if (
         defaultOptions.arbitraryMode &&
         /\.(less|scss|sass)(\?.+)?/.test(id)
       ) {
         transformStyleFiles.add(id);
+
+        // 当transform的的样式文件数量 到达 触发热更新的样式文件数量时，就获取主题css，并触发热更新事件 import.meta.hot.on('custom-theme-update',()=>{}）
         if (
           hotUpdateStyleFiles.size &&
-          hotUpdateStyleFiles.size <= transformStyleFiles.size
+          hotUpdateStyleFiles.size === transformStyleFiles.size
         ) {
           getThemeStyleContent();
           createSetCustomTheme({
@@ -559,6 +547,7 @@ function themePreprocessorHmrPlugin() {
           }
         });
       }
+
       if (file === customThemeOutputPath) {
         return Promise.resolve([]);
       }