[FIX] blockdom: fix t-set-slot causing context capture with xml

This is a commit message.

doc/reference/app.md

@@ -61,8 +61,6 @@ 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).
 

docs/owl.js

@@ -1850,9 +1850,8 @@ const NO_CALLBACK = () => {
 };
 const objectToString = Object.prototype.toString;
 const objectHasOwnProperty = Object.prototype.hasOwnProperty;
-// Use arrays because Array.includes is faster than Set.has for small arrays
+const SUPPORTED_RAW_TYPES = new Set(["Object", "Array", "Set", "Map", "WeakMap"]);
-const SUPPORTED_RAW_TYPES = ["Object", "Array", "Set", "Map", "WeakMap"];
+const COLLECTION_RAWTYPES = new Set(["Set", "Map", "WeakMap"]);
-const COLLECTION_RAW_TYPES = ["Set", "Map", "WeakMap"];
 /**
  * extract "RawType" from strings like "[object RawType]" => this lets us ignore
  * many native objects such as Promise (whose toString is [object Promise])
@@ -1875,7 +1874,7 @@ function canBeMadeReactive(value) {
     if (typeof value !== "object") {
         return false;
     }
-    return SUPPORTED_RAW_TYPES.includes(rawType(value));
+    return SUPPORTED_RAW_TYPES.has(rawType(value));
 }
 /**
  * Creates a reactive from the given object/callback if possible and returns it,
@@ -2045,7 +2044,7 @@ function reactive(target, callback = NO_CALLBACK) {
     const reactivesForTarget = reactiveCache.get(target);
     if (!reactivesForTarget.has(callback)) {
         const targetRawType = rawType(target);
-        const handler = COLLECTION_RAW_TYPES.includes(targetRawType)
+        const handler = COLLECTION_RAWTYPES.has(targetRawType)
             ? collectionsProxyHandler(target, callback, targetRawType)
             : basicProxyHandler(callback);
         const proxy = new Proxy(target, handler);
@@ -3160,14 +3159,8 @@ const helpers = {
     makeRefWrapper,
 };
 
-/**
+const bdom = { text, createBlock, list, multi, html, toggler, comment };
- * Parses an XML string into an XML document, throwing errors on parser errors
+function parseXML$1(xml) {
- * instead of returning an XML document containing the parseerror.
- *
- * @param xml the string to parse
- * @returns an XML document corresponding to the content of the string
- */
-function parseXML(xml) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(xml, "text/xml");
     if (doc.getElementsByTagName("parsererror").length) {
@@ -3194,9 +3187,7 @@ function parseXML(xml) {
         throw new OwlError(msg);
     }
     return doc;
-}
+}
-
-const bdom = { text, createBlock, list, multi, html, toggler, comment };
 class TemplateSet {
     constructor(config = {}) {
         this.rawTemplates = Object.create(globalTemplates);
@@ -3215,7 +3206,6 @@ class TemplateSet {
                 }
             }
         }
