@mantou/gem 1.7.0 → 1.7.1

package/src/elements/base/link.ts

@@ -30,11 +30,17 @@ export class GemLinkElement extends GemElement {
 
   // 动态路由，根据 route.pattern 和 options.params 计算出 path
   @property route: RouteItem | undefined;
+  /**@deprecated */
   @property options: RouteOptions | undefined;
+  @property routeOptions: RouteOptions | undefined;
   @property prepare: (() => void | Promise<void>) | undefined;
 
   @part link: string;
 
+  get #routeOptions() {
+    return this.routeOptions || this.options;
+  }
+
   constructor() {
     super();
     this.tabIndex = 0;
@@ -44,9 +50,9 @@ export class GemLinkElement extends GemElement {
   // 不包含 basePath
   getPathInfo() {
     if (this.route) {
-      const queryProp = this.options?.query || '';
-      const hashProp = this.options?.hash || '';
-      return createPath(this.route, this.options) + queryProp + hashProp;
+      const queryProp = this.#routeOptions?.query || '';
+      const hashProp = this.#routeOptions?.hash || '';
+      return createPath(this.route, this.#routeOptions) + queryProp + hashProp;
     } else {
       const url = this.href || this.path + this.query + this.hash;
       const { path, query } = history.getParams();
@@ -101,7 +107,7 @@ export class GemLinkElement extends GemElement {
 
     if (this.route) {
       history.pushIgnoreCloseHandle({
-        ...createHistoryParams(this.route, this.options),
+        ...createHistoryParams(this.route, this.#routeOptions),
         title: this.route.title || this.docTitle,
       });
     } else if (this.href) {

package/src/elements/base/route.ts

@@ -236,7 +236,7 @@ export class GemRouteElement extends GemElement<State> {
 
     return html`
       <style>
-        :host,
+        :host(:where(:not([hidden]))),
         :not(:defined) {
           display: contents;
         }

package/src/elements/base/unsafe.ts

@@ -18,7 +18,7 @@ export class GemUnsafeElement extends GemElement {
         if (this.shadowRoot) {
           this.shadowRoot.innerHTML = `
             <style>
-              :host {
+              :host(:where(:not([hidden]))) {
                 display: contents;
               }
               ${this.contentcss}

package/src/elements/base/use.ts

@@ -38,10 +38,8 @@ export class GemUseElement extends GemElement {
   render() {
     return html`
       <style>
-        :host {
+        :host(:where(:not([hidden]))) {
           position: relative;
-        }
-        :host(:not([hidden])) {
           display: inline-flex;
           align-items: center;
         }

package/src/helper/i18n.ts

@@ -40,7 +40,7 @@ interface Resources<T> {
   [key: string]: Partial<T> | string;
 }
 
-interface Options<T> {
+interface I18nOptions<T> {
   resources: Resources<T>;
   fallbackLanguage: string;
   // 可以在构造函数中指定，但会被 URL 中的语言参数覆盖
@@ -107,13 +107,13 @@ export class I18n<T = Record<string, Msg>> {
     this.onChange?.(lang);
   }
 
-  constructor(options: Options<T>) {
+  constructor(options: I18nOptions<T>) {
     if (!options.resources[options.fallbackLanguage]) {
       throw new GemError('i18n: fallbackLanguage invalid');
     }
 
     this.store = createStore(this as any);
-    Object.assign<I18n<T>, Options<T>>(this as I18n<T>, options);
+    Object.assign<I18n<T>, I18nOptions<T>>(this as I18n<T>, options);
 
     let currentLanguage = this.#urlParamsLang || this.currentLanguage || this.#cacheLang;
 

package/src/helper/ssr-shim.ts

@@ -0,0 +1,29 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+if (typeof window === 'undefined') {
+  const getAny = () => {
+    const anonymous = () => getAny();
+    Object.defineProperties(anonymous, {
+      length: { writable: true },
+      name: { writable: true },
+    });
+    return new Proxy(anonymous, {
+      get(target, key) {
+        if (key === Symbol.toPrimitive) return () => '';
+        return target[key] || (target[key] = getAny());
+      },
+    });
+  };
+  const any = getAny();
+
+  globalThis.document = any;
+  globalThis.addEventListener = any;
+  globalThis.history = any;
+  globalThis.navigator = any;
+  globalThis.customElements = any;
+  globalThis.HTMLElement = null;
+  globalThis.location = new URL('about:blank');
+  globalThis.window = globalThis;
+}
+
+export {};

package/src/index.ts

@@ -1,19 +1,3 @@
-/**
- * 不支持多个 gem
- */
-import * as Gem from './';
-
-export type DevToolsHook = typeof Gem;
-declare global {
-  interface Window {
-    __GEM_DEVTOOLS__HOOK__?: DevToolsHook;
-  }
-}
-
-if (window.__GEM_DEVTOOLS__HOOK__) {
-  Object.assign(window.__GEM_DEVTOOLS__HOOK__, { ...Gem });
-}
-
 export * from './lib/store';
 export * from './lib/history';
 export * from './lib/element';

package/src/lib/element.ts

@@ -15,6 +15,8 @@ import {
   removeItems,
   useNativeCSSStyleSheet,
 } from './utils';
+import * as GemExports from './element';
+import * as VersionExports from './version';
 
 export { html, svg, render, directive, TemplateResult, SVGTemplateResult } from 'lit-html';
 export { repeat } from 'lit-html/directives/repeat';
@@ -27,9 +29,8 @@ export { ifDefined } from 'lit-html/directives/if-defined';
 declare global {
   interface ElementInternals extends ARIAMixin {
     // https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet
-    states?: Set<string>;
-    // https://w3c.github.io/aria/#role_definitions
-    role?: string;
+    states: Set<string>;
+    role?: string | null;
   }
   // 用于 css 选择器选择元素，使用 @refobject 自动选择获取
   // 必须使用 attr 赋值
@@ -38,8 +39,8 @@ declare global {
    * @attr inert
    */
   interface HTMLElement {
-    attachInternals: () => ElementInternals;
     inert: boolean;
+    ref: string;
   }
 }
 
@@ -81,7 +82,9 @@ const updateSymbol = Symbol('update');
 export interface GemElementOptions {
   isLight?: boolean;
   isAsync?: boolean;
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options
   delegatesFocus?: boolean;
+  slotAssignment?: 'named' | 'manual';
 }
 
 export abstract class GemElement<T = Record<string, unknown>> extends HTMLElement {
@@ -114,7 +117,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
   #memoList?: EffectItem<any>[];
   #unmountCallback?: any;
 
-  constructor({ isAsync, isLight, delegatesFocus }: GemElementOptions = {}) {
+  constructor({ isAsync, isLight, delegatesFocus, slotAssignment }: GemElementOptions = {}) {
     super();
     (this as any)[constructorSymbol] = true;
 
@@ -128,7 +131,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     };
 
     this.#isAsync = isAsync;
-    this.#renderRoot = isLight ? this : this.attachShadow({ mode: 'open', delegatesFocus });
+    this.#renderRoot = isLight ? this : this.attachShadow({ mode: 'open', delegatesFocus, slotAssignment });
 
     const { adoptedStyleSheets } = new.target;
     if (adoptedStyleSheets) {
@@ -178,16 +181,18 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     if (!this.#internals) {
       this.#internals = this.attachInternals();
       // https://groups.google.com/a/chromium.org/g/blink-dev/c/JvpHoUfhJYE?pli=1
+      // https://bugs.webkit.org/show_bug.cgi?id=215911
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=1588763
       try {
-        this.#internals.states?.add('foo');
-        this.#internals.states?.delete('foo');
+        this.#internals.states.add('foo');
+        this.#internals.states.delete('foo');
       } catch {
         Reflect.defineProperty(this.#internals, 'states', {
-          value: new Proxy(this.#internals.states!, {
-            get(target: any, p) {
-              return (str: string) => target[p](`--${str}`);
-            },
-          }),
+          value: {
+            has: (v: string) => kebabToCamelCase(v) in this.dataset,
+            add: (v: string) => (this.dataset[kebabToCamelCase(v)] = ''),
+            delete: (v: string) => delete this.dataset[kebabToCamelCase(v)],
+          },
         });
       }
     }
@@ -318,12 +323,11 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     const styles = useNativeCSSStyleSheet
       ? ''
       : html`${this.shadowRoot?.adoptedStyleSheets?.map(
-          (e: any) =>
-            html`
-              <style media=${e.media.mediaText}>
-                ${e.style}
-              </style>
-            `,
+          (e: any) => html`
+            <style media=${e.media.mediaText}>
+              ${e.style}
+            </style>
+          `,
         )}`;
     if (this.render) {
       const r = this.render();
@@ -625,3 +629,13 @@ customElements.define = (name: string, cls: CustomElementConstructor, options?:
 
   nativeDefineElement(name, cls as CustomElementConstructor, options);
 };
+
+declare global {
+  interface Window {
+    __GEM_DEVTOOLS__HOOK__?: (typeof GemExports & typeof VersionExports) | Record<string, never>;
+  }
+}
+
+if (window.__GEM_DEVTOOLS__HOOK__) {
+  Object.assign(window.__GEM_DEVTOOLS__HOOK__, { ...GemExports, ...VersionExports });
+}

package/src/lib/utils.ts

@@ -245,7 +245,7 @@ export interface StyledKeyValuePair {
 // https://bugzilla.mozilla.org/show_bug.cgi?id=1520690
 // https://bugs.webkit.org/show_bug.cgi?id=228684
 export let useNativeCSSStyleSheet = true;
-let CSSStyleSheet = window.CSSStyleSheet;
+let CSSStyleSheet = globalThis.CSSStyleSheet;
 try {
   new (CSSStyleSheet as any)();
 } catch {

package/src/lib/version.ts

@@ -1 +1 @@
-export const version = '1.7.0';
+export const version = '1.7.1';

package/src/test/gem-element/decorators.test.ts

@@ -38,7 +38,7 @@ class DecoratorGemElement extends GemElement {
   @attribute rankAttr: string;
   @boolattribute rankDisabled: boolean;
   @numattribute rankCount: number;
-  @property dataProp = { value: '' };
+  @property propData = { value: '' };
   @state openState: boolean;
   @part headerPart: string;
   @refobject inputRef: RefObject<HTMLElement>;
@@ -46,8 +46,8 @@ class DecoratorGemElement extends GemElement {
   renderCount = 0;
   render() {
     this.renderCount++;
-    const { rankAttr, rankDisabled, rankCount, dataProp } = this;
-    return html`attr: ${rankAttr}, disabled: ${rankDisabled}, count: ${rankCount}, prop: ${dataProp.value}`;
+    const { rankAttr, rankDisabled, rankCount, propData } = this;
+    return html`attr: ${rankAttr}, disabled: ${rankDisabled}, count: ${rankCount}, prop: ${propData.value}`;
   }
 }
 
@@ -70,7 +70,7 @@ describe('装饰器', () => {
     const el: DecoratorGemElement = await fixture(html`
       <decorator-gem-demo
         @say-hi=${(e: CustomEvent) => (a = e.detail)}
-        .dataProp=${{ value: 'prop' }}
+        .propData=${{ value: 'prop' }}
         rank-attr="attr"
         rank-disabled
         rank-count="2"
@@ -87,11 +87,11 @@ describe('装饰器', () => {
     expect(DecoratorGemElement.defineParts).to.eql(['header-part']);
     expect(DecoratorGemElement.defineSlots).to.eql(['body-slot']);
     expect(DecoratorGemElement.defineRefs?.[0].startsWith('input-ref-')).to.equal(true);
-    expect(DecoratorGemElement.observedProperties).to.eql(['dataProp']);
+    expect(DecoratorGemElement.observedProperties).to.eql(['propData']);
     expect(el.rankAttr).to.equal('attr');
     expect(el.rankDisabled).to.equal(true);
     expect(el.rankCount).to.equal(2);
-    expect(el.dataProp).to.eql({ value: 'prop' });
+    expect(el.propData).to.eql({ value: 'prop' });
     expect(el.openState).to.equal(false);
     expect(el.headerPart).to.equal('header-part');
     expect(el.inputRef.ref.startsWith('input-ref-')).to.equal(true);