NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] slots: via prop 'slots'

Browse Source 
The slot inner working has been reworked. A prop "slots" is now passed
explicitely to the component. It looks like

{ slotName_1: slotInfo_1, ..., slotName_m: slotInfo_m }

with the objects slotInfo_i with mandatory keys "__render", "__ctx",
and optional key "__scope" and possibly others.

Here is how a slotInfo object can be created:
A slotInfo object is normally created by setting in a template something
like

<div>
    <t t-set-slot="foo" t-set-scope="scope" param_1="var" param_2="3">
        content
        <t t-esc="scope.bool"/>
        <t t-esc="scope.num"/>
    </t>
</div>

and it will be used somewhere like

<div>
    <t t-esc="props.slots.foo.param_1"/>
    <t t-slot="foo" bool="other_var" num="5">
</div>

In the above example, the function "__render" produces the block dom
element for the content of the t-set-slot.
The context "__ctx" will have a key "scope" with value { bool: ..., num: 5 }
and "__scope" will be set to "scope".
This commit is contained in:
Mathieu Duckerts-Antoine
2021-11-19 13:43:21 +01:00
committed by Aaron Bohy
parent 7143dd3ff5
commit a073568667
15 changed files with 824 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/template_helpers.ts
+10 -5
View File
@@ -17,12 +17,17 @@ function callSlot(
parent: any,
key: string,
name: string,
defaultSlot?: (ctx: any, key: string) => BDom,
dynamic?: boolean
dynamic: boolean,
extra: any,
defaultSlot?: (ctx: any, key: string) => BDom
): BDom {
const slots = ctx.__owl__.slots;
const slotFn = slots[name];
const slotBDom = slotFn ? slotFn(parent, key) : null;
const slots = (ctx.props && ctx.props.slots) || {};
const { __render, __ctx, __scope } = slots[name] || {};
const slotScope = Object.create(__ctx || {});
if (__scope) {
slotScope[__scope] = extra || {};
}
const slotBDom = __render ? __render(slotScope, parent, key) : null;
if (defaultSlot) {
let child1: BDom | undefined = undefined;
let child2: BDom | undefined = undefined;
src/compiler/code_generator.ts
+75 -44
View File
@@ -962,13 +962,62 @@ export class CodeGenerator {
compileComponent(ast: ASTComponent, ctx: Context) {
let { block } = ctx;
let extraArgs: { [key: string]: string } = {};
// props
const props: string[] = [];
let hasSlotsProp = false;
for (let p in ast.props) {
props.push(`${p}: ${this.captureExpression(ast.props[p]) || undefined}`);
if (p === "slots") {
hasSlotsProp = true;
}
}
// slots
const hasSlot = !!Object.keys(ast.slots).length;
let slotDef: string = "";
if (hasSlot) {
let ctxStr = "ctx";
if (this.target.loopLevel || !this.hasSafeContext) {
ctxStr = this.generateId("ctx");
this.addLine(`const ${ctxStr} = capture(ctx);`);
}
let slotStr: string[] = [];
const initialTarget = this.target;
for (let slotName in ast.slots) {
let name = this.generateId("slot");
const slot = new CodeTarget(name);
slot.signature = "(ctx, node, key) => {";
this.functions.push(slot);
this.target = slot;
const subCtx: Context = createContext(ctx);
this.compileAST(ast.slots[slotName].content, subCtx);
const params = [`__render: ${name}, __ctx: ${ctxStr}`];
const scope = ast.slots[slotName].scope;
if (scope) {
params.push(`__scope: "${scope}"`);
}
if (ast.slots[slotName].attrs) {
for (const [n, v] of Object.entries(ast.slots[slotName].attrs!)) {
params.push(`${n}: ${compileExpr(v) || undefined}`);
}
}
const slotInfo = `{${params.join(", ")}}`;
if (this.hasRef) {
slot.code.unshift(` const refs = ctx.__owl__.refs`);
slotStr.push(`'${slotName}': ${slotInfo}`);
} else {
slotStr.push(`'${slotName}': ${slotInfo}`);
}
}
this.target = initialTarget;
slotDef = `{${slotStr.join(", ")}}`;
}
if (slotDef && !(ast.dynamicProps || hasSlotsProp)) {
props.push(`slots: ${slotDef}`);
}
const propStr = `{${props.join(",")}}`;
let propString = propStr;
@@ -980,6 +1029,17 @@ export class CodeGenerator {
}
}
let propVar: string;
if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
propVar = this.generateId("props");
this.addLine(`const ${propVar!} = ${propString}`);
propString = propVar!;
}
if (slotDef && (ast.dynamicProps || hasSlotsProp)) {
this.addLine(`${propVar!}.slots = Object.assign(${slotDef}, ${propVar!}.slots)`);
}
// cmap key
const key = this.generateComponentKey();
let expr: string;
@@ -991,41 +1051,7 @@ export class CodeGenerator {
}
if (this.dev) {
const propVar = this.generateId("props");
this.addLine(`const ${propVar} = ${propString}`);
this.addLine(`helpers.validateProps(${expr}, ${propVar}, ctx)`);
propString = propVar;
}
// slots
const hasSlot = !!Object.keys(ast.slots).length;
let slotDef: string;
if (hasSlot) {
let ctxStr = "ctx";
if (this.target.loopLevel || !this.hasSafeContext) {
ctxStr = this.generateId("ctx");
this.addLine(`const ${ctxStr} = capture(ctx);`);
}
let slotStr: string[] = [];
const initialTarget = this.target;
for (let slotName in ast.slots) {
let name = this.generateId("slot");
const slot = new CodeTarget(name);
slot.signature = "ctx => (node, key) => {";
this.functions.push(slot);
this.target = slot;
const subCtx: Context = createContext(ctx);
this.compileAST(ast.slots[slotName], subCtx);
if (this.hasRef) {
slot.code.unshift(` const refs = ctx.__owl__.refs`);
slotStr.push(`'${slotName}': ${name}(${ctxStr})`);
} else {
slotStr.push(`'${slotName}': ${name}(${ctxStr})`);
}
}
this.target = initialTarget;
slotDef = `{${slotStr.join(", ")}}`;
extraArgs.slots = slotDef;
this.addLine(`helpers.validateProps(${expr}, ${propVar!}, ctx)`);
}
if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
@@ -1039,11 +1065,6 @@ export class CodeGenerator {
}
const blockArgs = `${expr}, ${propString}, ${keyArg}, node, ctx`;
let blockExpr = `component(${blockArgs})`;
if (Object.keys(extraArgs).length) {
this.shouldDefineAssign = true;
const content = Object.keys(extraArgs).map((k) => `${k}: ${extraArgs[k]}`);
blockExpr = `assign(${blockExpr}, {${content.join(", ")}})`;
}
if (ast.isDynamic) {
blockExpr = `toggler(${expr}, ${blockExpr})`;
}
@@ -1062,6 +1083,16 @@ export class CodeGenerator {
} else {
slotName = "'" + ast.name + "'";
}
let scope = null;
if (ast.attrs) {
const params = [];
for (const [n, v] of Object.entries(ast.attrs!)) {
params.push(`${n}: ${compileExpr(v) || undefined}`);
}
scope = `{${params.join(", ")}}`;
}
if (ast.defaultContent) {
let name = this.generateId("defaultSlot");
const slot = new CodeTarget(name);
@@ -1072,14 +1103,14 @@ export class CodeGenerator {
this.target = slot;
this.compileAST(ast.defaultContent, subCtx);
this.target = initialTarget;
blockString = `callSlot(ctx, node, key, ${slotName}, ${name}, ${dynamic})`;
blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope}, ${name})`;
} else {
if (dynamic) {
let name = this.generateId("slot");
this.addLine(`const ${name} = ${slotName};`);
blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}))`;
blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}), ${dynamic}, ${scope})`;
} else {
blockString = `callSlot(ctx, node, key, ${slotName})`;
blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope})`;
}
}
if (block) {
src/compiler/parser.ts
+32 -5
View File
@@ -118,12 +118,13 @@ export interface ASTComponent {
isDynamic: boolean;
dynamicProps: string | null;
props: { [name: string]: string };
slots: { [name: string]: AST };
slots: { [name: string]: { content: AST; attrs?: { [key: string]: string }; scope?: string } };
}
export interface ASTSlot {
type: ASTType.TSlot;
name: string;
attrs: { [key: string]: string };
defaultContent: AST | null;
}
@@ -593,7 +594,7 @@ function parseTCall(node: Element, ctx: ParsingContext): AST | null {
if (ast && ast.type === ASTType.TComponent) {
return {
...ast,
slots: { default: tcall },
slots: { default: { content: tcall } },
};
}
}
@@ -741,6 +742,11 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
// named slots
const slotNodes = Array.from(clone.querySelectorAll("[t-set-slot]"));
for (let slotNode of slotNodes) {
if (slotNode.tagName !== "t") {
throw new Error(
`Directive 't-set-slot' can only be used on <t> nodes (used on a <${slotNode.tagName}>)`
);
}
const name = slotNode.getAttribute("t-set-slot")!;
// check if this is defined in a sub component (in which case it should
@@ -762,14 +768,27 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
slotNode.remove();
const slotAst = parseNode(slotNode, ctx);
if (slotAst) {
slots[name] = slotAst;
const slotInfo: any = { content: slotAst };
const attrs: { [key: string]: string } = {};
for (let attributeName of slotNode.getAttributeNames()) {
const value = slotNode.getAttribute(attributeName)!;
if (attributeName === "t-slot-scope") {
slotInfo.scope = value;
continue;
}
attrs[attributeName] = value;
}
if (Object.keys(attrs).length) {
slotInfo.attrs = attrs;
}
slots[name] = slotInfo;
}
}
// default slot
const defaultContent = parseChildNodes(clone, ctx);
if (defaultContent) {
slots.default = defaultContent;
slots.default = { content: defaultContent };
}
}
return { type: ASTType.TComponent, name, isDynamic, dynamicProps, props, slots };
@@ -783,9 +802,17 @@ function parseTSlot(node: Element, ctx: ParsingContext): AST | null {
if (!node.hasAttribute("t-slot")) {
return null;
}
const name = node.getAttribute("t-slot")!;
node.removeAttribute("t-slot");
const attrs: { [key: string]: string } = {};
for (let attributeName of node.getAttributeNames()) {
const value = node.getAttribute(attributeName)!;
attrs[attributeName] = value;
}
return {
type: ASTType.TSlot,
name: node.getAttribute("t-slot")!,
name,
attrs,
defaultContent: parseChildNodes(node, ctx),
};
}
src/component/component_node.ts
-1
View File
@@ -87,7 +87,6 @@ export class ComponentNode<T extends typeof Component = typeof Component>
level: number;
childEnv: Env;
children: { [key: string]: ComponentNode } = Object.create(null);
slots: any = {};
refs: any = {};
willStart: LifecycleHook[] = [];
src/memo.ts
+1 -1
View File
@@ -39,7 +39,7 @@ export class Memo extends Component {
*/
function shallowEqual(p1: any, p2: any): boolean {
for (let k in p1) {
if (p1[k] !== p2[k]) {
if (k !== "slots" && p1[k] !== p2[k]) {
return false;
}
}
tests/compiler/parser.test.ts
+85 -45
View File
@@ -1080,7 +1080,22 @@ describe("qweb parser", () => {
dynamicProps: null,
props: {},
isDynamic: false,
slots: { default: { type: ASTType.Text, value: "foo" } },
slots: { default: { content: { type: ASTType.Text, value: "foo" } } },
});
});
test("a component with a default slot with attributes", async () => {
expect(
parse(`<MyComponent><t t-set-slot="default" param="param">foo</t></MyComponent>`)
).toEqual({
type: ASTType.TComponent,
name: "MyComponent",
dynamicProps: null,
props: {},
isDynamic: false,
slots: {
default: { content: { type: ASTType.Text, value: "foo" }, attrs: { param: "param" } },
},
});
});
@@ -1093,31 +1108,33 @@ describe("qweb parser", () => {
props: {},
slots: {
default: {
type: ASTType.Multi,
content: [
{
type: ASTType.DomNode,
tag: "span",
dynamicTag: null,
attrs: {},
content: [],
ref: null,
model: null,
on: {},
ns: null,
},
{
type: ASTType.DomNode,
tag: "div",
dynamicTag: null,
attrs: {},
content: [],
ref: null,
model: null,
on: {},
ns: null,
},
],
content: {
type: ASTType.Multi,
content: [
{
type: ASTType.DomNode,
tag: "span",
dynamicTag: null,
attrs: {},
content: [],
ref: null,
model: null,
on: {},
ns: null,
},
{
type: ASTType.DomNode,
tag: "div",
dynamicTag: null,
attrs: {},
content: [],
ref: null,
model: null,
on: {},
ns: null,
},
],
},
},
},
});
@@ -1130,10 +1147,27 @@ describe("qweb parser", () => {
isDynamic: false,
dynamicProps: null,
props: {},
slots: { name: { type: ASTType.Text, value: "foo" } },
slots: { name: { content: { type: ASTType.Text, value: "foo" } } },
});
});
test("a component with a named slot with attributes", async () => {
expect(parse(`<MyComponent><t t-set-slot="name" param="param">foo</t></MyComponent>`)).toEqual({
type: ASTType.TComponent,
name: "MyComponent",
isDynamic: false,
dynamicProps: null,
props: {},
slots: { name: { content: { type: ASTType.Text, value: "foo" }, attrs: { param: "param" } } },
});
});
test("a component with a named slot with div tag", async () => {
expect(() =>
parse(`<MyComponent><div t-set-slot="name">foo</div></MyComponent>`)
).toThrowError();
});
test("a component with a named slot and some white space", async () => {
expect(parse(`<MyComponent><t t-set-slot="name">foo</t> </MyComponent>`)).toEqual({
type: ASTType.TComponent,
@@ -1142,8 +1176,8 @@ describe("qweb parser", () => {
props: {},
isDynamic: false,
slots: {
default: { type: ASTType.Text, value: " " },
name: { type: ASTType.Text, value: "foo" },
default: { content: { type: ASTType.Text, value: " " } },
name: { content: { type: ASTType.Text, value: "foo" } },
},
});
});
@@ -1161,8 +1195,8 @@ describe("qweb parser", () => {
props: {},
isDynamic: false,
slots: {
a: { type: ASTType.Text, value: "foo" },
b: { type: ASTType.Text, value: "bar" },
a: { content: { type: ASTType.Text, value: "foo" } },
b: { content: { type: ASTType.Text, value: "bar" } },
},
});
});
@@ -1213,7 +1247,7 @@ describe("qweb parser", () => {
dynamicProps: null,
props: {},
isDynamic: false,
slots: { default: { body: null, name: "subTemplate", type: ASTType.TCall } },
slots: { default: { content: { body: null, name: "subTemplate", type: ASTType.TCall } } },
});
});
@@ -1233,12 +1267,14 @@ describe("qweb parser", () => {
isDynamic: false,
slots: {
default: {
type: ASTType.TComponent,
isDynamic: false,
name: "Child",
dynamicProps: null,
props: {},
slots: { brol: { type: ASTType.Text, value: "coucou" } },
content: {
type: ASTType.TComponent,
isDynamic: false,
name: "Child",
dynamicProps: null,
props: {},
slots: { brol: { content: { type: ASTType.Text, value: "coucou" } } },
},
},
},
});
@@ -1248,7 +1284,7 @@ describe("qweb parser", () => {
const template = `
<MyComponent>
<Child>
<t><t t-set-slot="brol">coucou</t></t>
<t t-set-slot="brol">coucou</t>
</Child>
</MyComponent>
`;
@@ -1260,12 +1296,14 @@ describe("qweb parser", () => {
isDynamic: false,
slots: {
default: {
type: ASTType.TComponent,
isDynamic: false,
name: "Child",
dynamicProps: null,
props: {},
slots: { brol: { type: ASTType.Text, value: "coucou" } },
content: {
type: ASTType.TComponent,
isDynamic: false,
name: "Child",
dynamicProps: null,
props: {},
slots: { brol: { content: { type: ASTType.Text, value: "coucou" } } },
},
},
},
});
@@ -1279,6 +1317,7 @@ describe("qweb parser", () => {
expect(parse(`<t t-slot="default"/>`)).toEqual({
type: ASTType.TSlot,
name: "default",
attrs: {},
defaultContent: null,
});
});
@@ -1287,6 +1326,7 @@ describe("qweb parser", () => {
expect(parse(`<t t-slot="header">default content</t>`)).toEqual({
type: ASTType.TSlot,
name: "header",
attrs: {},
defaultContent: { type: ASTType.Text, value: "default content" },
});
});
tests/components/__snapshots__/error_handling.test.ts.snap
+38 -47
View File
@@ -105,7 +105,7 @@ exports[`can catch errors can catch an error in a component render function 2`]
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default');
b3 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
}
@@ -117,16 +117,15 @@ exports[`can catch errors can catch an error in a component render function 3`]
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -159,7 +158,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default');
b3 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
}
@@ -207,7 +206,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default');
b3 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
}
@@ -219,18 +218,17 @@ exports[`can catch errors can catch an error in the constructor call of a compon
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
let b3 = component(\`ClassicCompoent\`, {}, key + \`__3\`, node, ctx);
let b4 = component(\`ErrorComponent\`, {}, key + \`__4\`, node, ctx);
const slot1 = (ctx, node, key) => {
let b3 = component(\`ClassicCompoent\`, {}, key + \`__2\`, node, ctx);
let b4 = component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
return multi([b3, b4]);
}
return function template(ctx, node, key = \\"\\") {
let b5 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b5 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__4\`, node, ctx);
return block1([], [b5]);
}
}"
@@ -241,16 +239,15 @@ exports[`can catch errors can catch an error in the constructor call of a compon
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -284,7 +281,7 @@ exports[`can catch errors can catch an error in the initial call of a component
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default');
b3 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
}
@@ -296,16 +293,15 @@ exports[`can catch errors can catch an error in the initial call of a component
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -339,7 +335,7 @@ exports[`can catch errors can catch an error in the initial call of a component
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default');
b3 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
}
@@ -351,18 +347,17 @@ exports[`can catch errors can catch an error in the initial call of a component
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b3;
if (ctx['state'].flag) {
b3 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
}
return block1([], [b3]);
}
@@ -396,7 +391,7 @@ exports[`can catch errors can catch an error in the mounted call 2`] = `
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default');
b3 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
}
@@ -408,16 +403,15 @@ exports[`can catch errors can catch an error in the mounted call 3`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -451,7 +445,7 @@ exports[`can catch errors can catch an error in the willPatch call 2`] = `
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default');
b3 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
}
@@ -463,17 +457,16 @@ exports[`can catch errors can catch an error in the willPatch call 3`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><span><block-text-0/></span><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`ErrorComponent\`, {message: ctx['state'].message}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`ErrorComponent\`, {message: ctx['state'].message}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let d1 = ctx['state'].message;
let b3 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
return block1([d1], [b3]);
}
}"
@@ -506,7 +499,7 @@ exports[`can catch errors can catch an error in the willStart call 2`] = `
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default');
b3 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
}
@@ -518,16 +511,15 @@ exports[`can catch errors can catch an error in the willStart call 3`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -574,7 +566,7 @@ exports[`can catch errors can catch an error origination from a child's willStar
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default');
b3 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
}
@@ -586,18 +578,17 @@ exports[`can catch errors can catch an error origination from a child's willStar
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
let b3 = component(\`ClassicCompoent\`, {}, key + \`__3\`, node, ctx);
let b4 = component(\`ErrorComponent\`, {}, key + \`__4\`, node, ctx);
const slot1 = (ctx, node, key) => {
let b3 = component(\`ClassicCompoent\`, {}, key + \`__2\`, node, ctx);
let b4 = component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
return multi([b3, b4]);
}
return function template(ctx, node, key = \\"\\") {
let b5 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b5 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__4\`, node, ctx);
return block1([], [b5]);
}
}"
tests/components/__snapshots__/props_validation.test.ts.snap
+90 -90
View File
@@ -9,9 +9,9 @@ exports[`default props can set default required boolean values 1`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -26,9 +26,9 @@ exports[`default props can set default values 1`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -43,9 +43,9 @@ exports[`default props default values are also set whenever component is updated
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['state'].p}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['state'].p}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -60,9 +60,9 @@ exports[`props validation can validate a prop with multiple types 1`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -77,9 +77,9 @@ exports[`props validation can validate a prop with multiple types 2`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -94,9 +94,9 @@ exports[`props validation can validate an array with given primitive type 1`] =
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -111,9 +111,9 @@ exports[`props validation can validate an array with given primitive type 2`] =
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -128,9 +128,9 @@ exports[`props validation can validate an array with multiple sub element types
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -145,9 +145,9 @@ exports[`props validation can validate an array with multiple sub element types
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -162,9 +162,9 @@ exports[`props validation can validate an array with multiple sub element types
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -179,9 +179,9 @@ exports[`props validation can validate an object with simple shape 1`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -196,9 +196,9 @@ exports[`props validation can validate an optional props 1`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -213,9 +213,9 @@ exports[`props validation can validate an optional props 2`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -230,9 +230,9 @@ exports[`props validation can validate recursively complicated prop def 1`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -247,9 +247,9 @@ exports[`props validation can validate recursively complicated prop def 2`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -264,9 +264,9 @@ exports[`props validation default values are applied before validating props at
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['state'].p}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['state'].p}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -281,9 +281,9 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {message: 1}
helpers.validateProps(\`Child\`, props2, ctx)
let b2 = component(\`Child\`, props2, key + \`__1\`, node, ctx);
const props1 = {message: 1}
helpers.validateProps(\`Child\`, props1, ctx)
let b2 = component(\`Child\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -298,9 +298,9 @@ exports[`props validation props are validated whenever component is updated 1`]
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['state'].p}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['state'].p}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -315,9 +315,9 @@ exports[`props validation validate simple types 1`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -332,9 +332,9 @@ exports[`props validation validate simple types 2`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -349,9 +349,9 @@ exports[`props validation validate simple types 3`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -366,9 +366,9 @@ exports[`props validation validate simple types 4`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -383,9 +383,9 @@ exports[`props validation validate simple types 5`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -400,9 +400,9 @@ exports[`props validation validate simple types 6`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -417,9 +417,9 @@ exports[`props validation validate simple types, alternate form 1`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -434,9 +434,9 @@ exports[`props validation validate simple types, alternate form 2`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -451,9 +451,9 @@ exports[`props validation validate simple types, alternate form 3`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -468,9 +468,9 @@ exports[`props validation validate simple types, alternate form 4`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -485,9 +485,9 @@ exports[`props validation validate simple types, alternate form 5`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
@@ -502,9 +502,9 @@ exports[`props validation validate simple types, alternate form 6`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const props2 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props2, ctx)
let b2 = component(\`SubComp\`, props2, key + \`__1\`, node, ctx);
const props1 = {p: ctx['p']}
helpers.validateProps(\`SubComp\`, props1, ctx)
let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
return block1([], [b2]);
}
}"
tests/components/__snapshots__/refs.test.ts.snap
+4 -5
View File
@@ -25,7 +25,7 @@ exports[`refs refs are properly bound in slots 1`] = `
let block1 = createBlock(\`<span><block-child-0/></span>\`);
return function template(ctx, node, key = \\"\\") {
let b2 = callSlot(ctx, node, key, 'footer');
let b2 = callSlot(ctx, node, key, 'footer', false, {});
return block1([], [b2]);
}
}"
@@ -36,12 +36,11 @@ exports[`refs refs are properly bound in slots 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
let block2 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
const slot3 = ctx => (node, key) => {
const slot2 = (ctx, node, key) => {
const refs = ctx.__owl__.refs
let d2 = [ctx['doSomething'], ctx];
let d3 = (el) => refs[\`myButton\`] = el;
@@ -51,8 +50,8 @@ exports[`refs refs are properly bound in slots 2`] = `
return function template(ctx, node, key = \\"\\") {
const refs = ctx.__owl__.refs;
let d1 = ctx['state'].val;
const ctx2 = capture(ctx);
let b3 = assign(component(\`Dialog\`, {}, key + \`__1\`, node, ctx), {slots: {'footer': slot3(ctx2)}});
const ctx1 = capture(ctx);
let b3 = component(\`Dialog\`, {slots: {'footer': {__render: slot2, __ctx: ctx1}}}, key + \`__3\`, node, ctx);
return block1([d1], [b3]);
}
}"
tests/components/__snapshots__/slots.test.ts.snap
+346 -276
View File
File diff suppressed because it is too large Load Diff
tests/components/__snapshots__/t_foreach.test.ts.snap
+3 -3
View File
@@ -54,9 +54,9 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
let key1 = 'child';
if (keys1.has(key1)) { throw new Error(\`Got duplicate key in t-foreach: \${key1}\`)}
keys1.add(key1);
const props2 = {}
helpers.validateProps(\`Child\`, props2, ctx)
c_block1[i1] = withKey(component(\`Child\`, props2, key + \`__1__\${key1}\`, node, ctx), key1);
const props1 = {}
helpers.validateProps(\`Child\`, props1, ctx)
c_block1[i1] = withKey(component(\`Child\`, props1, key + \`__2__\${key1}\`, node, ctx), key1);
}
return list(c_block1);
}
tests/components/__snapshots__/t_set.test.ts.snap
+3 -4
View File
@@ -24,11 +24,10 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
const slot3 = ctx => (node, key) => {
const slot2 = (ctx, node, key) => {
setContextValue(ctx, \\"iter\\", 'inCall');
}
@@ -37,8 +36,8 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 2`] = `
ctx[isBoundary] = 1
setContextValue(ctx, \\"iter\\", 'source');
let d1 = ctx['iter'];
const ctx2 = capture(ctx);
let b2 = assign(component(\`Childcomp\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot3(ctx2)}});
const ctx1 = capture(ctx);
let b2 = component(\`Childcomp\`, {slots: {'default': {__render: slot2, __ctx: ctx1}}}, key + \`__3\`, node, ctx);
let d2 = ctx['iter'];
return block1([d1, d2], [b2]);
}
tests/components/slots.test.ts
+82
View File
@@ -37,6 +37,59 @@ describe("slots", () => {
expect(fixture.innerHTML).toBe("some text");
});
test("simple default slot with params", async () => {
let child: any;
class Child extends Component {
static template = xml`<span><t t-slot="default" bool="state.bool"/></span>`;
state = useState({ bool: true });
setup() {
child = this;
}
}
class Parent extends Component {
static template = xml`
<Child>
<t t-set-slot="default" t-slot-scope="slotScope">
<t t-if="slotScope.bool">some text</t>
<t t-else="slotScope.bool">other text</t>
</t>
</Child>`;
static components = { Child };
}
await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("<span>some text</span>");
child.state.bool = false;
await nextTick();
expect(fixture.innerHTML).toBe("<span>other text</span>");
});
test("simple default slot with params", async () => {
class Child extends Component {
static template = xml`<span><t t-slot="default" bool="state.bool"/></span>`;
state = useState({ bool: true });
}
class Parent extends Component {
static template = xml`
<Child>
<t t-if="slotScope.bool">some text</t>
<t t-else="slotScope.bool">other text</t>
</Child>`;
static components = { Child };
}
let error = null;
try {
await mount(Parent, fixture);
} catch (e) {
error = e;
}
expect(error).not.toBeNull();
});
test("fun: two calls to the same slot", async () => {
class Child extends Component {
static template = xml`<t t-slot="default"/><t t-slot="default"/>`;
@@ -97,6 +150,35 @@ describe("slots", () => {
);
});
test("can define and call slots with params", async () => {
class Dialog extends Component {
static template = xml`
<div>
<t t-esc="props.slots['header'].param"/>
<div><t t-slot="header"/></div>
<t t-esc="props.slots['footer'].param"/>
<div><t t-slot="footer"/></div>
</div>`;
}
class Parent extends Component {
static components = { Dialog };
static template = xml`
<div>
<Dialog>
<t t-set-slot="header" param="var"><span>header</span></t>
<t t-set-slot="footer" param="'5'"><span>footer</span></t>
</Dialog>
</div>`;
var = 3;
}
await mount(Parent, fixture);
expect(fixture.innerHTML).toBe(
"<div><div>3<div><span>header</span></div>5<div><span>footer</span></div></div></div>"
);
});
test("no named slot content => just no children", async () => {
class Dialog extends Component {
static template = xml`<span><t t-slot="header"/></span>`;
tests/misc/__snapshots__/memo.test.ts.snap
+7 -10
View File
@@ -17,9 +17,8 @@ exports[`Memo if no prop change, prevent renderings from above 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
let b6 = text(ctx['state'].a);
let b7 = text(ctx['state'].b);
let b8 = text(ctx['state'].c);
@@ -30,7 +29,7 @@ exports[`Memo if no prop change, prevent renderings from above 2`] = `
let b2 = text(ctx['state'].a);
let b3 = text(ctx['state'].b);
let b4 = text(ctx['state'].c);
let b9 = assign(component(\`Memo\`, {a: ctx['state'].a,b: ctx['state'].b}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b9 = component(\`Memo\`, {a: ctx['state'].a,b: ctx['state'].b,slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
return multi([b2, b3, b4, b9]);
}
}"
@@ -53,15 +52,14 @@ exports[`Memo if no props, prevent renderings from above 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
const slot3 = ctx => (node, key) => {
return component(\`Child\`, {value: ctx['state'].value}, key + \`__4\`, node, ctx);
const slot2 = (ctx, node, key) => {
return component(\`Child\`, {value: ctx['state'].value}, key + \`__3\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b2 = component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
let b4 = assign(component(\`Memo\`, {}, key + \`__2\`, node, ctx), {slots: {'default': slot3(ctx)}});
let b4 = component(\`Memo\`, {slots: {'default': {__render: slot2, __ctx: ctx}}}, key + \`__4\`, node, ctx);
return multi([b2, b4]);
}
}"
@@ -72,15 +70,14 @@ exports[`Memo if no props, prevent renderings from above (work with simple html)
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
return text(ctx['state'].value);
}
return function template(ctx, node, key = \\"\\") {
let b2 = text(ctx['state'].value);
let b4 = assign(component(\`Memo\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b4 = component(\`Memo\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
return multi([b2, b4]);
}
}"
tests/misc/__snapshots__/portal.test.ts.snap
+48 -68
View File
@@ -20,14 +20,13 @@ exports[`Portal Portal composed with t-slot 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
const slot2 = ctx => (node, key) => {
return callSlot(ctx, node, key, 'default');
const slot1 = (ctx, node, key) => {
return callSlot(ctx, node, key, 'default', false, {});
}
return function template(ctx, node, key = \\"\\") {
return assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
return component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
}
}"
`;
@@ -37,16 +36,15 @@ exports[`Portal Portal composed with t-slot 3`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`Child2\`, {customHandler: ctx['_handled']}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`Child2\`, {customHandler: ctx['_handled']}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`Child\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -57,17 +55,16 @@ exports[`Portal basic use of portal 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><span>1</span><block-child-0/></div>\`);
let block2 = createBlock(\`<p>2</p>\`);
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
return block2();
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -93,19 +90,18 @@ exports[`Portal conditional use of Portal (with sub Component) 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block2 = createBlock(\`<span>1</span>\`);
const slot2 = ctx => (node, key) => {
return component(\`Child\`, {val: ctx['state'].val}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`Child\`, {val: ctx['state'].val}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b2,b4;
b2 = block2();
if (ctx['state'].hasPortal) {
b4 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
}
return multi([b2, b4]);
}
@@ -117,12 +113,11 @@ exports[`Portal conditional use of Portal 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block2 = createBlock(\`<span>1</span>\`);
let block3 = createBlock(\`<p>2</p>\`);
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
return block3();
}
@@ -130,7 +125,7 @@ exports[`Portal conditional use of Portal 1`] = `
let b2,b4;
b2 = block2();
if (ctx['state'].hasPortal) {
b4 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
}
return multi([b2, b4]);
}
@@ -157,18 +152,17 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 2`]
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`Child\`, {val: ctx['state'].val}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`Child\`, {val: ctx['state'].val}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b3;
if (ctx['state'].hasChild) {
b3 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
}
return block1([], [b3]);
}
@@ -180,12 +174,11 @@ exports[`Portal portal could have dynamically no content 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<span><block-text-0/></span>\`);
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
let b3;
if (ctx['state'].val) {
let d1 = ctx['state'].val;
@@ -195,7 +188,7 @@ exports[`Portal portal could have dynamically no content 1`] = `
}
return function template(ctx, node, key = \\"\\") {
let b4 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
return block1([], [b4]);
}
}"
@@ -221,16 +214,15 @@ exports[`Portal portal destroys on crash 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`Child\`, {error: ctx['state'].error}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`Child\`, {error: ctx['state'].error}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -256,16 +248,15 @@ exports[`Portal portal with child and props 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`Child\`, {val: ctx['state'].val}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`Child\`, {val: ctx['state'].val}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -276,13 +267,12 @@ exports[`Portal portal with dynamic body 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<span><block-text-0/></span>\`);
let block4 = createBlock(\`<div/>\`);
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
let b3,b4;
if (ctx['state'].val) {
let d1 = ctx['state'].val;
@@ -294,7 +284,7 @@ exports[`Portal portal with dynamic body 1`] = `
}
return function template(ctx, node, key = \\"\\") {
let b5 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b5 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
return block1([], [b5]);
}
}"
@@ -305,20 +295,19 @@ exports[`Portal portal with many children 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>1</div>\`);
let block4 = createBlock(\`<p>2</p>\`);
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
let b3 = block3();
let b4 = block4();
return multi([b3, b4]);
}
return function template(ctx, node, key = \\"\\") {
let b5 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b5 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
return block1([], [b5]);
}
}"
@@ -329,11 +318,10 @@ exports[`Portal portal with no content 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
let b3;
if (false) {
b3 = text('ABC');
@@ -342,7 +330,7 @@ exports[`Portal portal with no content 1`] = `
}
return function template(ctx, node, key = \\"\\") {
let b4 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
return block1([], [b4]);
}
}"
@@ -353,16 +341,15 @@ exports[`Portal portal with only text as content 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
return text('only text');
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -373,17 +360,16 @@ exports[`Portal portal with target not in dom 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block2 = createBlock(\`<div>2</div>\`);
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
return block2();
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`Portal\`, {target: '#does-not-exist'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`Portal\`, {target: '#does-not-exist',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -408,16 +394,15 @@ exports[`Portal portal's parent's env is not polluted 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`Child\`, {}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`Child\`, {}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -428,17 +413,16 @@ exports[`Portal with target in template (after portal) 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><span>1</span><block-child-0/><div id=\\"local-target\\"/></div>\`);
let block2 = createBlock(\`<p>2</p>\`);
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
return block2();
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`Portal\`, {target: '#local-target'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`Portal\`, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -449,17 +433,16 @@ exports[`Portal with target in template (before portal) 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><div id=\\"local-target\\"/><span>1</span><block-child-0/></div>\`);
let block2 = createBlock(\`<p>2</p>\`);
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
return block2();
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`Portal\`, {target: '#local-target'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`Portal\`, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -470,17 +453,16 @@ exports[`Portal: Props validation target is mandatory 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block2 = createBlock(\`<div>2</div>\`);
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
return block2();
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`Portal\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`Portal\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -491,17 +473,16 @@ exports[`Portal: Props validation target is not list 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block2 = createBlock(\`<div>2</div>\`);
const slot2 = ctx => (node, key) => {
const slot1 = (ctx, node, key) => {
return block2();
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`Portal\`, {target: ['body']}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`Portal\`, {target: ['body'],slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
return block1([], [b3]);
}
}"
@@ -527,16 +508,15 @@ exports[`Portal: UI/UX focus is kept across re-renders 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`Child\`, {val: ctx['state'].val}, key + \`__3\`, node, ctx);
const slot1 = (ctx, node, key) => {
return component(\`Child\`, {val: ctx['state'].val}, key + \`__2\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let b3 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
return block1([], [b3]);
}
}"