glass-easel-miniprogram-adapter 0.12.0 → 0.13.0

package/src/builder/base_behavior_builder.ts

@@ -26,14 +26,14 @@ type TaggedMethod<Fn extends ComponentMethod> = typeUtils.TaggedMethod<Fn>
 type UnTaggedMethod<M extends TaggedMethod<any>> = typeUtils.UnTaggedMethod<M>
 
 export class BaseBehaviorBuilder<
-  TPrevData extends DataList = Empty,
-  TData extends DataList = Empty,
-  TProperty extends PropertyList = Empty,
-  TMethod extends MethodList = Empty,
-  TChainingFilter extends ChainingFilterType = never,
-  TPendingChainingFilter extends ChainingFilterType = never,
-  TComponentExport = never,
-  TExtraThisFields extends DataList = Empty,
+  TPrevData extends DataList,
+  TData extends DataList,
+  TProperty extends PropertyList,
+  TMethod extends MethodList,
+  TChainingFilter extends ChainingFilterType,
+  TPendingChainingFilter extends ChainingFilterType,
+  TComponentExport,
+  TExtraThisFields extends DataList,
 > {
   protected _$codeSpace!: CodeSpace
   protected _$!: glassEasel.BehaviorBuilder<
@@ -83,6 +83,45 @@ export class BaseBehaviorBuilder<
     return this as any
   }
 
+  /** Use another behavior */
+  behavior<
+    UData extends DataList,
+    UProperty extends PropertyList,
+    UMethod extends MethodList,
+    UChainingFilter extends ChainingFilterType,
+    UComponentExport,
+    UExtraThisFields extends DataList,
+  >(
+    behavior: Behavior<
+      UData,
+      UProperty,
+      UMethod,
+      UChainingFilter,
+      UComponentExport,
+      UExtraThisFields
+    >,
+  ): ResolveBehaviorBuilder<
+    BaseBehaviorBuilder<
+      TPrevData,
+      TData & UData,
+      TProperty & UProperty,
+      TMethod & UMethod,
+      UChainingFilter,
+      TPendingChainingFilter,
+      UComponentExport,
+      TExtraThisFields & UExtraThisFields
+    >,
+    UChainingFilter
+  > {
+    this._$parents.push(behavior)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    this._$ = this._$.behavior(behavior._$)
+    if (behavior._$chainingFilter) {
+      return behavior._$chainingFilter(this as any)
+    }
+    return this as any
+  }
+
   data<T extends DataList>(
     gen: () => typeUtils.NewFieldList<AllData<TData, TProperty>, T>,
   ): ResolveBehaviorBuilder<
