poc: xml function returns function

tests/components/__snapshots__/basics.test.ts.snap

@@ -169,11 +169,11 @@ exports[`basics can inject values in tagged templates 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`__template__999\`);
+  let { call } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const template1 = (ctx['__owl__'].subTemplates.__template__1(ctx['__owl__'].app));
+    return call(this, template1, ctx, node, key + \`__1\`);
   }
 }"
 `;

tests/components/__snapshots__/slots.test.ts.snap

@@ -249,11 +249,11 @@ exports[`slots can use t-call in default-content of t-slot 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`__template__999\`);
+  let { callSlot, call } = helpers;
   
   function defaultContent1(ctx, node, key = \\"\\") {
-    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const template1 = (ctx['__owl__'].subTemplates.__template__3(ctx['__owl__'].app));
+    return call(this, template1, ctx, node, key + \`__1\`);
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -772,12 +772,12 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { capture, getTemplate, markRaw } = helpers;
-  const callTemplate_1 = getTemplate(\`__template__1002\`);
+  let { capture, call, markRaw } = helpers;
   
   function slot1(ctx, node, key = \\"\\") {
     const b2 = text(\`[A]\`);
-    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const template1 = (ctx['__owl__'].subTemplates.__template__5(ctx['__owl__'].app));
+    const b3 = call(this, template1, ctx, node, key + \`__1\`);
     return multi([b2, b3]);
   }
   
@@ -790,41 +790,6 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
 
 exports[`slots mix of slots, t-call, t-call with body, and giving own props child 4`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`__template__1001\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    const b2 = text(\`[sub1] \`);
-    setContextValue(ctx, \\"dummy\\", ctx['validate']);
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1;
-    setContextValue(ctx, \\"v\\", ctx['props'].number);
-    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`slots mix of slots, t-call, t-call with body, and giving own props child 5`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`[sub2\`);
-    const b3 = text(ctx['v']);
-    const b4 = text(\`]\`);
-    return multi([b2, b3, b4]);
-  }
-}"
-`;
-
-exports[`slots mix of slots, t-call, t-call with body, and giving own props child 6`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
@@ -836,7 +801,7 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
 }"
 `;
 
-exports[`slots mix of slots, t-call, t-call with body, and giving own props child 7`] = `
+exports[`slots mix of slots, t-call, t-call with body, and giving own props child 5`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -850,6 +815,41 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
 }"
 `;
 
+exports[`slots mix of slots, t-call, t-call with body, and giving own props child 6`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue, call } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    const b2 = text(\`[sub1] \`);
+    setContextValue(ctx, \\"dummy\\", ctx['validate']);
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1;
+    setContextValue(ctx, \\"v\\", ctx['props'].number);
+    const template1 = (ctx['__owl__'].subTemplates.__template__4(ctx['__owl__'].app));
+    const b3 = call(this, template1, ctx, node, key + \`__1\`);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`slots mix of slots, t-call, t-call with body, and giving own props child 7`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`[sub2\`);
+    const b3 = text(ctx['v']);
+    const b4 = text(\`]\`);
+    return multi([b2, b3, b4]);
+  }
+}"
+`;
+
 exports[`slots multiple roots are allowed in a default slot 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -1486,13 +1486,13 @@ exports[`slots slot and (inline) t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { capture, getTemplate, markRaw } = helpers;
-  const callTemplate_1 = getTemplate(\`__template__999\`);
+  let { capture, call, markRaw } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const template1 = (ctx['__owl__'].subTemplates.__template__2(ctx['__owl__'].app));
+    return call(this, template1, ctx, node, key + \`__1\`);
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -1505,19 +1505,6 @@ exports[`slots slot and (inline) t-call 1`] = `
 
 exports[`slots slot and (inline) t-call 2`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<p>sokka</p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`slots slot and (inline) t-call 3`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
@@ -1531,17 +1518,30 @@ exports[`slots slot and (inline) t-call 3`] = `
 }"
 `;
 
+exports[`slots slot and (inline) t-call 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<p>sokka</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`slots slot and t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { capture, getTemplate, markRaw } = helpers;
-  const callTemplate_1 = getTemplate(\`__template__999\`);
+  let { capture, call, markRaw } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const template1 = (ctx['__owl__'].subTemplates.__template__1(ctx['__owl__'].app));
+    return call(this, template1, ctx, node, key + \`__1\`);
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -1556,11 +1556,13 @@ exports[`slots slot and t-call 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<p>sokka</p>\`);
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const b2 = callSlot(ctx, node, key, 'default', false, null);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -1569,13 +1571,11 @@ exports[`slots slot and t-call 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  let block1 = createBlock(\`<p>sokka</p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = callSlot(ctx, node, key, 'default', false, null);
-    return block1([], [b2]);
+    return block1();
   }
 }"
 `;

tests/components/__snapshots__/t_call.test.ts.snap

@@ -116,13 +116,13 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`__template__999\`);
+  let { call } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const template1 = (ctx['__owl__'].subTemplates.__template__1(ctx['__owl__'].app));
+    const b2 = call(this, template1, ctx, node, key + \`__1\`);
     let txt1 = ctx['counter'];
     return block1([txt1], [b2]);
   }
@@ -147,13 +147,13 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`__template__999\`);
+  let { call } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const template1 = (ctx['__owl__'].subTemplates.__template__6(ctx['__owl__'].app));
+    const b2 = call(this, template1, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -178,13 +178,13 @@ exports[`t-call parent is set within t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`__template__999\`);
+  let { call } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const template1 = (ctx['__owl__'].subTemplates.__template__3(ctx['__owl__'].app));
+    const b2 = call(this, template1, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -218,11 +218,11 @@ exports[`t-call parent is set within t-call with no parentNode 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`__template__999\`);
+  let { call } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const template1 = (ctx['__owl__'].subTemplates.__template__5(ctx['__owl__'].app));
+    return call(this, template1, ctx, node, key + \`__1\`);
   }
 }"
 `;
@@ -353,8 +353,7 @@ exports[`t-call t-call in t-foreach and children component 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, getTemplate, withKey } = helpers;
-  const callTemplate_1 = getTemplate(\`__template__999\`);
+  let { prepareList, call, withKey } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -368,7 +367,8 @@ exports[`t-call t-call in t-foreach and children component 1`] = `
       ctx[\`val_index\`] = i1;
       ctx[\`val_value\`] = k_block2[i1];
       const key1 = ctx['val'];
-      c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
+      const template1 = (ctx['__owl__'].subTemplates.__template__4(ctx['__owl__'].app));
+      c_block2[i1] = withKey(call(this, template1, ctx, node, key + \`__1__\${key1}\`), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);

tests/components/hooks.test.ts

@@ -444,6 +444,7 @@ describe("hooks", () => {
       let cleanupRun = 0;
       let steps = [];
       class MyComponent extends Component {
+        static template = xml`<div/>`;
         state = useState({
           value: 0,
         });
@@ -455,7 +456,6 @@ describe("hooks", () => {
           });
         }
       }
-      MyComponent.template = xml`<div/>`;
 
       const component = await mount(MyComponent, fixture);
 
@@ -512,6 +512,7 @@ describe("hooks", () => {
     test("dependencies prevent effects from rerunning when unchanged", async () => {
       let steps = [];
       class MyComponent extends Component {
+        static template = xml`<div/>`;
         state = useState({
           a: 0,
           b: 0,
@@ -540,7 +541,6 @@ describe("hooks", () => {
           );
         }
       }
-      MyComponent.template = xml`<div/>`;
       steps.push("before mount");
       const component = await mount(MyComponent, fixture);
       steps.push("after mount");
@@ -597,6 +597,7 @@ describe("hooks", () => {
     test("effect with empty dependency list never reruns", async () => {
       let steps = [];
       class MyComponent extends Component {
+        static template = xml`<div t-esc="state.value"/>`;
         state = useState({
           value: 0,
         });
@@ -610,7 +611,6 @@ describe("hooks", () => {
           );
         }
       }
-      MyComponent.template = xml`<div t-esc="state.value"/>`;
 
       const component = await mount(MyComponent, fixture);
 

tests/helpers.ts

@@ -13,13 +13,13 @@ import {
   onWillUpdateProps,
   status,
   useComponent,
-  xml,
 } from "../src";
 import { helpers } from "../src/app/template_helpers";
 import { TemplateSet } from "../src/app/template_set";
 import { BDom } from "../src/blockdom";
 import { compile } from "../src/compiler";
-import { globalTemplates } from "../src/utils";
+import { Portal } from "../src/portal";
+// import { globalTemplates } from "../src/utils";
 
 const mount = blockDom.mount;
 
@@ -39,9 +39,6 @@ export function makeTestFixture() {
   return fixture;
 }
 
-beforeEach(() => {
-  xml.nextId = 999;
-});
 export async function nextTick(): Promise<void> {
   await new Promise((resolve) => setTimeout(resolve));
   await new Promise((resolve) => requestAnimationFrame(resolve));
@@ -117,16 +114,29 @@ export function snapshotEverything() {
     // this function has already been called
     return;
   }
-  const globalTemplateNames = new Set(Object.keys(globalTemplates));
   shouldSnapshot = true;
   beforeEach(() => {
     snapshottedTemplates.clear();
   });
 
+  const getTemplate = TemplateSet.prototype.getTemplate;
+  TemplateSet.prototype.getTemplate = function (this: any, name: string) {
+    if (name === Portal.template) {
+      this.skipSnapshot = true;
+    }
+    const result = getTemplate.call(this, name);
+    this.skipSnapshot = false;
+    return result;
+  };
+
   const originalCompileTemplate = TemplateSet.prototype._compileTemplate;
-  TemplateSet.prototype._compileTemplate = function (name: string, template: string | Element) {
+  TemplateSet.prototype._compileTemplate = function (
+    this: any,
+    name: string,
+    template: string | Element
+  ) {
     const fn = originalCompileTemplate.call(this, "", template);
-    if (!globalTemplateNames.has(name)) {
+    if (!this.skipSnapshot) {
       expect(fn.toString()).toMatchSnapshot();
     }
     return fn;