@mantou/gem 1.7.12 → 2.0.0-alpha.0

package/src/lib/decorators.ts

@@ -1,90 +1,317 @@
-import { defineAttribute, defineCSSState, defineProperty, defineRef, GemElement, nativeDefineElement } from './element';
-import { Store } from './store';
-import { Sheet, camelToKebabCase, randomStr } from './utils';
-
-type GemElementPrototype = GemElement<any>;
-type GemElementConstructor = typeof GemElement;
-type StaticField = Exclude<keyof GemElementConstructor, 'prototype' | 'rootElement'>;
-type StaticFieldMember = string | Store<unknown> | Sheet<unknown>;
-
-function pushStaticField(target: GemElementPrototype, field: StaticField, member: StaticFieldMember, isSet = false) {
-  const cls = target.constructor as GemElementConstructor;
-  const current = cls[field];
-  if (!cls.hasOwnProperty(field)) {
-    Object.defineProperty(cls, field, {
-      value: isSet ? new Set<unknown>(current) : current ? Array.from<any>(current) : [],
+import type { createCSSSheet, Metadata, TemplateResult } from './element';
+import { GemElement, UpdateToken, createTemplate, RenderErrorEvent, render } from './element';
+import { camelToKebabCase, PropProxyMap, GemError } from './utils';
+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';
+
+type GemElementPrototype = GemElement;
+type StaticField = Exclude<keyof Metadata, keyof ShadowRootInit | 'aria' | 'noBlocking'>;
+
+const { deleteProperty, getOwnPropertyDescriptor, defineProperty } = Reflect;
+const { getPrototypeOf, assign } = Object;
+const gemElementProxyMap = new PropProxyMap<GemElement>();
+
+function pushStaticField(context: ClassFieldDecoratorContext | ClassDecoratorContext, field: StaticField, member: any) {
+  const metadata = context.metadata as Metadata;
+  if (!getOwnPropertyDescriptor(metadata, field)) {
+    // 继承基类
+    const current = new Set<unknown>(metadata[field]);
+    current.delete(member);
+    defineProperty(metadata, field, {
+      value: [...current],
     });
   }
 
-  (cls[field] as any)[isSet ? 'add' : 'push'](member);
+  metadata[field]!.push(member);
 }
 
-export type RefObject<T = HTMLElement> = { ref: string; element: T | undefined; elements: T[] };
+function clearField<T extends GemElement>(instance: T, prop: string) {
+  const { value } = getOwnPropertyDescriptor(instance, prop)!;
+  deleteProperty(instance, prop);
+  (instance as any)[prop] = value;
+}
+
+const observedTargetAttributes = new WeakMap<GemElementPrototype, Map<string, string>>();
+// hack 修改 attribute 行为，如果是观察的，就使用 `setter`
+// 不在 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;
+GemElement.prototype.setAttribute = function (n: string, v: string) {
+  const prop = observedTargetAttributes.get(getPrototypeOf(this))?.get(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);
+  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);
+  if (!prop) return toggleAttribute.call(this, n, force);
+  return ((this as any)[prop] = force ?? !this.hasAttribute(n));
+};
+
+function emptyFunction() {
+  // 用于占位的空函数
+}
+
+type DefinePropOptions = {
+  attr?: string;
+  attrType?: (v?: any) => any;
+  event?: string;
+  eventOptions?: Omit<CustomEventInit<unknown>, 'detail'>;
+};
+const isEventHandleSymbol = Symbol('event handle');
+function defineProp(
+  target: GemElementPrototype,
+  prop: string,
+  { attr, attrType, event, eventOptions }: DefinePropOptions = {},
+) {
+  defineProperty(target, prop, {
+    configurable: true,
+    get() {
+      const value = gemElementProxyMap.get(this)[prop];
+      if (event && !value) {
+        this[prop] = emptyFunction;
+        return this[prop];
+      }
+      return value;
+    },
+    set(v) {
+      const that = this as GemElement;
+      const proxy = gemElementProxyMap.get(that);
+      if (attr) {
+        v = attrType === Boolean && v === '' ? true : attrType!(v || '');
+        if (!v) {
+          removeAttribute.call(this, attr);
+        } else {
+          setAttribute.call(this, attr, attrType === Boolean ? '' : v);
+        }
+      }
+      if (v === proxy[prop]) return;
+      if (event) {
+        proxy[prop] = v?.[isEventHandleSymbol]
+          ? v
+          : (detail: any, options: any) => {
+              const evt = new CustomEvent(event, { ...options, ...eventOptions, detail });
+              that.dispatchEvent(evt);
+              v(detail, options);
+            };
+        (proxy[prop] as any)[isEventHandleSymbol] = true;
+        // emitter 不触发元素更新
+      } else {
+        proxy[prop] = v;
+        this[UpdateToken]();
+      }
+    },
+  });
+}
+
+type AttrType = BooleanConstructor | NumberConstructor | StringConstructor;
+function decoratorAttr<T extends GemElement>(context: ClassFieldDecoratorContext<T>, attrType: AttrType) {
+  const prop = context.name as string;
+  const attr = camelToKebabCase(prop);
+  context.addInitializer(function (this: T) {
+    const target = getPrototypeOf(this);
+    if (!target.hasOwnProperty(prop)) {
+      pushStaticField(context, 'observedAttributes', attr); // 没有 observe 的效果
+      defineProp(target, prop, { attr, attrType });
+      // 记录观察的 attribute
+      const attrMap = observedTargetAttributes.get(target) || new Map<string, string>();
+      attrMap.set(attr, prop);
+      observedTargetAttributes.set(target, attrMap);
+    }
+    clearField(this, prop);
+  });
+  // 延时定义的元素需要继承原实例属性值
+  return function (this: any, initValue: any) {
+    return this.getAttribute(attr) ?? initValue;
+  };
+}
 
 /**
- * 引用元素，只有第一个标记 ref 的元素有效
+ * 定义一个响应式的 attribute，驼峰字段名将自动映射到烤串 attribute，默认值为空字符串；不要覆盖定义
  *
  * For example
  * ```ts
  *  class App extends GemElement {
- *    @refobject childRef: RefObject<Children>;
- *    loadHandle = () => {
- *      const { element } = this.childRef;
- *      console.log(element);
- *    };
- *    render() {
- *      render html`<div ref=${this.childRef.ref}><div>`;
- *    }
+ *    @attribute attr: string;
  *  }
  * ```
  */
-export function refobject(target: GemElementPrototype, prop: string) {
-  const ref = `${camelToKebabCase(prop)}-${randomStr()}`;
-  pushStaticField(target, 'defineRefs', ref);
-  defineRef(target, prop, ref);
+export function attribute<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, string>) {
+  return decoratorAttr(context, String);
+}
+export function boolattribute<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, boolean>) {
+  return decoratorAttr(context, Boolean);
+}
+export function numattribute<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, number>) {
+  return decoratorAttr(context, Number);
 }
 
 /**
- * 定义一个响应式的 attribute，驼峰字段名将自动映射到烤串 attribute，默认值为空字符串
+ * 定义一个响应式的 property，注意值可能为 `undefined`；不要覆盖定义
  *
  * For example
  * ```ts
  *  class App extends GemElement {
- *    @attribute attr: string;
+ *    @property prop: Data | undefined;
  *  }
  * ```
  */
-function defineAttr(target: GemElementPrototype, prop: string, attr: string) {
-  pushStaticField(target, 'observedAttributes', attr);
-  defineAttribute(target, prop, attr);
-}
-export function attribute(target: GemElementPrototype, prop: string) {
-  defineAttr(target, prop, camelToKebabCase(prop));
-}
-export function boolattribute(target: GemElementPrototype, prop: string) {
-  const attr = camelToKebabCase(prop);
-  pushStaticField(target, 'booleanAttributes', attr, true);
-  defineAttr(target, prop, attr);
+export function property<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T>) {
+  const prop = context.name as string;
+  context.addInitializer(function (this: T) {
+    const target = getPrototypeOf(this);
+    if (!target.hasOwnProperty(prop)) {
+      pushStaticField(context, 'observedProperties', prop);
+      defineProp(target, prop);
+    }
+    clearField(this, prop);
+  });
+  // 延时定义的元素需要继承原实例属性值
+  return function (this: any, initValue: any) {
+    return this[prop] ?? initValue;
+  };
 }
-export function numattribute(target: GemElementPrototype, prop: string) {
-  const attr = camelToKebabCase(prop);
-  pushStaticField(target, 'numberAttributes', attr, true);
-  defineAttr(target, prop, attr);
+
+/**
+ * 依赖 `GemElement.memo`
+ *
+ * For example
+ * ```ts
+ *  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 (
+    _: 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);
+      } else {
+        this.memo((access.get(this) as any).bind(this) as any, dep);
+      }
+    });
+  };
 }
 
 /**
- * 定义一个响应式的 property，注意值可能为 `undefined`
+ * 依赖 `GemElement.effect`
+ * 方法执行在字段前面
  *
  * For example
  * ```ts
  *  class App extends GemElement {
- *    @property prop: Data | undefined;
+ *    @effect(() => [])
+ *    #fetchData() {
+ *      console.log('fetch')
+ *    }
  *  }
  * ```
  */
-export function property(target: GemElementPrototype, prop: string) {
-  pushStaticField(target, 'observedProperties', prop);
-  defineProperty(target, prop);
+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>,
+  ) {
+    addInitializer(function (this: T) {
+      this.effect(access.get(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>,
+  ) {
+    addInitializer(function (this: T) {
+      this.effect(
+        () => access.get(this).bind(this) as any,
+        () => [],
+      );
+    });
+  };
+}
+
+/**`@memo` 别名，不能再在回调中使用 `this.memo` */
+export function willMount() {
+  return memo(() => []);
+}
+
+/**`@effect` 别名，不能再在回调中使用 `this.effect` */
+export function mounted() {
+  return effect(() => []);
+}
+
+export function template<T extends GemElement, V extends () => TemplateResult | null | undefined>(
+  /** 当所有 `template` 返回 `false` 时不进行更新，包括 `memo` */
+  condition?: (instance: T) => boolean,
+) {
+  return function (
+    _: any,
+    { addInitializer, access }: ClassFieldDecoratorContext<T, V> | ClassMethodDecoratorContext<T, V>,
+  ) {
+    addInitializer(function (this: T) {
+      createTemplate(this, {
+        render: access.get(this).bind(this),
+        condition: condition && (() => condition(this) as any),
+      });
+    });
+  };
+}
+
+export function fallback<T extends GemElement, V extends (err: any) => TemplateResult | null | undefined>() {
+  return function (
+    _: 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);
+      });
+    });
+  };
+}
+
+function defineCSSState(target: GemElementPrototype, prop: string, stateStr: string) {
+  defineProperty(target, prop, {
+    configurable: true,
+    get() {
+      const that = this as GemElement;
+      const { states } = that.internals;
+      return states?.has(stateStr);
+    },
+    set(v: boolean) {
+      const that = this as GemElement;
+      const { states } = that.internals;
+      if (v) {
+        states?.add(stateStr);
+      } else {
+        states?.delete(stateStr);
+      }
+    },
+  });
 }
 
 /**
@@ -100,10 +327,37 @@ export function property(target: GemElementPrototype, prop: string) {
  *  }
  * ```
  */
