[IMP] template set config: getTemplate function

A template set can now obtain a template by calling the function
getTemplate (if any) received in the initial config.
The returned value can be an Element instance, a template string, a
function (i.e. a compiled template), or null. In the last case, owl will
look into the template set rawTemplates object.

doc/reference/app.md

@@ -61,6 +61,8 @@ The `config` object is an object with some of the following keys:
   templates (see [translations](translations.md))
 - **`templates (string | xml document)`**: all the templates that will be used by
   the components created by the application.
+- **`getTemplate ((s: string) => Element | Function | string | void)`**: a function that will be called by owl when it
+  needs a template. If undefined is returned, owl looks into the app templates.
 - **`warnIfNoStaticProps (boolean, default=false)`**: if true, Owl will log a warning
   whenever it encounters a component that does not provide a [static props description](props.md#props-validation).
 

src/runtime/template_set.ts

@@ -13,6 +13,7 @@ export interface TemplateSetConfig {
   translatableAttributes?: string[];
   translateFn?: (s: string) => string;
   templates?: string | Document | Record<string, string>;
+  getTemplate?: (s: string) => Element | Function | string | void;
 }
 
 export class TemplateSet {
@@ -22,6 +23,7 @@ export class TemplateSet {
   dev: boolean;
   rawTemplates: typeof globalTemplates = Object.create(globalTemplates);
   templates: { [name: string]: Template } = {};
+  getRawTemplate?: (s: string) => Element | Function | string | void;
   translateFn?: (s: string) => string;
   translatableAttributes?: string[];
   Portal = Portal;
@@ -39,6 +41,7 @@ export class TemplateSet {
         }
       }
     }
+    this.getRawTemplate = config.getTemplate;
   }
 
   addTemplate(name: string, template: string | Element) {
@@ -77,7 +80,7 @@ export class TemplateSet {
 
   getTemplate(name: string): Template {
     if (!(name in this.templates)) {
-      const rawTemplate = this.rawTemplates[name];
+      const rawTemplate = this.getRawTemplate?.(name) || this.rawTemplates[name];
       if (rawTemplate === undefined) {
         let extraInfo = "";
         try {

tests/compiler/__snapshots__/template_set.test.ts.snap

@@ -101,3 +101,55 @@ exports[`loading templates can load a few templates from an XMLDocument 2`] = `
   }
 }"
 `;
+
+exports[`loading templates getTemplate: element returned (2) 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>Hello World!</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`loading templates getTemplate: element returned 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>Hello World!</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`loading templates getTemplate: template string returned 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>Hello World!</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`loading templates getTemplate: undefined returned 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>Hello World!</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

tests/compiler/template_set.test.ts

@@ -78,4 +78,62 @@ describe("loading templates", () => {
     context.addTemplates(xml);
     expect(Object.keys(context.rawTemplates)).toEqual([]);
   });
+
+  test("getTemplate: element returned", () => {
+    const context = new TestContext({
+      getTemplate: (name) => {
+        if (name === "main") {
+          const data = `<div>Hello World!</div>`;
+          const xml = new DOMParser().parseFromString(data, "text/xml");
+          return xml.firstChild as Element;
+        }
+        return;
+      },
+    });
+    const result = context.renderToString("main");
+    expect(result).toBe("<div>Hello World!</div>");
+  });
+
+  test("getTemplate: element returned (2)", () => {
+    const context = new TestContext({
+      getTemplate: (name) => {
+        if (name === "main") {
+          const doc = new Document();
+          const div = doc.createElement("div");
+          div.append(doc.createTextNode("Hello World!"));
+          return div;
+        }
+        return;
+      },
+    });
+    const result = context.renderToString("main");
+    expect(result).toBe("<div>Hello World!</div>");
+  });
+
+  test("getTemplate: template string returned", () => {
+    const context = new TestContext({
+      getTemplate: (name) => {
+        if (name === "main") {
+          return `<div>Hello World!</div>`;
+        }
+        return;
+      },
+    });
+    const result = context.renderToString("main");
+    expect(result).toBe("<div>Hello World!</div>");
+  });
+
+  test("getTemplate: undefined returned", () => {
+    const context = new TestContext({
+      getTemplate: () => {},
+    });
+    const data = `<?xml version="1.0" encoding="UTF-8"?>
+    <templates id="template" xml:space="preserve">
+      <div t-name="main">Hello World!</div>
+    </templates>`;
+    const xml = new DOMParser().parseFromString(data, "text/xml");
+    context.addTemplates(xml);
+    const result = context.renderToString("main");
+    expect(result).toBe("<div>Hello World!</div>");
+  });
 });