refactor(theme-tool): Reimplementing the theme-tool method (#2369)

* fix(theme): fix

* refactor(theme-tool): refactor theme-tool Class, adopt style by adoptedStyleSheets

* fix(theme): fix

* refactor(theme-tool): refactor theme-tool done

* fix(theme): fix

* fix(theme-tool): support multi target

.eslintrc.js

@@ -50,6 +50,7 @@ module.exports = {
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/restrict-template-expressions': 'off',
     '@typescript-eslint/no-invalid-this': 'off',
-    'vue/no-deprecated-dollar-scopedslots-api': 'off'
+    'vue/no-deprecated-dollar-scopedslots-api': 'off',
+    '@typescript-eslint/lines-between-class-members': 'off'
   }
 }

.gitignore

@@ -59,13 +59,18 @@ tgzs
 *.tgz
 
 
+# 以下用不到了
 packages/theme/scripts/theme.json
 packages/theme/scripts/theme-result.txt
 packages/theme/scripts/themeExcel.xlsx
-
 packages/theme/src/theme/*-theme/component.js
 packages/theme/src/aurora-theme
 packages/theme/src/smb-theme
+#------------------------------
+
+# theme 的汇总文件是自动生成的
+packages/theme/src/old-theme-index.less
+packages/theme/src/index.less
 
 pnpm-lock.yaml
 gulp/bundle.json
@@ -79,4 +84,5 @@ test-results
 examples/sites/public/tiny-vue*.js
 examples/sites/public/tiny-vue*.mjs
 examples/sites/public/tailwind.css
-examples/sites/public/index.css
+examples/sites/public/index.css
+

packages/theme/build/gulp-dist.js

@@ -32,7 +32,7 @@ function concatIndex(cb) {
 }
 // 2、拼接所有组件的 old-theme.less 到一起   old-theme-index.less
 function concatOldTheme(cb) {
-  _concatFiles('../src/*/old-theme.less', '../src/old-theme.less')
+  _concatFiles('../src/*/old-theme.less', '../src/old-theme-index.less')
   cb()
 }
 // 3、编译