@@ -250,7 +289,9 @@ export class BaseBehaviorBuilder<
       ThisType<Component<TData, TProperty, TMethod, TComponentExport, TExtraThisFields>>,
   ): ResolveBehaviorBuilder<this, TChainingFilter> {
     const target =
-      rel.target instanceof Behavior || rel.target instanceof ComponentType
+      rel.target instanceof Behavior ||
+      rel.target instanceof ComponentType ||
+      rel.target instanceof TraitBehavior
         ? rel.target._$
         : rel.target
     this._$.relation(name, {
@@ -304,18 +345,10 @@ export class BaseBehaviorBuilder<
       listener,
     }) {
       const relationInit = ((rel: RelationParams | TraitRelationParams<any>) => {
-        if (rel.target instanceof TraitBehavior) {
-          return relation({
-            target: rel.target._$,
-            type: rel.type,
-            linked: rel.linked,
-            linkChanged: rel.linkChanged,
-            unlinked: rel.unlinked,
-            linkFailed: rel.linkFailed,
-          } as any)
-        }
         const target =
-          rel.target instanceof Behavior || rel.target instanceof ComponentType
+          rel.target instanceof Behavior ||
+          rel.target instanceof ComponentType ||
+          rel.target instanceof TraitBehavior
             ? rel.target._$
             : rel.target
         return relation({
@@ -404,7 +437,7 @@ export class BaseBehaviorBuilder<
     >,
     TChainingFilter
   > {
-    def.behaviors?.forEach((beh) => beh._$bindedDefinitionFilter?.(def))
+    def.behaviors?.forEach((beh) => beh._$boundDefinitionFilter?.(def))
     const inner = this._$
     const {
       behaviors,
@@ -424,7 +457,7 @@ export class BaseBehaviorBuilder<
       export: exports,
     } = def
     behaviors?.forEach((beh) => {
-      this._$parents.push(beh as GeneralBehavior)
+      this._$parents.push(beh)
       inner.behavior(beh._$)
     })
     if (rawData !== undefined) {
@@ -484,7 +517,20 @@ export class BaseBehaviorBuilder<
       for (let i = 0; i < keys.length; i += 1) {
         const name = keys[i]!
         const rel = rawRelations[name]!
-        inner.relation(name, rel)
+        const target =
+          rel.target instanceof Behavior ||
+          rel.target instanceof ComponentType ||
+          rel.target instanceof TraitBehavior
+            ? rel.target._$
+            : rel.target
+        inner.relation(name, {
+          target,
+          type: rel.type,
+          linked: rel.linked,
+          linkChanged: rel.linkChanged,
+          unlinked: rel.unlinked,
+          linkFailed: rel.linkFailed,
+        } as any)
       }
     }
     if (externalClasses) inner.externalClasses(externalClasses)

package/src/builder/behavior_builder.ts

@@ -3,7 +3,7 @@
 import { BaseBehaviorBuilder } from './base_behavior_builder'
 import { Behavior } from '../behavior'
 import type { BehaviorDefinition, utils as typeUtils } from '../types'
-import type { DefinitionFilter, GeneralBehavior } from '../behavior'
+import type { DefinitionFilter } from '../behavior'
 import type { AllData, Component, GeneralComponent } from '../component'
 import type { CodeSpace } from '../space'
 import type { ResolveBehaviorBuilder, BuilderContext } from './type_utils'
@@ -23,15 +23,26 @@ type ChainingFilterFunc<
   TRemovedFields extends string = never,
 > = typeUtils.ChainingFilterFunc<TAddedFields, TRemovedFields>
 
+export type DefaultBehaviorBuilder = BehaviorBuilder<
+  /* TPrevData */ Empty,
+  /* TData */ Empty,
+  /* TProperty */ Empty,
+  /* TMethod */ Empty,
+  /* TChainingFilter */ never,
+  /* TPendingChainingFilter */ never,
+  /* TComponentExport */ never,
+  /* TExtraThisFields */ Empty
+>
+
 export class BehaviorBuilder<
-  TPrevData extends DataList = Empty,
-  TData extends DataList = Empty,
-  TProperty extends PropertyList = Empty,
-  TMethod extends MethodList = Empty,
-  TChainingFilter extends ChainingFilterType = never,
-  TPendingChainingFilter extends ChainingFilterType = never,
-  TComponentExport = never,
-  TExtraThisFields extends DataList = Empty,
+  TPrevData extends DataList,
+  TData extends DataList,
+  TProperty extends PropertyList,
+  TMethod extends MethodList,
+  TChainingFilter extends ChainingFilterType,
+  TPendingChainingFilter extends ChainingFilterType,
+  TComponentExport,
+  TExtraThisFields extends DataList,
 > extends BaseBehaviorBuilder<
   TPrevData,
   TData,
@@ -46,11 +57,11 @@ export class BehaviorBuilder<
   private _$chainingFilter?: ChainingFilterFunc<any, any>
 
   /** @internal */
-  static create(codeSpace: CodeSpace): BehaviorBuilder {
+  static create(codeSpace: CodeSpace): DefaultBehaviorBuilder {
     const ret = new BehaviorBuilder()
     ret._$codeSpace = codeSpace
     ret._$ = codeSpace.getComponentSpace().defineWithMethodCaller()
-    return ret
+    return ret as DefaultBehaviorBuilder
   }
 
   /** Define a chaining filter */
@@ -80,14 +91,22 @@ export class BehaviorBuilder<
   }
 
   /** Use another behavior */
-  behavior<
+  override behavior<
     UData extends DataList,
     UProperty extends PropertyList,
     UMethod extends MethodList,
     UChainingFilter extends ChainingFilterType,
+    UComponentExport,
     UExtraThisFields extends DataList,
   >(
-    behavior: Behavior<UData, UProperty, UMethod, UChainingFilter, UExtraThisFields>,
+    behavior: Behavior<
+      UData,
+      UProperty,
+      UMethod,
+      UChainingFilter,
+      UComponentExport,
+      UExtraThisFields
+    >,
   ): ResolveBehaviorBuilder<
     BehaviorBuilder<
       TPrevData,
@@ -96,18 +115,12 @@ export class BehaviorBuilder<
       TMethod & UMethod,
       UChainingFilter,
       TPendingChainingFilter,
-      TComponentExport,
+      UComponentExport,
       TExtraThisFields & UExtraThisFields
     >,
     UChainingFilter
   > {
-    this._$parents.push(behavior as GeneralBehavior)
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    this._$ = this._$.behavior(behavior._$)
-    if (behavior._$chainingFilter) {
-      return behavior._$chainingFilter(this as any)
-    }
-    return this as any
+    return super.behavior(behavior) as any
   }
 
   /** Set the export value when the component is being selected */

package/src/builder/component_builder.ts

@@ -10,7 +10,7 @@ import type {
   PageDefinition,
   utils as typeUtils,
 } from '../types'
-import type { Behavior, GeneralBehavior } from '../behavior'
+import type { Behavior } from '../behavior'
 import type { AllData, Component, GeneralComponent } from '../component'
 import type { CodeSpace } from '../space'
 import type { ResolveBehaviorBuilder, BuilderContext } from './type_utils'
@@ -26,18 +26,29 @@ type ComponentMethod = typeUtils.ComponentMethod
 type TaggedMethod<Fn extends ComponentMethod> = typeUtils.TaggedMethod<Fn>
 type UnTaggedMethod<M extends TaggedMethod<any>> = typeUtils.UnTaggedMethod<M>
 
+export type DefaultComponentBuilder = ComponentBuilder<
+  /* TPrevData */ Empty,
+  /* TData */ Empty,
+  /* TProperty */ Empty,
+  /* TMethod */ Empty,
+  /* TChainingFilter */ never,
+  /* TPendingChainingFilter */ never,
+  /* TComponentExport */ never,
+  /* TExtraThisFields */ Empty
+>
+
 /**
  * A direct way to create a component
  */
 export class ComponentBuilder<
-  TPrevData extends DataList = Empty,
-  TData extends DataList = Empty,
-  TProperty extends PropertyList = Empty,
-  TMethod extends MethodList = Empty,
-  TChainingFilter extends ChainingFilterType = never,
-  TPendingChainingFilter extends ChainingFilterType = never,
-  TComponentExport = never,
-  TExtraThisFields extends DataList = Empty,
+  TPrevData extends DataList,
+  TData extends DataList,
+  TProperty extends PropertyList,
+  TMethod extends MethodList,
+  TChainingFilter extends ChainingFilterType,
+  TPendingChainingFilter extends ChainingFilterType,
+  TComponentExport,
+  TExtraThisFields extends DataList,
 > extends BaseBehaviorBuilder<
   TPrevData,
   TData,
@@ -51,10 +62,10 @@ export class ComponentBuilder<
   private _$is!: string
   private _$alias?: string[]
   private _$options?: ComponentDefinitionOptions
-  private _$proto?: ComponentProto<TData, TProperty, TMethod, TComponentExport>
+  private _$proto?: ComponentProto<TData, TProperty, TMethod, TComponentExport, TExtraThisFields>
 
   /** @internal */
-  static create(codeSpace: CodeSpace, is: string, alias?: string[]) {
+  static create(codeSpace: CodeSpace, is: string, alias?: string[]): DefaultComponentBuilder {
     const ret = new ComponentBuilder()
     const overallBehavior = codeSpace._$overallBehavior
     ret._$codeSpace = codeSpace
@@ -67,7 +78,7 @@ export class ComponentBuilder<
       if (proto === undefined) {
         const methods = originalCaller.getComponentDefinition().behavior.getMethods()
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        proto = ret._$proto = new ComponentProto(methods, ret._$export) as any
+        proto = ret._$proto = new ComponentProto(methods, ret._$parents, ret._$export) as any
       }
       const caller = proto!.derive()
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -75,7 +86,7 @@ export class ComponentBuilder<
       return caller
     })
     if (overallBehavior) ret._$.behavior(overallBehavior)
-    return ret
+    return ret as DefaultComponentBuilder
   }
 
   /**
@@ -89,7 +100,7 @@ export class ComponentBuilder<
   }
 
   /** Use another behavior */
-  behavior<
+  override behavior<
     UData extends DataList,
     UProperty extends PropertyList,
     UMethod extends MethodList,
@@ -118,17 +129,7 @@ export class ComponentBuilder<
     >,
     UChainingFilter
   > {
-    this._$parents.push(behavior as GeneralBehavior)
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    this._$ = this._$.behavior(behavior._$)
-    if (behavior._$export) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      this._$export = behavior._$export as any
-    }
-    if (behavior._$chainingFilter) {
-      return behavior._$chainingFilter(this as any)
-    }
-    return this as any
+    return super.behavior(behavior) as any
   }
 
   /** Set the export value when the component is being selected */
@@ -147,9 +148,7 @@ export class ComponentBuilder<
     >,
     TChainingFilter
   > {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    this._$export = f as any
-    return this as any
+    return super.export(f) as any
   }
 
   /**
@@ -376,7 +375,7 @@ export class ComponentBuilder<
   /**
    * Finish the component definition process
    */
-  register(): ComponentType<TData, TProperty, TMethod, TComponentExport> {
+  register(): ComponentType<TData, TProperty, TMethod, TComponentExport, TExtraThisFields> {
     const is = this._$is
     const codeSpace = this._$codeSpace
 

package/src/builder/index.ts

@@ -1,3 +1,5 @@
 export { BehaviorBuilder } from './behavior_builder'
+export type { DefaultBehaviorBuilder } from './behavior_builder'
 export { ComponentBuilder } from './component_builder'
+export type { DefaultComponentBuilder } from './component_builder'
 export { BuilderContext } from './type_utils'

package/src/builder/type_utils.ts

@@ -1,6 +1,6 @@
 import type * as glassEasel from 'glass-easel'
 import type { utils as typeUtils } from '../types'
-import type { ComponentType, GeneralBehavior, TraitBehavior } from '../behavior'
+import type { GeneralComponentType, GeneralBehavior, TraitBehavior } from '../behavior'
 import type { GeneralComponent } from '../component'
 
 export type ResolveBehaviorBuilder<
@@ -33,7 +33,7 @@ export type TraitRelationParams<TOut extends { [key: string]: any }> = {
 }
 
 export type RelationParams = {
-  target?: string | ComponentType<any, any, any, any> | GeneralBehavior | TraitBehavior<any>
+  target?: string | GeneralComponentType | GeneralBehavior | TraitBehavior<any>
   type: 'ancestor' | 'descendant' | 'parent' | 'child' | 'parent-common-node' | 'child-common-node'
   linked?: (target: GeneralComponent) => void
   linkChanged?: (target: GeneralComponent) => void

package/src/component.ts

@@ -5,7 +5,6 @@ import { SelectorQuery } from './selector_query'
 import { IntersectionObserver } from './intersection'
 import { MediaQueryObserver } from './media_query'
 
-type Empty = typeUtils.Empty
 type DataList = typeUtils.DataList
 type PropertyList = typeUtils.PropertyList
 type MethodList = typeUtils.MethodList
@@ -19,8 +18,9 @@ type ExportType<
   UProperty extends PropertyList,
   UMethod extends MethodList,
   UComponentExport,
+  UExtraThisFields extends DataList,
 > = [UComponentExport] extends [never]
-  ? Component<UData, UProperty, UMethod, UComponentExport>
+  ? Component<UData, UProperty, UMethod, UComponentExport, UExtraThisFields>
   : UComponentExport
 
 const filterComponentExportWithType = <
@@ -28,11 +28,12 @@ const filterComponentExportWithType = <
   UProperty extends PropertyList,
   UMethod extends MethodList,
   UComponentExport,
+  UExtraThisFields extends DataList,
 >(
-  source: ComponentCaller<any, any, any, any>,
+  source: GeneralComponentCaller,
   elem: glassEasel.Element,
-  componentType: ComponentType<UData, UProperty, UMethod, UComponentExport>,
-): ExportType<UData, UProperty, UMethod, UComponentExport> | undefined => {
+  componentType: ComponentType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields>,
+): ExportType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields> | undefined => {
   const comp = elem.asInstanceOf(componentType._$)
   if (comp === null) return undefined
   const selectedSpace = comp.getRootBehavior().ownerSpace
@@ -70,18 +71,41 @@ const filterComponentExport = (
   return undefined
 }
 
-export type GeneralComponent = Component<any, any, any, any>
+export const determineComponentExports = (
+  parent: GeneralBehavior[],
+  selfExport: ((source: GeneralComponent | null) => any) | undefined,
+) => {
+  if (selfExport !== undefined) return selfExport
+  const targetBehavior = parent.findLast((behavior) => behavior._$export !== undefined)
+  if (targetBehavior !== undefined) return targetBehavior._$export
+  return undefined
+}
+
+export type GeneralComponent = Component<
+  /* TData */ Record<string, any>,
+  /* TProperty */ Record<string, any>,
+  /* TMethod */ Record<string, any>,
+  /* TComponentExport */ any,
+  /* TExtraThisFields */ Record<string, any>
+>
 
 export type Component<
   TData extends DataList,
   TProperty extends PropertyList,
   TMethod extends MethodList,
   TComponentExport,
-  TExtraThisFields extends DataList = Empty,
+  TExtraThisFields extends DataList,
 > = ComponentCaller<TData, TProperty, TMethod, TComponentExport> & {
   [k in keyof TMethod]: TMethod[k]
 } & TExtraThisFields
 
+type GeneralComponentCaller = ComponentCaller<
+  /* TData */ Record<string, any>,
+  /* TProperty */ Record<string, any>,
+  /* TMethod */ Record<string, any>,
+  /* TComponentExport */ any
+>
+
 export class ComponentCaller<
   TData extends DataList,
   TProperty extends PropertyList,
@@ -356,19 +380,21 @@ export class ComponentCaller<
     UProperty extends PropertyList,
     UMethod extends MethodList,
     UComponentExport,
+    UExtraThisFields extends DataList,
   >(
     selector: string,
-    componentType: ComponentType<UData, UProperty, UMethod, UComponentExport>,
-  ): ExportType<UData, UProperty, UMethod, UComponentExport> | null
+    componentType: ComponentType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields>,
+  ): ExportType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields> | null
   selectComponent<
     UData extends DataList,
     UProperty extends PropertyList,
     UMethod extends MethodList,
     UComponentExport,
+    UExtraThisFields extends DataList,
   >(
     selector: string,
-    componentType?: ComponentType<UData, UProperty, UMethod, UComponentExport>,
-  ): ExportType<UData, UProperty, UMethod, UComponentExport> | null {
+    componentType?: ComponentType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields>,
+  ): ExportType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields> | null {
     const target = this._$.getShadowRoot()!.querySelector(selector)
     if (target === null) return null
     return componentType
@@ -388,21 +414,23 @@ export class ComponentCaller<
     UProperty extends PropertyList,
     UMethod extends MethodList,
     UComponentExport,
+    UExtraThisFields extends DataList,
   >(
     selector: string,
-    componentType: ComponentType<UData, UProperty, UMethod, UComponentExport>,
-  ): ExportType<UData, UProperty, UMethod, UComponentExport>[]
+    componentType: ComponentType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields>,
+  ): ExportType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields>[]
   selectAllComponents<
     UData extends DataList,
     UProperty extends PropertyList,
     UMethod extends MethodList,
     UComponentExport,
+    UExtraThisFields extends DataList,
   >(
     selector: string,
-    componentType?: ComponentType<UData, UProperty, UMethod, UComponentExport>,
-  ): ExportType<UData, UProperty, UMethod, UComponentExport>[] {
+    componentType?: ComponentType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields>,
+  ): ExportType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields>[] {
     const targets = this._$.getShadowRoot()!.querySelectorAll(selector)
-    const ret = [] as ExportType<UData, UProperty, UMethod, UComponentExport>[]
+    const ret = [] as ExportType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields>[]
     targets.forEach((target) => {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       const r = componentType
@@ -425,17 +453,19 @@ export class ComponentCaller<
     UProperty extends PropertyList,
     UMethod extends MethodList,
     UComponentExport,
+    UExtraThisFields extends DataList,
   >(
-    componentType: ComponentType<UData, UProperty, UMethod, UComponentExport>,
-  ): ExportType<UData, UProperty, UMethod, UComponentExport> | null
+    componentType: ComponentType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields>,
+  ): ExportType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields> | null
   selectOwnerComponent<
     UData extends DataList,
     UProperty extends PropertyList,
     UMethod extends MethodList,
     UComponentExport,
+    UExtraThisFields extends DataList,
   >(
-    componentType?: ComponentType<UData, UProperty, UMethod, UComponentExport>,
-  ): ExportType<UData, UProperty, UMethod, UComponentExport> | null {
+    componentType?: ComponentType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields>,
+  ): ExportType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields> | null {
     const target = this._$.ownerShadowRoot?.getHostNode()
     if (target === undefined) return null
     return componentType
@@ -464,12 +494,19 @@ export class ComponentCaller<
     UProperty extends PropertyList,
     UMethod extends MethodList,
     UComponentExport,
+    UExtraThisFields extends DataList,
   >(
-    componentType: ComponentType<UData, UProperty, UMethod, UComponentExport>,
-  ): Component<UData, UProperty, UMethod, UComponentExport> | null {
+    componentType: ComponentType<UData, UProperty, UMethod, UComponentExport, UExtraThisFields>,
+  ): Component<UData, UProperty, UMethod, UComponentExport, UExtraThisFields> | null {
     const inner = this._$.asInstanceOf(componentType._$)
     if (!inner) return null
-    return this as unknown as Component<UData, UProperty, UMethod, UComponentExport>
+    return this as unknown as Component<
+      UData,
+      UProperty,
+      UMethod,
+      UComponentExport,
+      UExtraThisFields
+    >
   }
 }
 
@@ -478,24 +515,33 @@ export class ComponentProto<
   TProperty extends PropertyList,
   TMethod extends MethodList,
   TComponentExport,
+  TExtraThisFields extends DataList,
 > {
-  private proto: Component<TData, TProperty, TMethod, TComponentExport>
+  private proto: Component<TData, TProperty, TMethod, TComponentExport, TExtraThisFields>
 
   constructor(
     methods: TMethod,
+    parents: GeneralBehavior[],
     componentExport?: (source: GeneralComponent | null) => TComponentExport,
   ) {
     this.proto = Object.create(ComponentCaller.prototype) as Component<
       TData,
       TProperty,
       TMethod,
-      TComponentExport
+      TComponentExport,
+      TExtraThisFields
     >
     Object.assign(this.proto, methods)
-    this.proto._$export = componentExport
+    this.proto._$export = determineComponentExports(parents, componentExport)
   }
 
-  derive(): Component<TData, TProperty, TMethod, TComponentExport> {
-    return Object.create(this.proto) as Component<TData, TProperty, TMethod, TComponentExport>
+  derive(): Component<TData, TProperty, TMethod, TComponentExport, TExtraThisFields> {
+    return Object.create(this.proto) as Component<
+      TData,
+      TProperty,
+      TMethod,
+      TComponentExport,
+      TExtraThisFields
+    >
   }
 }