@mantou/gem 2.1.1 → 2.2.1

package/src/helper/logger.ts

@@ -1,20 +1,24 @@
 export class Logger {
-  _type: string;
+  #type: string;
+
+  get #prefix() {
+    return `[${this.#type}]`;
+  }
 
   constructor(type: string) {
-    this._type = type;
+    this.#type = type;
   }
 
   info = (...args: any[]) => {
-    console.log(`[${this._type}]:`, ...args);
+    console.log(this.#prefix, ...args);
   };
 
   warn = (...args: any[]) => {
-    console.warn(`[${this._type}]:`, ...args);
+    console.warn(this.#prefix, ...args);
   };
 
   error = (...args: any[]) => {
-    console.error(`[${this._type}]:`, ...args);
+    console.error(this.#prefix, ...args);
   };
 }
 

package/src/helper/mediaquery.ts

@@ -1,7 +1,7 @@
 // https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
 // https://mediag.com/news/popular-screen-resolutions-designing-for-all/
 
-const match = (query: string) => window.matchMedia(query).matches;
+const match = (query: string) => matchMedia(query).matches;
 
 export const mediaQuery = {
   PRINT: 'print',

package/src/helper/ssr-shim.ts

@@ -1,3 +1,6 @@
+/// 简单的垫片，让 GemElement 服务端渲染不报错
+/// 渲染时将忽略 GemElement 内容
+
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 if (typeof window === 'undefined') {

package/src/helper/theme.ts

@@ -1,14 +1,14 @@
+import type { GemElement, Sheet } from '../lib/reactive';
+import { css, SheetToken } from '../lib/reactive';
 import type { Store } from '../lib/store';
 import { connect, createStore } from '../lib/store';
 import { camelToKebabCase, createUpdater, randomStr } from '../lib/utils';
-import type { GemElement } from '../lib/element';
-import { SheetToken, createCSSSheet } from '../lib/element';
 
 export type Theme<T> = ReturnType<typeof createUpdater<T>> &
-  ReturnType<typeof createCSSSheet> & {
+  Sheet<unknown> & {
     [K in keyof T as K extends `${string}Color`
       ? `${string & K}${'' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}`
-      : K]: T[K];
+      : K]: string;
   };
 
 const themeStoreMap = new WeakMap();
@@ -26,7 +26,7 @@ export function getThemeProps<T>(theme: Theme<T>) {
 
 function createThemeFromProps<T extends Record<string, unknown>>(themeObj: T, props: Record<string, string> = {}) {
   const salt = randomStr();
-  const styleSheet = createCSSSheet({})[SheetToken];
+  const styleSheet = css({})[SheetToken];
   const store = createStore<T>(themeObj);
   const theme: any = new Proxy(
     createUpdater({ [SheetToken]: styleSheet }, (payload: Partial<T>) => store(payload)),
@@ -63,7 +63,7 @@ function createThemeFromProps<T extends Record<string, unknown>>(themeObj: T, pr
 }
 
 /**
- * 用于 `@adoptedStyle(theme)`，类似 `createCSSSheet`
+ * 用于 `@adoptedStyle(theme)`，类似 `css`
  */
 export function createScopedTheme<T extends Record<string, unknown>>(themeObj: T) {
   return createThemeFromProps(themeObj);

package/src/index.ts

@@ -1,9 +1,5 @@
-export * from './lib/decorators';
 export * from './lib/element';
+export * from './lib/history';
 export * from './lib/store';
 export * from './lib/utils';
 export * from './lib/version';
-
-// 使用路径时可选模块
-export * from './lib/history';
-export * from './lib/directives';

package/src/lib/decorators.ts

@@ -1,27 +1,22 @@
-import type { createCSSSheet, 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;
+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) {
   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],
+      value: metadata[field]?.filter((e) => e !== member) || [],
     });
   }
 
@@ -29,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;
 }
@@ -39,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));
 };
@@ -96,10 +93,13 @@ function defineProp(
       if (event) {
         proxy[prop] = v?.[isEventHandleSymbol]
           ? v
-          : (detail: any, options: any) => {
+          : async (detail: any, options: any) => {
+              // 事件如果同步触发，则祖先元素可能还没有挂载好，其中就不能更新 state
+              // https://github.com/mantou132/gem/issues/203
+              await Promise.resolve();
               const evt = new CustomEvent(event, { ...options, ...eventOptions, detail });
               that.dispatchEvent(evt);
-              v(detail, options);
+              await v(detail, options);
             };
         (proxy[prop] as any)[isEventHandleSymbol] = true;
         // emitter 不触发元素更新
@@ -111,21 +111,35 @@ function defineProp(
   });
 }
 
+// https://github.com/tc39/proposal-decorators/issues/517
+const targetCache = new WeakMap<DecoratorMetadataObject, GemElementPrototype>();
+function getDecoratorTarget(element: GemElement, { metadata }: ClassMemberDecoratorContext) {
+  const target = targetCache.get(metadata);
+  if (target) return target;
+  let result = element as GemElementPrototype;
+  do {
+    result = getPrototypeOf(result);
+  } while (result.constructor[Symbol.metadata] !== metadata);
+  targetCache.set(metadata, result);
+  return result;
+}
+
 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)) {
+    const target = getDecoratorTarget(this, context);
+    if (!hasOwn(target, 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);
+    // 记录观察的 attribute, 用于 hack 的 setAttribute
+    const proto = getPrototypeOf(this);
+    const attrMap = observedTargetAttributes.get(proto) || new Map<string, string>();
+    attrMap.set(attr, prop);
+    observedTargetAttributes.set(proto, attrMap);
   });
   // 延时定义的元素需要继承原实例属性值
   return function (this: any, initValue: any) {
@@ -166,8 +180,8 @@ export function numattribute<T extends GemElement>(_: undefined, context: ClassF
 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)) {
+    const target = getDecoratorTarget(this, context);
+    if (!hasOwn(target, prop)) {
       pushStaticField(context, 'observedProperties', prop);
       defineProp(target, prop);
     }
@@ -195,33 +209,42 @@ 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);
       }
     });
   };
 }
 
 /**
- * 依赖 `GemElement.effect`
- * 方法执行在字段前面
+ * - 依赖 `GemElement.effect`
+ * - 方法执行在字段前面
+ * - 如果没有 oldValue，在为首次执行
  *
  * For example
  * ```ts
  *  class App extends GemElement {
  *    @effect(() => [])
- *    #fetchData() {
+ *    #fetchData(newValue, oldValue) {
  *      console.log('fetch')
  *    }
  *  }
@@ -230,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,
         () => [],
       );
     });
@@ -268,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),
       });
     });
@@ -282,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);
       });
     });
   };
@@ -328,11 +339,11 @@ function defineCSSState(target: GemElementPrototype, prop: string, stateStr: str
  * ```
  */
 export function state<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, boolean>) {
+  const prop = context.name as string;
+  const attr = camelToKebabCase(prop);
   context.addInitializer(function (this: T) {
-    const target = getPrototypeOf(this);
-    const prop = context.name as string;
-    if (!target.hasOwnProperty(prop)) {
-      const attr = camelToKebabCase(prop);
+    const target = getDecoratorTarget(this, context);
+    if (!hasOwn(target, prop)) {
       pushStaticField(context, 'definedCSSStates', attr);
       defineCSSState(target, prop, attr);
     }
@@ -394,7 +405,17 @@ export function part(_: undefined, context: ClassFieldDecoratorContext<any, stri
   };
 }
 
-export type Emitter<T = any> = (detail?: T, options?: Omit<CustomEventInit<unknown>, 'detail'>) => 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`，
@@ -408,28 +429,25 @@ export type Emitter<T = any> = (detail?: T, options?: Omit<CustomEventInit<unkno
  * ```
  */
 export function emitter<T extends GemElement>(_: undefined, context: ClassFieldDecoratorContext<T, Emitter>) {
-  context.addInitializer(function (this: T) {
-    defineEmitter(context, this, context.name as string);
-  });
+  defineEmitter(context);
 }
 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 });
-  });
+  defineEmitter(context, { bubbles: true, composed: true });
 }
