@mantou/gem 2.2.0 → 2.2.1

package/src/lib/decorators.ts

@@ -1,17 +1,14 @@
-import type { css, Metadata, TemplateResult } from './element';
-import { GemElement, UpdateToken, _createTemplate, _RenderErrorEvent, render } from './element';
-import { camelToKebabCase, PropProxyMap, GemError } from './utils';
+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 +24,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 +35,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 +113,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 +130,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 });
     }
@@ -182,7 +181,7 @@ export function property<T extends GemElement>(_: undefined, context: ClassField
   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);
     }
@@ -210,19 +209,27 @@ export function property<T extends GemElement>(_: undefined, context: ClassField
 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);
       }
     });
   };
@@ -246,24 +253,18 @@ export function memo<T extends GemElement, V = any, K = any[] | undefined>(
 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 +285,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 +296,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);
       });
     });
   };
@@ -348,7 +343,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);
     }
@@ -410,7 +405,17 @@ 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`，
@@ -437,7 +442,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 });
     }
@@ -454,8 +459,8 @@ function defineEmitter<T extends GemElement>(
  *  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);
   };
 }
@@ -470,7 +475,7 @@ export function adoptedStyle(sheet: ReturnType<typeof css>) {
  * ```
  */
 export function connectStore(store: Store<any>) {
-  return function (_: unknown, context: ClassDecoratorContext) {
+  return (_: unknown, context: ClassDecoratorContext) => {
     pushStaticField(context, 'observedStores', store);
   };
 }
@@ -481,14 +486,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 +504,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 +514,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 };
   };
@@ -525,26 +530,9 @@ export function aria(info: Metadata['aria']) {
  * ```
  */
 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() {