@mantou/gem 2.2.0 → 2.2.2

package/src/lib/decorators.ts

@@ -1,17 +1,16 @@
-import type { css, Metadata, TemplateResult } from './element';
-import { GemElement, UpdateToken, _createTemplate, _RenderErrorEvent, render } from './element';
-import { camelToKebabCase, PropProxyMap, GemError } from './utils';
+// biome-ignore-all lint/plugin/no_this_effect: 定义装饰器
+
+import type { TemplateResult } from './lit-html';
+import type { Metadata, Sheet } from './reactive';
+import { _createTemplate, _RenderErrorEvent, GemElement, render, UpdateToken } from './reactive';
 import type { Store } from './store';
-import * as elementExports from './element';
-import * as decoratorsExports from './decorators';
-import * as storeExports from './store';
-import * as versionExports from './version';
+import { camelToKebabCase, GemError, PropProxyMap } from './utils';
 
 type GemElementPrototype = GemElement & { '': never };
 type StaticField = Exclude<keyof Metadata, keyof ShadowRootInit | 'aria' | 'noBlocking' | 'penetrable'>;
 
 const { deleteProperty, getOwnPropertyDescriptor, defineProperty } = Reflect;
-const { getPrototypeOf, assign } = Object;
+const { getPrototypeOf, assign, hasOwn } = Object;
 const gemElementProxyMap = new PropProxyMap<GemElement>();
 
 function pushStaticField(context: ClassFieldDecoratorContext | ClassDecoratorContext, field: StaticField, member: any) {
@@ -27,7 +26,8 @@ function pushStaticField(context: ClassFieldDecoratorContext | ClassDecoratorCon
 }
 
 function clearField<T extends GemElement>(instance: T, prop: string) {
-  const { value } = getOwnPropertyDescriptor(instance, prop)!;
+  // hmr 支持不存在属性
+  const { value } = getOwnPropertyDescriptor(instance, prop) || {};
   deleteProperty(instance, prop);
   (instance as any)[prop] = value;
 }
@@ -37,18 +37,19 @@ const observedTargetAttributes = new WeakMap<GemElementPrototype, Map<string, st
 // 不在 Devtools 中工作 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#dom_access
 // 使用 Gem DevTools 注入脚本监听 attribute 变化
 const { setAttribute, toggleAttribute, removeAttribute } = Element.prototype;
+const getObservedPropName = (i: GemElement, n: string) => observedTargetAttributes.get(getPrototypeOf(i))?.get(n);
 GemElement.prototype.setAttribute = function (n: string, v: string) {
-  const prop = observedTargetAttributes.get(getPrototypeOf(this))?.get(n);
+  const prop = getObservedPropName(this, n);
   if (!prop) return setAttribute.call(this, n, v);
   (this as any)[prop] = v;
 };
 GemElement.prototype.removeAttribute = function (n: string) {
-  const prop = observedTargetAttributes.get(getPrototypeOf(this))?.get(n);
+  const prop = getObservedPropName(this, n);
   if (!prop) return removeAttribute.call(this, n);
   (this as any)[prop] = null;
 };
 GemElement.prototype.toggleAttribute = function (n: string, force?: boolean) {
-  const prop = observedTargetAttributes.get(getPrototypeOf(this))?.get(n);
+  const prop = getObservedPropName(this, n);
   if (!prop) return toggleAttribute.call(this, n, force);
   return ((this as any)[prop] = force ?? !this.hasAttribute(n));
 };
@@ -114,7 +115,7 @@ function defineProp(
 
 // https://github.com/tc39/proposal-decorators/issues/517
 const targetCache = new WeakMap<DecoratorMetadataObject, GemElementPrototype>();
-function getDecoratorTarget(element: GemElement, { metadata }: ClassFieldDecoratorContext) {
+function getDecoratorTarget(element: GemElement, { metadata }: ClassMemberDecoratorContext) {
   const target = targetCache.get(metadata);
   if (target) return target;
   let result = element as GemElementPrototype;
@@ -131,7 +132,7 @@ function decoratorAttr<T extends GemElement>(context: ClassFieldDecoratorContext
   const attr = camelToKebabCase(prop);
   context.addInitializer(function (this: T) {
     const target = getDecoratorTarget(this, context);
-    if (!target.hasOwnProperty(prop)) {
+    if (!hasOwn(target, prop)) {
       pushStaticField(context, 'observedAttributes', attr); // 没有 observe 的效果
       defineProp(target, prop, { attr, attrType });
     }
@@ -151,11 +152,11 @@ function decoratorAttr<T extends GemElement>(context: ClassFieldDecoratorContext
 /**
  * 定义一个响应式的 attribute，驼峰字段名将自动映射到烤串 attribute，默认值为空字符串；不要覆盖定义
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @attribute attr: string;
- *  }
+ * class App extends GemElement {
+ *   @​attribute attr: string;
+ * }
  * ```
  */
 export function attribute<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, string>) {
@@ -171,18 +172,18 @@ export function numattribute<T extends GemElement>(_: undefined, context: ClassF
 /**
  * 定义一个响应式的 property，注意值可能为 `undefined`；不要覆盖定义
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @property prop: Data | undefined;
- *  }
+ * class App extends GemElement {
+ *   @​property prop: Data | undefined;
+ * }
  * ```
  */
 export function property<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T>) {
   const prop = context.name as string;
   context.addInitializer(function (this: T) {
     const target = getDecoratorTarget(this, context);
-    if (!target.hasOwnProperty(prop)) {
+    if (!hasOwn(target, prop)) {
       pushStaticField(context, 'observedProperties', prop);
       defineProp(target, prop);
     }
@@ -197,32 +198,40 @@ export function property<T extends GemElement>(_: undefined, context: ClassField
 /**
  * 依赖 `GemElement.memo`
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @memo(() => [])
- *    get data() {
- *      return 1;
- *    }
- *  }
+ * class App extends GemElement {
+ *   @​memo(() => [])
+ *   get data() {
+ *     return 1;
+ *   }
+ * }
  * ```
  */
 export function memo<T extends GemElement, V = any, K = any[] | undefined>(
   getDep?: K extends readonly any[] ? (instance: T) => K : undefined,
 ) {
-  return function (
+  return (
     _: any,
     context: ClassGetterDecoratorContext<T, V> | ClassFieldDecoratorContext<T> | ClassMethodDecoratorContext<T>,
-  ) {
+  ) => {
     const { addInitializer, name, access, kind } = context;
     addInitializer(function (this: T) {
       const dep = getDep && (() => getDep(this) as any);
       if (kind === 'getter') {
         // 不能设置私有字段 https://github.com/tc39/proposal-decorators/issues/509
         if (context.private) throw new GemError('not support');
-        this.memo(() => defineProperty(this, name, { configurable: true, value: access.get(this) }), dep);
+        const target = getDecoratorTarget(this, context as any);
+        // 不能直接用 `access.get.bind(this)` 是现有 builder 工具的 bug？
+        const getter = getOwnPropertyDescriptor(target, name)!.get!.bind(this);
+        this.memo(() => {
+          defineProperty(this, name, {
+            configurable: true,
+            value: getter(),
+          });
+        }, dep);
       } else {
-        this.memo((access.get(this) as any).bind(this) as any, dep);
+        this.memo((access.get.call(this, this) as any).bind(this), dep);
       }
     });
   };
@@ -233,37 +242,31 @@ export function memo<T extends GemElement, V = any, K = any[] | undefined>(
  * - 方法执行在字段前面
  * - 如果没有 oldValue，在为首次执行
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @effect(() => [])
- *    #fetchData(newValue, oldValue) {
- *      console.log('fetch')
- *    }
- *  }
+ * class App extends GemElement {
+ *   @​effect(() => [])
+ *   #fetchData(newValue, oldValue) {
+ *     console.log('fetch')
+ *   }
+ * }
  * ```
  */
 export function effect<T extends GemElement, V extends (depValues: K, oldDepValues?: K) => any, K = any[] | undefined>(
   getDep?: K extends readonly any[] ? (instance: T) => K : undefined,
 ) {
-  return function (
-    _: any,
-    { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>,
-  ) {
+  return (_: any, { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>) => {
     addInitializer(function (this: T) {
-      this.effect(access.get(this).bind(this) as any, getDep && (() => getDep(this) as any));
+      this.effect(access.get.call(this, this).bind(this) as any, getDep && (() => getDep(this) as any));
     });
   };
 }
 
 export function unmounted<T extends GemElement, V extends () => any>() {
-  return function (
-    _: any,
-    { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>,
-  ) {
+  return (_: any, { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>) => {
     addInitializer(function (this: T) {
       this.effect(
-        () => access.get(this).bind(this) as any,
+        () => access.get.call(this, this).bind(this) as any,
         () => [],
       );
     });
@@ -284,13 +287,10 @@ export function template<T extends GemElement, V extends () => TemplateResult |
   /** 当所有 `template` 返回 `false` 时不进行更新，包括 `memo` */
   condition?: (instance: T) => boolean,
 ) {
-  return function (
-    _: any,
-    { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>,
-  ) {
+  return (_: any, { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>) => {
     addInitializer(function (this: T) {
       _createTemplate(this, {
-        render: access.get(this).bind(this),
+        render: access.get.call(this, this).bind(this),
         condition: condition && (() => condition(this) as any),
       });
     });
@@ -298,13 +298,10 @@ export function template<T extends GemElement, V extends () => TemplateResult |
 }
 
 export function fallback<T extends GemElement, V extends (err: any) => TemplateResult | null | undefined>() {
-  return function (
-    _: any,
-    { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>,
-  ) {
+  return (_: any, { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>) => {
     addInitializer(function (this: T) {
       this.addEventListener(_RenderErrorEvent, ({ detail }: CustomEvent) => {
-        render(access.get(this).apply(this, [detail]), this.internals.shadowRoot || this);
+        render(access.get.call(this, this).apply(this, [detail]), this.internals.shadowRoot || this);
       });
     });
   };
@@ -336,11 +333,11 @@ function defineCSSState(target: GemElementPrototype, prop: string, stateStr: str
  * 重新赋值转换 css 伪类
  * 将来也可能用于 IDE 识别
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @state state: boolean;
- *  }
+ * class App extends GemElement {
+ *   @​state state: boolean;
+ * }
  * ```
  */
 export function state<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, boolean>) {
@@ -348,7 +345,7 @@ export function state<T extends GemElement>(_: undefined, context: ClassFieldDec
   const attr = camelToKebabCase(prop);
   context.addInitializer(function (this: T) {
     const target = getDecoratorTarget(this, context);
-    if (!target.hasOwnProperty(prop)) {
+    if (!hasOwn(target, prop)) {
       pushStaticField(context, 'definedCSSStates', attr);
       defineCSSState(target, prop, attr);
     }
@@ -379,12 +376,12 @@ function defineStaticField(
 /**
  * 定义一个内部 slot，默认值即为字段名，不能使用全局属性 `slot`
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @slot slot: string;
- *    @slot static slot: string;
- *  }
+ * class App extends GemElement {
+ *   @​slot slot: string;
+ *   @​slot static slot: string;
+ * }
  * ```
  */
 export function slot(_: undefined, context: ClassFieldDecoratorContext<any, string>) {
@@ -396,12 +393,12 @@ export function slot(_: undefined, context: ClassFieldDecoratorContext<any, stri
 /**
  * 定义一个内部 part，默认值即为字段名，不能使用全局属性 `part`
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @part part: string;
- *    @part static part: string;
- *  }
+ * class App extends GemElement {
+ *   @​part part: string;
+ *   @​part static part: string;
+ * }
  * ```
  */
 export function part(_: undefined, context: ClassFieldDecoratorContext<any, string>) {
@@ -410,17 +407,27 @@ export function part(_: undefined, context: ClassFieldDecoratorContext<any, stri
   };
 }
 
-export type Emitter<T = any> = (detail?: T, options?: Omit<CustomEventInit<unknown>, 'detail'>) => Promise<void> | void;
+type EmitterHandler<T> = (evt: CustomEvent<T>) => void;
+
+export type Emitter<T = any> = ((
+  detail?: T,
+  options?: Omit<CustomEventInit<unknown>, 'detail'>,
+) => Promise<void> | void) & {
+  /**
+   * @internal 用来为 ts plugin 提供类型签名，没有值
+   */
+  handler?: EmitterHandler<T> | (AddEventListenerOptions & { handleEvent: EmitterHandler<T> });
+};
 
 /**
  * 定义一个事件发射器，类似 `HTMLElement.click`，
  * 调用时将同步发送一个和字段名称的烤串式格式的自定义事件
  *
- * For example
+ * @example
  * ```ts
- *  class App extends GemElement {
- *    @emitter load: Function;
- *  }
+ * class App extends GemElement {
+ *   @​emitter load: Function;
+ * }
  * ```
  */
 export function emitter<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, Emitter>) {
@@ -437,7 +444,7 @@ function defineEmitter<T extends GemElement>(
   const event = camelToKebabCase(prop);
   context.addInitializer(function (this: T) {
     const target = getDecoratorTarget(this, context);
-    if (!target.hasOwnProperty(prop)) {
+    if (!hasOwn(target, prop)) {
       pushStaticField(context, 'definedEvents', event);
       defineProp(target, prop, { event, eventOptions });
     }
@@ -448,14 +455,14 @@ function defineEmitter<T extends GemElement>(
 /**
  * 分配一个构造的样式表，前面的优先级越高（因为装饰器是越近越早执行）
  *
- * For example
+ * @example
  * ```ts
- *  @adoptedStyle(stylesheet)
- *  class App extends GemElement {}
+ * ​@​adoptedStyle(stylesheet)
+ * class App extends GemElement {}
  * ```
  */
-export function adoptedStyle(sheet: ReturnType<typeof css>) {
-  return function (_: unknown, context: ClassDecoratorContext) {
+export function adoptedStyle(sheet: Sheet<unknown>) {
+  return (_: unknown, context: ClassDecoratorContext) => {
     pushStaticField(context, 'adoptedStyleSheets', sheet);
   };
 }
@@ -463,14 +470,14 @@ export function adoptedStyle(sheet: ReturnType<typeof css>) {
 /**
  * 链接一个 store，当 store 更新时更新元素
  *
- * For example
+ * @example
  * ```ts
- *  @connectStore(store)
- *  class App extends GemElement {}
+ * ​@​connectStore(store)
+ * class App extends GemElement {}
  * ```
  */
 export function connectStore(store: Store<any>) {
-  return function (_: unknown, context: ClassDecoratorContext) {
+  return (_: unknown, context: ClassDecoratorContext) => {
     pushStaticField(context, 'observedStores', store);
   };
 }
@@ -481,14 +488,14 @@ export function shadow({
   delegatesFocus,
   slotAssignment,
 }: Partial<ShadowRootInit> = {}) {
-  return function (_: any, context: ClassDecoratorContext) {
+  return (_: any, context: ClassDecoratorContext) => {
     const metadata = context.metadata as Metadata;
     assign(metadata, { mode, serializable, delegatesFocus, slotAssignment });
   };
 }
 
 export function light({ penetrable }: Pick<Metadata, 'penetrable'>) {
-  return function (_: any, context: ClassDecoratorContext) {
+  return (_: any, context: ClassDecoratorContext) => {
     const metadata = context.metadata as Metadata;
     metadata.penetrable = penetrable;
   };
@@ -499,7 +506,7 @@ export function light({ penetrable }: Pick<Metadata, 'penetrable'>) {
  * 例如：https://examples.gemjs.org/async
  */
 export function async() {
-  return function (_: any, context: ClassDecoratorContext) {
+  return (_: any, context: ClassDecoratorContext) => {
     const metadata = context.metadata as Metadata;
     metadata.noBlocking = true;
   };
@@ -509,7 +516,7 @@ export function async() {
  * 定义元素的可访问性属性
  */
 export function aria(info: Metadata['aria']) {
-  return function (_: any, context: ClassDecoratorContext) {
+  return (_: any, context: ClassDecoratorContext) => {
     const metadata = context.metadata as Metadata;
     metadata.aria = { ...metadata.aria, ...info };
   };
@@ -518,33 +525,16 @@ export function aria(info: Metadata['aria']) {
 /**
  * 定义自定义元素
  *
- * For example
+ * @example
  * ```ts
- *  @customElement('my-element')
- *  class App extends GemElement {}
+ * ​@​customElement('my-element')
+ * class App extends GemElement {}
  * ```
  */
 export function customElement(name: string) {
-  return function (cls: new (...args: any) => any, { addInitializer }: ClassDecoratorContext) {
-    addInitializer(function () {
+  return (cls: new (...args: any) => any, { addInitializer }: ClassDecoratorContext) => {
+    addInitializer(() => {
       customElements.define(name, cls);
     });
   };
 }
-
-declare global {
-  interface Window {
-    __GEM_DEVTOOLS__HOOK__?:
-      | (typeof elementExports & typeof decoratorsExports & typeof storeExports & typeof versionExports)
-      | Record<string, never>;
-  }
-}
-
-if (window.__GEM_DEVTOOLS__HOOK__ && !window.__GEM_DEVTOOLS__HOOK__.GemElement) {
-  assign(window.__GEM_DEVTOOLS__HOOK__, {
-    ...elementExports,
-    ...decoratorsExports,
-    ...storeExports,
-    ...versionExports,
-  });
-}

package/src/lib/directive.ts

@@ -35,7 +35,7 @@ export interface DirectiveResult<C extends DirectiveClass = DirectiveClass> {
    * This property needs to remain unminified.
    * @internal
    */
-  ['_$litDirective$']: C;
+  _$litDirective$: C;
   /** @internal */
   values: DirectiveParameters<InstanceType<C>>;
 }
@@ -86,7 +86,7 @@ export const directive =
   <C extends DirectiveClass>(c: C) =>
   (...values: DirectiveParameters<InstanceType<C>>): DirectiveResult<C> => ({
     // This property needs to remain unminified.
-    ['_$litDirective$']: c,
+    _$litDirective$: c,
     values,
   });
 
@@ -111,9 +111,7 @@ export abstract class Directive implements Disconnectable {
   _$disconnectableChildren?: Set<Disconnectable>;
   // This property needs to remain unminified.
   //@internal
-  ['_$notifyDirectiveConnectionChanged']?(isConnected: boolean): void;
-
-  constructor(_partInfo: PartInfo) {}
+  _$notifyDirectiveConnectionChanged?(isConnected: boolean): void;
 
   // See comment in Disconnectable interface for why this is a getter
   get _$isConnected() {