[gem] Closed #158, #180

mantou132 · Jul 19, 2024 · f1c5ced · f1c5ced
1 parent 44f45a3
commit f1c5ced
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 12 deletions.
diff --git a/packages/gem-devtools/src/scripts/get-gem.ts b/packages/gem-devtools/src/scripts/get-gem.ts
@@ -114,7 +114,7 @@ export const getSelectedGem = function (data: PanelStore): PanelStore | string {
   const lifecycleMethod = new Set(['willMount', 'render', 'mounted', 'shouldUpdate', 'updated', 'unmounted']);
   const buildInMethod = new Set(['update', 'setState', 'effect', 'memo']);
   const buildInProperty = new Set(['internals']);
-  const buildInAttribute = new Set(['ref']);
+  const buildInAttribute = new Set(['ref', 'data-style-scope']);
   const memberSet = getProps($0);
   metadata.observedAttributes?.forEach((attr) => {
     const prop = kebabToCamelCase(attr);
@@ -266,7 +266,7 @@ export const getSelectedGem = function (data: PanelStore): PanelStore | string {
       value: objectToString($0[key]),
       type: typeof $0[key],
       path: [key],
-      buildIn: buildInProperty.has(key) ? 2 : 0,
+      buildIn: buildInProperty.has(key) ? 1 : 0,
     });
   });
 

diff --git a/packages/gem-examples/src/scope/index.ts b/packages/gem-examples/src/scope/index.ts
@@ -1,10 +1,21 @@
-/**
- * TODO: auto add `@scope` to light dom custom element
- */
-import { GemElement, adoptedStyle, createCSSSheet, css, customElement, html, render } from '@mantou/gem';
+import { GemElement, adoptedStyle, createCSSSheet, css, customElement, html, render, shadow } from '@mantou/gem';
 
 import '../elements/layout';
 
+const closedStyles = createCSSSheet(css`
+  div {
+    color: red;
+  }
+`);
+@shadow({ mode: 'closed' })
+@adoptedStyle(closedStyles)
+@customElement('app-closed')
+class _Closed extends GemElement {
+  render() {
+    return html`<div>Closed shadow</div>`;
+  }
+}
+
 @customElement('other-element')
 class _OtherElement extends GemElement {}
 
@@ -31,6 +42,7 @@ export class App extends GemElement {
       <article>
         <p>Content</p>
       </article>
+      <app-closed></app-closed>
     `;
   }
 }

diff --git a/packages/gem-examples/src/styled/index.ts b/packages/gem-examples/src/styled/index.ts
@@ -28,7 +28,9 @@ export class App extends GemElement {
   render() {
     return html`
       <div class=${styles.div}>Header 1</div>
-      ${[styles, styles2].map((styles) => html`<pre>${styles[SheetToken].getStyle(this).cssRules[0].cssText}</pre>`)}
+      ${[styles, styles2].map(
+        (gemStyles) => html`<pre>${gemStyles[SheetToken].getStyle(this).cssRules[0].cssText}</pre>`,
+      )}
     `;
   }
 }

diff --git a/packages/gem/src/helper/theme.ts b/packages/gem/src/helper/theme.ts
@@ -1,7 +1,11 @@
 import { connect, Store, useStore } from '../lib/store';
 import { camelToKebabCase, randomStr, Sheet, SheetToken, GemCSSSheet } from '../lib/utils';
 
-export type Theme<T> = Sheet<T>;
+export type Theme<T> = Sheet<T> & {
+  [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();
@@ -20,7 +24,18 @@ function useThemeFromProps<T extends Record<string, unknown>>(themeObj: T, props
   const salt = randomStr();
   const styleSheet = new GemCSSSheet();
   const [store, updateStore] = useStore<T>(themeObj);
-  const theme: any = { [SheetToken]: styleSheet };
+  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);
 

diff --git a/packages/gem/src/lib/element.ts b/packages/gem/src/lib/element.ts
@@ -168,8 +168,8 @@ export abstract class GemElement<State = Record<string, unknown>> extends HTMLEl
     Object.assign(this.internals, aria);
 
     const sheets = adoptedStyleSheets?.map((item) => item[SheetToken].getStyle(this)) || [];
-    if (this.shadowRoot) {
-      this.shadowRoot.adoptedStyleSheets = sheets;
+    if (this.#renderRoot instanceof ShadowRoot) {
+      this.#renderRoot.adoptedStyleSheets = sheets;
     } else {
       this.effect(
         () => {

diff --git a/packages/gem/src/lib/utils.ts b/packages/gem/src/lib/utils.ts
@@ -254,7 +254,8 @@ export class GemCSSSheet {
   #record = new Map<any, CSSStyleSheet>();
   #applyd = new Map<CSSStyleSheet, string>();
   getStyle(host?: HTMLElement) {
-    const isLight = host && !host.shadowRoot;
+    // GemElement.internals
+    const isLight = host && !(host as any).internals.shadowRoot;
 
     // 对同一类 dom 只使用同一个样式表
     const key = isLight ? host.constructor : this;