-function defineEmitter(
+function defineEmitter<T extends GemElement>(
   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);
+  const prop = context.name as string;
+  const event = camelToKebabCase(prop);
+  context.addInitializer(function (this: T) {
+    const target = getDecoratorTarget(this, context);
+    if (!hasOwn(target, prop)) {
+      pushStaticField(context, 'definedEvents', event);
+      defineProp(target, prop, { event, eventOptions });
+    }
+    clearField(this, prop);
+  });
 }
 
 /**
@@ -441,8 +459,8 @@ function defineEmitter(
  *  class App extends GemElement {}
  * ```
  */
-export function adoptedStyle(sheet: ReturnType<typeof createCSSSheet>) {
-  return function (_: unknown, context: ClassDecoratorContext) {
+export function adoptedStyle(sheet: Sheet<unknown>) {
+  return (_: unknown, context: ClassDecoratorContext) => {
     pushStaticField(context, 'adoptedStyleSheets', sheet);
   };
 }
@@ -457,7 +475,7 @@ export function adoptedStyle(sheet: ReturnType<typeof createCSSSheet>) {
  * ```
  */
 export function connectStore(store: Store<any>) {
-  return function (_: unknown, context: ClassDecoratorContext) {
+  return (_: unknown, context: ClassDecoratorContext) => {
     pushStaticField(context, 'observedStores', store);
   };
 }
@@ -468,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;
   };
@@ -486,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;
   };
@@ -496,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 };
   };
@@ -512,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

@@ -0,0 +1,137 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import type { Disconnectable, Part } from './lit-html.js';
+
+export type {
+  AttributePart,
+  BooleanAttributePart,
+  ChildPart,
+  ElementPart,
+  EventPart,
+  Part,
+  PropertyPart,
+} from './lit-html.js';
+
+export interface DirectiveClass {
+  new (part: PartInfo): Directive;
+}
+
+/**
+ * This utility type extracts the signature of a directive class's render()
+ * method so we can use it for the type of the generated directive function.
+ */
+export type DirectiveParameters<C extends Directive> = Parameters<C['render']>;
+
+/**
+ * A generated directive function doesn't evaluate the directive, but just
+ * returns a DirectiveResult object that captures the arguments.
+ */
+export interface DirectiveResult<C extends DirectiveClass = DirectiveClass> {
+  /**
+   * This property needs to remain unminified.
+   * @internal
+   */
+  _$litDirective$: C;
+  /** @internal */
+  values: DirectiveParameters<InstanceType<C>>;
+}
+
+export const PartType = {
+  ATTRIBUTE: 1,
+  CHILD: 2,
+  PROPERTY: 3,
+  BOOLEAN_ATTRIBUTE: 4,
+  EVENT: 5,
+  ELEMENT: 6,
+} as const;
+
+export type PartType = (typeof PartType)[keyof typeof PartType];
+
+export interface ChildPartInfo {
+  readonly type: typeof PartType.CHILD;
+}
+
+export interface AttributePartInfo {
+  readonly type:
+    | typeof PartType.ATTRIBUTE
+    | typeof PartType.PROPERTY
+    | typeof PartType.BOOLEAN_ATTRIBUTE
+    | typeof PartType.EVENT;
+  readonly strings?: ReadonlyArray<string>;
+  readonly name: string;
+  readonly tagName: string;
+}
+
+export interface ElementPartInfo {
+  readonly type: typeof PartType.ELEMENT;
+}
+
+/**
+ * Information about the part a directive is bound to.
+ *
+ * This is useful for checking that a directive is attached to a valid part,
+ * such as with directive that can only be used on attribute bindings.
+ */
+export type PartInfo = ChildPartInfo | AttributePartInfo | ElementPartInfo;
+
+/**
+ * Creates a user-facing directive function from a Directive class. This
+ * function has the same parameters as the directive's render() method.
+ */
+export const directive =
+  <C extends DirectiveClass>(c: C) =>
+  (...values: DirectiveParameters<InstanceType<C>>): DirectiveResult<C> => ({
+    // This property needs to remain unminified.
+    _$litDirective$: c,
+    values,
+  });
+
+/**
+ * Base class for creating custom directives. Users should extend this class,
+ * implement `render` and/or `update`, and then pass their subclass to
+ * `directive`.
+ */
+export abstract class Directive implements Disconnectable {
+  //@internal
+  __part!: Part;
+  //@internal
+  __attributeIndex: number | undefined;
+  //@internal
+  __directive?: Directive;
+
+  //@internal
+  _$parent!: Disconnectable;
+
+  // These will only exist on the AsyncDirective subclass
+  //@internal
+  _$disconnectableChildren?: Set<Disconnectable>;
+  // This property needs to remain unminified.
+  //@internal
+  _$notifyDirectiveConnectionChanged?(isConnected: boolean): void;
+
+  // See comment in Disconnectable interface for why this is a getter
+  get _$isConnected() {
+    return this._$parent._$isConnected;
+  }
+
+  /** @internal */
+  _$initialize(part: Part, parent: Disconnectable, attributeIndex: number | undefined) {
+    this.__part = part;
+    this._$parent = parent;
+    this.__attributeIndex = attributeIndex;
+  }
+  /** @internal */
+  _$resolve(part: Part, props: Array<unknown>): unknown {
+    return this.update(part, props);
+  }
+
+  abstract render(...props: Array<unknown>): unknown;
+
+  update(_part: Part, props: Array<unknown>): unknown {
+    return this.render(...props);
+  }
+}