@mantou/gem 2.2.0 → 2.2.2

package/src/lib/utils.ts

@@ -1,15 +1,34 @@
 const { assign, fromEntries, entries, keys } = Object;
 
+// 用原生 Chrome 找不到调用栈
+function queueMicrotask(cb: () => void) {
+  Promise.resolve().then(cb);
+}
+
 const microtaskSet = new Set<() => void>();
-export function addMicrotask(func: () => void) {
+export function addMicrotask(func: () => void, method = queueMicrotask) {
   if (microtaskSet.has(func)) return;
-  queueMicrotask(() => {
+  method(() => {
     microtaskSet.delete(func);
     func();
   });
   microtaskSet.add(func);
 }
 
+type OverrideFn = {
+  name: never;
+  apply: never;
+  call: never;
+  bind: never;
+  toString: never;
+  prototype: never;
+  length: never;
+  arguments: never;
+  caller: never;
+  [Symbol.hasInstance]: never;
+  [Symbol.metadata]: never;
+};
+
 // 注意 typeof state === 'function' 但是没有 Function 的方法和属性
 export function createUpdater<T, Fn = (payload?: Partial<T>) => any>(initState: T, fn: Fn) {
   const state: any = fn;
@@ -18,10 +37,13 @@ export function createUpdater<T, Fn = (payload?: Partial<T>) => any>(initState:
   delete state.name;
   delete state.length;
   assign(state, initState);
-  // TODO: type
-  return state as Fn & T;
+  // ts 不允许直接 Omit 掉 Fn 上的属性
+  // 只能利用 ts plugin 移除多余的自动完成项
+  return state as Fn & Omit<OverrideFn, keyof T> & T;
 }
 
+export type Updater<T, Fn = (payload?: Partial<T>) => any> = ReturnType<typeof createUpdater<T, Fn>>;
+
 // 不编码 hash 用于比较
 export function absoluteLocation(currentPath = '', relativePath = '') {
   const { pathname, search, hash } = new URL(relativePath, location.origin + currentPath);
@@ -107,8 +129,10 @@ export class LinkedList<T = any> extends EventTarget {
     return this.#map.get(value);
   }
 
-  // 添加到尾部，已存在时会删除老的项目
-  // 如果是添加第一个，start 事件会在添加前触发，避免处理事件重复的逻辑
+  /**
+   * 添加到尾部，已存在时会删除老的项目
+   * 如果是添加第一个，start 事件会在添加前触发，避免处理事件重复的逻辑
+   */
   add(value: T) {
     if (!this.#lastItem) {
       this.dispatchEvent(new CustomEvent('start'));
@@ -126,7 +150,7 @@ export class LinkedList<T = any> extends EventTarget {
     this.#map.set(value, item);
   }
 
-  // 删除这个元素后没有其他元素时立即出发 end 事件
+  /** 删除这个元素后没有其他元素时立即出发 end 事件 */
   delete(value: T) {
     const deleteItem = this.#delete(value);
     if (!this.#firstItem) {
@@ -135,8 +159,12 @@ export class LinkedList<T = any> extends EventTarget {
     return deleteItem;
   }
 
-  // 获取头部元素
-  // 会从链表删除
+  clear() {
+    this.#map.clear();
+    this.#firstItem = this.#lastItem = undefined;
+  }
+
+  /** 获取头部元素，会从链表删除 */
   get(): T | undefined {
     const firstItem = this.#firstItem;
     if (!firstItem) return;
@@ -157,10 +185,6 @@ export class PropProxyMap<T extends NonPrimitive, V = unknown> extends WeakMap<T
 }
 
 export class QueryString extends URLSearchParams {
-  constructor(param?: any) {
-    super(param);
-  }
-
   // support `{ key: ObjectValue }`
   concat(param: any) {
     let query: any;
@@ -236,7 +260,7 @@ export function randomStr(len = 5): string {
 }
 
 export function camelToKebabCase(str: string) {
-  return str.replace(/[A-Z]/g, ($1: string) => '-' + $1.toLowerCase());
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 }
 
 export function kebabToCamelCase(str: string) {
@@ -269,25 +293,18 @@ export function isArrayChange(newValues: any[], oldValues: any[]) {
 export function objectMapToString<T = any>(
   object: Record<string, T>,
   separate: string,
-  toString: (key: string, value: T) => string,
+  toStr: (key: string, value: T) => string,
 ) {
   let result = separate;
   for (const key in object) {
-    const s = toString(key, object[key]);
+    const s = toStr(key, object[key]);
     result += s ? s + separate : '';
   }
   return result;
 }
 
 // Wait: Typescript lib dom CSSStyleDeclaration anchor position
-type StyleProp =
-  | keyof CSSStyleDeclaration
-  | `--${string}`
-  | 'scrollbarWidth'
-  | 'scrollbarColor'
-  | 'positionAnchor'
-  | 'anchorDefault'
-  | 'anchorName';
+type StyleProp = keyof CSSStyleDeclaration | `--${string}` | 'positionAnchor' | 'anchorDefault' | 'anchorName';
 
 export type StyleObject = Partial<Record<StyleProp, string | number | false | undefined | null>>;
 
@@ -310,8 +327,3 @@ export function exportPartsMap(object: Record<string, string | boolean | undefin
     value === true || key === value ? key : value ? `${key}:${value}` : '',
   );
 }
-
-declare global {
-  interface PropertyIndexedKeyframes extends StyleObject {}
-  interface Keyframe extends StyleObject {}
-}

package/src/test/elements/link.test.ts

@@ -1,6 +1,6 @@
-import { fixture, expect } from '../utils';
-import { html } from '../../lib/element';
 import type { GemActiveLinkElement } from '../../elements/link';
+import { html } from '../../lib/element';
+import { expect, fixture } from '../utils';
 
 import '../../elements/link';
 

package/src/test/elements/reflect.test.ts

@@ -1,7 +1,7 @@
-import { fixture, expect, nextFrame } from '../utils';
-import { css, GemElement, html } from '../../lib/element';
-import { adoptedStyle, customElement } from '../../lib/decorators';
 import type { GemReflectElement } from '../../elements/reflect';
+import { adoptedStyle, customElement } from '../../lib/decorators';
+import { css, GemElement, html } from '../../lib/element';
+import { expect, fixture, nextFrame } from '../utils';
 
 import '../../elements/reflect';
 

package/src/test/elements/title.test.ts

@@ -1,6 +1,6 @@
-import { fixture, expect, nextFrame } from '../utils';
-import { html } from '../../lib/element';
 import type { GemTitleElement } from '../../elements/title';
+import { html } from '../../lib/element';
+import { expect, fixture, nextFrame } from '../utils';
 
 import '../../elements/title';
 

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

@@ -6,21 +6,22 @@
  * - 派生元素（类扩展）
  * - 无渲染内容 Gem 元素
  */
-import { fixture, expect, nextFrame } from '../utils';
-import type { Metadata } from '../../lib/element';
-import { css, createState, GemElement, html, createRef } from '../../lib/element';
-import { createStore } from '../../lib/store';
+
 import {
+  adoptedStyle,
+  async,
   attribute,
-  property,
+  connectStore,
   customElement,
   emitter,
-  adoptedStyle,
-  connectStore,
-  async,
-  shadow,
   mounted,
+  property,
+  shadow,
 } from '../../lib/decorators';
+import type { Metadata } from '../../lib/element';
+import { createRef, createState, css, GemElement, html } from '../../lib/element';
+import { createStore } from '../../lib/store';
+import { expect, fixture, nextFrame } from '../utils';
 
 const store = createStore({
   a: 1,
@@ -340,7 +341,7 @@ describe('gem element 继承', () => {
     });
     el.sayHi();
     await Promise.resolve();
-    expect(window.name).to.equal(name + '21');
+    expect(window.name).to.equal(`${name}21`);
   });
 });
 @customElement('render-empty')

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

@@ -1,6 +1,3 @@
-import { fixture, expect, nextFrame } from '../utils';
-import { css, createState, GemElement, html } from '../../lib/element';
-import { createStore } from '../../lib/store';
 import {
   adoptedStyle,
   attribute,
@@ -12,6 +9,9 @@ import {
   property,
   shadow,
 } from '../../lib/decorators';
+import { createState, css, GemElement, html } from '../../lib/element';
+import { createStore } from '../../lib/store';
+import { expect, fixture, nextFrame } from '../utils';
 
 const store = createStore({
   a: 1,
@@ -108,8 +108,7 @@ describe('基本 gem element 测试', () => {
     expect(el.disabled).to.equal(true);
     expect(el.count).to.equal(2);
     expect(el.shadowRoot?.textContent).to.equal('attr: value, disabled: true, count: 2, prop: , state: ');
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
+    // @ts-expect-error
     el.attr = null;
     await Promise.resolve();
     expect(el.hasAttribute('attr')).to.equal(false);

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

@@ -1,22 +1,22 @@
-import { fixture, expect } from '../utils';
-import type { Metadata } from '../../lib/element';
-import { css, GemElement, html } from '../../lib/element';
-import { createStore } from '../../lib/store';
 import type { Emitter } from '../../lib/decorators';
 import {
+  adoptedStyle,
   attribute,
-  property,
-  customElement,
+  boolattribute,
   connectStore,
-  adoptedStyle,
+  customElement,
   emitter,
-  boolattribute,
   numattribute,
   part,
+  property,
+  shadow,
   slot,
   state,
-  shadow,
 } from '../../lib/decorators';
+import type { Metadata } from '../../lib/element';
+import { css, GemElement, html } from '../../lib/element';
+import { createStore } from '../../lib/store';
+import { expect, fixture } from '../utils';
 
 const store = createStore({
   a: 1,
@@ -81,7 +81,7 @@ describe('装饰器', () => {
     store({ a: 1 });
     await Promise.resolve();
     const metadata: Metadata = Reflect.get(DecoratorGemElement, Symbol.metadata);
-    expect({ ...metadata.observedStores.at(0) }).to.eql({ a: 1 });
+    expect({ ...metadata.observedStores?.at(0) }).to.eql({ a: 1 });
     expect(metadata.observedAttributes).to.eql(['rank-attr', 'rank-disabled', 'rank-count']);
     expect(metadata.definedEvents).to.eql(['say-hi']);
     expect(metadata.definedCSSStates).to.eql(['open-state']);

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

@@ -1,6 +1,6 @@
+import { attribute, customElement, type Emitter, emitter, mounted, property } from '../../lib/decorators';
+import { createRef, createState, GemElement, html } from '../../lib/element';
 import { expect, fixture } from '../utils';
-import { attribute, customElement, emitter, mounted, property, type Emitter } from '../../lib/decorators';
-import { GemElement, html, createRef, createState } from '../../lib/element';
 
 @customElement('app-children')
 export class Children extends GemElement {

package/src/test/history.test.ts

@@ -1,6 +1,5 @@
 import { history } from '../lib/history';
-
-import { expect, aTimeout } from './utils';
+import { aTimeout, expect } from './utils';
 
 describe('history 测试', () => {
   it('hash', async () => {

package/src/test/store.test.ts

@@ -1,6 +1,5 @@
-import { _StoreListenerMap, createStore, connect } from '../lib/store';
-
-import { expect, aTimeout } from './utils';
+import { _StoreListenerMap, connect, createStore } from '../lib/store';
+import { aTimeout, expect } from './utils';
 
 describe('store 测试', () => {
   it('create store', () => {

package/src/test/utils.test.ts

@@ -1,15 +1,14 @@
 import { css, SheetToken } from '../lib/element';
 import {
+  absoluteLocation,
+  classMap,
+  exportPartsMap,
   LinkedList,
   QueryString,
   raw,
   styled,
   styleMap,
-  classMap,
-  exportPartsMap,
-  absoluteLocation,
 } from '../lib/utils';
-
 import { expect } from './utils';
 
 declare global {
@@ -77,7 +76,7 @@ describe('utils 测试', () => {
     query.setAny('obj', [{ a: 1, b: 2 }]);
     expect(query.getAny('obj')).to.deep.equal({ a: 1, b: 2 });
     expect(query.getAnyAll('obj')).to.deep.equal([{ a: 1, b: 2 }]);
-    expect(new QueryString({ a: 1 }).toString()).to.equal('?a=1');
+    expect(new QueryString({ a: '1' }).toString()).to.equal('?a=1');
     expect(new QueryString(query).toString()).to.equal(query.toString());
   });
   it('css', () => {
@@ -111,7 +110,7 @@ describe('utils 测试', () => {
     });
     expect(cssSheet.scroll.startsWith('scroll')).to.true;
     const rules = cssSheet[SheetToken].getStyle().cssRules;
-    expect(rules.item(0).selectorText).to.equal(':where(:scope:not([hidden])), :host(:where(:not([hidden])))');
+    expect(rules.item(0).selectorText).to.equal(':where(&:not([hidden])), :host(:where(:not([hidden])))');
     expect(rules.item(1).selectorText.startsWith('.scroll')).to.true;
     expect(rules.item(1).style.background).to.equal('red');
     expect(rules.item(1).cssRules.item(0).selectorText).to.equal('&:hover *');

package/src/test/utils.ts

@@ -1,7 +1,7 @@
-import { expect, should, assert } from 'chai';
+import { assert, expect, should } from 'chai';
 
-import { render } from '../lib/element';
 import type { TemplateResult } from '../lib/element';
+import { render } from '../lib/element';
 
 export { expect, should, assert };
 

package/helper/react-shim.d.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-import { Store } from '../lib/store';
-/**
- * `<gem-route>.routes.getContent`
- */
-export declare function renderReactNode(ele: any, node: ReactNode): void;
-/**
- * Same as `@connectStore`
- */
-export declare function connectStore<T extends object>(store: Store<T>): void;
-/**
- * Warning: https://github.com/facebook/react/issues/25675
- */
-export declare function useReactNode(node: ReactNode): any;
-//# sourceMappingURL=react-shim.d.ts.map

package/helper/react-shim.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-shim.d.ts","sourceRoot":"","sources":["../src/helper/react-shim.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAM/D,OAAO,EAAE,KAAK,EAAW,MAAM,cAAc,CAAC;AAE9C;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,QAgBxD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,QAG7D;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,OAe3C"}

package/helper/react-shim.js

@@ -1,56 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved
-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 { createRoot } from 'react-dom/client';
-import { connect } from '../lib/store';
-/**
- * `<gem-route>.routes.getContent`
- */
-export function renderReactNode(ele, node) {
-    var _a;
-    (_a = ele.react) === null || _a === void 0 ? void 0 : _a.unmount();
-    ele.react = createRoot(ele);
-    // async
-    ele.react.render(node);
-    // override
-    const routeEle = ele instanceof HTMLElement ? ele : ele.host;
-    const originUnmounted = routeEle.unmounted;
-    if (!(originUnmounted === null || originUnmounted === void 0 ? void 0 : originUnmounted.react)) {
-        routeEle.unmounted = () => {
-            originUnmounted === null || originUnmounted === void 0 ? void 0 : originUnmounted.apply(routeEle);
-            ele.react.unmount();
-        };
-        routeEle.unmounted.react = true;
-    }
-}
-/**
- * Same as `@connectStore`
- */
-export function connectStore(store) {
-    const [_, update] = useState({});
-    useEffect(() => connect(store, () => update({})), []);
-}
-/**
- * Warning: https://github.com/facebook/react/issues/25675
- */
-export function useReactNode(node) {
-    const ref = useRef();
-    // 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(() => () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.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;
-}
-//# sourceMappingURL=react-shim.js.map

package/helper/react-shim.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-shim.js","sourceRoot":"","sources":["../src/helper/react-shim.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,aAAa;AACb,gDAAgD;AAChD,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,6DAA6D;AAC7D,aAAa;AACb,gDAAgD;AAChD,OAAO,EAAQ,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,EAAS,OAAO,EAAE,MAAM,cAAc,CAAC;AAE9C;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,GAAQ,EAAE,IAAe;;IACvD,MAAA,GAAG,CAAC,KAAK,0CAAE,OAAO,EAAE,CAAC;IACrB,GAAG,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5B,QAAQ;IACR,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAEvB,WAAW;IACX,MAAM,QAAQ,GAAG,GAAG,YAAY,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;IAC7D,MAAM,eAAe,GAAG,QAAQ,CAAC,SAAS,CAAC;IAC3C,IAAI,CAAC,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,CAAA,EAAE,CAAC;QAC5B,QAAQ,CAAC,SAAS,GAAG,GAAG,EAAE;YACxB,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;YACjC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACtB,CAAC,CAAC;QACF,QAAQ,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC;IAClC,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,YAAY,CAAmB,KAAe;IAC5D,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjC,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AACxD,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,IAAe;IAC1C,MAAM,GAAG,GAAG,MAAM,EAA0C,CAAC;IAC7D,4MAA4M;IAC5M,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,IAAI,CAAC,OAAO,EAAE,CAAA,EAAA,EAAE,EAAE,CAAC,CAAC;IACvD,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;QAChB,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC9B,OAAO,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC;IAC/B,CAAC;IACD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC;IACrC,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;IACnC,GAAG,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;IAClC,oMAAoM;IACpM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/lib/directives.d.ts

@@ -1,4 +0,0 @@
-export { repeat } from 'lit-html/directives/repeat';
-export { guard } from 'lit-html/directives/guard';
-export { ifDefined } from 'lit-html/directives/if-defined';
-//# sourceMappingURL=directives.d.ts.map

package/lib/directives.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"directives.d.ts","sourceRoot":"","sources":["../src/lib/directives.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAGpD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC"}

package/lib/directives.js

@@ -1,5 +0,0 @@
-export { repeat } from 'lit-html/directives/repeat';
-// https://github.com/Polymer/lit-html/issues/1048
-export { guard } from 'lit-html/directives/guard';
-export { ifDefined } from 'lit-html/directives/if-defined';
-//# sourceMappingURL=directives.js.map

package/lib/directives.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"directives.js","sourceRoot":"","sources":["../src/lib/directives.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD,kDAAkD;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC"}

package/lib/ref.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=ref.d.ts.map

package/lib/ref.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ref.d.ts","sourceRoot":"","sources":["../src/lib/ref.ts"],"names":[],"mappings":""}

package/lib/ref.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=ref.js.map

package/lib/ref.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ref.js","sourceRoot":"","sources":["../src/lib/ref.ts"],"names":[],"mappings":""}