diff --git a/src/compiler/index.ts b/src/compiler/index.ts
index 16683bc1c..fb34e5d36 100644
--- a/src/compiler/index.ts
+++ b/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(`${template}`).firstChild as Element;
+ }
const ast = parse(template);
// some work
- const hasSafeContext =
- template instanceof Node
- ? !(template instanceof Element) || template.querySelector("[t-set], [t-call]") === null
- : !template.includes("t-set") && !template.includes("t-call");
+ const hasSafeContext = template.querySelector("[t-set], [t-call]") === null;
// code generation
const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
diff --git a/src/compiler/parser.ts b/src/compiler/parser.ts
index 11c9bdb7a..5105045d6 100644
--- a/src/compiler/parser.ts
+++ b/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 = new WeakMap();
-export function parse(xml: string | Element): AST {
- if (typeof xml === "string") {
- const elem = parseXML(`${xml}`).firstChild as Element;
- return _parse(elem);
- }
+export function parse(xml: Element): AST {
let ast = cache.get(xml);
if (!ast) {
// we clone here the xml to prevent modifying it in place
diff --git a/tests/compiler/parser.test.ts b/tests/compiler/parser.test.ts
index c264ba548..b29fb9822 100644
--- a/tests/compiler/parser.test.ts
+++ b/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(`${template}`).firstChild as Element);
describe("qweb parser", () => {
// ---------------------------------------------------------------------------
diff --git a/tests/components/__snapshots__/refs.test.ts.snap b/tests/components/__snapshots__/refs.test.ts.snap
index 2e85192b3..34f4e9f23 100644
--- a/tests/components/__snapshots__/refs.test.ts.snap
+++ b/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(\`
\`);
@@ -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: ctx1}})}, key + \`__1\`, node, this, null);
+ const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
return block1([txt1], [b3]);
}
}"
diff --git a/tests/components/__snapshots__/slots.test.ts.snap b/tests/components/__snapshots__/slots.test.ts.snap
index 068d76fd4..9b4fc03f7 100644
--- a/tests/components/__snapshots__/slots.test.ts.snap
+++ b/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(\`
\`);
@@ -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: ctx1}, 'footer': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+ const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx}, 'footer': {__render: slot2.bind(this), __ctx: ctx}})}, 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: ctx1, getValue: (ctx['getValue']).bind(this)}})}, key + \`__1\`, node, this, null);
+ return comp1({slots: markRaw({'abc': {__render: slot1.bind(this), __ctx: ctx, 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(\`
\`);
@@ -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: ctx1, param: ctx['var']}, 'footer': {__render: slot2.bind(this), __ctx: ctx1, param: '5'}})}, key + \`__1\`, node, this, null);
+ 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);
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(\`
\`);
@@ -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: ctx1}})}, key + \`__1\`, node, this, null);
+ const b3 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx}})}, 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(\`
\`);
@@ -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: ctx1}})}, key + \`__1\`, node, this, null);
+ const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx}})}, 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: ctx1}})}, key + \`__2\`, node, this, null);
+ return comp2({location: ctx['state'].location,slots: markRaw({'coffee': {__render: slot1.bind(this), __ctx: ctx}})}, 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(\`
\`);
@@ -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: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+ const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx}, 'slot2': {__render: slot2.bind(this), __ctx: ctx}})}, 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(\`
\`);
@@ -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: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+ const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx}, 'slot2': {__render: slot2.bind(this), __ctx: ctx}})}, 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(\`
\`);
@@ -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: ctx1}})}, key + \`__1\`, node, this, null);
+ const b5 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx}})}, 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: ctx1}, 's2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__3\`, node, this, null);
+ return comp3({slots: markRaw({'s1': {__render: slot1.bind(this), __ctx: ctx}, 's2': {__render: slot2.bind(this), __ctx: ctx}})}, 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: ctx1}})}, key + \`__2\`, node, this, null);
+ return comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx}})}, 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: ctx2}})}, key + \`__1\`, node, this, null);
+ return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx}})}, 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: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+ const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx}, 'default': {__render: slot2.bind(this), __ctx: ctx}})}, 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: ctx2}})}, key + \`__1\`, node, this, null);
+ return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx}})}, 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: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+ const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx}, 'default': {__render: slot2.bind(this), __ctx: ctx}})}, 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: ctx2}})}, key + \`__1\`, node, this, null);
+ return comp1({slots: markRaw({'brol2': {__render: slot3.bind(this), __ctx: ctx}})}, 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: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+ const b5 = comp2({slots: markRaw({'brol1': {__render: slot1.bind(this), __ctx: ctx}, 'default': {__render: slot2.bind(this), __ctx: ctx}})}, 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: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+ return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx, __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: ctx1}})}, key + \`__1\`, node, this, null);
+ return comp1({slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1.bind(this), __ctx: ctx}})}, 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: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+ return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx, __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(\`
\`);
@@ -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: ctx1, __scope: \\"info\\"}})}, key + \`__1\`, node, this, null);
+ return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx, __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(\`
\`);
@@ -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: ctx1}})}, key + \`__1\`, node, this, null);
+ const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx}})}, 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(\`
\`);
@@ -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: ctx1}})}, key + \`__1\`, node, this, null);
+ const b3 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx}})}, 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: ctx1}})}, key + \`__1\`, node, this, null);
+ return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
}
}"
`;
diff --git a/tests/components/__snapshots__/t_foreach.test.ts.snap b/tests/components/__snapshots__/t_foreach.test.ts.snap
index 51bd1cb8b..92b8fbff8 100644
--- a/tests/components/__snapshots__/t_foreach.test.ts.snap
+++ b/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(\`A
\`);
@@ -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: 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);
+ 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);
}
}"
`;
diff --git a/tests/components/__snapshots__/t_on.test.ts.snap b/tests/components/__snapshots__/t_on.test.ts.snap
index 16c0fc711..52c7987a8 100644
--- a/tests/components/__snapshots__/t_on.test.ts.snap
+++ b/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: ctx1}})}, key + \`__1\`, node, this, null);
+ const b8 = comp1({slots: markRaw({'myslot': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
return multi([b2, b3, b4, b8]);
}
}"
diff --git a/tests/components/slots.test.ts b/tests/components/slots.test.ts
index 167358579..2734dad72 100644
--- a/tests/components/slots.test.ts
+++ b/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``;
+ }
+
+ class Parent extends Component {
+ static template = xml`
+
+ `;
+ 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 {