feat(): add browser-utils.js

GitOfZGT · Oct 27, 2021 · 489544b · 489544b
1 parent 3ec7526
commit 489544b
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -156,25 +156,58 @@ src/components/Button/style.css
 ## 在线切换主题 css 文件
 
 ```js
-const toggleTheme = (scopeName = "theme-default") => {
-  let styleLink = document.getElementById("theme-link-tag");
-  if (styleLink) {
-    // 假如存在id为theme-link-tag 的link标签，直接修改其href
-    styleLink.href = `/${scopeName}.css`;
-    // 注：如果是removeCssScopeName:true移除了主题文件的权重类名，就可以不用修改className 操作
-    document.documentElement.className = scopeName;
-  } else {
-    // 不存在的话，则新建一个
-    styleLink = document.createElement("link");
-    styleLink.type = "text/css";
-    styleLink.rel = "stylesheet";
-    styleLink.id = "theme-link-tag";
-    styleLink.href = `/${scopeName}.css`;
-    // 注：如果是removeCssScopeName:true移除了主题文件的权重类名，就可以不用修改className 操作
-    document.documentElement.className = scopeName;
-    document.head.append(styleLink);
-  }
-};
+import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils.js";
+toggleTheme({
+  scopeName: "theme-default",
+  // link的href，  config.build.assetsDir 是对应vite的配置build.assetsDir
+  customLinkHref: (href) => `${config.build.assetsDir}${href}`,
+  themeLinkTagId: "theme-link-tag",
+  // 是否已经对抽取的css文件内对应scopeName的权重类名移除了
+  hasRemoveScopeName: false,
+  // "head" || "body"
+  themeLinkTagInjectTo: "head",
+});
+// function addClassNameToHtmlTag(scopeName, hasRemoveScopeName) {
+//     // 注：如果是removeCssScopeName:true移除了主题文件的权重类名，就可以不用修改className 操作
+//     if (hasRemoveScopeName) {
+//         return;
+//     }
+//     const currentHtmlClassNames = (
+//         document.documentElement.className || ''
+//     ).split(/\s+/g);
+//     if (!currentHtmlClassNames.includes(scopeName)) {
+//         currentHtmlClassNames.push(scopeName);
+//         document.documentElement.className = currentHtmlClassNames.join(' ');
+//     }
+// }
+
+// function toggleTheme(opts) {
+//     const options = {
+//         scopeName: 'theme-default',
+//         customLinkHref: (href) => href,
+//         themeLinkTagId: 'theme-link-tag',
+//         // 是否已经对抽取的css文件内对应scopeName的权重类名移除了
+//         hasRemoveScopeName: false,
+//         // "head" || "body"
+//         themeLinkTagInjectTo: 'head',
+//         ...opts,
+//     };
+//     let styleLink = document.getElementById(options.themeLinkTagId);
+//     if (styleLink) {
+//         // 假如存在id为theme-link-tag 的link标签，直接修改其href
+//         styleLink.href = options.customLinkHref(`/${options.scopeName}.css`);
+//         addClassNameToHtmlTag(options.scopeName, options.hasRemoveScopeName);
+//     } else {
+//         // 不存在的话，则新建一个
+//         styleLink = document.createElement('link');
+//         styleLink.type = 'text/css';
+//         styleLink.rel = 'stylesheet';
+//         styleLink.id = options.themeLinkTagId;
+//         styleLink.href = options.customLinkHref(`/${options.scopeName}.css`);
+//         addClassNameToHtmlTag(options.scopeName, options.hasRemoveScopeName);
+//         document[options.themeLinkTagInjectTo].append(styleLink);
+//     }
+// }
 ```
 
 webpack 版本的实现方案请查看[`@zougt/some-loader-utils`](https://github.com/GitOfZGT/some-loader-utils#getSass)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zougt/vite-plugin-theme-preprocessor",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "css theme preprocessor plugin for vite",
   "license": "MIT",
   "repository": "GitOfZGT/vite-plugin-theme-preprocessor",
@@ -29,7 +29,7 @@
     "dist"
   ],
   "dependencies": {
-    "@zougt/some-loader-utils": "^1.1.0",
+    "@zougt/some-loader-utils": "^1.3.2",
     "fs-extra": "^9.1.0",
     "string-hash": "^1.1.3"
   },

diff --git a/src/browser-utils.js b/src/browser-utils.js
@@ -0,0 +1,47 @@
+/* eslint-env browser */
+
+function addClassNameToHtmlTag(scopeName, hasRemoveScopeName) {
+    // 注：如果是removeCssScopeName:true移除了主题文件的权重类名，就可以不用修改className 操作
+    if (hasRemoveScopeName) {
+        return;
+    }
+    const currentHtmlClassNames = (
+        document.documentElement.className || ''
+    ).split(/\s+/g);
+    if (!currentHtmlClassNames.includes(scopeName)) {
+        currentHtmlClassNames.push(scopeName);
+        document.documentElement.className = currentHtmlClassNames.join(' ');
+    }
+}
+
+export function toggleTheme(opts) {
+    const options = {
+        scopeName: 'theme-default',
+        customLinkHref: (href) => href,
+        themeLinkTagId: 'theme-link-tag',
+        // 是否已经对抽取的css文件内对应scopeName的权重类名移除了
+        hasRemoveScopeName: false,
+        // "head" || "body"
+        themeLinkTagInjectTo: 'head',
+        ...opts,
+    };
+    let styleLink = document.getElementById(options.themeLinkTagId);
+    if (styleLink) {
+        // 假如存在id为theme-link-tag 的link标签，直接修改其href
+        styleLink.href = options.customLinkHref(`/${options.scopeName}.css`);
+        addClassNameToHtmlTag(options.scopeName, options.hasRemoveScopeName);
+    } else {
+        // 不存在的话，则新建一个
+        styleLink = document.createElement('link');
+        styleLink.type = 'text/css';
+        styleLink.rel = 'stylesheet';
+        styleLink.id = options.themeLinkTagId;
+        styleLink.href = options.customLinkHref(`/${options.scopeName}.css`);
+        addClassNameToHtmlTag(options.scopeName, options.hasRemoveScopeName);
+        document[options.themeLinkTagInjectTo].append(styleLink);
+    }
+}
+
+export default {
+    toggleTheme,
+};