@mantou/gem 1.7.0 → 1.7.2

package/src/lib/element.ts

@@ -13,8 +13,9 @@ import {
   kebabToCamelCase,
   PropProxyMap,
   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,19 +28,15 @@ 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>;
   }
   // 用于 css 选择器选择元素，使用 @refobject 自动选择获取
   // 必须使用 attr 赋值
   /**
    * @attr ref
-   * @attr inert
    */
   interface HTMLElement {
-    attachInternals: () => ElementInternals;
-    inert: boolean;
+    ref: string;
   }
 }
 
@@ -81,10 +78,16 @@ 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 {
+  // 禁止覆盖自定义元素原生生命周期方法
+  // https://github.com/microsoft/TypeScript/issues/21388#issuecomment-934345226
+  static #final = Symbol();
+
   // 这里只是字段申明，不能赋值，否则子类会继承被共享该字段
   static observedAttributes?: string[]; // WebAPI 中是实时检查这个列表
   static booleanAttributes?: Set<string>;
@@ -114,21 +117,21 @@ 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;
 
     // 外部不可见，但允许类外面使用
-    addMicrotask(() => ((this as any)[initSymbol] = false));
-    (this as any)[initSymbol] = true;
-    (this as any)[updateSymbol] = () => {
+    addMicrotask(() => Reflect.set(this, initSymbol, false));
+    Reflect.set(this, constructorSymbol, true);
+    Reflect.set(this, initSymbol, true);
+    Reflect.set(this, updateSymbol, () => {
       if (this.#isMounted) {
         addMicrotask(this.#update);
       }
-    };
+    });
 
     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) {
@@ -139,34 +142,10 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
         this.effect(
           () => {
             const root = this.getRootNode() as ShadowRoot | Document;
-            if (!useNativeCSSStyleSheet) {
-              const ele: any = root === document ? document.body : root;
-              ele._sheets = ele._sheets || {};
-              sheets.forEach(({ style, media }: any) => {
-                if (ele._sheets[style]) {
-                  ele._sheets[style].count++;
-                } else {
-                  const s = document.createElement('style');
-                  s.innerHTML = style;
-                  s.media = media.mediaText;
-                  ele.append(s);
-                  ele._sheets[style] = { ele: s, count: 1 };
-                }
-              });
-              return () => {
-                sheets.forEach(({ style }: any) => {
-                  ele._sheets[style].count--;
-                  if (!ele._sheets[style].count) {
-                    delete ele._sheets[style];
-                  }
-                });
-              };
-            } else {
-              root.adoptedStyleSheets = [...root.adoptedStyleSheets, ...sheets];
-              return () => {
-                root.adoptedStyleSheets = removeItems(root.adoptedStyleSheets, sheets);
-              };
-            }
+            root.adoptedStyleSheets = [...root.adoptedStyleSheets, ...sheets];
+            return () => {
+              root.adoptedStyleSheets = removeItems(root.adoptedStyleSheets, sheets);
+            };
           },
           () => [],
         );
@@ -178,16 +157,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)],
+          },
         });
       }
     }
@@ -315,21 +296,8 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
   #render = () => {
     this.#execMemo();
-    const styles = useNativeCSSStyleSheet
-      ? ''
-      : html`${this.shadowRoot?.adoptedStyleSheets?.map(
-          (e: any) =>
-            html`
-              <style media=${e.media.mediaText}>
-                ${e.style}
-              </style>
-            `,
-        )}`;
-    if (this.render) {
-      const r = this.render();
-      return r && html`${r}${styles}`;
-    }
-    return this.#renderRoot === this ? undefined : html`<slot></slot>${styles}`;
+    if (this.render) return this.render();
+    return this.#renderRoot === this ? undefined : html`<slot></slot>`;
   };
 
   /**@lifecycle */
@@ -388,15 +356,18 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     if (this.#isMounted) {
       addMicrotask(this.#update);
     }
+    return GemElement.#final;
   }
 
   #connectedCallback = () => {
-    // 似乎这是最早的判断不在 `constructor` 中的地方
-    (this as any)[constructorSymbol] = false;
     if (this.#isAppendReason) {
       this.#isAppendReason = false;
       return;
     }
