[REF] simplify template definition

src/app/app.ts

@@ -5,6 +5,7 @@ import { Scheduler } from "../component/scheduler";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { nodeErrorHandlers } from "../component/error_handling";
 import { validateTarget } from "../utils";
+import { validateProps } from "./template_helpers";
 
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
 
@@ -64,7 +65,7 @@ export class App<
   mount(target: HTMLElement, options?: MountOptions): Promise<Component<P, E> & InstanceType<T>> {
     App.validateTarget(target);
     if (this.dev) {
-      this.helpers.validateProps(this.Root, this.props, { __owl__: { app: this } });
+      validateProps(this.Root, this.props, { __owl__: { app: this } });
     }
     const node = this.makeNode(this.Root, this.props);
     const prom = this.mountNode(node, target, options);

src/app/template_helpers.ts

@@ -2,7 +2,8 @@ import { BDom, multi, text, toggler, createCatcher } from "../blockdom";
 import { Markup } from "../utils";
 import { html } from "../blockdom/index";
 import { isOptional, validateSchema } from "../validation";
-import { ComponentConstructor } from "../component/component";
+import type { ComponentConstructor } from "../component/component";
+import { markRaw } from "../reactivity";
 
 /**
  * This file contains utility functions that will be injected in each template,
@@ -246,4 +247,5 @@ export const helpers = {
   safeOutput,
   bind,
   createCatcher,
+  markRaw,
 };

src/app/template_set.ts

@@ -1,6 +1,5 @@
 import { createBlock, html, list, multi, text, toggler, comment } from "../blockdom";
 import { compile, Template } from "../compiler";
-import { markRaw } from "../reactivity";
 import { Portal } from "../portal";
 import { component, getCurrent } from "../component/component_node";
 import { helpers } from "./template_helpers";
@@ -38,22 +37,6 @@ function parseXML(xml: string): Document {
   return doc;
 }
 
-/**
- * Returns the helpers object that will be injected in each template closure
- * function
- */
-function makeHelpers(getTemplate: (name: string) => Template): any {
-  return Object.assign({}, helpers, {
-    Portal,
-    markRaw,
-    getTemplate,
-    call: (owner: any, subTemplate: string, ctx: any, parent: any, key: any) => {
-      const template = getTemplate(subTemplate);
-      return toggler(subTemplate, template.call(owner, ctx, parent, key));
-    },
-  });
-}
-
 export interface TemplateSetConfig {
   dev?: boolean;
   translatableAttributes?: string[];
@@ -67,7 +50,7 @@ export class TemplateSet {
   templates: { [name: string]: Template } = {};
   translateFn?: (s: string) => string;
   translatableAttributes?: string[];
-  helpers: any;
+  Portal = Portal;
 
   constructor(config: TemplateSetConfig = {}) {
     this.dev = config.dev || false;
@@ -76,7 +59,6 @@ export class TemplateSet {
     if (config.templates) {
       this.addTemplates(config.templates);
     }
-    this.helpers = makeHelpers(this.getTemplate.bind(this));
   }
 
   addTemplate(name: string, template: string | Element) {
@@ -122,7 +104,7 @@ export class TemplateSet {
       this.templates[name] = function (context, parent) {
         return templates[name].call(this, context, parent);
       };
-      const template = templateFn(bdom, this.helpers);
+      const template = templateFn(this, bdom, helpers);
       this.templates[name] = template;
     }
     return this.templates[name];
@@ -136,4 +118,9 @@ export class TemplateSet {
       translatableAttributes: this.translatableAttributes,
     });
   }
+
+  callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {
+    const template = this.getTemplate(subTemplate);
+    return toggler(subTemplate, template.call(owner, ctx, parent, key));
+  }
 }

src/compiler/code_generator.ts

@@ -987,17 +987,18 @@ export class CodeGenerator {
     const key = `key + \`${this.generateComponentKey()}\``;
     if (isDynamic) {
       const templateVar = generateId("template");
+      if (!this.staticDefs.find((d) => d.id === "call")) {
+        this.staticDefs.push({ id: "call", expr: `app.callTemplate.bind(app)` });
+      }
       this.define(templateVar, subTemplate);
       block = this.createBlock(block, "multi", ctx);
-      this.helpers.add("call");
       this.insertBlock(`call(this, ${templateVar}, ctx, node, ${key})`, block!, {
         ...ctx,
         forceNewBlock: !block,
       });
     } else {
       const id = generateId(`callTemplate_`);
-      this.helpers.add("getTemplate");
-      this.staticDefs.push({ id, expr: `getTemplate(${subTemplate})` });
+      this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
       block = this.createBlock(block, "multi", ctx);
       this.insertBlock(`${id}.call(this, ctx, node, ${key})`, block!, {
         ...ctx,
@@ -1254,7 +1255,9 @@ export class CodeGenerator {
     }
   }
   compileTPortal(ast: ASTTPortal, ctx: Context) {
-    this.helpers.add("Portal");
+    if (!this.staticDefs.find((d) => d.id === "Portal")) {
+      this.staticDefs.push({ id: "Portal", expr: `app.Portal` });
+    }
 
     let { block } = ctx;
     const name = this.compileInNewTarget("slot", ast.content, ctx);

src/compiler/index.ts

@@ -1,10 +1,11 @@
+import type { TemplateSet } from "../app/template_set";
 import type { BDom } from "../blockdom";
 import { CodeGenerator, Config } from "./code_generator";
 import { parse } from "./parser";
 
 export type Template = (context: any, vnode: any, key?: string) => BDom;
 
-export type TemplateFunction = (blocks: any, utils: any) => Template;
+export type TemplateFunction = (app: TemplateSet, bdom: any, helpers: any) => Template;
 
 interface CompileOptions extends Config {
   name?: string;
@@ -26,5 +27,5 @@ export function compile(
   const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
   const code = codeGenerator.generateCode();
   // template function
-  return new Function("bdom, helpers", code) as TemplateFunction;
+  return new Function("app, bdom, helpers", code) as TemplateFunction;
 }