@mantou/gem 1.7.12 → 2.0.0-alpha.0

package/src/elements/base/unsafe.ts

@@ -1,36 +1,27 @@
 import { GemElement } from '../../lib/element';
-import { attribute } from '../../lib/decorators';
+import { attribute, shadow } from '../../lib/decorators';
+import { raw } from '../../lib/utils';
 
 /**
  * @customElement gem-unsafe
  * @attr content
  * @attr contentcss
  */
+@shadow()
 export class GemUnsafeElement extends GemElement {
   @attribute content: string;
   @attribute contentcss: string;
 
-  constructor() {
-    super();
-    this.effect(
-      () => {
-        if (this.shadowRoot) {
-          this.shadowRoot.innerHTML = `
-            <style>
-              :host(:where(:not([hidden]))) {
-                display: contents;
-              }
-              ${this.contentcss}
-            </style>
-            ${this.content}
-          `;
-        }
-      },
-      () => [this.content, this.contentcss],
-    );
-  }
-
   render() {
+    this.shadowRoot!.innerHTML = raw`
+      <style>
+        :host(:where(:not([hidden]))) {
+          display: contents;
+        }
+        ${this.contentcss}
+      </style>
+      ${this.content}
+    `;
     return undefined;
   }
 }

package/src/elements/base/use.ts

@@ -1,5 +1,18 @@
-import { GemElement, html } from '../../lib/element';
-import { attribute, property, state } from '../../lib/decorators';
+import { createCSSSheet, GemElement, html } from '../../lib/element';
+import { adoptedStyle, attribute, property, shadow, state } from '../../lib/decorators';
+import { css } from '../../lib/utils';
+
+const styles = createCSSSheet(css`
+  :host(:where(:not([hidden]))) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`);
 
 const eleCache = new Map<string, HTMLTemplateElement>();
 /**
@@ -11,6 +24,8 @@ const eleCache = new Map<string, HTMLTemplateElement>();
  * @customElement gem-use
  * @attr selector
  */