@@ -41,7 +41,7 @@ gulp.task('compile', () => {
     .src([
       `${source}/**/index.less`, // 编译默认主题
       `${source}/index.less`,
-      `${source}/old-theme.less` // 编译旧主题
+      `${source}/old-theme-index.less` // 编译旧主题
     ])
     .pipe(svgInline(svgInlineOption))
     .pipe(less())

packages/theme/build/release.js

@@ -1,12 +1,31 @@
 import fs from 'node:fs'
 import path from 'node:path'
 
-// 复制package.json/README.md到dist目录
-fs.copyFileSync('README.md', path.join('dist', 'README.md'))
-
 const root = path.resolve('./')
-const content = await fs.promises.readFile(path.resolve(root, 'package.json'), 'utf8')
+
+// 1、复制 theme-tool.js /README.md 到dist目录
+fs.copyFileSync('README.md', path.join('dist', 'README.md'))
+fs.copyFileSync('src/theme-tool.js', path.join('dist', 'theme-tool.js'))
+fs.copyFileSync('src/theme-tool.d.ts', path.join('dist', 'theme-tool.d.ts'))
+
+// 2、读取 old-theme-index.js , dist/old-theme-index.less， 合并后写入 dist/ old-theme-index.js
+let jsStr = `
+export default {
+  id: 'tiny-old-theme',
+  name: 'OldTheme',
+  cnName: '旧的主题',
+  css: \`#CSS#\`
+}
+`
+let cssStr = fs.readFileSync(path.resolve(root, 'dist/old-theme-index.css'), 'utf8')
+
+jsStr = jsStr.replace('#CSS#', cssStr)
+fs.writeFileSync(path.resolve(root, 'src/old-theme-index.js'), jsStr) // 供开发时(pnpm site)， 可以访问到最新的定制主题变量
+fs.writeFileSync(path.resolve(root, 'dist/old-theme-index.js'), jsStr)
+
+// 3、复制 package.json
+const content = fs.readFileSync(path.resolve(root, 'package.json'), 'utf8')
 const packageJson = JSON.parse(content)
 delete packageJson.exports
 delete packageJson.private
-await fs.promises.writeFile(path.resolve(root, 'dist/package.json'), JSON.stringify(packageJson, null, 2))
+fs.writeFileSync(path.resolve(root, 'dist/package.json'), JSON.stringify(packageJson, null, 2))

packages/theme/package.json

@@ -29,11 +29,11 @@
   },
   "main": "index.css",
   "scripts": {
-    "clean": "rimraf dist src/aurora-theme src/smb-theme",
+    "clean": "rimraf dist",
     "build:theme": "gulp build --gulpfile build/gulp-dist.js",
     "build": "npm run clean && npm run build:theme",
-    "release": "node build/release.js",
     "build:fast": "npm run build && npm run release",
+    "release": "node build/release.js",
     "build:copy-remote": "npm run build:theme && cp-cli dist ../tiny-vue/node_modules/@opentiny/vue-theme",
     "publishTgz": "node .cloudbuild/publish-tgzs.js",
     "postversion": "pnpm build",

packages/theme/src/button/old-theme.less

@@ -3,5 +3,5 @@
 
 .@{button-prefix-cls} {
   // 默认时按钮字重
-  --tv-Button-font-weight: var(--tv-font-weight-thin);
+  --tv-Button-border-radius: 6px;
 }

packages/theme/src/old-theme.less

@@ -1,2 +0,0 @@
-@import './base/old-theme.less';
-@import './button/old-theme.less';

packages/theme/src/theme-tool.d.ts

@@ -1,15 +1,32 @@
 interface ThemeData {
-  id: string
-  name: string
-  cnName: string
-  data: object
+  id?: string
+  name?: string
+  cnName?: string
+  /**
+   * 需要追加的全局css变量的对象。
+   * 比如： { 'tv-base-color-brand' : '#1476ff' } 会追加到 :root { --tv-base....... }
+   * */
+  data?: Record<string, string>
+  /**
+   * 需要追加的样式规则, 以覆盖或扩充组件的样式。
+   * 比如： .tiny-button { border:none;  }
+   * */
+  css?: string
 }
 
+/**
+ * 动态切换文档或影子根节点的样式类
+ * @example
+ * const themeTool= new TinyThemeTool();
+ * themeTool.changeTheme(xxx)
+ */
 export default class TinyThemeTool {
-  currentTheme: string
-  contentElement: HTMLElement
-  styleSheetId: string
-  defaultTheme: object
-  changeTheme: (theme: ThemeData) => void
-  constructor(theme: ThemeData, styleSheetId: string)
+  constructor(theme?: ThemeData)
+  /**
+   * 变更目标上的主题。
+   * 它会汇总 theme 下 data 和 css 属性的有效样式，挂载到target 节点下
+   * @param {ThemeData} theme - 变量的主题数据
+   * @param {Document | ShadowRoot} target - 变量的挂载点，不指定时默认为 document
+   */
+  changeTheme: (theme: ThemeData, target?: Document | ShadowRoot) => void
 }

packages/theme/src/theme-tool.js

@@ -1 +1,40 @@
-export default class TinyThemeTool {}
+import OldTheme from './old-theme-index.js'
+
+export { OldTheme }
+
+/**
+ * 动态切换文档或影子根节点的样式类
+ */
+export default class TinyThemeTool {
+  constructor(theme) {
+    this.loaded = {} // 缓存已加载的样式
+    if (theme) {
+      this.changeTheme(theme)
+    }
+  }
+
+  changeTheme(theme, target = document) {
+    let loadedSheet = this.loaded[target]
+    if (!loadedSheet) {
+      loadedSheet = new CSSStyleSheet()
+      target.adoptedStyleSheets = [...target.adoptedStyleSheets, loadedSheet]
+      this.loaded[target] = loadedSheet
+    }
+
+    if (theme && (theme.data || theme.css)) {
+      let cssContent = ''
+      if (theme.data && typeof theme.data === 'object') {
+        cssContent = Object.keys(theme.data)
+          .map((key) => `--${key}: ${theme.data[key]}; `)
+          .join('')
+
+        cssContent = `:root{${cssContent}}`
+      }
+      if (theme.css && typeof theme.css === 'string') {
+        cssContent += theme.css
+      }
+
+      loadedSheet.replaceSync(cssContent)
+    }
+  }
+}