refactor: encapsulated enhance in ce-definition

packages/__tests__/5-jit-html/template-compiler.spec.ts

@@ -497,6 +497,7 @@ function createTemplateController(ctx: HTMLTestContext, attr: string, target: st
         instructions: [[childInstr]],
         needsCompile: false,
         scopeParts: [],
+        enhance: false,
       },
       instructions: createTplCtrlAttributeInstruction(attr, value),
       link: attr === 'else'
@@ -511,6 +512,7 @@ function createTemplateController(ctx: HTMLTestContext, attr: string, target: st
       instructions: [[instruction]],
       needsCompile: false,
       scopeParts: [],
+      enhance: false,
     } as unknown as PartialCustomElementDefinition;
     return [input, output];
   } else {
@@ -534,6 +536,7 @@ function createTemplateController(ctx: HTMLTestContext, attr: string, target: st
         instructions,
         needsCompile: false,
         scopeParts: [],
+        enhance: false,
       },
       instructions: createTplCtrlAttributeInstruction(attr, value),
       link: attr === 'else'
@@ -549,6 +552,7 @@ function createTemplateController(ctx: HTMLTestContext, attr: string, target: st
       instructions: [[instruction]],
       needsCompile: false,
       scopeParts: [],
+      enhance: false,
     } as unknown as PartialCustomElementDefinition;
     return [input, output];
   }
@@ -588,6 +592,7 @@ function createCustomElement(
     instructions: [[instruction, ...siblingInstructions], ...nestedElInstructions],
     needsCompile: false,
     scopeParts: [],
+    enhance: false,
   };
   return [input, output];
 }
@@ -625,6 +630,7 @@ function createCustomAttribute(
     instructions: [[instruction, ...siblingInstructions], ...nestedElInstructions],
     needsCompile: false,
     scopeParts: [],
+    enhance: false,
   };
   return [input, output];
 }
