Fix CI

.github/workflows/duoyun-ui-publish.yml

@@ -11,12 +11,18 @@ jobs:
   duoyun-ui-publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4 # docs https://pnpm.io/continuous-integration#github-actions
+        with:
+          version: 9
 
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 22.x
+          cache: pnpm
 
       - run: pnpm install
 

.github/workflows/gem-analyzer-publish.yml

@@ -11,12 +11,18 @@ jobs:
   gem-analyzer-publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4 # docs https://pnpm.io/continuous-integration#github-actions
+        with:
+          version: 9
 
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 22.x
+          cache: pnpm
 
       - run: pnpm install
 

.github/workflows/gem-book-publish.yml

@@ -11,12 +11,18 @@ jobs:
   gem-book-publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4 # docs https://pnpm.io/continuous-integration#github-actions
+        with:
+          version: 9
 
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 22.x
+          cache: pnpm
 
       - run: pnpm install
 

.github/workflows/gem-devtools-publish.yml

@@ -11,12 +11,18 @@ jobs:
   gem-devtools-publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4 # docs https://pnpm.io/continuous-integration#github-actions
+        with:
+          version: 9
 
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 22.x
+          cache: pnpm
 
       - run: pnpm install
 

.github/workflows/gem-publish.yml

@@ -3,20 +3,26 @@ name: Publish Gem
 on:
   push:
     tags:
-      - '@mantou/gem@*'
+      - "@mantou/gem@*"
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 jobs:
   gem-publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4 # docs https://pnpm.io/continuous-integration#github-actions
+        with:
+          version: 9
 
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 22.x
+          cache: pnpm
 
       - run: node -e "fs.writeFileSync('./packages/gem/src/lib/version.ts', 'export const version = \'' + require('./packages/gem/package.json').version + '\';\n')"
       - run: pnpm install

.github/workflows/lint.yml

@@ -9,13 +9,20 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4 # docs https://pnpm.io/continuous-integration#github-actions
+        with:
+          version: 9
 
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 22.x
+          cache: pnpm
 
       - run: pnpm install
+
       - run: pnpm lint
       - run: pnpm test

Cargo.toml

@@ -1,5 +1,5 @@
 [workspace]
-members = ["crates/swc-gem-plugin"]
+members = ["crates/swc-plugin-gem"]
 
 resolver = "2"
 

README.md

@@ -35,6 +35,8 @@ Create custom elements, bind data, route switching, and quickly develop WebApps
 | [packages/gem-port](packages/gem-port)         | Export Gem elements as React/Vue/Svelte components               |
 | [packages/gem-examples](packages/gem-examples) | Gem and DuoyunUI examples                                        |
 
+[Rodmap](https://mm.tt/app/map/3412316197?t=TGs84FRcwQ).
+
 ## Contribution
 
 Fork repo, submit PR

README_zh.md

@@ -41,6 +41,8 @@
 | [packages/gem-port](packages/gem-port)         | 将 Gem 元素导出为 React/Vue/Svelte 组件 |
 | [packages/gem-examples](packages/gem-examples) | 一些 Gem 和 DuoyunUI 示例               |
 
+[路线图](https://mm.tt/app/map/3412316197?t=TGs84FRcwQ)。
+
 ## 贡献
 
 Fork 项目，提交 PR

crates/swc-gem-plugin/Cargo.toml → crates/swc-plugin-gem/Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-name = "swc-gem-plugin"
+name = "swc-plugin-gem"
 version = "0.1.0"
 edition = { workspace = true }
 rust-version = { workspace = true }

crates/swc-gem-plugin/package.json → crates/swc-plugin-gem/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "swc-gem-plugin",
+  "name": "swc-plugin-gem",
   "version": "0.1.0",
   "description": "",
   "author": "",

packages/duoyun-ui/package.json

@@ -52,18 +52,18 @@
     "elkjs": "^0.7.1"
   },
   "peerDependencies": {
-    "@mantou/gem": "^1.7.9"
+    "@mantou/gem": "^2.0.0-alpha.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@gemjs/config": "^2.0.0-alpha.0",
     "@open-wc/testing": "^2.5.33",
     "@types/d3-geo": "^3.0.1",
+    "@types/mocha": "^10.0.7",
     "@web/dev-server-esbuild": "^1.0.2",
     "@web/test-runner": "^0.18.1",
     "rimraf": "^3.0.2",
-    "typescript": "^5.5.3",
-    "webpack-merge": "^5.7.3"
+    "typescript": "^5.5.3"
   },
   "author": "mantou132",
   "license": "ISC",

packages/gem-book/package.json

@@ -69,9 +69,11 @@
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@gemjs/config": "^2.0.0-alpha.0",
     "@open-wc/testing": "^2.5.33",
+    "@types/express": "^4.17.3",
     "@types/jsdom": "^16.2.10",
     "@types/marked": "^2.0.2",
     "@types/mkdirp": "^1.0.1",
+    "@types/mocha": "^10.0.7",
     "@types/parse-github-url": "^1.0.0",
     "@types/prismjs": "^1.16.5",
     "@web/dev-server-esbuild": "^1.0.2",
@@ -80,7 +82,6 @@
     "nodemon": "^2.0.7",
     "ts-morph": "^13.0.0",
     "webpack-cli": "^5.1.4",
-    "webpack-merge": "^5.10.0",
     "webpack-node-externals": "^3.0.0"
   },
   "author": "mantou132",

