Update docs

packages/duoyun-ui/src/lib/encode.ts

@@ -7,7 +7,7 @@ function safeUrlToBase64Str(str: string) {
 // https://developer.mozilla.org/en-US/docs/Glossary/Base64#solution_1_%E2%80%93_escaping_the_string_before_encoding_it
 export function b64ToUtf8(str: string) {
   return decodeURIComponent(
-    window
+    self
       .atob(safeUrlToBase64Str(str))
       .split('')
       .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
@@ -16,7 +16,7 @@ export function b64ToUtf8(str: string) {
 }
 
 export function base64ToArrayBuffer(str: string) {
-  return new Uint8Array([...window.atob(safeUrlToBase64Str(str))].map((char) => char.charCodeAt(0))).buffer;
+  return new Uint8Array([...self.atob(safeUrlToBase64Str(str))].map((char) => char.charCodeAt(0))).buffer;
 }
 
 function base64ToSafeUrl(str: string) {
@@ -25,15 +25,15 @@ function base64ToSafeUrl(str: string) {
 
 /**Converted string to Base64, `isSafe` indicates URL safe */
 export function utf8ToB64(str: string, isSafe?: boolean) {
-  const base64 = window.btoa(
+  const base64 = self.btoa(
     encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(Number(`0x${p1}`))),
   );
   return isSafe ? base64ToSafeUrl(base64) : base64;
 }
 
 // https://github.com/tc39/proposal-arraybuffer-base64
 export function arrayBufferToBase64(arrayBuffer: ArrayBuffer, isSafe?: boolean) {
-  const base64 = window.btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
+  const base64 = self.btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
   return isSafe ? base64ToSafeUrl(base64) : base64;
 }
 

packages/duoyun-ui/src/lib/image.ts

@@ -15,7 +15,7 @@ export function createCanvas(width?: number, height?: number) {
 }
 
 export function createDataURLFromSVG(rawStr: string) {
-  return `data:image/svg+xml;base64,${window.btoa(rawStr)}`;
+  return `data:image/svg+xml;base64,${self.btoa(rawStr)}`;
 }
 
 // if `bg` is't `HexColor`, text fill color error

packages/duoyun-ui/src/lib/timer.ts

@@ -21,7 +21,7 @@ export function polling(fn: (args?: any[]) => any, delay: number) {
     } catch {
     } finally {
       if (!hasExit) {
-        timer = window.setTimeout(poll, delay);
+        timer = self.setTimeout(poll, delay);
       }
     }
   };
@@ -48,7 +48,7 @@ export function throttle<T extends (...args: any) => any>(
   let timer = 0;
   let first = 0;
   const exec = (...rest: Parameters<T>) => {
-    timer = window.setTimeout(() => (timer = 0), wait);
+    timer = self.setTimeout(() => (timer = 0), wait);
     fn(...(rest as any));
   };
   return (...rest: Parameters<T>) => {
@@ -62,7 +62,7 @@ export function throttle<T extends (...args: any) => any>(
       exec(...rest);
     } else {
       clearTimeout(timer);
-      timer = window.setTimeout(() => exec(...rest), wait);
+      timer = self.setTimeout(() => exec(...rest), wait);
     }
   };
 }
@@ -76,9 +76,9 @@ export function debounce<T extends (...args: any) => any>(
   return function (...args: Parameters<T>) {
     return new Promise<Awaited<ReturnType<typeof fn>>>((resolve, reject) => {
       clearTimeout(timer);
-      timer = window.setTimeout(
+      timer = self.setTimeout(
         () => {
-          timer = window.setTimeout(() => (timer = 0), wait);
+          timer = self.setTimeout(() => (timer = 0), wait);
           Promise.resolve(fn(...(args as any)))
             .then(resolve)
             .catch(reject);

packages/duoyun-ui/src/lib/utils.ts

@@ -260,7 +260,7 @@ export function createCacheStore<T extends Record<string, any>>(
     );
   };
 
-  window.addEventListener('pagehide', saveStore);
+  self.addEventListener('pagehide', saveStore);
 
   return { store, saveStore };
 }

packages/gem/docs/en/001-guide/002-advance/008-ide-support.md

@@ -6,12 +6,12 @@ Gem does not have perfect IDE support, but the following content can also give y
 
 ### Highlight
 
-- Template highlight [vscode-lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin)
-- CSS rule highlighting [vscode-styled-component](https://github.com/styled-components/vscode-styled-components)
+- [lit-plugin](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin)
+- [Gem](https://marketplace.visualstudio.com/items?itemName=gem-vscode.vscode-plugin-gem) ([Under development](https://github.com/mantou132/gem/issues/144), will replace lit-plugin in the future)
 
 ### Verification
 
-When using defined elements in a template [vscode-lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin) many verifications can be performed, including attr/prop type, custom element tag name, etc. To provide these features for elements, you need to manually [write](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin#-documenting-slots-events-attributes-and-properties) jsDoc comment:
+When using defined elements in a template [lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin) many verifications can be performed, including attr/prop type, custom element tag name, etc. To provide these features for elements, you need to manually [write](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin#-documenting-slots-events-attributes-and-properties) jsDoc comment:
 
 ```js
 /**
@@ -35,3 +35,8 @@ class MyElement extends GemElement {}
 ```
 
 _In the future, the ts decorator may be used to let the IDE recognize all the characteristics of custom elements, in addition, the decorator is automatically transferred to jsDoc through a custom ts compiler, so that it can be used in js projects_
+
+
+## Zed
+
+- Gem ([Under development](https://github.com/mantou132/gem/issues/144), will replace lit-plugin in the future)

packages/gem/docs/en/003-api/001-gem-element.md

@@ -59,8 +59,7 @@ Type with decorator
 | `@fallback`  | When the content render error, rendering the reserve content |
 
 
-
-## Lifecycle hook
+## ~~Lifecycle hook~~
 
 | name           | description                                                                               |
 | -------------- | ----------------------------------------------------------------------------------------- |

packages/gem/docs/en/003-api/003-store.md

@@ -2,5 +2,5 @@
 
 | API name      | description                                                                          |
 | ------------- | ------------------------------------------------------------------------------------ |
-| `createStore` | Create a `Store`                                                                     |
+| `createStore` | Create a `Store`, like `State` callable                                              |
 | `connect`     | Connect a callback function to the `Store`, asynchronously called by `Store` updated |

packages/gem/docs/en/003-api/004-history.md

@@ -2,7 +2,10 @@
 
 Gem exports a `history` object, which extends [History API](https://developer.mozilla.org/en-US/docs/Web/API/History).
 
-| property                | description                                                       |
+
+## Property
+
+| name                    | description                                                       |
 | ----------------------- | ----------------------------------------------------------------- |
 | `store`                 | `Store` to maintain history                                       |
 | `basePath`              | Specify the base path (only allowed to be set once)               |
@@ -12,3 +15,10 @@ Gem exports a `history` object, which extends [History API](https://developer.mo
 | `getParams`             | Get the value of `path`, `query`, `hash` etc. of the current page |
 | `updateParams`          | Update `title` or `handle`                                        |
 | `basePathStore`         | `Store` corresponding to `history.basePath`                       |
+
+## Other
+
+| name            | description                    |
+| --------------- | ------------------------------ |
+| `titleStore`    | document title                 |
+| `basePathStore` | export `history.basePathStore` |

packages/gem/docs/en/003-api/006-helper.md

@@ -6,9 +6,11 @@ Gem also contains some commonly used functions, they are not built-in by default
 import { createTheme } from '@mantou/gem/helper/theme';
 ```
 
-| name                                        | description                         |
-| ------------------------------------------- | ----------------------------------- |
-| `createTheme`/`getThemeStore` | Themes created and updated          |
-| `mediaQuery`                                | CSS media query constants           |
-| `request`/`get`/`post`/`del`/`put`          | Simple and convenient call REST API |
-| `I18n`                                      | Support internationalization        |
+| name                               | description                         |
+| ---------------------------------- | ----------------------------------- |
+| `createTheme`/`getThemeStore`      | Themes created and updated          |
+| `mediaQuery`                       | CSS media query constants           |
+| `request`/`get`/`post`/`del`/`put` | Simple and convenient call REST API |
+| `I18n`                             | Support internationalization        |
+| react-utils                        | Use in React                        |
+| ssr-shim                           | Support SSR                         |

packages/gem/docs/en/003-api/008-utils.md

@@ -2,9 +2,10 @@
 
 Some frequently used functions
 
-| name       | description                                                               |
-| ---------- | ------------------------------------------------------------------------- |
-| `styled`   | A collection of template string label functions, provide CSS highlighting |
-| `styleMap` | Convert objects into `style` attribute                                    |
-| `classMap` | Convert objects into `class` attribute                                    |
-| `partMap`  | Convert objects into `part` attribute                                     |
+| name             | description                                  |
+| ---------------- | -------------------------------------------- |
+| `styled`         | Provide CSS highlighting                     |
+| `styleMap`       | Convert objects into `style` attribute       |
+| `classMap`       | Convert objects into `class` attribute       |
+| `partMap`        | Convert objects into `part` attribute        |
+| `exportPartsMap` | Convert objects into `exportparts` attribute |

packages/gem/docs/zh/001-guide/002-advance/008-ide-support.md

@@ -6,12 +6,12 @@ Gem 现在没有完美的 IDE 支持，但下面的内容也能让你获得不
 
 ### 高亮
 
-- 模版高亮 [vscode-lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin)
-- CSS 规则高亮 [vscode-styled-component](https://github.com/styled-components/vscode-styled-components)
+- [lit-plugin](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin)
+- [Gem](https://marketplace.visualstudio.com/items?itemName=gem-vscode.vscode-plugin-gem)（[开发中](https://github.com/mantou132/gem/issues/144)，将来取代 lit-plugin）
 
 ### 验证
 
-在模版中使用定义的元素时 [vscode-lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin) 能进行许多验证，包括 attr/prop 类型，自定义元素标签名等。
+在模版中使用定义的元素时 [lit-plugin](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin) 能进行许多验证，包括 attr/prop 类型，自定义元素标签名等。
 要为元素提供这些功能，需要手动[编写](https://github.com/runem/lit-analyzer/tree/master/packages/vscode-lit-plugin#-documenting-slots-events-attributes-and-properties) jsDoc 注释：
 
 ```js
@@ -37,3 +37,7 @@ class MyElement extends GemElement {}
 
 _在未来可能通过 ts 装饰器让 IDE 识别自定义元素的所有特性，_
 _另外通过自定义 ts 编译器将装饰器自动转移成 jsDoc，以便使用在 js 项目中_
+
+## Zed
+
+- Gem（[开发中](https://github.com/mantou132/gem/issues/144)，将来取代 lit-plugin）

packages/gem/docs/zh/003-api/001-gem-element.md

@@ -59,8 +59,7 @@ class GemElement extends HTMLElement {
 | `@fallback`  | 当内容渲染失败时渲染后备内容                         |
 
 
-
-## 生命周期钩子
+## ~~生命周期钩子~~
 
 | 名称           | 描述                                        |
 | -------------- | ------------------------------------------- |

packages/gem/docs/zh/003-api/003-store.md

@@ -2,5 +2,5 @@
 
 | API 名称      | 描述                                                          |
 | ------------- | ------------------------------------------------------------- |
-| `createStore` | 创建一个 `Store`                                              |
+| `createStore` | 创建一个 `Store`，和 `State` 一样可直接调用更新               |
 | `connect`     | 将一个回调函数连接到 `Store`, 当 `Store` 更新时会异步进行调用 |

packages/gem/docs/zh/003-api/004-history.md

@@ -2,7 +2,9 @@
 
 Gem 导出一个 `history` 对象，它扩展了 [History API](https://developer.mozilla.org/en-US/docs/Web/API/History).
 
-| 属性                    | 描述                                        |
+## 属性
+
+| 名称                    | 描述                                        |
 | ----------------------- | ------------------------------------------- |
 | `store`                 | 维护历史记录的 `Store`                      |
 | `basePath`              | 指定基本路径(只允许设置一次)                |
@@ -12,3 +14,10 @@ Gem 导出一个 `history` 对象，它扩展了 [History API](https://developer
 | `getParams`             | 获取当前页面的 `path`, `query`,`hash` 等值  |
 | `updateParams`          | 更新 `title` 或者 `handle`                  |
 | `basePathStore`         | `history.basePath` 对应的 `Store`           |
+
+## Other
+
+| 名称            | 描述                         |
+| --------------- | ---------------------------- |
+| `titleStore`    | 文档标题                     |
+| `basePathStore` | 导出 `history.basePathStore` |

packages/gem/docs/zh/003-api/006-helper.md

@@ -6,9 +6,11 @@ Gem 还包含一些常用的功能，他们没有默认内置, 需要自己手
 import { createTheme } from '@mantou/gem/helper/theme';
 ```
 
-| 名称                                        | 描述                                              |
-| ------------------------------------------- | ------------------------------------------------- |
-| `createTheme`/`getThemeStore` | 创建和更新主题                                    |
-| `mediaQuery`                                | 使用媒体查询查询到的信息以及一些 CSS 媒体查询常量 |
-| `request`/`get`/`post`/`del`/`put`          | 简单方便的调用 REST API                           |
-| `I18n`                                      | 支持国际化                                        |
+| 名称                               | 描述                                              |
+| ---------------------------------- | ------------------------------------------------- |
+| `createTheme`/`getThemeStore`      | 创建和更新主题                                    |
+| `mediaQuery`                       | 使用媒体查询查询到的信息以及一些 CSS 媒体查询常量 |
+| `request`/`get`/`post`/`del`/`put` | 简单方便的调用 REST API                           |
+| `I18n`                             | 支持国际化                                        |
+| react-utils                        | 在 React 中使用 Gem                               |
+| ssr-shim                           | 支持 SSR                                          |

packages/gem/docs/zh/003-api/008-utils.md

@@ -2,9 +2,10 @@
 
 一些经常被用到的函数
 
-| 名称       | 描述                                                      |
-| ---------- | --------------------------------------------------------- |
-| `styled`   | 模版字符串标签函数的集合，用来提供 CSS 规则高亮和 JS 引用 |
-| `styleMap` | 将对象构建成 `style` 属性                                 |
-| `classMap` | 将对象构建成 `class` 属性                                 |
-| `partMap`  | 将对象构建成 `part` 属性                                  |
+| 名称             | 描述                            |
+| ---------------- | ------------------------------- |
+| `styled`         | 提供 CSS 规则高亮               |
+| `styleMap`       | 将对象构建成 `style` 属性       |
+| `classMap`       | 将对象构建成 `class` 属性       |
+| `partMap`        | 将对象构建成 `part` 属性        |
+| `exportPartsMap` | 将对象构建成 `exportparts` 属性 |

packages/gem/src/elements/base/link.ts

@@ -40,7 +40,7 @@ const styles = css`
 `;
 
 /**
- * Bug: print `<link>` https://github.com/mantou132/gem/issues/36
+ * Bug: [can't print `<link>`](https://github.com/mantou132/gem/issues/36)
  */
 @connectStore(basePathStore)
 @adoptedStyle(styles)
@@ -146,16 +146,13 @@ export class GemLinkElement extends GemElement {
 
   @template()
   #content = () => {
-    return html`
-      <a
-        part=${this.link}
-        @click=${this.#preventDefault}
-        href=${this.#hint === 'off' ? null : this.#getHint()}
-        tabindex="-1"
-      >
-        <slot></slot>
-      </a>
-    `;
+    return html`<a
+      part=${this.link}
+      @click=${this.#preventDefault}
+      href=${this.#hint === 'off' ? null : this.#getHint()}
+      tabindex="-1"
+      ><slot></slot
+    ></a>`;
   };
 
   /**

packages/gem/src/elements/base/route.ts

@@ -1,7 +1,7 @@
 import type { TemplateResult } from '../../lib/element';
-import { createState, GemElement, html } from '../../lib/element';
+import { createState, css, GemElement, html } from '../../lib/element';
 import type { Emitter } from '../../lib/decorators';
-import { property, emitter, boolattribute, shadow, effect, template, light } from '../../lib/decorators';
+import { property, emitter, boolattribute, shadow, effect, template, light, adoptedStyle } from '../../lib/decorators';
 import type { Store } from '../../lib/store';
 import { createStore, connect } from '../../lib/store';
 import type { UpdateHistoryParams } from '../../lib/history';
@@ -276,15 +276,7 @@ export class GemLightRouteElement extends GemElement {
       return html`${content}`;
     }
 
-    return html`
-      <style>
-        :host(:where(:not([hidden]))),
-        :not(:defined) {
-          display: contents;
-        }
-      </style>
-      ${content === INIT_CONTENT ? html`<slot></slot>` : content}
-    `;
+    return content === INIT_CONTENT ? html`<slot></slot>` : content;
   };
 
   // 重写 `update`，并暴露为公共字段
@@ -324,5 +316,13 @@ export class GemLightRouteElement extends GemElement {
   };
 }
 
+const style = css`
+  :host(:where(:not([hidden]))),
+  :not(:defined) {
+    display: contents;
+  }
+`;
+
 @shadow()
+@adoptedStyle(style)
 export class GemRouteElement extends GemLightRouteElement {}

packages/gem/src/elements/base/unsafe.ts

@@ -1,6 +1,5 @@
 import { GemElement } from '../../lib/element';
 import { attribute, shadow, template } from '../../lib/decorators';
-import { raw } from '../../lib/utils';
 
 @shadow()
 export class GemUnsafeElement extends GemElement {
@@ -9,16 +8,17 @@ export class GemUnsafeElement extends GemElement {
 
   @template()
   #content = () => {
-    this.shadowRoot!.innerHTML = raw`
+    const style = /*html*/ `
       <style>
         :host(:where(:not([hidden]))) {
           display: contents;
         }
         ${this.contentcss}
       </style>
-      ${this.content}
     `;
 
+    this.shadowRoot!.innerHTML = this.content + style.trim();
+
     // 不要更新内容
     return undefined;
   };