@@ -742,6 +748,7 @@ describe(`TemplateCompiler - combinations`, function () {
           surrogates: [],
           needsCompile: false,
           scopeParts: [],
+          enhance: false,
         };
 
         const { sut, container } = createFixture(ctx);
@@ -814,6 +821,7 @@ describe(`TemplateCompiler - combinations`, function () {
           surrogates: [],
           needsCompile: false,
           scopeParts: [],
+          enhance: false,
         };
 
         const $def = CustomAttribute.define(def, ctor);
@@ -1079,6 +1087,7 @@ describe(`TemplateCompiler - combinations`, function () {
           instructions: [output1.instructions[0], output2.instructions[0], output3.instructions[0]],
           needsCompile: false,
           scopeParts: [],
+          enhance: false,
         };
         // enableTracing();
         // Tracer.enableLiveLogging(SymbolTraceWriter);

packages/jit-html/src/template-binder.ts

@@ -148,7 +148,7 @@ export class TemplateBinder {
     public readonly attrSyntaxTransformer: IAttrSyntaxTransformer
   ) {}
 
-  public bind(node: HTMLTemplateElement): PlainElementSymbol {
+  public bind(node: HTMLElement): PlainElementSymbol {
     const surrogate = new PlainElementSymbol(this.dom, node);
 
     const resources = this.resources;

packages/jit-html/src/template-compiler.ts

@@ -106,7 +106,7 @@ export class TemplateCompiler implements ITemplateCompiler {
     return Registration.singleton(ITemplateCompiler, this).register(container);
   }
 
-  public compile(partialDefinition: PartialCustomElementDefinition, context: IContainer, wrap: boolean = true): CustomElementDefinition {
+  public compile(partialDefinition: PartialCustomElementDefinition, context: IContainer): CustomElementDefinition {
     const definition = CustomElementDefinition.getOrCreate(partialDefinition);
     if (definition.template === null || definition.template === void 0) {
       return definition;
@@ -117,7 +117,9 @@ export class TemplateCompiler implements ITemplateCompiler {
 
     const binder = new TemplateBinder(context.get(IDOM), resources, attrParser, exprParser, attrSyntaxModifier);
 
-    const template = factory.createTemplate(definition.template, wrap) as HTMLTemplateElement;
+    const template = definition.enhance
+      ? definition.template as HTMLElement
+      : factory.createTemplate(definition.template) as HTMLTemplateElement;
     const surrogate = binder.bind(template);
 
     const compilation = this.compilation = new CustomElementCompilationUnit(definition, surrogate, template);

packages/jit-html/src/template-element-factory.ts

@@ -19,18 +19,14 @@ export interface ITemplateElementFactory<TNode extends INode = INode> {
    * will be returned as-is (and removed from the DOM).
    *
    * @param node - A DOM node that may or may not be wrapped in `<template></template>`
-   * @param [wrap] - Whether to wrap the node in template or not.
-   * Default is `true`. While 'enhance'ing, setting this to `false` would be useful.
    */
-  createTemplate(node: TNode, wrap?: boolean): TNode;
+  createTemplate(node: TNode): TNode;
   /**
    * Create a `HTMLTemplateElement` from a provided DOM node or html string.
    *
    * @param input - A DOM node or raw html string that may or may not be wrapped in `<template></template>`
-   * @param [wrap] - Whether to wrap the node in template or not.
-   * Default is `true`. While 'enhance'ing, setting this to `false` would be useful.
    */
-  createTemplate(input: unknown, wrap?: boolean): TNode;
+  createTemplate(input: unknown): TNode;
 }
 
 // For some reason rollup complains about `DI.createInterface<ITemplateElementFactory>().noDefault()` with this message:
@@ -59,9 +55,9 @@ export class HTMLTemplateElementFactory implements ITemplateElementFactory {
   }
 
   public createTemplate(markup: string): HTMLTemplateElement;
-  public createTemplate(node: Node, wrap?: boolean): HTMLTemplateElement;
-  public createTemplate(input: unknown, wrap?: boolean): HTMLTemplateElement;
-  public createTemplate(input: string | Node, wrap: boolean = true): HTMLElement {
+  public createTemplate(node: Node): HTMLTemplateElement;
+  public createTemplate(input: unknown): HTMLTemplateElement;
+  public createTemplate(input: string | Node): HTMLTemplateElement {
     if (typeof input === 'string') {
       let result = markupCache[input];
       if (result === void 0) {
@@ -87,7 +83,6 @@ export class HTMLTemplateElementFactory implements ITemplateElementFactory {
     }
 
     if (input.nodeName !== 'TEMPLATE') {
-      if (!wrap) { return input as HTMLElement; }
       // if we get one node that is not a template, wrap it in one
       const template = this.dom.createTemplate() as HTMLTemplateElement;
       template.content.appendChild(input);

packages/runtime/src/aurelia.ts

@@ -55,7 +55,7 @@ export class CompositionRoot<T extends INode = INode> {
   public constructor(
     config: ISinglePageApp<T>,
     container: IContainer,
-    public toEnhance: boolean = false,
+    toEnhance: boolean = false,
   ) {
     this.config = config;
     if (config.host != void 0) {
@@ -173,12 +173,12 @@ export class CompositionRoot<T extends INode = INode> {
     let definition: CustomElementDefinition;
     if (CustomElement.isType(component)) {
       CustomElement.define(
-        definition = CustomElementDefinition.create({ ...CustomElement.getDefinition(component), template }),
+        definition = CustomElementDefinition.create({ ...CustomElement.getDefinition(component), template, enhance: true }),
         component);
       instance = container.get(component) as ICustomElementViewModel<T>;
     } else {
       CustomElement.define(
-        definition = CustomElementDefinition.create({ name: CustomElement.generateName(), template }),
+        definition = CustomElementDefinition.create({ name: CustomElement.generateName(), template, enhance: true }),
         class { });
       instance = component as ICustomElementViewModel<T>;
     }

packages/runtime/src/resources/custom-element.ts

@@ -55,6 +55,7 @@ export type PartialCustomElementDefinition = PartialResourceDefinition<{
   readonly strategy?: BindingStrategy;
   readonly hooks?: Readonly<HooksDefinition>;
   readonly scopeParts?: readonly string[];
+  readonly enhance?: boolean;
 }>;
 
 export type CustomElementType<T extends Constructable = Constructable> = ResourceType<T, ICustomElementViewModel & (T extends Constructable<infer P> ? P : {}), PartialCustomElementDefinition>;
@@ -209,6 +210,7 @@ export class CustomElementDefinition<T extends Constructable = Constructable> im
     public readonly strategy: BindingStrategy,
     public readonly hooks: Readonly<HooksDefinition>,
     public readonly scopeParts: string[],
+    public readonly enhance: boolean,
   ) {}
 
   public static create<T extends Constructable = Constructable>(
@@ -266,6 +268,7 @@ export class CustomElementDefinition<T extends Constructable = Constructable> im
         fromDefinitionOrDefault('strategy', def, () => BindingStrategy.getterSetter),
         fromDefinitionOrDefault('hooks', def, () => HooksDefinition.none),
         mergeArrays(def.scopeParts),
+        fromDefinitionOrDefault('enhance', def, () => false),
       );
     }
 
@@ -303,6 +306,7 @@ export class CustomElementDefinition<T extends Constructable = Constructable> im
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
         fromAnnotationOrTypeOrDefault('hooks', Type, () => new HooksDefinition(Type!.prototype)),
         mergeArrays(CustomElement.getAnnotation(Type, 'scopeParts'), Type.scopeParts),
+        fromAnnotationOrTypeOrDefault('enhance', Type, () => false),
       );
     }
 
@@ -345,6 +349,7 @@ export class CustomElementDefinition<T extends Constructable = Constructable> im
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
       fromAnnotationOrTypeOrDefault('hooks', Type, () => new HooksDefinition(Type!.prototype)),
       mergeArrays(CustomElement.getAnnotation(Type, 'scopeParts'), nameOrDef.scopeParts, Type.scopeParts),
+      fromAnnotationOrDefinitionOrTypeOrDefault('enhance', nameOrDef, Type, () => false),
     );
   }
 

packages/runtime/src/templating/controller.ts

@@ -236,7 +236,7 @@ export class Controller<
 
     controllerLookup.set(viewModel, controller as Controller<INode, IViewModel>);
 
-    controller.hydrateCustomElement(definition, parentContainer, parts, false);
+    controller.hydrateCustomElement(definition, parentContainer, parts);
 
     return controller as unknown as ICustomElementController<T, C>;
   }
@@ -272,7 +272,7 @@ export class Controller<
 
     controllerLookup.set(viewModel, controller as Controller<INode, IViewModel>);
 
-    controller.hydrateCustomElement(definition, parentContainer, parts, true);
+    controller.hydrateCustomElement(definition, parentContainer, parts);
 
     return controller as unknown as ICustomElementController<T, C>;
   }
@@ -339,7 +339,6 @@ export class Controller<
     definition: CustomElementDefinition,
     parentContainer: IContainer,
     parts: PartialCustomElementDefinitionParts | undefined,
-    toEnhance: boolean,
   ): void {
     const flags = this.flags |= definition.strategy;
     const instance = this.viewModel as ICustomElementViewModel<T>;
@@ -361,7 +360,7 @@ export class Controller<
       }
     }
 
-    const context = this.context = getRenderContext<T>(definition, parentContainer, parts, toEnhance);
+    const context = this.context = getRenderContext<T>(definition, parentContainer, parts);
     // Support Recursive Components by adding self to own context
     definition.register(context);
     if (definition.injectable !== null) {

packages/runtime/src/templating/render-context.ts

@@ -182,7 +182,6 @@ export function getRenderContext<T extends INode = INode>(
   partialDefinition: PartialCustomElementDefinition,
   parentContainer: IContainer,
   parts: PartialCustomElementDefinitionParts | undefined,
-  toEnhance: boolean = false,
 ): IRenderContext<T> {
   const definition = CustomElementDefinition.getOrCreate(partialDefinition);
   if (isRenderContext(parentContainer)) {
@@ -191,7 +190,7 @@ export function getRenderContext<T extends INode = INode>(
 
   // injectable completely prevents caching, ensuring that each instance gets a new render context
   if (definition.injectable !== null) {
-    return new RenderContext<T>(definition, parentContainer, parts, toEnhance);
+    return new RenderContext<T>(definition, parentContainer, parts);
   }
 
   if (parts === void 0) {
@@ -207,7 +206,7 @@ export function getRenderContext<T extends INode = INode>(
     if (context === void 0) {
       containerLookup.set(
         parentContainer,
-        context = new RenderContext<T>(definition, parentContainer, parts, toEnhance),
+        context = new RenderContext<T>(definition, parentContainer, parts),
       );
     }
 
@@ -234,7 +233,7 @@ export function getRenderContext<T extends INode = INode>(
   if (context === void 0) {
     partsLookup.set(
       parts,
-      context = new RenderContext<T>(definition, parentContainer, parts, toEnhance),
+      context = new RenderContext<T>(definition, parentContainer, parts),
     );
   }
 
@@ -264,7 +263,6 @@ export class RenderContext<T extends INode = INode> implements IComponentFactory
     public readonly definition: CustomElementDefinition,
     public readonly parentContainer: IContainer,
     public readonly parts: PartialCustomElementDefinitionParts | undefined,
-    private readonly toEnhance: boolean = false,
   ) {
     const container = this.container = parentContainer.createChild();
     this.renderer = container.get(IRenderer);
@@ -358,7 +356,7 @@ export class RenderContext<T extends INode = INode> implements IComponentFactory
       const container = this.container;
       const compiler = container.get(ITemplateCompiler);
 
-      compiledDefinition = this.compiledDefinition = compiler.compile(definition, container, !this.toEnhance);
+      compiledDefinition = this.compiledDefinition = compiler.compile(definition, container);
     } else {
       compiledDefinition = this.compiledDefinition = definition;
     }
@@ -375,7 +373,7 @@ export class RenderContext<T extends INode = INode> implements IComponentFactory
       } else {
         fragmentCache.set(
           compiledDefinition,
-          this.fragment = this.toEnhance ? template as T : this.dom.createDocumentFragment(template),
+          this.fragment = this.definition.enhance ? template as T : this.dom.createDocumentFragment(template),
         );
       }
     }
@@ -415,7 +413,7 @@ export class RenderContext<T extends INode = INode> implements IComponentFactory
   // #region ICompiledRenderContext api
 
   public createNodes(): INodeSequence<T> {
-    return this.dom.createNodeSequence(this.fragment, !this.toEnhance);
+    return this.dom.createNodeSequence(this.fragment, !this.definition.enhance);
   }
 
   // TODO: split up into 2 methods? getComponentFactory + getSyntheticFactory or something