+
+    // 似乎这是最早的判断不在 `constructor` 中的地方
+    Reflect.set(this, constructorSymbol, false);
+
     this.willMount?.();
     const { observedStores, rootElement } = this.constructor as typeof GemElement;
     observedStores?.forEach((store) => {
@@ -443,13 +414,16 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     } else {
       this.#connectedCallback();
     }
+    return GemElement.#final;
   }
 
   /**
    * @private
    * @final
    */
-  // adoptedCallback() {}
+  adoptedCallback() {
+    return GemElement.#final;
+  }
 
   /**
    * @private
@@ -473,6 +447,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     });
     this.#effectList = this.#effectList?.filter(({ inConstructor }) => inConstructor);
     this.#memoList = this.#memoList?.filter(({ inConstructor }) => inConstructor);
+    return GemElement.#final;
   }
 }
 
@@ -499,7 +474,7 @@ export function defineAttribute(target: GemElement, prop: string, attr: string)
     },
     set(v: string | null | undefined | number | boolean) {
       const that = this as GemElement;
-      const proxy = gemElementProxyMap.get(this) as any;
+      const proxy = gemElementProxyMap.get(this);
       const hasSet = proxy[prop];
       const value = that.getAttribute(attr);
       // https://github.com/whatwg/dom/issues/922
@@ -540,7 +515,7 @@ export function defineProperty(
     },
     set(v) {
       const that = this as GemElement;
-      const proxy = gemElementProxyMap.get(that) as any;
+      const proxy = gemElementProxyMap.get(that);
       if (v !== proxy[prop]) {
         if (event) {
           proxy[prop] = v?.[isEventHandleSymbol]
@@ -550,7 +525,7 @@ export function defineProperty(
                 that.dispatchEvent(evt);
                 v(detail, options);
               };
-          proxy[prop][isEventHandleSymbol] = true;
+          Reflect.set(proxy[prop]!, isEventHandleSymbol, true);
           // emitter 不触发元素更新
         } else {
           proxy[prop] = v;
@@ -623,5 +598,15 @@ customElements.define = (name: string, cls: CustomElementConstructor, options?:
     defineRefs?.forEach((ref) => defineRef(cls.prototype, kebabToCamelCase(ref), ref));
   }
 
-  nativeDefineElement(name, cls as CustomElementConstructor, options);
+  nativeDefineElement(name, cls, 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/history.ts

@@ -1,3 +1,5 @@
+// https://github.com/WICG/navigation-api#stakeholder-feedback
+
 import { createStore, updateStore, connect } from './store';
 import { QueryString, cleanObject, GemError, absoluteLocation } from './utils';
 
@@ -38,7 +40,6 @@ export interface UpdateHistoryParams {
 // 实际应用值
 type HistoryParams = UpdateHistoryParams & { title: string; path: string; query: QueryString; hash: string };
 
-// TODO: WeakRef
 const paramsMap = new Map<string, HistoryParams>();
 
 function validData(data: any) {

package/src/lib/utils.ts

@@ -23,7 +23,7 @@ function execMicrotaskStack() {
 
 /**
  * 添加回调函数到微任务队列栈；
- * 先进后执行；
+ * 先进后执行，使用这个函数可以改变嵌套的元素 `mounted` 的顺序；
  */
 export function addMicrotaskToStack(func: () => void) {
   if (!microtaskStack.length) {
@@ -50,8 +50,8 @@ interface LinkedListItem<T> {
   next?: LinkedListItem<T>;
 }
 // work on nodejs
-export class LinkedList<T = any> extends (globalThis.EventTarget || Object) {
-  addEventListener: <K extends keyof LinkedListEventMap>(
+export class LinkedList<T = any> extends EventTarget {
+  declare addEventListener: <K extends keyof LinkedListEventMap>(
     type: K,
     listener: (this: LinkedList<T>, ev: LinkedListEventMap[K]) => any,
     options?: boolean | AddEventListenerOptions,
@@ -131,11 +131,6 @@ export class PropProxyMap<T extends NonPrimitive, V = unknown> extends WeakMap<T
   }
 }
 
-declare global {
-  interface URLSearchParams {
-    entries(): Iterable<readonly [string | number | symbol, any]>;
-  }
-}
 export class QueryString extends URLSearchParams {
   constructor(param?: any) {
     super(param);
@@ -216,22 +211,6 @@ export type Sheet<T> = {
   [P in keyof T]: P;
 } & { [SheetToken]: CSSStyleSheet };
 
-declare global {
-  interface CSSStyleSheet {
-    replaceSync: (str: string) => void;
-  }
-
-  interface CSSRuleList {
-    item(index: number): CSSStyleRule;
-  }
-  interface ShadowRoot {
-    adoptedStyleSheets: CSSStyleSheet[];
-  }
-  interface Document {
-    adoptedStyleSheets: CSSStyleSheet[];
-  }
-}
-
 export type StyledType = 'id' | 'class' | 'keyframes';
 export interface StyledValueObject {
   styledContent: string;
@@ -241,22 +220,6 @@ export interface StyledKeyValuePair {
   [key: string]: StyledValueObject;
 }
 
-// !!! 目前只有 Chrome/FirefoxNightly 支持
-// 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;
-try {
-  new (CSSStyleSheet as any)();
-} catch {
-  useNativeCSSStyleSheet = false;
-  CSSStyleSheet = class {
-    media = { mediaText: '' };
-    style = '';
-    replaceSync = (style: string) => (this.style = style);
-  } as any;
-}
-
 /**
  *
  * 创建 style sheet 用于 `adoptedStyleSheets`，不支持样式更新
@@ -293,6 +256,8 @@ export function randomStr(number = 5, origin = '0123456789abcdefghijklmnopqrstuv
 const nestingRuleRegExp = new RegExp('&.*{((.|\n)*)}', 'g');
 // 只支持一层嵌套
 // https://drafts.csswg.org/css-nesting-1/
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1648037
+// https://bugs.webkit.org/show_bug.cgi?id=223497
 function flatStyled(style: string, type: StyledType): StyledValueObject {
   const nestingRules: string[] = [];
   let styledContent =
@@ -404,6 +369,9 @@ export function classMap(object: Record<string, boolean>) {
 
 export const partMap = classMap;
 
-export function exportPartsMap(object: Record<string, string | undefined>) {
-  return objectMapToString(object, ',', (key, value) => (value !== undefined ? `${key}:${value}` : ''));
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts
+export function exportPartsMap(object: Record<string, string | undefined | boolean>) {
+  return objectMapToString(object, ',', (key, value) =>
+    value === true || key === value ? key : value ? `${key}:${value}` : '',
+  );
 }

package/src/lib/version.ts

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

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);

package/src/test/history.test.ts

@@ -6,11 +6,13 @@ describe('history 测试', () => {
   it('hash', async () => {
     const historyLength = window.history.length;
     const hash = window.location.hash;
+    // 等待浏览器就绪
+    await aTimeout(1000);
     history.push({ path: '/a', hash: '#a' });
     await aTimeout(10);
     expect(window.location.hash).to.equal('#a');
     history.back();
-    await aTimeout(600);
+    await aTimeout(10);
     expect(window.location.hash).to.equal(hash);
     history.push({ path: '/a', hash: '#b' });
     await aTimeout(10);

package/src/test/utils.test.ts

@@ -14,6 +14,12 @@ import {
   absoluteLocation,
 } from '../lib/utils';
 
+declare global {
+  interface CSSRuleList {
+    item(index: number): CSSStyleRule;
+  }
+}
+
 describe('utils 测试', () => {
   it('absoluteLocation', () => {
     expect(absoluteLocation('/a', '/a/b')).to.equal('/a/b');
@@ -101,6 +107,7 @@ describe('utils 测试', () => {
       `;--x:1px;font-size:14px;content:'*';`,
     );
     expect(classMap({ foo: true, content: false })).to.equal(` foo `);
-    expect(exportPartsMap({ foo: 'bar', content: 'content' })).to.equal(`,foo:bar,content:content,`);
+    expect(exportPartsMap({ foo: 'bar', content: 'content', false: false })).to.equal(`,foo:bar,content,`);
+    expect(exportPartsMap({ foo: 'bar', content: true })).to.equal(`,foo:bar,content,`);
   });
 });