packages/gem-port/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "gem-port",
+  "name": "@mantou/gem-port",
   "version": "1.0.0-alpha.0",
   "description": "Export React component",
   "keywords": [

packages/gem/docs/en/001-guide/001-basic/006-styled-element.md

@@ -54,6 +54,31 @@ class MyElement extends GemElement {
 > [!NOTE]
 > Use `$` as a key to represent `:host, :scope` selectors, allowing styles to apply to both ShadowDOM and LightDOM.
 
+## Stylized Instance
+
+If you need to specify the style of a single instance through properties or states, you can:
+
+```js
+// Omit import...
+
+@customElement('my-element')
+class MyElement extends GemElement {
+  @attribute color;
+
+  render() {
+    return html`
+      <style>
+        :host {
+          --color: ${this.color}
+        }
+      </style>
+    `;
+  }
+}
+```
+
+This method is complex and troublesome to write; it is recommended to use [`useDecoratorTheme`](../002-advance/003-theme.md#element-level-theme).
+
 ## Customize the style outside the element
 
 Use [`::part`](https://drafts.csswg.org/css-shadow-parts-1/#part)(only ShadowDOM) to export the internal content of the element, allowing external custom styles:

packages/gem/docs/en/001-guide/002-advance/003-theme.md

@@ -98,4 +98,32 @@ class App extends GemElement {
 
 ## Scoped and override theme
 
-<gbp-include src="../../snippets/scoped-theme.md"></gbp-include>
+<gbp-include src="../../snippets/scoped-theme.md"></gbp-include>
+
+## Element level theme {#element-level-theme}
+
+The theme is implemented using CSS variables, which may need to be dynamically set during rendering, this can also be achieved through themes, but unlike other types of themes, decorators are required to apply and update the theme.
+
+```js
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
+
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '' });
+
+const style = createCSSSheet(css`
+  :host(:where(:not([hidden]))) {
+    border-color: ${elementTheme.color};
+  }
+`);
+
+@customElement('app-root')
+class App extends GemElement {
+  @attribute color;
+
+  @updateTheme()
+  #theme = () => ({ color: this.color })
+
+  render() {
+    return html``;
+  }
+}
+```

packages/gem/docs/zh/001-guide/001-basic/006-styled-element.md

@@ -54,6 +54,31 @@ class MyElement extends GemElement {
 > [!NOTE]
 > 使用 `$` 作为键代表 `:host, :scope` 选择器，让样式同时适用于 ShadowDOM 和 LightDOM
 
+## 样式化实例
+
+如果需要通过属性或者状态指定单个实例的样式可以：
+
+```js
+// 省略导入...
+
+@customElement('my-element')
+class MyElement extends GemElement {
+  @attribute color;
+
+  render() {
+    return html`
+      <style>
+        :host {
+          --color: ${this.color}
+        }
+      </style>
+    `;
+  }
+}
+```
+
+这个方法写法复杂且麻烦，推荐使用 [`useDecoratorTheme`](../002-advance/003-theme.md#element-level-theme)。
+
 ## 在元素外自定义样式
 
 可以使用 [`::part`](https://drafts.csswg.org/css-shadow-parts-1/#part)(仅限于 ShadowDOM) 导出元素内部内容，允许外部进行自定义样式：

packages/gem/docs/zh/001-guide/002-advance/003-theme.md

@@ -98,4 +98,32 @@ class App extends GemElement {
 
 ## 范围主题和覆盖主题
 
-<gbp-include src="../../snippets/scoped-theme.md"></gbp-include>
+<gbp-include src="../../snippets/scoped-theme.md"></gbp-include>
+
+## 元素级主题 {#element-level-theme}
+
+主题是使用 CSS 变量实现的，在渲染时可能需要动态设置 CSS 变量，这同样可以通过主题来完成，和其他类型的主题不一样，需要使用装饰器来应用和更新主题：
+
+```js
+import { useDecoratorTheme } from '@mantou/gem/helper/theme';
+
+const [elementTheme, updateTheme] = useDecoratorTheme({ color: '' });
+
+const style = createCSSSheet(css`
+  :host(:where(:not([hidden]))) {
+    border-color: ${elementTheme.color};
+  }
+`);
+
+@customElement('app-root')
+class App extends GemElement {
+  @attribute color;
+
+  @updateTheme()
+  #theme = () => ({ color: this.color })
+
+  render() {
+    return html``;
+  }
+}
+```

packages/gem/package.json

@@ -46,6 +46,7 @@
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@gemjs/config": "^2.0.0-alpha.0",
     "@open-wc/testing": "^2.5.33",
+    "@types/mocha": "^10.0.7",
     "@web/dev-server-esbuild": "^1.0.2",
     "@web/test-runner": "^0.18.1",
     "rimraf": "^3.0.2",

packages/vscode-gem-plugin/README.md

@@ -1,4 +1,4 @@
-# vscode-gem-plugin
+# vscode-plugin-gem
 
 https://github.com/mantou132/gem