-        this.getRawTemplate = config.getTemplate;
     }
     static registerTemplate(name, fn) {
         globalTemplates[name] = fn;
@@ -3245,16 +3235,15 @@ class TemplateSet {
             // empty string
             return;
         }
-        xml = xml instanceof Document ? xml : parseXML(xml);
+        xml = xml instanceof Document ? xml : parseXML$1(xml);
         for (const template of xml.querySelectorAll("[t-name]")) {
             const name = template.getAttribute("t-name");
             this.addTemplate(name, template);
         }
     }
     getTemplate(name) {
-        var _a;
         if (!(name in this.templates)) {
-            const rawTemplate = ((_a = this.getRawTemplate) === null || _a === void 0 ? void 0 : _a.call(this, name)) || this.rawTemplates[name];
+            const rawTemplate = this.rawTemplates[name];
             if (rawTemplate === undefined) {
                 let extraInfo = "";
                 try {
@@ -4964,9 +4953,9 @@ function parseDOMNode(node, ctx) {
             const isSelect = tagName === "select";
             const isCheckboxInput = isInput && typeAttr === "checkbox";
             const isRadioInput = isInput && typeAttr === "radio";
-            const hasTrimMod = attr.includes(".trim");
+            const hasLazyMod = attr.includes(".lazy");
-            const hasLazyMod = hasTrimMod || attr.includes(".lazy");
             const hasNumberMod = attr.includes(".number");
+            const hasTrimMod = attr.includes(".trim");
             const eventType = isRadioInput ? "click" : isSelect || hasLazyMod ? "change" : "input";
             model = {
                 baseExpr,
@@ -5512,6 +5501,41 @@ function normalizeTEscTOut(el) {
 function normalizeXML(el) {
     normalizeTIf(el);
     normalizeTEscTOut(el);
+}
+/**
+ * Parses an XML string into an XML document, throwing errors on parser errors
+ * instead of returning an XML document containing the parseerror.
+ *
+ * @param xml the string to parse
+ * @returns an XML document corresponding to the content of the string
+ */
+function parseXML(xml) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xml, "text/xml");
+    if (doc.getElementsByTagName("parsererror").length) {
+        let msg = "Invalid XML in template.";
+        const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
+        if (parsererrorText) {
+            msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
+            const re = /\d+/g;
+            const firstMatch = re.exec(parsererrorText);
+            if (firstMatch) {
+                const lineNumber = Number(firstMatch[0]);
+                const line = xml.split("\n")[lineNumber - 1];
+                const secondMatch = re.exec(parsererrorText);
+                if (line && secondMatch) {
+                    const columnIndex = Number(secondMatch[0]) - 1;
+                    if (line[columnIndex]) {
+                        msg +=
+                            `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
+                                `${line}\n${"-".repeat(columnIndex - 1)}^`;
+                    }
+                }
+            }
+        }
+        throw new OwlError(msg);
+    }
+    return doc;
 }
 
 function compile(template, options = {}) {
@@ -5538,7 +5562,7 @@ function compile(template, options = {}) {
 }
 
 // do not modify manually. This file is generated by the release script.
-const version = "2.2.9";
+const version = "2.2.7";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5967,6 +5991,6 @@ TemplateSet.prototype._compileTemplate = function _compileTemplate(name, templat
 export { App, Component, EventBus, OwlError, __info__, blockDom, loadFile, markRaw, markup, mount, onError, onMounted, onPatched, onRendered, onWillDestroy, onWillPatch, onWillRender, onWillStart, onWillUnmount, onWillUpdateProps, reactive, status, toRaw, useChildSubEnv, useComponent, useEffect, useEnv, useExternalListener, useRef, useState, useSubEnv, validate, validateType, whenReady, xml };
 
 
-__info__.date = '2024-01-12T14:43:56.804Z';
+__info__.date = '2023-12-06T13:56:01.636Z';
-__info__.hash = '7b3e39b';
+__info__.hash = 'e94428a';
 __info__.url = 'https://github.com/odoo/owl';

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.2.9",
+  "version": "2.2.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.2.9",
+  "version": "2.2.7",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "module": "dist/owl.es.js",

src/compiler/index.ts

@@ -3,6 +3,7 @@ import type { BDom } from "../runtime/blockdom";
 import { CodeGenerator, Config } from "./code_generator";
 import { parse } from "./parser";
 import { OwlError } from "../common/owl_error";
+import { parseXML } from "../common/utils";
 
 export type Template = (context: any, vnode: any, key?: string) => BDom;
 
@@ -16,13 +17,13 @@ export function compile(
   options: CompileOptions = {}
 ): TemplateFunction {
   // parsing
+  if (typeof template === "string") {
+    template = parseXML(`<t>${template}</t>`).firstChild as Element;
+  }
   const ast = parse(template);
 
   // some work
-  const hasSafeContext =
+  const hasSafeContext = template.querySelector("[t-set], [t-call]") === null;
-    template instanceof Node
-      ? !(template instanceof Element) || template.querySelector("[t-set], [t-call]") === null
-      : !template.includes("t-set") && !template.includes("t-call");
 
   // code generation
   const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });

src/compiler/parser.ts

@@ -1,5 +1,4 @@
 import { OwlError } from "../common/owl_error";
-import { parseXML } from "../common/utils";
 
 // -----------------------------------------------------------------------------
 // AST Type definition
@@ -198,11 +197,7 @@ export type AST =
 // -----------------------------------------------------------------------------
 const cache: WeakMap<Element, AST> = new WeakMap();
 
-export function parse(xml: string | Element): AST {
+export function parse(xml: Element): AST {
-  if (typeof xml === "string") {
-    const elem = parseXML(`<t>${xml}</t>`).firstChild as Element;
-    return _parse(elem);
-  }
   let ast = cache.get(xml);
   if (!ast) {
     // we clone here the xml to prevent modifying it in place

src/runtime/reactivity.ts

@@ -20,9 +20,8 @@ type CollectionRawType = "Set" | "Map" | "WeakMap";
 const objectToString = Object.prototype.toString;
 const objectHasOwnProperty = Object.prototype.hasOwnProperty;
 
-// Use arrays because Array.includes is faster than Set.has for small arrays
+const SUPPORTED_RAW_TYPES = new Set(["Object", "Array", "Set", "Map", "WeakMap"]);
-const SUPPORTED_RAW_TYPES = ["Object", "Array", "Set", "Map", "WeakMap"];
+const COLLECTION_RAWTYPES = new Set(["Set", "Map", "WeakMap"]);
-const COLLECTION_RAW_TYPES = ["Set", "Map", "WeakMap"];
 
 /**
  * extract "RawType" from strings like "[object RawType]" => this lets us ignore
@@ -46,7 +45,7 @@ function canBeMadeReactive(value: any): boolean {
   if (typeof value !== "object") {
     return false;
   }
-  return SUPPORTED_RAW_TYPES.includes(rawType(value));
+  return SUPPORTED_RAW_TYPES.has(rawType(value));
 }
 /**
  * Creates a reactive from the given object/callback if possible and returns it,
@@ -221,7 +220,7 @@ export function reactive<T extends Target>(target: T, callback: Callback = NO_CA
   const reactivesForTarget = reactiveCache.get(target)!;
   if (!reactivesForTarget.has(callback)) {
     const targetRawType = rawType(target);
-    const handler = COLLECTION_RAW_TYPES.includes(targetRawType)
+    const handler = COLLECTION_RAWTYPES.has(targetRawType)
       ? collectionsProxyHandler(target as Collection, callback, targetRawType as CollectionRawType)
       : basicProxyHandler<T>(callback);
     const proxy = new Proxy(target, handler as ProxyHandler<T>) as Reactive<T>;

src/runtime/template_set.ts

@@ -13,7 +13,6 @@ 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 {
@@ -23,7 +22,6 @@ 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;
@@ -41,7 +39,6 @@ export class TemplateSet {
         }
       }
     }
-    this.getRawTemplate = config.getTemplate;
   }
 
   addTemplate(name: string, template: string | Element) {
@@ -80,7 +77,7 @@ export class TemplateSet {
 
   getTemplate(name: string): Template {
     if (!(name in this.templates)) {
-      const rawTemplate = this.getRawTemplate?.(name) || this.rawTemplates[name];
+      const rawTemplate = this.rawTemplates[name];
       if (rawTemplate === undefined) {
         let extraInfo = "";
         try {

src/version.ts

@@ -1,2 +1,2 @@
 // do not modify manually. This file is generated by the release script.
-export const version = "2.2.9";
+export const version = "2.2.7";

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

@@ -101,55 +101,3 @@ 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/parser.test.ts

@@ -1,4 +1,7 @@
-import { ASTType, parse } from "../../src/compiler/parser";
+import { parseXML } from "../../src/common/utils";
+import { ASTType, parse as _parse } from "../../src/compiler/parser";
+
+const parse = (template: string) => _parse(parseXML(`<t>${template}</t>`).firstChild as Element);
 
 describe("qweb parser", () => {
   // ---------------------------------------------------------------------------

tests/compiler/template_set.test.ts

@@ -78,62 +78,4 @@ 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>");
-  });
 });

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

@@ -99,7 +99,7 @@ exports[`refs refs are properly bound in slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
@@ -113,8 +113,7 @@ exports[`refs refs are properly bound in slots 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].val;
-    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([txt1], [b3]);
   }
 }"

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

@@ -38,7 +38,7 @@ exports[`slots can define and call slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -54,8 +54,7 @@ exports[`slots can define and call slots 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx}, 'footer': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1}, 'footer': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -81,7 +80,7 @@ exports[`slots can define and call slots with bound params 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
@@ -89,8 +88,7 @@ exports[`slots can define and call slots with bound params 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'abc': {__render: slot1.bind(this), __ctx: ctx, getValue: (ctx['getValue']).bind(this)}})}, key + \`__1\`, node, this, null);
-    return comp1({slots: markRaw({'abc': {__render: slot1.bind(this), __ctx: ctx1, getValue: (ctx['getValue']).bind(this)}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -113,7 +111,7 @@ exports[`slots can define and call slots with params 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -129,8 +127,7 @@ exports[`slots can define and call slots with params 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx, param: ctx['var']}, 'footer': {__render: slot2.bind(this), __ctx: ctx, param: '5'}})}, key + \`__1\`, node, this, null);
-    const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1, param: ctx['var']}, 'footer': {__render: slot2.bind(this), __ctx: ctx1, param: '5'}})}, key + \`__1\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -352,7 +349,7 @@ exports[`slots default content is not rendered if named slot is provided 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -362,8 +359,7 @@ exports[`slots default content is not rendered if named slot is provided 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    const b3 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -431,7 +427,7 @@ exports[`slots default slot next to named slot, with default content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -441,8 +437,7 @@ exports[`slots default slot next to named slot, with default content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -607,7 +602,7 @@ exports[`slots dynamic slot in multiple locations 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   const comp2 = app.createComponent(\`Slotter\`, true, true, false, [\\"location\\"]);
   
@@ -618,8 +613,7 @@ exports[`slots dynamic slot in multiple locations 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    return comp2({location: ctx['state'].location,slots: markRaw({'coffee': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
-    return comp2({location: ctx['state'].location,slots: markRaw({'coffee': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -665,7 +659,7 @@ exports[`slots dynamic t-slot call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Toggler\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -684,8 +678,7 @@ exports[`slots dynamic t-slot call 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx}, 'slot2': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b6]);
   }
 }"
@@ -712,7 +705,7 @@ exports[`slots dynamic t-slot call with default 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Toggler\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -731,8 +724,7 @@ exports[`slots dynamic t-slot call with default 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx}, 'slot2': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b6]);
   }
 }"
@@ -976,7 +968,7 @@ exports[`slots multiple roots are allowed in a named slot 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -990,8 +982,7 @@ exports[`slots multiple roots are allowed in a named slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    const b5 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    const b5 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1016,7 +1007,7 @@ exports[`slots multiple slots containing components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`C\`, true, false, false, [\\"val\\"]);
   const comp2 = app.createComponent(\`C\`, true, false, false, [\\"val\\"]);
   const comp3 = app.createComponent(\`B\`, true, true, false, []);
@@ -1030,8 +1021,7 @@ exports[`slots multiple slots containing components 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    return comp3({slots: markRaw({'s1': {__render: slot1.bind(this), __ctx: ctx}, 's2': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
-    return comp3({slots: markRaw({'s1': {__render: slot1.bind(this), __ctx: ctx1}, 's2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__3\`, node, this, null);
   }
 }"
 `;
@@ -1070,15 +1060,14 @@ exports[`slots named slot inside named slot in t-component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(null, false, true, false, []);
   const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     const b2 = text(\` outer \`);
-    const ctx2 = capture(ctx);
     const Comp1 = ctx['Child'];
-    const b4 = toggler(Comp1, comp1({slots: markRaw({'brol': {__render: slot2.bind(this), __ctx: ctx2}})}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    const b4 = toggler(Comp1, comp1({slots: markRaw({'brol': {__render: slot2.bind(this), __ctx: ctx}})}, (Comp1).name + key + \`__1\`, node, this, Comp1));
     return multi([b2, b4]);
   }
   
@@ -1087,8 +1076,7 @@ exports[`slots named slot inside named slot in t-component 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    return comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
-    return comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -1109,7 +1097,7 @@ exports[`slots named slot inside slot 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
@@ -1123,8 +1111,7 @@ exports[`slots named slot inside slot 1`] = `
   }
   
   function slot2(ctx, node, key = \\"\\") {
-    const ctx2 = capture(ctx);
+    return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -1133,8 +1120,7 @@ exports[`slots named slot inside slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx}, 'default': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
-    const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1160,7 +1146,7 @@ exports[`slots named slot inside slot, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
@@ -1174,8 +1160,7 @@ exports[`slots named slot inside slot, part 3 1`] = `
   }
   
   function slot2(ctx, node, key = \\"\\") {
-    const ctx2 = capture(ctx);
+    return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -1184,8 +1169,7 @@ exports[`slots named slot inside slot, part 3 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx}, 'default': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
-    const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1245,7 +1229,7 @@ exports[`slots named slots inside slot, again 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
@@ -1259,8 +1243,7 @@ exports[`slots named slots inside slot, again 1`] = `
   }
   
   function slot2(ctx, node, key = \\"\\") {
-    const ctx2 = capture(ctx);
+    return comp1({slots: markRaw({'brol2': {__render: slot3.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    return comp1({slots: markRaw({'brol2': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -1269,8 +1252,7 @@ exports[`slots named slots inside slot, again 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    const b5 = comp2({slots: markRaw({'brol1': {__render: slot1.bind(this), __ctx: ctx}, 'default': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
-    const b5 = comp2({slots: markRaw({'brol1': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1593,7 +1575,7 @@ exports[`slots simple dynamic slot with slot scope 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
@@ -1607,8 +1589,7 @@ exports[`slots simple dynamic slot with slot scope 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
-    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1633,11 +1614,10 @@ exports[`slots simple named and empty slot -- 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
     return comp1({slots: markRaw({'myEmptySlot': {myProp: 'myProp text'}})}, key + \`__1\`, node, this, null);
   }
 }"
@@ -1666,7 +1646,7 @@ exports[`slots simple named and empty slot 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
@@ -1674,8 +1654,7 @@ exports[`slots simple named and empty slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    return comp1({slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1700,7 +1679,7 @@ exports[`slots simple slot with slot scope 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
@@ -1714,8 +1693,7 @@ exports[`slots simple slot with slot scope 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
-    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2309,7 +2287,7 @@ exports[`slots slot with slot scope and t-props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block2 = createBlock(\`<p><block-text-0/></p>\`);
@@ -2324,8 +2302,7 @@ exports[`slots slot with slot scope and t-props 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"info\\"}})}, key + \`__1\`, node, this, null);
-    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"info\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2414,7 +2391,7 @@ exports[`slots slots are rendered with proper context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
@@ -2427,8 +2404,7 @@ exports[`slots slots are rendered with proper context 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].val;
-    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([txt1], [b3]);
   }
 }"
@@ -2803,7 +2779,7 @@ exports[`slots t-debug on a t-set-slot (defining a slot) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -2814,8 +2790,7 @@ exports[`slots t-debug on a t-set-slot (defining a slot) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    const b3 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2875,11 +2850,40 @@ exports[`slots t-set t-value in a slot 2`] = `
 }"
 `;
 
+exports[`slots t-set-slot doesn't cause context to be captured 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { markRaw } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return text(ctx['someVal']);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
+exports[`slots t-set-slot doesn't cause context to be captured 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callSlot(ctx, node, key, 'default', false, {});
+  }
+}"
+`;
+
 exports[`slots t-set-slot=default has priority over rest of the content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
@@ -2887,8 +2891,7 @@ exports[`slots t-set-slot=default has priority over rest of the content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;

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

@@ -153,7 +153,7 @@ exports[`list of components order is correct when slots are not of same type 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block2 = createBlock(\`<div>A</div>\`);
@@ -175,8 +175,7 @@ exports[`list of components order is correct when slots are not of same type 1`]
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'a': {__render: slot1.bind(this), __ctx: ctx, active: !ctx['state'].active}, 'b': {__render: slot2.bind(this), __ctx: ctx, active: true}, 'c': {__render: slot3.bind(this), __ctx: ctx, active: ctx['state'].active}})}, key + \`__1\`, node, this, null);
-    return comp1({slots: markRaw({'a': {__render: slot1.bind(this), __ctx: ctx1, active: !ctx['state'].active}, 'b': {__render: slot2.bind(this), __ctx: ctx1, active: true}, 'c': {__render: slot3.bind(this), __ctx: ctx1, active: ctx['state'].active}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;

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

@@ -386,7 +386,7 @@ exports[`t-on t-on on t-set-slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, createCatcher, markRaw } = helpers;
+  let { createCatcher, markRaw } = helpers;
   const catcher1 = createCatcher({\\"click\\":0});
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
@@ -405,8 +405,7 @@ exports[`t-on t-on on t-set-slots 1`] = `
     const b2 = text(\` [\`);
     const b3 = text(ctx['state'].count);
     const b4 = text(\`] \`);
-    const ctx1 = capture(ctx);
+    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return multi([b2, b3, b4, b8]);
   }
 }"

tests/components/slots.test.ts

@@ -1,4 +1,4 @@
-import { App, Component, mount, onMounted, useState, xml } from "../../src/index";
+import { App, Component, mount, onMounted, onRendered, useState, xml } from "../../src/index";
 import { children, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
 
 snapshotEverything();
@@ -62,6 +62,28 @@ describe("slots", () => {
     expect(fixture.innerHTML).toBe("some other text");
   });
 
+  test("t-set-slot doesn't cause context to be captured", async () => {
+    class Child extends Component {
+      static template = xml`<t t-slot="default"/>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child>
+        <t t-set-slot="default"><t t-esc="someVal"/></t>
+      </Child>`;
+      static components = { Child };
+      someVal = "some text";
+      setup() {
+        onRendered(() => {
+          this.someVal = "some other text";
+        });
+      }
+    }
+    await mount(Parent, fixture);
+
+    expect(fixture.textContent).toBe("some other text");
+  });
+
   test("simple slot with slot scope", async () => {
     let child: any;
     class Child extends Component {