-export function state(target: GemElementPrototype, prop: string) {
+export function state<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, boolean>) {
+  context.addInitializer(function (this: T) {
+    const target = getPrototypeOf(this);
+    const prop = context.name as string;
+    if (!target.hasOwnProperty(prop)) {
+      const attr = camelToKebabCase(prop);
+      pushStaticField(context, 'definedCSSStates', attr);
+      defineCSSState(target, prop, attr);
+    }
+    clearField(this, prop);
+  });
+}
+
+function defineStaticField(
+  context: ClassFieldDecoratorContext<any, string>,
+  target: any,
+  field: StaticField,
+  value: string,
+) {
+  const prop = context.name as string;
   const attr = camelToKebabCase(prop);
-  pushStaticField(target, 'defineCSSStates', attr);
-  defineCSSState(target, prop, attr);
+  if (context.static) {
+    pushStaticField(context, field, attr);
+  } else {
+    const proto = getPrototypeOf(target);
+    if (!proto[prop]) {
+      proto[prop] = attr;
+      pushStaticField(context, field, attr);
+    }
+  }
+  return value || attr;
 }
 
 /**
@@ -117,10 +371,10 @@ export function state(target: GemElementPrototype, prop: string) {
  *  }
  * ```
  */
-export function slot(target: any, prop: string) {
-  const attr = camelToKebabCase((target as any)[prop] || prop);
-  (target as any)[prop] = attr;
-  pushStaticField(target instanceof GemElement ? target : target.prototype, 'defineSlots', attr);
+export function slot(_: undefined, context: ClassFieldDecoratorContext<any, string>) {
+  return function (this: any, value: string) {
+    return defineStaticField(context, this, 'definedSlots', value);
+  };
 }
 
 /**
@@ -134,13 +388,13 @@ export function slot(target: any, prop: string) {
  *  }
  * ```
  */
-export function part(target: any, prop: string) {
-  const attr = camelToKebabCase((target as any)[prop] || prop);
-  (target as any)[prop] = attr;
-  pushStaticField(target instanceof GemElement ? target : target.prototype, 'defineParts', attr);
+export function part(_: undefined, context: ClassFieldDecoratorContext<any, string>) {
+  return function (this: any, value: string) {
+    return defineStaticField(context, this, 'definedParts', value);
+  };
 }
 
-export type Emitter<T = any> = (detail: T, options?: Omit<CustomEventInit<unknown>, 'detail'>) => void;
+export type Emitter<T = any> = (detail?: T, options?: Omit<CustomEventInit<unknown>, 'detail'>) => void;
 
 /**
  * 定义一个事件发射器，类似 `HTMLElement.click`，
@@ -153,20 +407,33 @@ export type Emitter<T = any> = (detail: T, options?: Omit<CustomEventInit<unknow
  *  }
  * ```
  */
-export function emitter(target: GemElementPrototype, prop: string) {
-  defineEmitter(target, prop);
+export function emitter<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, Emitter>) {
+  context.addInitializer(function (this: T) {
+    defineEmitter(context, this, context.name as string);
+  });
 }
-export function globalemitter(target: GemElementPrototype, prop: string) {
-  defineEmitter(target, prop, { bubbles: true, composed: true });
+export function globalemitter<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, Emitter>) {
+  context.addInitializer(function (this: T) {
+    defineEmitter(context, this, context.name as string, { bubbles: true, composed: true });
+  });
 }
-function defineEmitter(target: GemElementPrototype, prop: string, options?: Omit<CustomEventInit<unknown>, 'detail'>) {
-  const event = camelToKebabCase(prop);
-  pushStaticField(target, 'defineEvents', event);
-  defineProperty(target, prop, event, options);
+function defineEmitter(
+  context: ClassFieldDecoratorContext,
+  t: GemElement,
+  prop: string,
+  eventOptions?: Omit<CustomEventInit<unknown>, 'detail'>,
+) {
+  const target = getPrototypeOf(t);
+  if (!target.hasOwnProperty(prop)) {
+    const event = camelToKebabCase(prop);
+    pushStaticField(context, 'definedEvents', event);
+    defineProp(target, prop, { event, eventOptions });
+  }
+  clearField(t, prop);
 }
 
 /**
- * 分配一个构造的样式表，如果元素是 lightDOM，则将样式表挂载到 RootNode 上
+ * 分配一个构造的样式表，前面的优先级越高（因为装饰器是越近越早执行）
  *
  * For example
  * ```ts
@@ -174,10 +441,9 @@ function defineEmitter(target: GemElementPrototype, prop: string, options?: Omit
  *  class App extends GemElement {}
  * ```
  */
-export function adoptedStyle(style: Sheet<unknown>) {
-  return function (cls: unknown) {
-    const con = cls as GemElementConstructor;
-    pushStaticField(con.prototype, 'adoptedStyleSheets', style);
+export function adoptedStyle(sheet: ReturnType<typeof createCSSSheet>) {
+  return function (_: unknown, context: ClassDecoratorContext) {
+    pushStaticField(context, 'adoptedStyleSheets', sheet);
   };
 }
 
@@ -191,25 +457,41 @@ export function adoptedStyle(style: Sheet<unknown>) {
  * ```
  */
 export function connectStore(store: Store<unknown>) {
-  return function (cls: unknown) {
-    const con = cls as GemElementConstructor;
-    pushStaticField(con.prototype, 'observedStores', store);
+  return function (_: unknown, context: ClassDecoratorContext) {
+    pushStaticField(context, 'observedStores', store);
+  };
+}
+
+export function shadow({
+  mode = 'open',
+  serializable = true,
+  delegatesFocus,
+  slotAssignment,
+}: Partial<ShadowRootInit> = {}) {
+  return function (_: any, context: ClassDecoratorContext) {
+    const metadata = context.metadata as Metadata;
+    assign(metadata, { mode, serializable, delegatesFocus, slotAssignment });
   };
 }
 
 /**
- * 限制元素的 root 节点类型
- *
- * For example
- * ```ts
- *  @rootElement('my-element')
- *  class App extends GemElement {}
- * ```
+ * 将元素标记为可中断异步渲染
+ * 例如：https://examples.gemjs.org/async
+ */
+export function async() {
+  return function (_: any, context: ClassDecoratorContext) {
+    const metadata = context.metadata as Metadata;
+    metadata.noBlocking = true;
+  };
+}
+
+/**
+ * 定义元素的可访问性属性
  */
-export function rootElement(rootType: string) {
-  return function (cls: unknown) {
-    const con = cls as GemElementConstructor;
-    con.rootElement = rootType;
+export function aria(info: Metadata['aria']) {
+  return function (_: any, context: ClassDecoratorContext) {
+    const metadata = context.metadata as Metadata;
+    metadata.aria = { ...metadata.aria, ...info };
   };
 }
 
@@ -223,7 +505,26 @@ export function rootElement(rootType: string) {
  * ```
  */
 export function customElement(name: string) {
-  return function (cls: unknown) {
-    nativeDefineElement(name, cls as CustomElementConstructor);
+  return function (cls: new (...args: any) => any, { addInitializer }: ClassDecoratorContext) {
+    addInitializer(function () {
+      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/directives.ts

@@ -0,0 +1,6 @@
+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';