+@shadow()
+@adoptedStyle(styles)
 export class GemUseElement extends GemElement {
   @attribute selector: string; // CSS 选择器
   @property root?: HTMLElement | Document | ShadowRoot;
@@ -37,17 +52,6 @@ export class GemUseElement extends GemElement {
 
   render() {
     return html`
-      <style>
-        :host(:where(:not([hidden]))) {
-          position: relative;
-          display: inline-flex;
-          align-items: center;
-        }
-        svg {
-          width: 100%;
-          height: 100%;
-        }
-      </style>
       ${this.#getContent()}
       <slot></slot>
     `;

package/src/helper/i18n.ts

@@ -1,5 +1,6 @@
-import { createStore, updateStore, Store } from '../lib/store';
-import { html, TemplateResult } from '../lib/element';
+import type { UpdateHistoryParams } from '../lib/history';
+import type { TemplateResult } from '../lib/element';
+import { html, UpdateToken } from '../lib/element';
 import { GemError } from '../lib/utils';
 import type { RouteTrigger } from '../elements/base/route';
 
@@ -72,10 +73,8 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
   urlParamsName?: string;
   onChange?: (currentLanguage: string) => void;
 
-  store: Store<any>;
-
   // 兼容 `<gem-route>`
-  replace = ({ path }: { path: string }) => this.setLanguage(path);
+  replace = ({ path }: UpdateHistoryParams) => this.setLanguage(path!);
   getParams = () => ({ path: this.currentLanguage });
 
   get #cacheCurrentKey() {
@@ -119,7 +118,6 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
       throw new GemError('i18n: fallbackLanguage invalid');
     }
 
-    this.store = createStore(this as any);
     Object.assign<I18n<T>, I18nOptions<T>>(this as I18n<T>, options);
 
     let currentLanguage = this.#urlParamsLang || this.currentLanguage || this.#cacheLang;
@@ -144,8 +142,8 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
   }
 
   get(s: keyof T): string;
-  get(s: keyof T, ...rest: (((s: string) => TemplateResult) | string)[]): TemplateResult;
-  get(s: keyof T, ...rest: (((s: string) => TemplateResult) | string)[]) {
+  get(s: keyof T, ...rest: (((str: string) => TemplateResult) | string)[]): TemplateResult;
+  get(s: keyof T, ...rest: (((str: string) => TemplateResult) | string)[]) {
     const currentLanguagePack = this.resources[this.currentLanguage] as any;
     const fallbackLanguagePack = this.resources[this.fallbackLanguage] as any;
     const msg = currentLanguagePack[s] || fallbackLanguagePack[s];
@@ -181,7 +179,7 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
       const localPackString = localStorage.getItem(localKey);
 
       const fetchPack = async () => {
-        const pack = await (await fetch(data)).json();
+        const pkg = await (await fetch(data)).json();
         if (this.cache) {
           // 移除之前的版本缓存
           for (let i = 0; i < localStorage.length; i++) {
@@ -190,9 +188,9 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
               localStorage.removeItem(key);
             }
           }
-          localStorage.setItem(localKey, JSON.stringify(pack));
+          localStorage.setItem(localKey, JSON.stringify(pkg));
         }
-        return pack;
+        return pkg;
       };
 
       if (localPackString) {
@@ -208,7 +206,17 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
       pack = data;
     }
     this.resources[lang] = pack;
-    updateStore(this.store);
+
+    // update all element
+    const temp: Element[] = [document.documentElement];
+    while (!!temp.length) {
+      const element = temp.pop()!;
+      (element as any)[UpdateToken]?.();
+      if (element.shadowRoot?.firstElementChild) temp.push(element.shadowRoot.firstElementChild);
+      if (element.firstElementChild) temp.push(element.firstElementChild);
+      if (element.nextElementSibling) temp.push(element.nextElementSibling);
+    }
+
     if (lang !== this.currentLanguage) {
       this.#lang = lang;
     }
@@ -251,8 +259,6 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
   }
 
   /**
-   * prepare: @connectStore(i18n.store)
-   *
    * @example
    *
    * html`

package/src/helper/react-utils.ts

@@ -0,0 +1,66 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies
+import type { ReactNode } from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies
+import { useEffect, useRef, useState } from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies
+import type { Root } from 'react-dom/client';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies
+import { createRoot } from 'react-dom/client';
+
+import type { Store } from '../lib/store';
+import { connect } from '../lib/store';
+
+/**
+ * `<gem-route>.routes.getContent`
+ */
+export function renderReactNode(ele: any, node: ReactNode) {
+  ele.react?.unmount();
+  ele.react = createRoot(ele);
+  // async
+  ele.react.render(node);
+
+  const routeEle = ele instanceof HTMLElement ? ele : ele.host;
+  if (!routeEle.reactCallback) {
+    routeEle.effect(
+      () => () => ele.react.unmount(),
+      () => [],
+    );
+    routeEle.reactCallback = true;
+  }
+}
+
+/**
+ * Same as `@connectStore`
+ */
+export function connectStore<T extends object>(store: Store<T>) {
+  const [_, update] = useState({});
+  useEffect(() => connect(store, () => update({})), []);
+}
+
+/**
+ * Warning: https://github.com/facebook/react/issues/25675
+ */
+export function useReactNode(node: ReactNode) {
+  const ref = useRef<{ root: Root; container: HTMLElement }>();
+  // Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.
+  useEffect(() => () => ref.current?.root.unmount(), []);
+  if (ref.current) {
+    ref.current.root.render(node);
+    return ref.current.container;
+  }
+  const container = document.createElement('div');
+  container.style.display = 'contents';
+  const root = createRoot(container);
+  ref.current = { root, container };
+  // Warning: Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate.
+  root.render(node);
+  return container;
+}

package/src/helper/ssr-shim.ts

@@ -26,7 +26,6 @@ if (typeof window === 'undefined') {
   globalThis.document = any;
   globalThis.addEventListener = any;
   globalThis.history = any;
-  globalThis.navigator = any;
   globalThis.customElements = any;
 
   // duoyun-ui
@@ -34,6 +33,14 @@ if (typeof window === 'undefined') {
   globalThis.Document = any;
   globalThis.Element = any;
   globalThis.MutationObserver = any;
+
+  try {
+    // gem dist i18n
+    // https://nodejs.org/api/globals.html#navigator_1
+    globalThis.navigator = any;
+  } catch {
+    //
+  }
 }
 
 export {};

package/src/helper/theme.ts

@@ -1,71 +1,98 @@
-import { connect, createStore, updateStore, Store } from '../lib/store';
+import type { Store } from '../lib/store';
+import { connect, useStore } from '../lib/store';
 import { camelToKebabCase, randomStr } from '../lib/utils';
+import type { GemElement } from '../lib/element';
+import { SheetToken, createCSSSheet } from '../lib/element';
 
-type SomeType<T> = {
-  [P in keyof T]: string;
+export type Theme<T> = ReturnType<typeof createCSSSheet> & {
+  [K in keyof T as K extends `${string}Color`
+    ? `${string & K}${'' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}`
+    : K]: T[K];
 };
 
 const themeStoreMap = new WeakMap();
+const themePropsMap = new WeakMap();
 
 /**获取主题原始值 */
-export function getThemeStore<T>(theme: SomeType<T>) {
+export function getThemeStore<T>(theme: Theme<T>) {
   return themeStoreMap.get(theme) as Store<T>;
 }
 
-const themePropsMap = new WeakMap();
-
 /**获取 css 变量名 */
-export function getThemeProps<T>(theme: SomeType<T>) {
-  return themePropsMap.get(theme) as SomeType<T>;
+export function getThemeProps<T>(theme: Theme<T>) {
+  return themePropsMap.get(theme) as Theme<T>;
 }
 
-const setThemeFnMap = new WeakMap();
-
-/**
- * 创建主题，插入 `document.head`
- * https://github.com/mantou132/gem/issues/33
- *
- * @example
- * createTheme({
- *   primaryColor: '#eee',
- * });
- */
-export function createTheme<T extends Record<string, unknown>>(themeObj: T) {
+function useThemeFromProps<T extends Record<string, unknown>>(themeObj: T, props: Record<string, string> = {}) {
   const salt = randomStr();
-  const style = document.createElement('style');
-  const store = createStore<T>(themeObj);
-  const theme: Record<string, string> = {};
-  const props: Record<string, string> = {};
+  const styleSheet = createCSSSheet({})[SheetToken];
+  const [store, updateStore] = useStore<T>(themeObj);
+  const theme: any = new Proxy(
+    { [SheetToken]: styleSheet },
+    {
+      get(target: any, key: string) {
+        if (!target[key]) {
+          const [_, origin, weight] = key.match(/^(\w*Color)(\d+)$/) || [];
+          if (origin) target[key] = `oklch(from ${target[origin]} calc(l - ${(Number(weight) - 400) / 1000}) c h)`;
+        }
+        return target[key];
+      },
+    },
+  );
   themePropsMap.set(theme, props);
   themeStoreMap.set(theme, store);
-  const setTheme = () =>
+
+  const updateContent = () => {
+    let rules = '';
     Object.keys(store).forEach((key) => {
-      if (props[key]) return;
-      props[key] = `--${camelToKebabCase(key)}-${salt}`;
-      theme[key] = `var(${props[key]})`;
+      if (!props[key]) {
+        props[key] = `--${camelToKebabCase(key)}-${salt}`;
+        theme[key] = `var(${props[key]})`;
+      }
+      rules += `${props[key]}:${store[key]};`;
     });
-  setThemeFnMap.set(theme, setTheme);
-  setTheme();
-  const getStyle = () =>
-    `:root, :host {${Object.keys(store).reduce((prev, key) => prev + `${props[key]}:${store[key]};`, '')}}`;
-  const replace = () => (style.textContent = getStyle());
-  connect(store, replace);
-  replace();
-  (document.head || document.documentElement).append(style);
-  return theme as SomeType<T>;
+    styleSheet.setContent(`:scope,:host{${rules}}`);
+  };
+  updateContent();
+  connect(store, () => {
+    updateContent();
+    styleSheet.updateStyle();
+  });
+  return [theme as Theme<T>, updateStore] as const;
 }
 
 /**
- * 更新主题
- * @param theme 主题
- * @param newThemeObj 新主题
+ * 用于 `@adoptedStyle(theme)`，类似 `createCSSSheet`
  */
-export function updateTheme<T = Record<string, unknown>>(theme: SomeType<T>, newThemeObj: Partial<T>) {
-  updateStore(getThemeStore(theme), newThemeObj);
-  setThemeFnMap.get(theme)();
+export function useScopedTheme<T extends Record<string, unknown>>(themeObj: T) {
+  return useThemeFromProps(themeObj);
 }
 
+/**全局主题 */
 export function useTheme<T extends Record<string, unknown>>(themeObj: T) {
-  const theme = createTheme(themeObj);
-  return [theme, (newThemeObj: Partial<T>) => updateTheme(theme, newThemeObj)] as const;
+  const result = useScopedTheme(themeObj);
+  document.adoptedStyleSheets.push(result[0][SheetToken].getStyle());
+  return result;
+}
+
+/**用来覆盖全局主题 */
+export function useOverrideTheme<T extends Record<string, unknown>>(theme: Theme<T>, themeObj: Partial<T>) {
+  return useThemeFromProps(themeObj, getThemeProps(theme));
+}
+
+export function useDecoratorTheme<T extends Record<string, unknown>>(themeObj: T) {
+  const [themeAsKeys] = useThemeFromProps(themeObj);
+  const props = getThemeProps(themeAsKeys);
+  const updateDecorator =
+    <E extends GemElement, V extends () => T, K = any[] | undefined>(
+      getDep?: K extends readonly any[] ? (instance: E) => K : undefined,
+    ) =>
+    (_: any, { addInitializer, access }: ClassFieldDecoratorContext<E, V> | ClassMethodDecoratorContext<E, V>) => {
+      addInitializer(function (this: E) {
+        const [theme, update] = useThemeFromProps({ ...themeObj }, props);
+        this.internals.sheets.push(theme[SheetToken].getStyle(this));
+        this.memo(() => update(access.get(this).apply(this)), getDep && (() => getDep(this) as any));
+      });
+    };
+  return [themeAsKeys, updateDecorator] as const;
 }

package/src/index.ts

@@ -1,7 +1,9 @@
-export * from './lib/store';
-export * from './lib/history';
-export * from './lib/element';
 export * from './lib/decorators';
+export * from './lib/element';
+export * from './lib/store';
 export * from './lib/utils';
-
 export * from './lib/version';
+
+// 使用路径时可选模块
+export * from './lib/history';
+export * from './lib/directives';