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

wip [FIX] parser: account for CR/LF text nodes

Browse Source
This commit is contained in:
Bruno Boi
2022-07-06 12:07:20 +02:00
parent 6c72e0a143
commit 030cc2f08a
42 changed files with 5561 additions and 1965 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/components/__snapshots__/basics.test.ts.snap
+200 -88
View File
@@ -130,13 +130,16 @@ exports[`basics can be clicked on and updated 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
let block3 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['state'].counter;
const v1 = ctx['state'];
let hdlr1 = [()=>v1.counter++, ctx];
return block1([txt1, hdlr1]);
const b3 = block3([txt1, hdlr1]);
return multi([b2, b3]);
}
}"
`;
@@ -485,21 +488,30 @@ exports[`basics list of two sub components inside other nodes 1`] = `
const comp1 = app.createComponent(\`SubWidget\`, true, false, false, true);
const comp2 = app.createComponent(\`SubWidget\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
let block5 = createBlock(\`<div>
<block-child-0/>
<block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`blip\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].blips);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`blip\`] = v_block4[i1];
const key1 = ctx['blip'].id;
const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
const b5 = comp2({}, key + \`__2__\${key1}\`, node, this, null);
c_block2[i1] = withKey(block3([], [b4, b5]), key1);
const b6 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
const b7 = comp2({}, key + \`__2__\${key1}\`, node, this, null);
c_block4[i1] = withKey(block5([], [b6, b7]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -600,13 +612,21 @@ exports[`basics reconciliation alg is not confused in some specific situation 1`
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
const comp2 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
<block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = comp1({}, key + \`__1\`, node, this, null);
const b2 = text(\`
\`);
const b4 = comp1({}, key + \`__1\`, node, this, null);
const tKey_1 = 4;
const b3 = toggler(tKey_1, comp2({}, tKey_1 + key + \`__2\`, node, this, null));
return block1([], [b2, b3]);
const b5 = toggler(tKey_1, comp2({}, tKey_1 + key + \`__2\`, node, this, null));
const b3 = block3([], [b4, b5]);
const b6 = text(\`
\`);
return multi([b2, b3, b6]);
}
}"
`;
@@ -641,13 +661,16 @@ exports[`basics rerendering a widget with a sub widget 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
let block3 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['state'].counter;
const v1 = ctx['state'];
let hdlr1 = [()=>v1.counter++, ctx];
return block1([txt1, hdlr1]);
const b3 = block3([txt1, hdlr1]);
return multi([b2, b3]);
}
}"
`;
@@ -659,14 +682,20 @@ exports[`basics same t-keys in two different places 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp2 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><div><block-child-0/></div><div><block-child-1/></div></div>\`);
let block3 = createBlock(\`<div>
<div><block-child-0/></div>
<div><block-child-1/></div>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const tKey_1 = 1;
const b2 = toggler(tKey_1, comp1({blip: '1'}, tKey_1 + key + \`__1\`, node, this, null));
const b4 = toggler(tKey_1, comp1({blip: '1'}, tKey_1 + key + \`__1\`, node, this, null));
const tKey_2 = 1;
const b3 = toggler(tKey_2, comp2({blip: '2'}, tKey_2 + key + \`__2\`, node, this, null));
return block1([], [b2, b3]);
const b5 = toggler(tKey_2, comp2({blip: '2'}, tKey_2 + key + \`__2\`, node, this, null));
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -732,23 +761,30 @@ exports[`basics sub components between t-ifs 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><span><block-child-2/></span><block-child-3/></div>\`);
let block2 = createBlock(\`<h1>hey</h1>\`);
let block3 = createBlock(\`<h2>noo</h2>\`);
let block5 = createBlock(\`<span>test</span>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/>
<span><block-child-2/></span>
<block-child-3/>
</div>\`);
let block4 = createBlock(\`<h1>hey</h1>\`);
let block5 = createBlock(\`<h2>noo</h2>\`);
let block7 = createBlock(\`<span>test</span>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3,b4,b5;
const b2 = text(\`
\`);
let b4,b5,b6,b7;
if (ctx['state'].flag) {
b2 = block2();
b4 = block4();
} else {
b3 = block3();
}
b4 = comp1({}, key + \`__1\`, node, this, null);
if (ctx['state'].flag) {
b5 = block5();
}
return block1([], [b2, b3, b4, b5]);
b6 = comp1({}, key + \`__1\`, node, this, null);
if (ctx['state'].flag) {
b7 = block7();
}
const b3 = block3([], [b4, b5, b6, b7]);
return multi([b2, b3]);
}
}"
`;
@@ -772,17 +808,22 @@ exports[`basics t-elif works with t-component 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block2 = createBlock(\`<div>somediv</div>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/>
</div>\`);
let block4 = createBlock(\`<div>somediv</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
const b2 = text(\`
\`);
let b4,b5;
if (ctx['state'].flag) {
b2 = block2();
b4 = block4();
} else if (!ctx['state'].flag) {
b3 = comp1({}, key + \`__1\`, node, this, null);
b5 = comp1({}, key + \`__1\`, node, this, null);
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -806,17 +847,22 @@ exports[`basics t-else with empty string works with t-component 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block2 = createBlock(\`<div>somediv</div>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/>
</div>\`);
let block4 = createBlock(\`<div>somediv</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
const b2 = text(\`
\`);
let b4,b5;
if (ctx['state'].flag) {
b2 = block2();
b4 = block4();
} else {
b3 = comp1({}, key + \`__1\`, node, this, null);
b5 = comp1({}, key + \`__1\`, node, this, null);
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -840,17 +886,22 @@ exports[`basics t-else works with t-component 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block2 = createBlock(\`<div>somediv</div>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/>
</div>\`);
let block4 = createBlock(\`<div>somediv</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
const b2 = text(\`
\`);
let b4,b5;
if (ctx['state'].flag) {
b2 = block2();
b4 = block4();
} else {
b3 = comp1({}, key + \`__1\`, node, this, null);
b5 = comp1({}, key + \`__1\`, node, this, null);
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -906,16 +957,22 @@ exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
const comp2 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-0/>
<block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
const b2 = text(\`
\`);
let b4,b5;
if (false) {
const tKey_1 = 'str';
b2 = toggler(tKey_1, comp1({}, tKey_1 + key + \`__1\`, node, this, null));
b4 = toggler(tKey_1, comp1({}, tKey_1 + key + \`__1\`, node, this, null));
}
b3 = comp2({}, key + \`__2\`, node, this, null);
return block1([], [b2, b3]);
b5 = comp2({}, key + \`__2\`, node, this, null);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -939,15 +996,21 @@ exports[`basics text after a conditional component 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><span><block-text-0/></span></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
<span><block-text-0/></span>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2;
const b2 = text(\`
\`);
let b4;
if (ctx['state'].hasChild) {
b2 = comp1({}, key + \`__1\`, node, this, null);
b4 = comp1({}, key + \`__1\`, node, this, null);
}
let txt1 = ctx['state'].text;
return block1([txt1], [b2]);
const b3 = block3([txt1], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -1036,12 +1099,17 @@ exports[`basics update props of component without concrete own node 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, true, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const tKey_1 = ctx['childProps'].key;
const b2 = toggler(tKey_1, comp1(Object.assign({}, ctx['childProps']), tKey_1 + key + \`__1\`, node, this, null));
return block1([], [b2]);
const b4 = toggler(tKey_1, comp1(Object.assign({}, ctx['childProps']), tKey_1 + key + \`__1\`, node, this, null));
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -1053,8 +1121,11 @@ exports[`basics update props of component without concrete own node 2`] = `
const comp1 = app.createComponent(\`Custom\`, true, false, false, false);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const tKey_1 = ctx['props'].subKey;
return toggler(tKey_1, comp1({key: ctx['props'].key,subKey: ctx['props'].subKey}, tKey_1 + key + \`__1\`, node, this, null));
const b3 = toggler(tKey_1, comp1({key: ctx['props'].key,subKey: ctx['props'].subKey}, tKey_1 + key + \`__1\`, node, this, null));
return multi([b2, b3]);
}
}"
`;
@@ -1064,12 +1135,17 @@ exports[`basics update props of component without concrete own node 3`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div class=\\"widget-subkey\\"><block-text-0/>__<block-text-1/></div>\`);
let block3 = createBlock(\`<div class=\\"widget-subkey\\">
<block-text-0/>__<block-text-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['props'].key;
let txt2 = ctx['props'].subKey;
return block1([txt1, txt2]);
const b3 = block3([txt1, txt2]);
return multi([b2, b3]);
}
}"
`;
@@ -1081,14 +1157,22 @@ exports[`basics updating a component with t-foreach as root 1`] = `
let { prepareList, withKey } = helpers;
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);;
for (let i1 = 0; i1 < l_block1; i1++) {
ctx[\`item\`] = v_block1[i1];
const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['items']);;
for (let i1 = 0; i1 < l_block3; i1++) {
ctx[\`item\`] = v_block3[i1];
const key1 = ctx['item'];
c_block1[i1] = withKey(text(ctx['item']), key1);
const b5 = text(\`
\`);
const b6 = text(ctx['item']);
const b7 = text(\`
\`);
c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
}
return list(c_block1);
const b3 = list(c_block3);
return multi([b2, b3]);
}
}"
`;
@@ -1248,11 +1332,16 @@ exports[`support svg components add proper namespace to svg 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`GComp\`, true, false, false, true);
let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
let block3 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\">
<block-child-0/>
</svg>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = comp1({}, key + \`__1\`, node, this, null);
return block1([], [b2]);
const b2 = text(\`
\`);
const b4 = comp1({}, key + \`__1\`, node, this, null);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -1262,10 +1351,15 @@ exports[`support svg components add proper namespace to svg 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<g block-ns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/></g>\`);
let block3 = createBlock(\`<g block-ns=\\"http://www.w3.org/2000/svg\\">
<circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/>
</g>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
const b2 = text(\`
\`);
const b3 = block3();
return multi([b2, b3]);
}
}"
`;
@@ -1276,20 +1370,32 @@ exports[`t-out in components can render list of t-out 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, safeOutput, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].items);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`item\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].items);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`item\`] = v_block4[i1];
const key1 = ctx['item'];
const b4 = text(ctx['item']);
const b5 = safeOutput(ctx['item']);
c_block2[i1] = withKey(multi([b4, b5]), key1);
const b6 = text(\`
\`);
const b7 = text(ctx['item']);
const b8 = text(\`
\`);
const b9 = safeOutput(ctx['item']);
const b10 = text(\`
\`);
c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -1301,9 +1407,15 @@ exports[`t-out in components can switch the contents of two t-out repeatedly 1`]
let { safeOutput } = helpers;
return function template(ctx, node, key = \\"\\") {
const b2 = safeOutput(ctx['state'].a);
const b3 = safeOutput(ctx['state'].b);
return multi([b2, b3]);
const b2 = text(\`
\`);
const b3 = safeOutput(ctx['state'].a);
const b4 = text(\`
\`);
const b5 = safeOutput(ctx['state'].b);
const b6 = text(\`
\`);
return multi([b2, b3, b4, b5, b6]);
}
}"
`;
tests/components/__snapshots__/concurrency.test.ts.snap
+147 -62
View File
@@ -31,14 +31,22 @@ exports[`Cascading renders after microtaskTick 2`] = `
const comp1 = app.createComponent(\`Element\`, true, false, false, false);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state']);;
for (let i1 = 0; i1 < l_block1; i1++) {
ctx[\`elem\`] = v_block1[i1];
const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['state']);;
for (let i1 = 0; i1 < l_block3; i1++) {
ctx[\`elem\`] = v_block3[i1];
const key1 = ctx['elem'].id;
c_block1[i1] = withKey(comp1({id: ctx['elem'].id}, key + \`__1__\${key1}\`, node, this, null), key1);
const b5 = text(\`
\`);
const b6 = comp1({id: ctx['elem'].id}, key + \`__1__\${key1}\`, node, this, null);
const b7 = text(\`
\`);
c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
}
return list(c_block1);
const b3 = list(c_block3);
return multi([b2, b3]);
}
}"
`;
@@ -143,11 +151,16 @@ exports[`calling render in destroy 3`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div><block-text-0/></div>\`);
let block3 = createBlock(\`<div>
<block-text-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['props'].fromA;
return block1([txt1]);
const b3 = block3([txt1]);
return multi([b2, b3]);
}
}"
`;
@@ -593,13 +606,20 @@ exports[`concurrent renderings scenario 9 1`] = `
const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
const comp2 = app.createComponent(\`ComponentC\`, true, false, false, false);
let block1 = createBlock(\`<div><block-text-0/><block-child-0/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-text-0/>
<block-child-0/>
<block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['state'].fromA;
const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
const b3 = comp2({fromA: ctx['state'].fromA}, key + \`__2\`, node, this, null);
return block1([txt1], [b2, b3]);
const b4 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
const b5 = comp2({fromA: ctx['state'].fromA}, key + \`__2\`, node, this, null);
const b3 = block3([txt1], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -761,15 +781,21 @@ exports[`concurrent renderings scenario 13 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
const comp2 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
<block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
b2 = comp1({}, key + \`__1\`, node, this, null);
const b2 = text(\`
\`);
let b4,b5;
b4 = comp1({}, key + \`__1\`, node, this, null);
if (ctx['state'].bool) {
b3 = comp2({}, key + \`__2\`, node, this, null);
b5 = comp2({}, key + \`__2\`, node, this, null);
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -823,13 +849,20 @@ exports[`concurrent renderings scenario 14 3`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></p>\`);
let block3 = createBlock(\`<p>
<span><block-text-0/></span>
<span><block-text-1/></span>
<span><block-text-2/></span>
</p>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['props'].fromA;
let txt2 = ctx['props'].fromB;
let txt3 = ctx['state'].fromC;
return block1([txt1, txt2, txt3]);
const b3 = block3([txt1, txt2, txt3]);
return multi([b2, b3]);
}
}"
`;
@@ -869,13 +902,20 @@ exports[`concurrent renderings scenario 15 3`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></p>\`);
let block3 = createBlock(\`<p>
<span><block-text-0/></span>
<span><block-text-1/></span>
<span><block-text-2/></span>
</p>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['props'].fromA;
let txt2 = ctx['props'].fromB;
let txt3 = ctx['state'].fromC;
return block1([txt1, txt2, txt3]);
const b3 = block3([txt1, txt2, txt3]);
return multi([b2, b3]);
}
}"
`;
@@ -911,17 +951,20 @@ exports[`concurrent renderings scenario 16 3`] = `
const comp1 = app.createComponent(\`D\`, true, false, false, true);
return function template(ctx, node, key = \\"\\") {
let b2,b3,b4,b5,b6,b7,b8;
b2 = text(ctx['props'].fromA);
b3 = text(\`:\`);
b4 = text(ctx['props'].fromB);
b5 = text(\`:\`);
b6 = text(ctx['state'].fromC);
b7 = text(\`: \`);
let b2,b3,b4,b5,b6,b7,b8,b9;
b2 = text(\`
\`);
b3 = text(ctx['props'].fromA);
b4 = text(\`:\`);
b5 = text(ctx['props'].fromB);
b6 = text(\`:\`);
b7 = text(ctx['state'].fromC);
b8 = text(\`:
\`);
if (ctx['state'].fromC===13) {
b8 = comp1({}, key + \`__1\`, node, this, null);
b9 = comp1({}, key + \`__1\`, node, this, null);
}
return multi([b2, b3, b4, b5, b6, b7, b8]);
return multi([b2, b3, b4, b5, b6, b7, b8, b9]);
}
}"
`;
@@ -945,14 +988,18 @@ exports[`creating two async components, scenario 1 1`] = `
const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
let b2,b3,b4,b5;
b2 = text(\`
\`);
if (ctx['state'].flagA) {
b2 = comp1({}, key + \`__1\`, node, this, null);
b3 = comp1({}, key + \`__1\`, node, this, null);
}
b4 = text(\`
\`);
if (ctx['state'].flagB) {
b3 = comp2({}, key + \`__2\`, node, this, null);
b5 = comp2({}, key + \`__2\`, node, this, null);
}
return multi([b2, b3]);
return multi([b2, b3, b4, b5]);
}
}"
`;
@@ -991,15 +1038,21 @@ exports[`creating two async components, scenario 2 1`] = `
const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
<block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
b2 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
const b2 = text(\`
\`);
let b4,b5;
b4 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
if (ctx['state'].flagB) {
b3 = comp2({val: ctx['state'].valB}, key + \`__2\`, node, this, null);
b5 = comp2({val: ctx['state'].valB}, key + \`__2\`, node, this, null);
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -1039,15 +1092,21 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
<block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
b2 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
const b2 = text(\`
\`);
let b4,b5;
b4 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
if (ctx['state'].flagB) {
b3 = comp2({val: ctx['state'].valB}, key + \`__2\`, node, this, null);
b5 = comp2({val: ctx['state'].valB}, key + \`__2\`, node, this, null);
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -1475,11 +1534,19 @@ exports[`destroyed component causes other soon to be destroyed component to rere
return function template(ctx, node, key = \\"\\") {
let b2,b3;
b2 = text(\` A \`);
b2 = text(\`
A
\`);
if (ctx['state'].flag) {
const b4 = comp1({value: ctx['state'].valueB}, key + \`__1\`, node, this, null);
const b5 = comp2({value: ctx['state'].valueC}, key + \`__2\`, node, this, null);
b3 = multi([b4, b5]);
const b4 = text(\`
\`);
const b5 = comp1({value: ctx['state'].valueB}, key + \`__1\`, node, this, null);
const b6 = text(\`
\`);
const b7 = comp2({value: ctx['state'].valueC}, key + \`__2\`, node, this, null);
const b8 = text(\`
\`);
b3 = multi([b4, b5, b6, b7, b8]);
}
return multi([b2, b3]);
}
@@ -1542,14 +1609,19 @@ exports[`destroying/recreating a subwidget with different props (if start is not
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2;
const b2 = text(\`
\`);
let b4;
if (ctx['state'].val>1) {
b2 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
b4 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
}
return block1([], [b2]);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -1597,14 +1669,17 @@ exports[`properly behave when destroyed/unmounted while rendering 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let b2;
const b2 = text(\`
\`);
let b4;
if (ctx['state'].flag) {
b2 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
b4 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
}
return block1([], [b2]);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -1643,15 +1718,21 @@ exports[`rendering component again in next microtick 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><button block-handler-0=\\"click\\">Click</button><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<button block-handler-0=\\"click\\">Click</button>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2;
const b2 = text(\`
\`);
let b4;
let hdlr1 = [ctx['onClick'], ctx];
if (ctx['env'].config.flag) {
b2 = comp1({}, key + \`__1\`, node, this, null);
b4 = comp1({}, key + \`__1\`, node, this, null);
}
return block1([hdlr1], [b2]);
const b3 = block3([hdlr1], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -1773,12 +1854,16 @@ exports[`t-foreach with dynamic async component 1`] = `
ctx[\`arr\`] = v_block1[i1];
ctx[\`arr_index\`] = i1;
const key1 = ctx['arr_index'];
let b3;
let b3,b4,b5;
b3 = text(\`
\`);
if (ctx['arr']) {
const Comp1 = ctx['myComp'];
b3 = toggler(Comp1, comp1({key: ctx['arr'][0]}, key + \`__1__\${key1}\`, node, this, Comp1));
b4 = toggler(Comp1, comp1({key: ctx['arr'][0]}, key + \`__1__\${key1}\`, node, this, Comp1));
}
c_block1[i1] = withKey(multi([b3]), key1);
b5 = text(\`
\`);
c_block1[i1] = withKey(multi([b3, b4, b5]), key1);
}
return list(c_block1);
}
tests/components/__snapshots__/error_handling.test.ts.snap
+250 -93
View File
@@ -73,16 +73,26 @@ exports[`basics simple catchError 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
const b2 = text(\`
\`);
let b4,b5;
if (ctx['error']) {
b2 = text(\`Error\`);
b4 = text(\`Error\`);
} else {
b3 = comp1({}, key + \`__1\`, node, this, null);
const b6 = text(\`
\`);
const b7 = comp1({}, key + \`__1\`, node, this, null);
const b8 = text(\`
\`);
b5 = multi([b6, b7, b8]);
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -108,12 +118,16 @@ exports[`can catch errors an error in onWillDestroy 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
b2 = text(ctx['state'].value);
let b2,b3,b4,b5;
b2 = text(\`
\`);
b3 = text(ctx['state'].value);
b4 = text(\`
\`);
if (ctx['state'].hasChild) {
b3 = comp1({}, key + \`__1\`, node, this, null);
b5 = comp1({}, key + \`__1\`, node, this, null);
}
return multi([b2, b3]);
return multi([b2, b3, b4, b5]);
}
}"
`;
@@ -138,12 +152,16 @@ exports[`can catch errors an error in onWillDestroy, variation 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
b2 = text(ctx['state'].value);
let b2,b3,b4,b5;
b2 = text(\`
\`);
b3 = text(ctx['state'].value);
b4 = text(\`
\`);
if (ctx['state'].hasChild) {
b3 = comp1({}, key + \`__1\`, node, this, null);
b5 = comp1({}, key + \`__1\`, node, this, null);
}
return multi([b2, b3]);
return multi([b2, b3, b4, b5]);
}
}"
`;
@@ -180,15 +198,20 @@ exports[`can catch errors can catch an error in a component render function 1`]
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
function slot1(ctx, node, key = \\"\\") {
return comp1({flag: ctx['state'].flag}, key + \`__1\`, node, this, null);
}
return function template(ctx, node, key = \\"\\") {
const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
return block1([], [b3]);
const b2 = text(\`
\`);
const b5 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
const b3 = block3([], [b5]);
return multi([b2, b3]);
}
}"
`;
@@ -199,16 +222,21 @@ exports[`can catch errors can catch an error in a component render function 2`]
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { callSlot } = helpers;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
const b2 = text(\`
\`);
let b4,b5;
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
b4 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default', false, {});
b5 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -235,7 +263,9 @@ exports[`can catch errors can catch an error in the constructor call of a compon
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/>
</div>\`);
function slot1(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
@@ -254,7 +284,9 @@ exports[`can catch errors can catch an error in the constructor call of a compon
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { callSlot } = helpers;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/><block-child-1/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
@@ -277,7 +309,9 @@ exports[`can catch errors can catch an error in the constructor call of a compon
const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/>
</div>\`);
function slot1(ctx, node, key = \\"\\") {
const b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -298,7 +332,9 @@ exports[`can catch errors can catch an error in the constructor call of a compon
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { callSlot } = helpers;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/><block-child-1/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
@@ -359,15 +395,20 @@ exports[`can catch errors can catch an error in the initial call of a component
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
function slot1(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
}
return function template(ctx, node, key = \\"\\") {
const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
return block1([], [b3]);
const b2 = text(\`
\`);
const b5 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
const b3 = block3([], [b5]);
return multi([b2, b3]);
}
}"
`;
@@ -378,16 +419,21 @@ exports[`can catch errors can catch an error in the initial call of a component
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { callSlot } = helpers;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
const b2 = text(\`
\`);
let b4,b5;
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
b4 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default', false, {});
b5 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -414,18 +460,23 @@ exports[`can catch errors can catch an error in the initial call of a component
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
function slot1(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
}
return function template(ctx, node, key = \\"\\") {
let b3;
const b2 = text(\`
\`);
let b5;
if (ctx['state'].flag) {
b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
b5 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
}
return block1([], [b3]);
const b3 = block3([], [b5]);
return multi([b2, b3]);
}
}"
`;
@@ -436,16 +487,21 @@ exports[`can catch errors can catch an error in the initial call of a component
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { callSlot } = helpers;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
const b2 = text(\`
\`);
let b4,b5;
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
b4 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default', false, {});
b5 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -497,7 +553,9 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
@@ -530,7 +588,9 @@ exports[`can catch errors can catch an error in the mounted call (in root compon
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
@@ -565,7 +625,9 @@ exports[`can catch errors can catch an error in the mounted call 1`] = `
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/>
</div>\`);
function slot1(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
@@ -584,7 +646,9 @@ exports[`can catch errors can catch an error in the mounted call 2`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { callSlot } = helpers;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/><block-child-1/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
@@ -619,16 +683,22 @@ exports[`can catch errors can catch an error in the willPatch call 1`] = `
const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
let block1 = createBlock(\`<div><span><block-text-0/></span><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<span><block-text-0/></span>
<block-child-0/>
</div>\`);
function slot1(ctx, node, key = \\"\\") {
return comp1({message: ctx['state'].message}, key + \`__1\`, node, this, null);
}
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['state'].message;
const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
return block1([txt1], [b3]);
const b5 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
const b3 = block3([txt1], [b5]);
return multi([b2, b3]);
}
}"
`;
@@ -639,16 +709,21 @@ exports[`can catch errors can catch an error in the willPatch call 2`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { callSlot } = helpers;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
const b2 = text(\`
\`);
let b4,b5;
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
b4 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default', false, {});
b5 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -694,16 +769,21 @@ exports[`can catch errors can catch an error in the willStart call 2`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { callSlot } = helpers;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
const b2 = text(\`
\`);
let b4,b5;
if (ctx['state'].error) {
b2 = text(\`Error handled\`);
b4 = text(\`Error handled\`);
} else {
b3 = callSlot(ctx, node, key, 'default', false, {});
b5 = callSlot(ctx, node, key, 'default', false, {});
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -730,7 +810,9 @@ exports[`can catch errors can catch an error origination from a child's willStar
const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/>
</div>\`);
function slot1(ctx, node, key = \\"\\") {
const b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -751,7 +833,9 @@ exports[`can catch errors can catch an error origination from a child's willStar
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { callSlot } = helpers;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/><block-child-1/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
@@ -797,16 +881,26 @@ exports[`can catch errors catchError in catchError 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
const b2 = text(\`
\`);
let b4,b5;
if (ctx['error']) {
b2 = text(\`Error\`);
b4 = text(\`Error\`);
} else {
b3 = comp1({}, key + \`__1\`, node, this, null);
const b6 = text(\`
\`);
const b7 = comp1({}, key + \`__1\`, node, this, null);
const b8 = text(\`
\`);
b5 = multi([b6, b7, b8]);
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
return multi([b2, b3]);
}
}"
`;
@@ -817,11 +911,16 @@ exports[`can catch errors catchError in catchError 2`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = comp1({}, key + \`__1\`, node, this, null);
return block1([], [b2]);
const b2 = text(\`
\`);
const b4 = comp1({}, key + \`__1\`, node, this, null);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -849,21 +948,34 @@ exports[`can catch errors catching error, rethrow, render parent -- a main comp
const comp2 = app.createComponent(\`ErrorHandler\`, true, true, false, false);
function slot1(ctx, node, key = \\"\\") {
const b7 = text(\`
\`);
const Comp1 = ctx['cp'].Comp;
return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
const b8 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
const b9 = text(\`
\`);
return multi([b7, b8, b9]);
}
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.values(ctx['state'].cps));;
for (let i1 = 0; i1 < l_block1; i1++) {
ctx[\`cp\`] = v_block1[i1];
const [k_block3, v_block3, l_block3, c_block3] = prepareList(Object.values(ctx['state'].cps));;
for (let i1 = 0; i1 < l_block3; i1++) {
ctx[\`cp\`] = v_block3[i1];
const key1 = ctx['cp'].id;
const b5 = text(\`
\`);
const v1 = ctx['cp'];
const ctx1 = capture(ctx);
c_block1[i1] = withKey(comp2({onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
const b10 = comp2({onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null);
const b11 = text(\`
\`);
c_block3[i1] = withKey(multi([b5, b10, b11]), key1);
}
return list(c_block1);
const b3 = list(c_block3);
return multi([b2, b3]);
}
}"
`;
@@ -927,21 +1039,37 @@ exports[`can catch errors catching in child makes parent render 1`] = `
const comp2 = app.createComponent(\`Catch\`, true, true, false, false);
function slot1(ctx, node, key = \\"\\") {
const b7 = text(\`
\`);
const Comp1 = ctx['elem'][1];
return toggler(Comp1, comp1({id: ctx['elem'][0]}, key + \`__1\`, node, this, Comp1));
const b8 = toggler(Comp1, comp1({id: ctx['elem'][0]}, key + \`__1\`, node, this, Comp1));
const b9 = text(\`
\`);
return multi([b7, b8, b9]);
}
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.entries(this.elements));;
for (let i1 = 0; i1 < l_block1; i1++) {
ctx[\`elem\`] = v_block1[i1];
const [k_block3, v_block3, l_block3, c_block3] = prepareList(Object.entries(this.elements));;
for (let i1 = 0; i1 < l_block3; i1++) {
ctx[\`elem\`] = v_block3[i1];
const key1 = ctx['elem'][0];
const b5 = text(\`
\`);
const v1 = ctx['elem'];
const ctx1 = capture(ctx);
c_block1[i1] = withKey(comp2({onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
const b10 = comp2({onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null);
const b11 = text(\`
\`);
c_block3[i1] = withKey(multi([b5, b10, b11]), key1);
}
return list(c_block1);
ctx = ctx.__proto__;
const b3 = list(c_block3);
const b12 = text(\`
\`);
return multi([b2, b3, b12]);
}
}"
`;
@@ -994,7 +1122,10 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/>
<block-child-1/>
</div>\`);
function slot1(ctx, node, key = \\"\\") {
return comp2({}, key + \`__2\`, node, this, null);
@@ -1025,7 +1156,9 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { callSlot } = helpers;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/><block-child-1/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
@@ -1069,16 +1202,28 @@ exports[`can catch errors onError in class inheritance is called if rethrown 2`]
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
let b2,b6;
if (!ctx['state'].error) {
b2 = text(this.will.crash);
const b3 = text(\`
\`);
const b4 = text(this.will.crash);
const b5 = text(\`
\`);
b2 = multi([b3, b4, b5]);
} else {
b3 = text(ctx['state'].error);
const b7 = text(\`
\`);
const b8 = text(ctx['state'].error);
const b9 = text(\`
\`);
b6 = multi([b7, b8, b9]);
}
return block1([], [b2, b3]);
return block1([], [b2, b6]);
}
}"
`;
@@ -1100,16 +1245,28 @@ exports[`can catch errors onError in class inheritance is not called if no rethr
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block1 = createBlock(\`<div>
<block-child-0/><block-child-1/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
let b2,b6;
if (!ctx['state'].error) {
b2 = text(this.will.crash);
const b3 = text(\`
\`);
const b4 = text(this.will.crash);
const b5 = text(\`
\`);
b2 = multi([b3, b4, b5]);
} else {
b3 = text(ctx['state'].error);
const b7 = text(\`
\`);
const b8 = text(ctx['state'].error);
const b9 = text(\`
\`);
b6 = multi([b7, b8, b9]);
}
return block1([], [b2, b3]);
return block1([], [b2, b6]);
}
}"
`;
tests/components/__snapshots__/event_handling.test.ts.snap
+53 -22
View File
@@ -64,14 +64,20 @@ exports[`event handling input blur event is not called if component is destroyed
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><textarea/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
<textarea/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2;
const b2 = text(\`
\`);
let b4;
if (ctx['state'].cond) {
b2 = comp1({}, key + \`__1\`, node, this, null);
b4 = comp1({}, key + \`__1\`, node, this, null);
}
return block1([], [b2]);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -96,22 +102,33 @@ exports[`event handling objects from scope are properly captured by t-on 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
let block7 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`item\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['items']);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`item\`] = v_block4[i1];
const key1 = ctx['item'];
const b6 = text(\`
\`);
const v1 = ctx['onClick'];
const v2 = ctx['item'];
let hdlr1 = [_ev=>v1(v2.val,_ev), ctx];
c_block2[i1] = withKey(block3([hdlr1]), key1);
const b7 = block7([hdlr1]);
const b8 = text(\`
\`);
c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -121,12 +138,15 @@ exports[`event handling support for callable expression in event handler 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div><block-text-0/><input type=\\"text\\" block-handler-1=\\"input\\"/></div>\`);
let block3 = createBlock(\`<div><block-text-0/><input type=\\"text\\" block-handler-1=\\"input\\"/></div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['state'].value;
let hdlr1 = [ctx['obj'].onInput, ctx];
return block1([txt1, hdlr1]);
const b3 = block3([txt1, hdlr1]);
return multi([b2, b3]);
}
}"
`;
@@ -137,22 +157,33 @@ exports[`event handling t-on with handler bound to dynamic argument on a t-forea
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
let block7 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`item\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['items']);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`item\`] = v_block4[i1];
const key1 = ctx['item'];
const b6 = text(\`
\`);
const v1 = ctx['onClick'];
const v2 = ctx['item'];
let hdlr1 = [_ev=>v1(v2,_ev), ctx];
c_block2[i1] = withKey(block3([hdlr1]), key1);
const b7 = block7([hdlr1]);
const b8 = text(\`
\`);
c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
tests/components/__snapshots__/higher_order_component.test.ts.snap
+35 -10
View File
@@ -34,14 +34,24 @@ exports[`basics can select a sub widget 1`] = `
const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
let b2,b3,b4,b5,b6,b7,b8;
b2 = text(\`
\`);
b3 = text(\`
\`);
if (ctx['env'].options.flag) {
b2 = comp1({}, key + \`__1\`, node, this, null);
b4 = comp1({}, key + \`__1\`, node, this, null);
}
b5 = text(\`
\`);
if (!ctx['env'].options.flag) {
b3 = comp2({}, key + \`__2\`, node, this, null);
b6 = comp2({}, key + \`__2\`, node, this, null);
}
return multi([b2, b3]);
b7 = text(\`
\`);
b8 = text(\`
\`);
return multi([b2, b3, b4, b5, b6, b7, b8]);
}
}"
`;
@@ -80,14 +90,24 @@ exports[`basics can select a sub widget, part 2 1`] = `
const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
let b2,b3,b4,b5,b6,b7,b8;
b2 = text(\`
\`);
b3 = text(\`
\`);
if (ctx['state'].flag) {
b2 = comp1({}, key + \`__1\`, node, this, null);
b4 = comp1({}, key + \`__1\`, node, this, null);
}
b5 = text(\`
\`);
if (!ctx['state'].flag) {
b3 = comp2({}, key + \`__2\`, node, this, null);
b6 = comp2({}, key + \`__2\`, node, this, null);
}
return multi([b2, b3]);
b7 = text(\`
\`);
b8 = text(\`
\`);
return multi([b2, b3, b4, b5, b6, b7, b8]);
}
}"
`;
@@ -135,12 +155,17 @@ exports[`basics sub widget is interactive 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<span><button block-handler-0=\\"click\\">click</button>child<block-text-1/></span>\`);
let block3 = createBlock(\`<span>
<button block-handler-0=\\"click\\">click</button>child<block-text-1/>
</span>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let hdlr1 = [ctx['inc'], ctx];
let txt1 = ctx['state'].val;
return block1([hdlr1, txt1]);
const b3 = block3([hdlr1, txt1]);
return multi([b2, b3]);
}
}"
`;
tests/components/__snapshots__/hooks.test.ts.snap
+30 -11
View File
@@ -5,18 +5,24 @@ exports[`hooks autofocus hook input in a t-if 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><block-child-0/></div>\`);
let block2 = createBlock(\`<input block-ref=\\"0\\"/>\`);
let block3 = createBlock(\`<div>
<input block-ref=\\"0\\"/>
<block-child-0/>
</div>\`);
let block4 = createBlock(\`<input block-ref=\\"0\\"/>\`);
return function template(ctx, node, key = \\"\\") {
const refs = ctx.__owl__.refs;
const ref1 = (el) => refs[\`input1\`] = el;
const ref2 = (el) => refs[\`input2\`] = el;
let b2;
const b2 = text(\`
\`);
let b4;
if (ctx['state'].flag) {
b2 = block2([ref2]);
b4 = block4([ref2]);
}
return block1([ref1], [b2]);
const b3 = block3([ref1], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -26,13 +32,19 @@ exports[`hooks autofocus hook simple input 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><input block-ref=\\"1\\"/></div>\`);
let block3 = createBlock(\`<div>
<input block-ref=\\"0\\"/>
<input block-ref=\\"1\\"/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const refs = ctx.__owl__.refs;
const ref1 = (el) => refs[\`input1\`] = el;
const ref2 = (el) => refs[\`input2\`] = el;
return block1([ref1, ref2]);
const b2 = text(\`
\`);
const b3 = block3([ref1, ref2]);
return multi([b2, b3]);
}
}"
`;
@@ -265,16 +277,23 @@ exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
let block5 = createBlock(\`<div block-ref=\\"0\\"/>\`);
return function template(ctx, node, key = \\"\\") {
const refs = ctx.__owl__.refs;
const ref1 = (el) => refs[\`div\`] = el;
let b2;
let b2,b3;
b2 = text(\`
\`);
if (ctx['state'].value) {
b2 = block2([ref1]);
const b4 = text(\`
\`);
const b5 = block5([ref1]);
const b6 = text(\`
\`);
b3 = multi([b4, b5, b6]);
}
return multi([b2]);
return multi([b2, b3]);
}
}"
`;
tests/components/__snapshots__/lifecycle.test.ts.snap
+70 -26
View File
@@ -51,17 +51,22 @@ exports[`lifecycle hooks component semantics 3`] = `
const comp2 = app.createComponent(\`E\`, true, false, false, true);
const comp3 = app.createComponent(\`F\`, true, false, false, true);
let block1 = createBlock(\`<div>C<block-child-0/><block-child-1/><block-child-2/></div>\`);
let block3 = createBlock(\`<div>C<block-child-0/>
<block-child-1/><block-child-2/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3,b4;
b2 = comp1({}, key + \`__1\`, node, this, null);
const b2 = text(\`
\`);
let b4,b5,b6;
b4 = comp1({}, key + \`__1\`, node, this, null);
if (ctx['state'].flag) {
b3 = comp2({}, key + \`__2\`, node, this, null);
b5 = comp2({}, key + \`__2\`, node, this, null);
} else {
b4 = comp3({}, key + \`__3\`, node, this, null);
b6 = comp3({}, key + \`__3\`, node, this, null);
}
return block1([], [b2, b3, b4]);
const b3 = block3([], [b4, b5, b6]);
return multi([b2, b3]);
}
}"
`;
@@ -111,15 +116,21 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block2 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2;
let b2,b3,b5;
b2 = text(\`
\`);
if (ctx['state'].flag) {
const b3 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
b2 = block2([], [b3]);
const b4 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
b3 = block3([], [b4]);
}
return multi([b2]);
b5 = text(\`
\`);
return multi([b2, b3, b5]);
}
}"
`;
@@ -550,7 +561,10 @@ exports[`lifecycle hooks onWillRender 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
return function template(ctx, node, key = \\"\\") {
return comp1({someValue: ctx['state'].value}, key + \`__1\`, node, this, null);
const b2 = text(\`
\`);
const b3 = comp1({someValue: ctx['state'].value}, key + \`__1\`, node, this, null);
return multi([b2, b3]);
}
}"
`;
@@ -727,11 +741,16 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
return block1([], [b2]);
const b2 = text(\`
\`);
const b4 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
const b3 = block3([], [b4]);
const b5 = text(\`
\`);
return multi([b2, b3, b5]);
}
}"
`;
@@ -742,11 +761,16 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = comp1({n: ctx['props'].n}, key + \`__1\`, node, this, null);
return block1([], [b2]);
const b2 = text(\`
\`);
const b4 = comp1({n: ctx['props'].n}, key + \`__1\`, node, this, null);
const b3 = block3([], [b4]);
const b5 = text(\`
\`);
return multi([b2, b3, b5]);
}
}"
`;
@@ -756,11 +780,16 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div><block-text-0/></div>\`);
let block3 = createBlock(\`<div><block-text-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['props'].n;
return block1([txt1]);
const b3 = block3([txt1]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -822,17 +851,32 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block3 = createBlock(\`<div/>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/>
</div>\`);
let block10 = createBlock(\`<div/>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
const b2 = text(\`
\`);
let b4,b8;
if (ctx['state'].ok) {
b2 = comp1({}, key + \`__1\`, node, this, null);
const b5 = text(\`
\`);
const b6 = comp1({}, key + \`__1\`, node, this, null);
const b7 = text(\`
\`);
b4 = multi([b5, b6, b7]);
} else {
b3 = block3();
const b9 = text(\`
\`);
const b10 = block10();
const b11 = text(\`
\`);
b8 = multi([b9, b10, b11]);
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b8]);
return multi([b2, b3]);
}
}"
`;
tests/components/__snapshots__/props.test.ts.snap
+54 -19
View File
@@ -37,16 +37,27 @@ exports[`basics arrow functions as prop correctly capture their scope 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);;
for (let i1 = 0; i1 < l_block1; i1++) {
ctx[\`item\`] = v_block1[i1];
const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['items']);;
for (let i1 = 0; i1 < l_block3; i1++) {
ctx[\`item\`] = v_block3[i1];
const key1 = ctx['item'].val;
const b5 = text(\`
\`);
const v1 = ctx['onClick'];
const v2 = ctx['item'];
c_block1[i1] = withKey(comp1({onClick: _ev=>v1(v2.val,_ev)}, key + \`__1__\${key1}\`, node, this, null), key1);
const b6 = comp1({onClick: _ev=>v1(v2.val,_ev)}, key + \`__1__\${key1}\`, node, this, null);
const b7 = text(\`
\`);
c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
}
return list(c_block1);
ctx = ctx.__proto__;
const b3 = list(c_block3);
const b8 = text(\`
\`);
return multi([b2, b3, b8]);
}
}"
`;
@@ -153,19 +164,25 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
let { isBoundary, withDefault, LazyValue } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block2 = createBlock(\`<p>43</p>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
let block4 = createBlock(\`<p>43</p>\`);
function value1(ctx, node, key = \\"\\") {
return block2();
return block4();
}
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
ctx[\`abc\`] = new LazyValue(value1, ctx, this, node);
const b3 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
return block1([], [b3]);
const b5 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
const b3 = block3([], [b5]);
return multi([b2, b3]);
}
}"
`;
@@ -176,12 +193,18 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { safeOutput } = helpers;
let block1 = createBlock(\`<span><block-text-0/><block-child-0/></span>\`);
let block3 = createBlock(\`<span>
<block-text-0/>
<block-child-0/>
</span>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['props'].val;
const b2 = safeOutput(ctx['props'].val);
return block1([txt1], [b2]);
const b4 = safeOutput(ctx['props'].val);
const b3 = block3([txt1], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -193,14 +216,20 @@ exports[`basics t-set with a body expression can be used as textual prop 1`] = `
let { isBoundary, withDefault, setContextValue } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
setContextValue(ctx, \\"abc\\", \`42\`);
const b2 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
return block1([], [b2]);
const b4 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -226,14 +255,20 @@ exports[`basics t-set works 1`] = `
let { isBoundary, withDefault, setContextValue } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
setContextValue(ctx, \\"val\\", 42);
const b2 = comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
return block1([], [b2]);
const b4 = comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
tests/components/__snapshots__/reactivity.test.ts.snap
+25 -8
View File
@@ -99,11 +99,16 @@ exports[`reactivity in lifecycle change state while mounting component 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div><block-text-0/></div>\`);
let block3 = createBlock(\`<div><block-text-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['state'].val;
return block1([txt1]);
const b3 = block3([txt1]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -114,14 +119,21 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2;
const b2 = text(\`
\`);
let b4;
if (ctx['state'].flag) {
b2 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
b4 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
}
return block1([], [b2]);
const b3 = block3([], [b4]);
const b5 = text(\`
\`);
return multi([b2, b3, b5]);
}
}"
`;
@@ -131,12 +143,17 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
let block3 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['props'].val;
let txt2 = ctx['state'].n;
return block1([txt1, txt2]);
const b3 = block3([txt1, txt2]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
tests/components/__snapshots__/refs.test.ts.snap
+57 -19
View File
@@ -21,19 +21,31 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { multiRefSetter } = helpers;
let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
let block5 = createBlock(\`<div block-ref=\\"0\\"/>\`);
let block9 = createBlock(\`<span block-ref=\\"0\\"/>\`);
return function template(ctx, node, key = \\"\\") {
const refs = ctx.__owl__.refs;
const ref1 = multiRefSetter(refs, \`coucou\`);
let b2,b3;
let b2,b3,b7;
b2 = text(\`
\`);
if (ctx['state'].value) {
b2 = block2([ref1]);
const b4 = text(\`
\`);
const b5 = block5([ref1]);
const b6 = text(\`
\`);
b3 = multi([b4, b5, b6]);
} else {
b3 = block3([ref1]);
const b8 = text(\`
\`);
const b9 = block9([ref1]);
const b10 = text(\`
\`);
b7 = multi([b8, b9, b10]);
}
return multi([b2, b3]);
return multi([b2, b3, b7]);
}
}"
`;
@@ -44,17 +56,23 @@ exports[`refs refs and recursive templates 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Test\`, true, false, false, false);
let block1 = createBlock(\`<p block-ref=\\"0\\"><block-text-1/><block-child-0/></p>\`);
let block3 = createBlock(\`<p block-ref=\\"0\\">
<block-text-1/>
<block-child-0/>
</p>\`);
return function template(ctx, node, key = \\"\\") {
const refs = ctx.__owl__.refs;
const ref1 = (el) => refs[\`root\`] = el;
let b2;
const b2 = text(\`
\`);
let b4;
let txt1 = ctx['props'].tree.value;
if (ctx['props'].tree.child) {
b2 = comp1({tree: ctx['props'].tree.child}, key + \`__1\`, node, this, null);
b4 = comp1({tree: ctx['props'].tree.child}, key + \`__1\`, node, this, null);
}
return block1([ref1, txt1], [b2]);
const b3 = block3([ref1, txt1], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -66,21 +84,37 @@ exports[`refs refs are properly bound in slots 1`] = `
let { capture, markRaw } = helpers;
const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
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>\`);
let block3 = createBlock(\`<div>
<span class=\\"counter\\"><block-text-0/></span>
<block-child-0/>
</div>\`);
let block4 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
function slot1(ctx, node, key = \\"\\") {
const refs = ctx.__owl__.refs;
const ref1 = (el) => refs[\`myButton\`] = el;
let hdlr1 = [ctx['doSomething'], ctx];
return block2([hdlr1, ref1]);
return block4([hdlr1, ref1]);
}
function slot2(ctx, node, key = \\"\\") {
const b6 = text(\`
\`);
const b7 = text(\`
\`);
return multi([b6, b7]);
}
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['state'].val;
const ctx1 = capture(ctx);
const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
return block1([txt1], [b3]);
const b8 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
const b3 = block3([txt1], [b8]);
const b9 = text(\`
\`);
return multi([b2, b3, b9]);
}
}"
`;
@@ -106,15 +140,19 @@ exports[`refs throws if there are 2 same refs at the same time 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { multiRefSetter } = helpers;
let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
let block3 = createBlock(\`<div block-ref=\\"0\\"/>\`);
let block5 = createBlock(\`<span block-ref=\\"0\\"/>\`);
return function template(ctx, node, key = \\"\\") {
const refs = ctx.__owl__.refs;
const ref1 = multiRefSetter(refs, \`coucou\`);
const b2 = block2([ref1]);
const b2 = text(\`
\`);
const b3 = block3([ref1]);
return multi([b2, b3]);
const b4 = text(\`
\`);
const b5 = block5([ref1]);
return multi([b2, b3, b4, b5]);
}
}"
`;
tests/components/__snapshots__/rendering.test.ts.snap
+54 -15
View File
@@ -7,9 +7,15 @@ exports[`children, default props and renderings 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
return function template(ctx, node, key = \\"\\") {
const b2 = text(ctx['state'].value);
const b3 = comp1({}, key + \`__1\`, node, this, null);
return multi([b2, b3]);
const b2 = text(\`
\`);
const b3 = text(ctx['state'].value);
const b4 = text(\`
\`);
const b5 = comp1({}, key + \`__1\`, node, this, null);
const b6 = text(\`
\`);
return multi([b2, b3, b4, b5, b6]);
}
}"
`;
@@ -69,9 +75,15 @@ exports[`rendering semantics can force a render to update sub tree 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
return function template(ctx, node, key = \\"\\") {
const b2 = text(ctx['state'].value);
const b3 = comp1({}, key + \`__1\`, node, this, null);
return multi([b2, b3]);
const b2 = text(\`
\`);
const b3 = text(ctx['state'].value);
const b4 = text(\`
\`);
const b5 = comp1({}, key + \`__1\`, node, this, null);
const b6 = text(\`
\`);
return multi([b2, b3, b4, b5, b6]);
}
}"
`;
@@ -94,9 +106,15 @@ exports[`rendering semantics can render a parent without rendering child 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
return function template(ctx, node, key = \\"\\") {
const b2 = text(ctx['state'].value);
const b3 = comp1({}, key + \`__1\`, node, this, null);
return multi([b2, b3]);
const b2 = text(\`
\`);
const b3 = text(ctx['state'].value);
const b4 = text(\`
\`);
const b5 = comp1({}, key + \`__1\`, node, this, null);
const b6 = text(\`
\`);
return multi([b2, b3, b4, b5, b6]);
}
}"
`;
@@ -119,7 +137,12 @@ exports[`rendering semantics props are reactive (nested prop) 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
return function template(ctx, node, key = \\"\\") {
return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
const b2 = text(\`
\`);
const b3 = comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -142,7 +165,12 @@ exports[`rendering semantics props are reactive 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
return function template(ctx, node, key = \\"\\") {
return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
const b2 = text(\`
\`);
const b3 = comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -165,9 +193,15 @@ exports[`rendering semantics render need a boolean = true to be 'deep' 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
return function template(ctx, node, key = \\"\\") {
const b2 = text(ctx['state'].value);
const b3 = comp1({}, key + \`__1\`, node, this, null);
return multi([b2, b3]);
const b2 = text(\`
\`);
const b3 = text(ctx['state'].value);
const b4 = text(\`
\`);
const b5 = comp1({}, key + \`__1\`, node, this, null);
const b6 = text(\`
\`);
return multi([b2, b3, b4, b5, b6]);
}
}"
`;
@@ -255,7 +289,12 @@ exports[`rendering semantics works as expected for dynamic number of props 1`] =
const comp1 = app.createComponent(\`Child\`, true, false, true, false);
return function template(ctx, node, key = \\"\\") {
return comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
const b2 = text(\`
\`);
const b3 = comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
tests/components/__snapshots__/slots.test.ts.snap
+1140 -354
View File
File diff suppressed because it is too large Load Diff
tests/components/__snapshots__/style_class.test.ts.snap
+15 -5
View File
@@ -124,10 +124,15 @@ exports[`style and class handling can set style and class inside component 1`] =
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div style=\\"font-weight:bold;\\" class=\\"some-class\\">world</div>\`);
let block3 = createBlock(\`<div style=\\"font-weight:bold;\\" class=\\"some-class\\">world</div>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
const b2 = text(\`
\`);
const b3 = block3();
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -452,11 +457,16 @@ exports[`style and class handling t-att-class is properly added/removed on widge
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = comp1({class: {b:ctx['state'].b}}, key + \`__1\`, node, this, null);
return block1([], [b2]);
const b2 = text(\`
\`);
const b4 = comp1({class: {b:ctx['state'].b}}, key + \`__1\`, node, this, null);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
tests/components/__snapshots__/t_call.test.ts.snap
+102 -39
View File
@@ -8,12 +8,17 @@ exports[`t-call dynamic t-call 1`] = `
const call = app.callTemplate.bind(app);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
ctx[isBoundary] = 1;
const b1 = text(\` owl \`);
ctx[zero] = b1;
const b3 = text(\`
owl
\`);
ctx[zero] = b3;
const template1 = (ctx['current'].template);
return call(this, template1, ctx, node, key + \`__1\`);
const b4 = call(this, template1, ctx, node, key + \`__1\`);
return multi([b2, b4]);
}
}"
`;
@@ -90,13 +95,16 @@ exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const call = app.callTemplate.bind(app);
let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
let block3 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const template1 = ('__template__999');
const b2 = call(this, template1, ctx, node, key + \`__1\`);
const b4 = call(this, template1, ctx, node, key + \`__1\`);
let txt1 = ctx['counter'];
return block1([txt1], [b2]);
const b3 = block3([txt1], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -121,12 +129,15 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const callTemplate_1 = app.getTemplate(\`__template__999\`);
let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
let block3 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
const b2 = text(\`
\`);
const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
let txt1 = ctx['counter'];
return block1([txt1], [b2]);
const b3 = block3([txt1], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -259,16 +270,22 @@ exports[`t-call recursive t-call binding this -- static t-call 1`] = `
let { isBoundary, withDefault, setContextValue } = helpers;
const callTemplate_1 = app.getTemplate(\`recursive\`);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
ctx = Object.create(ctx);
ctx[isBoundary] = 1;
setContextValue(ctx, \\"level\\", 0);
const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
return block1([], [b2]);
const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
ctx = ctx.__proto__;
const b3 = block3([], [b4]);
const b5 = text(\`
\`);
return multi([b2, b3, b5]);
}
}"
`;
@@ -277,27 +294,43 @@ exports[`t-call recursive t-call binding this -- static t-call 2`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { isBoundary, withDefault, setContextValue } = helpers;
let { isBoundary, withDefault, setContextValue, zero } = helpers;
const callTemplate_1 = app.getTemplate(\`recursive\`);
let block3 = createBlock(\`<div block-handler-0=\\"click.stop\\"><block-text-1/></div>\`);
let block5 = createBlock(\`<div block-handler-0=\\"click.stop\\"><block-text-1/></div>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
let b2;
let b2,b3,b12;
b2 = text(\`
\`);
if (ctx['level']<2) {
const b4 = text(\`
\`);
let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(this), ctx];
let txt1 = ctx['level'];
const b3 = block3([hdlr1, txt1]);
const b5 = block5([hdlr1, txt1]);
const b6 = text(\`
\`);
ctx = Object.create(ctx);
ctx[isBoundary] = 1;
const b8 = text(\`
\`);
setContextValue(ctx, \\"level\\", ctx['level']+1);
const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
const b9 = text(\`
\`);
const b7 = multi([b8, b9]);
ctx[zero] = b7;
const b10 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
ctx = ctx.__proto__;
b2 = multi([b3, b4]);
const b11 = text(\`
\`);
b3 = multi([b4, b5, b6, b10, b11]);
}
return multi([b2]);
b12 = text(\`
\`);
return multi([b2, b3, b12]);
}
}"
`;
@@ -309,17 +342,24 @@ exports[`t-call sub components in two t-calls 1`] = `
const callTemplate_1 = app.getTemplate(\`sub\`);
const callTemplate_2 = app.getTemplate(\`sub\`);
let block3 = createBlock(\`<div><block-child-0/></div>\`);
let block7 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
let b2,b3,b7;
b2 = text(\`
\`);
if (ctx['state'].val===1) {
b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
const b4 = text(\`
\`);
const b5 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
const b6 = text(\`
\`);
b3 = multi([b4, b5, b6]);
} else {
const b4 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
b3 = block3([], [b4]);
const b8 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
b7 = block7([], [b8]);
}
return multi([b2, b3]);
return multi([b2, b3, b7]);
}
}"
`;
@@ -357,22 +397,33 @@ exports[`t-call t-call in t-foreach and children component 1`] = `
let { prepareList, withKey } = helpers;
const callTemplate_1 = app.getTemplate(\`__template__999\`);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b','c']);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`val\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(['a','b','c']);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`val\`] = v_block4[i1];
ctx[\`val_first\`] = i1 === 0;
ctx[\`val_last\`] = i1 === v_block2.length - 1;
ctx[\`val_last\`] = i1 === v_block4.length - 1;
ctx[\`val_index\`] = i1;
ctx[\`val_value\`] = k_block2[i1];
ctx[\`val_value\`] = k_block4[i1];
const key1 = ctx['val'];
c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
const b6 = text(\`
\`);
const b7 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
const b8 = text(\`
\`);
c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -410,8 +461,11 @@ exports[`t-call t-call with t-call-context and subcomponent 1`] = `
const callTemplate_1 = app.getTemplate(\`someTemplate\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let ctx1 = ctx['subctx'];
return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
const b3 = callTemplate_1.call(this, ctx1, node, key + \`__1\`);
return multi([b2, b3]);
}
}"
`;
@@ -424,9 +478,15 @@ exports[`t-call t-call with t-call-context and subcomponent 2`] = `
const comp2 = app.createComponent(\`Child\`, true, false, false, false);
return function template(ctx, node, key = \\"\\") {
const b2 = comp1({name: ctx['aab']}, key + \`__1\`, node, this, null);
const b3 = comp2({name: ctx['lpe']}, key + \`__2\`, node, this, null);
return multi([b2, b3]);
const b2 = text(\`
\`);
const b3 = comp1({name: ctx['aab']}, key + \`__1\`, node, this, null);
const b4 = text(\`
\`);
const b5 = comp2({name: ctx['lpe']}, key + \`__2\`, node, this, null);
const b6 = text(\`
\`);
return multi([b2, b3, b4, b5, b6]);
}
}"
`;
@@ -451,8 +511,11 @@ exports[`t-call t-call with t-call-context, simple use 1`] = `
const callTemplate_1 = app.getTemplate(\`someTemplate\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let ctx1 = ctx['subctx'];
return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
const b3 = callTemplate_1.call(this, ctx1, node, key + \`__1\`);
return multi([b2, b3]);
}
}"
`;
tests/components/__snapshots__/t_component.test.ts.snap
+13 -5
View File
@@ -6,12 +6,17 @@ exports[`t-component can switch between dynamic components without the need for
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(null, false, false, false, true);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const Comp1 = ctx['constructor'].components[ctx['state'].child];
const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
return block1([], [b2]);
const b4 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -143,13 +148,16 @@ exports[`t-component modifying a sub widget 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
let block3 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['state'].counter;
const v1 = ctx['state'];
let hdlr1 = [()=>v1.counter++, ctx];
return block1([txt1, hdlr1]);
const b3 = block3([txt1, hdlr1]);
return multi([b2, b3]);
}
}"
`;
tests/components/__snapshots__/t_foreach.test.ts.snap
+197 -82
View File
@@ -7,20 +7,35 @@ exports[`list of components components in a node in a t-foreach 1`] = `
let { prepareList, withKey } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><ul><block-child-0/></ul></div>\`);
let block3 = createBlock(\`<li><block-child-0/></li>\`);
let block3 = createBlock(\`<div>
<ul>
<block-child-0/>
</ul>
</div>\`);
let block7 = createBlock(\`<li>
<block-child-0/>
</li>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`item\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['items']);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`item\`] = v_block4[i1];
const key1 = 'li_'+ctx['item'];
const b4 = comp1({item: ctx['item']}, key + \`__1__\${key1}\`, node, this, null);
c_block2[i1] = withKey(block3([], [b4]), key1);
const b6 = text(\`
\`);
const b8 = comp1({item: ctx['item']}, key + \`__1__\${key1}\`, node, this, null);
const b7 = block7([], [b8]);
const b9 = text(\`
\`);
c_block4[i1] = withKey(multi([b6, b7, b9]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -47,19 +62,30 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block1, v_block1, l_block1, c_block1] = prepareList([1,2]);;
const keys1 = new Set();
for (let i1 = 0; i1 < l_block1; i1++) {
ctx[\`item\`] = v_block1[i1];
const [k_block3, v_block3, l_block3, c_block3] = prepareList([1,2]);;
const keys3 = new Set();
for (let i1 = 0; i1 < l_block3; i1++) {
ctx[\`item\`] = v_block3[i1];
const key1 = 'child';
if (keys1.has(key1)) { throw new Error(\`Got duplicate key in t-foreach: \${key1}\`)}
keys1.add(key1);
if (keys3.has(key1)) { throw new Error(\`Got duplicate key in t-foreach: \${key1}\`)}
keys3.add(key1);
const b5 = text(\`
\`);
const props1 = {};
helpers.validateProps(\`Child\`, props1, ctx);
c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
const b6 = comp1(props1, key + \`__1__\${key1}\`, node, this, null);
const b7 = text(\`
\`);
c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
}
return list(c_block1);
ctx = ctx.__proto__;
const b3 = list(c_block3);
const b8 = text(\`
\`);
return multi([b2, b3, b8]);
}
}"
`;
@@ -82,20 +108,28 @@ exports[`list of components list of sub components inside other nodes 1`] = `
let { prepareList, withKey } = helpers;
const comp1 = app.createComponent(\`SubComponent\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
let block5 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`blip\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].blips);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`blip\`] = v_block4[i1];
const key1 = ctx['blip'].id;
const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
c_block2[i1] = withKey(block3([], [b4]), key1);
const b6 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
c_block4[i1] = withKey(block5([], [b6]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -120,28 +154,44 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
let { prepareList, withKey } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].s);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`section\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].s);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`section\`] = v_block4[i1];
ctx[\`section_index\`] = i1;
const key1 = ctx['section_index'];
const b6 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['section'].blips);;
for (let i2 = 0; i2 < l_block3; i2++) {
ctx[\`blip\`] = v_block3[i2];
const [k_block7, v_block7, l_block7, c_block7] = prepareList(ctx['section'].blips);;
for (let i2 = 0; i2 < l_block7; i2++) {
ctx[\`blip\`] = v_block7[i2];
ctx[\`blip_index\`] = i2;
const key2 = ctx['blip_index'];
c_block3[i2] = withKey(comp1({blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
const b9 = text(\`
\`);
const b10 = comp1({blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
const b11 = text(\`
\`);
c_block7[i2] = withKey(multi([b9, b10, b11]), key2);
}
ctx = ctx.__proto__;
c_block2[i1] = withKey(list(c_block3), key1);
const b7 = list(c_block7);
const b12 = text(\`
\`);
c_block4[i1] = withKey(multi([b6, b7, b12]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -167,30 +217,40 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
let { prepareList, withKey } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<p><block-child-0/></p>\`);
let block5 = createBlock(\`<p><block-child-0/></p>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
let block5 = createBlock(\`<p>
<block-child-0/>
</p>\`);
let block7 = createBlock(\`<p>
<block-child-0/>
</p>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].rows);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`row\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].rows);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`row\`] = v_block4[i1];
const key1 = ctx['row'];
ctx = Object.create(ctx);
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].cols);;
for (let i2 = 0; i2 < l_block4; i2++) {
ctx[\`col\`] = v_block4[i2];
const [k_block6, v_block6, l_block6, c_block6] = prepareList(ctx['state'].cols);;
for (let i2 = 0; i2 < l_block6; i2++) {
ctx[\`col\`] = v_block6[i2];
const key2 = ctx['col'];
const b6 = comp1({row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
c_block4[i2] = withKey(block5([], [b6]), key2);
const b8 = comp1({row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
c_block6[i2] = withKey(block7([], [b8]), key2);
}
ctx = ctx.__proto__;
const b4 = list(c_block4);
c_block2[i1] = withKey(block3([], [b4]), key1);
const b6 = list(c_block6);
c_block4[i1] = withKey(block5([], [b6]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -217,14 +277,22 @@ exports[`list of components simple list 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state'].elems);;
for (let i1 = 0; i1 < l_block1; i1++) {
ctx[\`elem\`] = v_block1[i1];
const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['state'].elems);;
for (let i1 = 0; i1 < l_block3; i1++) {
ctx[\`elem\`] = v_block3[i1];
const key1 = ctx['elem'].id;
c_block1[i1] = withKey(comp1({value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, this, null), key1);
const b5 = text(\`
\`);
const b6 = comp1({value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, this, null);
const b7 = text(\`
\`);
c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
}
return list(c_block1);
const b3 = list(c_block3);
return multi([b2, b3]);
}
}"
`;
@@ -250,18 +318,29 @@ exports[`list of components sub components rendered in a loop 1`] = `
let { prepareList, withKey } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`number\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].numbers);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`number\`] = v_block4[i1];
const key1 = ctx['number'];
c_block2[i1] = withKey(comp1({n: ctx['number']}, key + \`__1__\${key1}\`, node, this, null), key1);
const b6 = text(\`
\`);
const b7 = comp1({n: ctx['number']}, key + \`__1__\${key1}\`, node, this, null);
const b8 = text(\`
\`);
c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -287,18 +366,29 @@ exports[`list of components sub components with some state rendered in a loop 1`
let { prepareList, withKey } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`number\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].numbers);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`number\`] = v_block4[i1];
const key1 = ctx['number'];
c_block2[i1] = withKey(comp1({}, key + \`__1__\${key1}\`, node, this, null), key1);
const b6 = text(\`
\`);
const b7 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
const b8 = text(\`
\`);
c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -324,7 +414,9 @@ exports[`list of components switch component position 1`] = `
let { prepareList, withKey } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<span><block-child-0/></span>\`);
let block1 = createBlock(\`<span>
<block-child-0/>
</span>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
@@ -332,8 +424,14 @@ exports[`list of components switch component position 1`] = `
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`c\`] = v_block2[i1];
const key1 = ctx['c'];
c_block2[i1] = withKey(comp1({key: ctx['c']}, key + \`__1__\${key1}\`, node, this, null), key1);
const b4 = text(\`
\`);
const b5 = comp1({key: ctx['c']}, key + \`__1__\${key1}\`, node, this, null);
const b6 = text(\`
\`);
c_block2[i1] = withKey(multi([b4, b5, b6]), key1);
}
ctx = ctx.__proto__;
const b2 = list(c_block2);
return block1([], [b2]);
}
@@ -361,19 +459,30 @@ exports[`list of components t-foreach with t-component, and update 1`] = `
let { prepareList, withKey } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(2));;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`n\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(Array(2));;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`n\`] = v_block4[i1];
ctx[\`n_index\`] = i1;
const key1 = ctx['n_index'];
c_block2[i1] = withKey(comp1({val: ctx['n_index']}, key + \`__1__\${key1}\`, node, this, null), key1);
const b6 = text(\`
\`);
const b7 = comp1({val: ctx['n_index']}, key + \`__1__\${key1}\`, node, this, null);
const b8 = text(\`
\`);
c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -383,12 +492,18 @@ exports[`list of components t-foreach with t-component, and update 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
let block3 = createBlock(\`<span>
<block-text-0/>
<block-text-1/>
</span>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['state'].val;
let txt2 = ctx['props'].val;
return block1([txt1, txt2]);
const b3 = block3([txt1, txt2]);
return multi([b2, b3]);
}
}"
`;
tests/components/__snapshots__/t_key.test.ts.snap
+35 -9
View File
@@ -7,7 +7,9 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
let { prepareList, withKey } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<span><block-child-0/></span>\`);
let block1 = createBlock(\`<span>
<block-child-0/>
</span>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
@@ -15,9 +17,15 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`c\`] = v_block2[i1];
const key1 = ctx['c'];
const b4 = text(\`
\`);
const tKey_1 = ctx['key1'];
c_block2[i1] = withKey(comp1({key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, node, this, null), tKey_1 + key1);
const b5 = toggler(tKey_1, comp1({key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, node, this, null));
const b6 = text(\`
\`);
c_block2[i1] = withKey(multi([b4, b5, b6]), key1);
}
ctx = ctx.__proto__;
const b2 = list(c_block2);
return block1([], [b2]);
}
@@ -102,7 +110,10 @@ exports[`t-key t-key on multiple Components 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const comp2 = app.createComponent(\`Child\`, true, false, false, false);
let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
let block1 = createBlock(\`<span>
<block-child-0/>
<block-child-1/>
</span>\`);
return function template(ctx, node, key = \\"\\") {
const tKey_1 = ctx['key1'];
@@ -136,7 +147,10 @@ exports[`t-key t-key on multiple Components with t-call 1 1`] = `
const callTemplate_1 = app.getTemplate(\`calledTemplate\`);
const callTemplate_2 = app.getTemplate(\`calledTemplate\`);
let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
let block1 = createBlock(\`<span>
<block-child-0/>
<block-child-1/>
</span>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
@@ -150,6 +164,7 @@ exports[`t-key t-key on multiple Components with t-call 1 1`] = `
ctx[isBoundary] = 1;
setContextValue(ctx, \\"key\\", ctx['key2']);
const b3 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
ctx = ctx.__proto__;
return block1([], [b2, b3]);
}
}"
@@ -162,8 +177,13 @@ exports[`t-key t-key on multiple Components with t-call 1 2`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const tKey_1 = ctx['key'];
return toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
const b3 = toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -188,7 +208,9 @@ exports[`t-key t-key on multiple Components with t-call 2 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const callTemplate_1 = app.getTemplate(\`calledTemplate\`);
let block1 = createBlock(\`<span><block-child-0/></span>\`);
let block1 = createBlock(\`<span>
<block-child-0/>
</span>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
@@ -205,11 +227,15 @@ exports[`t-key t-key on multiple Components with t-call 2 2`] = `
const comp2 = app.createComponent(\`Child\`, true, false, false, false);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const tKey_1 = ctx['key1'];
const b2 = toggler(tKey_1, comp1({key: ctx['key1']}, tKey_1 + key + \`__1\`, node, this, null));
const b3 = toggler(tKey_1, comp1({key: ctx['key1']}, tKey_1 + key + \`__1\`, node, this, null));
const tKey_2 = ctx['key2'];
const b3 = toggler(tKey_2, comp2({key: ctx['key2']}, tKey_2 + key + \`__2\`, node, this, null));
return multi([b2, b3]);
const b4 = toggler(tKey_2, comp2({key: ctx['key2']}, tKey_2 + key + \`__2\`, node, this, null));
const b5 = text(\`
\`);
return multi([b2, b3, b4, b5]);
}
}"
`;
tests/components/__snapshots__/t_model.test.ts.snap
+290 -75
View File
@@ -6,15 +6,23 @@ exports[`t-model directive .lazy modifier 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`);
let block3 = createBlock(\`<div>
<input block-attribute-0=\\"value\\" block-handler-1=\\"change\\"/>
<span><block-text-2/></span>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const bExpr1 = ctx['state'];
const expr1 = 'text';
let attr1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = ctx['state'].text;
return block1([attr1, hdlr1, txt1]);
const b3 = block3([attr1, hdlr1, txt1]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -25,15 +33,23 @@ exports[`t-model directive .number modifier 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
let block3 = createBlock(\`<div>
<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
<span><block-text-2/></span>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const bExpr1 = ctx['state'];
const expr1 = 'number';
let attr1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = toNumber(ev.target.value); }];
let txt1 = ctx['state'].number;
return block1([attr1, hdlr1, txt1]);
const b3 = block3([attr1, hdlr1, txt1]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -44,15 +60,23 @@ exports[`t-model directive .trim modifier 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
let block3 = createBlock(\`<div>
<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
<span><block-text-2/></span>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const bExpr1 = ctx['state'];
const expr1 = 'text';
let attr1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value.trim(); }];
let txt1 = ctx['state'].text;
return block1([attr1, hdlr1, txt1]);
const b3 = block3([attr1, hdlr1, txt1]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -63,15 +87,21 @@ exports[`t-model directive basic use, on an input 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
let block3 = createBlock(\`<div>
<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
<span><block-text-2/></span>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const bExpr1 = ctx['state'];
const expr1 = 'text';
let attr1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = ctx['state'].text;
return block1([attr1, hdlr1, txt1]);
const b3 = block3([attr1, hdlr1, txt1]);
return multi([b2, b3]);
}
}"
`;
@@ -82,15 +112,21 @@ exports[`t-model directive basic use, on an input with bracket expression 1`] =
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
let block3 = createBlock(\`<div>
<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
<span><block-text-2/></span>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const bExpr1 = ctx['state'];
const expr1 = 'text';
let attr1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = ctx['state'].text;
return block1([attr1, hdlr1, txt1]);
const b3 = block3([attr1, hdlr1, txt1]);
return multi([b2, b3]);
}
}"
`;
@@ -101,7 +137,10 @@ exports[`t-model directive basic use, on another key in component 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
let block1 = createBlock(\`<div>
<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
<span><block-text-2/></span>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['some'];
@@ -120,15 +159,22 @@ exports[`t-model directive can also define t-on directive on same event, part 1
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-handler-0=\\"input\\" block-attribute-1=\\"value\\" block-handler-2=\\"input\\"/></div>\`);
let block3 = createBlock(\`<div>
<input block-handler-0=\\"input\\" block-attribute-1=\\"value\\" block-handler-2=\\"input\\"/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let hdlr1 = [ctx['onInput'], ctx];
const bExpr1 = ctx['state'];
const expr1 = 'text';
let attr1 = bExpr1[expr1];
let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
return block1([hdlr1, attr1, hdlr2]);
const b3 = block3([hdlr1, attr1, hdlr2]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -139,9 +185,15 @@ exports[`t-model directive can also define t-on directive on same event, part 2
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-handler-0=\\"click\\" block-attribute-1=\\"checked\\" block-handler-2=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-handler-3=\\"click\\" block-attribute-4=\\"checked\\" block-handler-5=\\"click\\"/><input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-handler-6=\\"click\\" block-attribute-7=\\"checked\\" block-handler-8=\\"click\\"/></div>\`);
let block3 = createBlock(\`<div>
<input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-handler-0=\\"click\\" block-attribute-1=\\"checked\\" block-handler-2=\\"click\\"/>
<input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-handler-3=\\"click\\" block-attribute-4=\\"checked\\" block-handler-5=\\"click\\"/>
<input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-handler-6=\\"click\\" block-attribute-7=\\"checked\\" block-handler-8=\\"click\\"/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let hdlr1 = [ctx['onClick'], ctx];
const bExpr1 = ctx['state'];
const expr1 = 'choice';
@@ -157,7 +209,10 @@ exports[`t-model directive can also define t-on directive on same event, part 2
const expr3 = 'choice';
let attr3 = bExpr3[expr3] === 'Three';
let hdlr6 = [(ev) => { bExpr3[expr3] = ev.target.value; }];
return block1([hdlr1, attr1, hdlr2, hdlr3, attr2, hdlr4, hdlr5, attr3, hdlr6]);
const b3 = block3([hdlr1, attr1, hdlr2, hdlr3, attr2, hdlr4, hdlr5, attr3, hdlr6]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -168,17 +223,25 @@ exports[`t-model directive following a scope protecting directive (e.g. t-set) 1
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { isBoundary, withDefault, setContextValue, toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/></div>\`);
let block3 = createBlock(\`<div>
<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
setContextValue(ctx, \\"admiral\\", 'Bruno');
const bExpr1 = ctx['state'];
const expr1 = 'text';
let attr1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
return block1([attr1, hdlr1]);
const b3 = block3([attr1, hdlr1]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -189,23 +252,36 @@ exports[`t-model directive in a t-foreach 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, toNumber, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
let block7 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`thing\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state']);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`thing\`] = v_block4[i1];
const key1 = ctx['thing'].id;
const b6 = text(\`
\`);
const bExpr1 = ctx['thing'];
const expr1 = 'f';
let attr1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.checked; }];
c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
const b7 = block7([attr1, hdlr1]);
const b8 = text(\`
\`);
c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
const b9 = text(\`
\`);
return multi([b2, b3, b9]);
}
}"
`;
@@ -216,24 +292,37 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, toNumber, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
let block7 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`thing\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state']);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`thing\`] = v_block4[i1];
ctx[\`thing_index\`] = i1;
const key1 = ctx['thing_index'];
const b6 = text(\`
\`);
const bExpr1 = ctx['state'];
const expr1 = ctx['thing_index'];
let attr1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
const b7 = block7([attr1, hdlr1]);
const b8 = text(\`
\`);
c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
const b9 = text(\`
\`);
return multi([b2, b3, b9]);
}
}"
`;
@@ -244,24 +333,37 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, toNumber, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
let block7 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['names']);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`name\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['names']);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`name\`] = v_block4[i1];
ctx[\`name_index\`] = i1;
const key1 = ctx['name_index'];
const b6 = text(\`
\`);
const bExpr1 = ctx['state'].values;
const expr1 = ctx['name'];
let attr1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
const b7 = block7([attr1, hdlr1]);
const b8 = text(\`
\`);
c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
const b9 = text(\`
\`);
return multi([b2, b3, b9]);
}
}"
`;
@@ -272,7 +374,14 @@ exports[`t-model directive on a select 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select><span>Choice: <block-text-2/></span></div>\`);
let block1 = createBlock(\`<div>
<select block-attribute-0=\\"value\\" block-handler-1=\\"change\\">
<option value=\\"\\">Please select one</option>
<option value=\\"red\\">Red</option>
<option value=\\"blue\\">Blue</option>
</select>
<span>Choice: <block-text-2/></span>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state'];
@@ -291,14 +400,25 @@ exports[`t-model directive on a select, initial state 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select></div>\`);
let block3 = createBlock(\`<div>
<select block-attribute-0=\\"value\\" block-handler-1=\\"change\\">
<option value=\\"\\">Please select one</option>
<option value=\\"red\\">Red</option>
<option value=\\"blue\\">Blue</option>
</select>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const bExpr1 = ctx['state'];
const expr1 = 'color';
let attr1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
return block1([attr1, hdlr1]);
const b3 = block3([attr1, hdlr1]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -309,15 +429,23 @@ exports[`t-model directive on a sub state key 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
let block3 = createBlock(\`<div>
<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
<span><block-text-2/></span>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const bExpr1 = ctx['state'].something;
const expr1 = 'text';
let attr1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = ctx['state'].something.text;
return block1([attr1, hdlr1, txt1]);
const b3 = block3([attr1, hdlr1, txt1]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -328,7 +456,11 @@ exports[`t-model directive on an input type=radio 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/><span>Choice: <block-text-4/></span></div>\`);
let block1 = createBlock(\`<div>
<input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/>
<input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/>
<span>Choice: <block-text-4/></span>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state'];
@@ -351,7 +483,10 @@ exports[`t-model directive on an input type=radio, with initial value 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/></div>\`);
let block1 = createBlock(\`<div>
<input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/>
<input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state'];
@@ -373,7 +508,12 @@ exports[`t-model directive on an input, type=checkbox 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/><span><block-child-0/><block-child-1/></span></div>\`);
let block1 = createBlock(\`<div>
<input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/>
<span>
<block-child-0/><block-child-1/>
</span>
</div>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
@@ -397,7 +537,10 @@ exports[`t-model directive on an textarea 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><textarea block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
let block1 = createBlock(\`<div>
<textarea block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
<span><block-text-2/></span>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const bExpr1 = ctx['state'];
@@ -434,9 +577,17 @@ exports[`t-model directive t-model on select with static options 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"a\\"><block-text-2/></option><option value=\\"b\\"><block-text-3/></option><option value=\\"c\\"><block-text-4/></option></select></div>\`);
let block3 = createBlock(\`<div>
<select block-attribute-0=\\"value\\" block-handler-1=\\"change\\">
<option value=\\"a\\"><block-text-2/></option>
<option value=\\"b\\"><block-text-3/></option>
<option value=\\"c\\"><block-text-4/></option>
</select>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const bExpr1 = ctx['state'];
const expr1 = 'model';
let attr1 = bExpr1[expr1];
@@ -444,7 +595,10 @@ exports[`t-model directive t-model on select with static options 1`] = `
let txt1 = 'a';
let txt2 = 'b';
let txt3 = 'c';
return block1([attr1, hdlr1, txt1, txt2, txt3]);
const b3 = block3([attr1, hdlr1, txt1, txt2, txt3]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -455,9 +609,16 @@ exports[`t-model directive t-model with dynamic values on select options -- 2 1`
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option><option block-attribute-4=\\"value\\" block-attribute-5=\\"selected\\"><block-text-6/></option></select></div>\`);
let block3 = createBlock(\`<div>
<select block-handler-0=\\"change\\">
<option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option>
<option block-attribute-4=\\"value\\" block-attribute-5=\\"selected\\"><block-text-6/></option>
</select>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const bExpr1 = ctx['state'];
const expr1 = 'model';
const bValue1 = bExpr1[expr1];
@@ -468,7 +629,10 @@ exports[`t-model directive t-model with dynamic values on select options -- 2 1`
let attr3 = (ctx['options'][1]);
let attr4 = bValue1 === (ctx['options'][1]);
let txt2 = ctx['options'][1];
return block1([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
const b3 = block3([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -479,9 +643,16 @@ exports[`t-model directive t-model with dynamic values on select options -- 3 1`
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option><option value=\\"b\\" block-attribute-4=\\"selected\\"><block-text-5/></option></select></div>\`);
let block3 = createBlock(\`<div>
<select block-handler-0=\\"change\\">
<option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option>
<option value=\\"b\\" block-attribute-4=\\"selected\\"><block-text-5/></option>
</select>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const bExpr1 = ctx['state'];
const expr1 = 'model';
const bValue1 = bExpr1[expr1];
@@ -491,7 +662,10 @@ exports[`t-model directive t-model with dynamic values on select options -- 3 1`
let txt1 = ctx['options'][0];
let attr3 = bValue1 === \\"b\\";
let txt2 = ctx['options'][1];
return block1([hdlr1, attr1, attr2, txt1, attr3, txt2]);
const b3 = block3([hdlr1, attr1, attr2, txt1, attr3, txt2]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -502,9 +676,16 @@ exports[`t-model directive t-model with dynamic values on select options 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option><option block-attribute-4=\\"value\\" block-attribute-5=\\"selected\\"><block-text-6/></option></select></div>\`);
let block3 = createBlock(\`<div>
<select block-handler-0=\\"change\\">
<option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option>
<option block-attribute-4=\\"value\\" block-attribute-5=\\"selected\\"><block-text-6/></option>
</select>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const bExpr1 = ctx['state'];
const expr1 = 'model';
const bValue1 = bExpr1[expr1];
@@ -515,7 +696,10 @@ exports[`t-model directive t-model with dynamic values on select options 1`] = `
let attr3 = ctx['options'][1];
let attr4 = bValue1 === ctx['options'][1];
let txt2 = ctx['options'][1];
return block1([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
const b3 = block3([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -526,26 +710,41 @@ exports[`t-model directive t-model with dynamic values on select options in fore
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber, prepareList, withKey } = helpers;
let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><block-child-0/></select></div>\`);
let block3 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
let block3 = createBlock(\`<div>
<select block-handler-0=\\"change\\">
<block-child-0/>
</select>
</div>\`);
let block7 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const bExpr1 = ctx['state'];
const expr1 = 'model';
const bValue1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['options']);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`v\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['options']);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`v\`] = v_block4[i1];
const key1 = ctx['v'];
const b6 = text(\`
\`);
let attr1 = ctx['v'];
let attr2 = bValue1 === ctx['v'];
let txt1 = ctx['v'];
c_block2[i1] = withKey(block3([attr1, attr2, txt1]), key1);
const b7 = block7([attr1, attr2, txt1]);
const b8 = text(\`
\`);
c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
}
const b2 = list(c_block2);
return block1([hdlr1], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([hdlr1], [b4]);
const b9 = text(\`
\`);
return multi([b2, b3, b9]);
}
}"
`;
@@ -556,27 +755,35 @@ exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
let block2 = createBlock(\`<input class=\\"a\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
let block3 = createBlock(\`<input class=\\"b\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
<block-child-1/>
</div>\`);
let block4 = createBlock(\`<input class=\\"a\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
let block5 = createBlock(\`<input class=\\"b\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let b2,b3;
const b2 = text(\`
\`);
let b4,b5;
if (ctx['state'].flag) {
const bExpr1 = ctx['state'];
const expr1 = 'text1';
let attr1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
b2 = block2([attr1, hdlr1]);
b4 = block4([attr1, hdlr1]);
}
if (!ctx['state'].flag) {
const bExpr2 = ctx['state'];
const expr2 = 'text2';
let attr2 = bExpr2[expr2];
let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
b3 = block3([attr2, hdlr2]);
b5 = block5([attr2, hdlr2]);
}
return block1([], [b2, b3]);
const b3 = block3([], [b4, b5]);
const b6 = text(\`
\`);
return multi([b2, b3, b6]);
}
}"
`;
@@ -587,15 +794,23 @@ exports[`t-model directive with expression having a changing key 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { toNumber } = helpers;
let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
let block3 = createBlock(\`<div>
<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
<span><block-text-2/></span>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const bExpr1 = ctx['state'].something;
const expr1 = ctx['text'].key;
let attr1 = bExpr1[expr1];
let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
let txt1 = ctx['state'].something[ctx['text'].key];
return block1([attr1, hdlr1, txt1]);
const b3 = block3([attr1, hdlr1, txt1]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
tests/components/__snapshots__/t_on.test.ts.snap
+167 -60
View File
@@ -6,26 +6,38 @@ exports[`t-on t-on expression captured in t-foreach 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div><button block-handler-0=\\"click\\">expr</button></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
let block5 = createBlock(\`<div>
<button block-handler-0=\\"click\\">expr</button>
</div>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
setContextValue(ctx, \\"iter\\", 0);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['arr']);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`val\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['arr']);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`val\`] = v_block4[i1];
const key1 = ctx['val'];
const v1 = ctx['otherState'];
const v2 = ctx['iter'];
let hdlr1 = [()=>v1.vals.push(v2+'_'+v2), ctx];
setContextValue(ctx, \\"iter\\", ctx['iter']+1);
c_block2[i1] = withKey(block3([hdlr1]), key1);
c_block4[i1] = withKey(block5([hdlr1]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
const b6 = text(\`
\`);
return multi([b2, b3, b6]);
}
}"
`;
@@ -36,14 +48,21 @@ exports[`t-on t-on expression in t-foreach 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div><block-text-0/>: <block-text-1/><button block-handler-2=\\"click\\">Expr</button></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
let block5 = createBlock(\`<div>
<block-text-0/>: <block-text-1/>
<button block-handler-2=\\"click\\">Expr</button>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`val\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].values);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`val\`] = v_block4[i1];
ctx[\`val_index\`] = i1;
const key1 = ctx['val'];
let txt1 = ctx['val_index'];
@@ -51,10 +70,14 @@ exports[`t-on t-on expression in t-foreach 1`] = `
const v1 = ctx['otherState'];
const v2 = ctx['val'];
let hdlr1 = [()=>v1.vals.push(v2), ctx];
c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
c_block4[i1] = withKey(block5([txt1, txt2, hdlr1]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
const b6 = text(\`
\`);
return multi([b2, b3, b6]);
}
}"
`;
@@ -65,17 +88,26 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div><block-text-0/>: <block-text-1/><button block-handler-2=\\"click\\">Expr</button></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
let block5 = createBlock(\`<div>
<block-text-0/>: <block-text-1/>
<button block-handler-2=\\"click\\">Expr</button>
</div>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
setContextValue(ctx, \\"bossa\\", 'nova');
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`val\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].values);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`val\`] = v_block4[i1];
ctx[\`val_index\`] = i1;
const key1 = ctx['val'];
setContextValue(ctx, \\"bossa\\", ctx['bossa']+'_'+ctx['val_index']);
@@ -85,10 +117,14 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
const v2 = ctx['val'];
const v3 = ctx['bossa'];
let hdlr1 = [()=>v1.vals.push(v2+'_'+v3), ctx];
c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
c_block4[i1] = withKey(block5([txt1, txt2, hdlr1]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
const b6 = text(\`
\`);
return multi([b2, b3, b6]);
}
}"
`;
@@ -99,24 +135,35 @@ exports[`t-on t-on method call in t-foreach 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div><block-text-0/>: <block-text-1/><button block-handler-2=\\"click\\">meth call</button></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
let block5 = createBlock(\`<div>
<block-text-0/>: <block-text-1/>
<button block-handler-2=\\"click\\">meth call</button>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
for (let i1 = 0; i1 < l_block2; i1++) {
ctx[\`val\`] = v_block2[i1];
const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].values);;
for (let i1 = 0; i1 < l_block4; i1++) {
ctx[\`val\`] = v_block4[i1];
ctx[\`val_index\`] = i1;
const key1 = ctx['val'];
let txt1 = ctx['val_index'];
let txt2 = ctx['val']+'';
const v1 = ctx['val'];
let hdlr1 = [()=>this.addVal(v1), ctx];
c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
c_block4[i1] = withKey(block5([txt1, txt2, hdlr1]), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
ctx = ctx.__proto__;
const b4 = list(c_block4);
const b3 = block3([], [b4]);
const b6 = text(\`
\`);
return multi([b2, b3, b6]);
}
}"
`;
@@ -129,13 +176,19 @@ exports[`t-on t-on on component next to t-on on div 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const catcher1 = createCatcher({\\"click\\":0});
let block1 = createBlock(\`<div><block-child-0/><p block-handler-0=\\"click\\">dec</p></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
<p block-handler-0=\\"click\\">dec</p>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const hdlr1 = [ctx['increment'], ctx];
const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
const b4 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
let hdlr2 = [ctx['decrement'], ctx];
return block1([hdlr2], [b2]);
const b3 = block3([hdlr2], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -192,16 +245,24 @@ exports[`t-on t-on on components and t-foreach 1`] = `
const catcher1 = createCatcher({\\"click\\":0});
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
ctx = Object.create(ctx);
const [k_block1, v_block1, l_block1, c_block1] = prepareList(['John','Raoul','Gérald']);;
for (let i1 = 0; i1 < l_block1; i1++) {
ctx[\`name\`] = v_block1[i1];
const [k_block3, v_block3, l_block3, c_block3] = prepareList(['John','Raoul','Gérald']);;
for (let i1 = 0; i1 < l_block3; i1++) {
ctx[\`name\`] = v_block3[i1];
const key1 = ctx['name'];
const b5 = text(\`
\`);
const v1 = ctx['name'];
const hdlr1 = [()=>this.log(v1), ctx];
c_block1[i1] = withKey(catcher1(comp1({value: ctx['name']}, key + \`__1__\${key1}\`, node, this, null), [hdlr1]), key1);
const b6 = catcher1(comp1({value: ctx['name']}, key + \`__1__\${key1}\`, node, this, null), [hdlr1]);
const b7 = text(\`
\`);
c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
}
return list(c_block1);
const b3 = list(c_block3);
return multi([b2, b3]);
}
}"
`;
@@ -228,12 +289,19 @@ exports[`t-on t-on on components, variation 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, false);
const catcher1 = createCatcher({\\"click\\":0});
let block1 = createBlock(\`<div><span/><block-child-0/><p/></div>\`);
let block3 = createBlock(\`<div>
<span/>
<block-child-0/>
<p/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const hdlr1 = [ctx['increment'], ctx];
const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
return block1([], [b2]);
const b4 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
const b3 = block3([], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -292,10 +360,15 @@ exports[`t-on t-on on components, with a handler update 1`] = `
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
setContextValue(ctx, \\"name\\", ctx['state'].name);
const b3 = text(\`
\`);
const v1 = ctx['name'];
const hdlr1 = [()=>this.log(v1), ctx];
return catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, this, null), [hdlr1]);
const b4 = catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, this, null), [hdlr1]);
return multi([b2, b3, b4]);
}
}"
`;
@@ -353,14 +426,22 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
let { markRaw } = helpers;
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
let block1 = createBlock(\`<button>button</button>\`);
let block5 = createBlock(\`<button>button</button>\`);
function slot1(ctx, node, key = \\"\\") {
return block1();
const b4 = text(\`
\`);
const b5 = block5();
const b6 = text(\`
\`);
return multi([b4, b5, b6]);
}
return function template(ctx, node, key = \\"\\") {
return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
const b2 = text(\`
\`);
const b7 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
return multi([b2, b7]);
}
}"
`;
@@ -387,23 +468,39 @@ exports[`t-on t-on on t-set-slots 1`] = `
const catcher1 = createCatcher({\\"click\\":0});
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
let block6 = createBlock(\`<p>something</p>\`);
let block7 = createBlock(\`<p>paragraph</p>\`);
let block7 = createBlock(\`<p>something</p>\`);
let block9 = createBlock(\`<p>paragraph</p>\`);
function slot1(ctx, node, key = \\"\\") {
const b6 = block6();
const b6 = text(\`
\`);
const b7 = block7();
const b8 = text(\`
\`);
const b9 = block9();
const b10 = text(\`
\`);
const hdlr1 = [()=>this.state.count++, ctx];
return catcher1(multi([b6, b7]), [hdlr1]);
return catcher1(multi([b6, b7, b8, b9, b10]), [hdlr1]);
}
function slot2(ctx, node, key = \\"\\") {
const b12 = text(\`
\`);
const b13 = text(\`
\`);
return multi([b12, b13]);
}
return function template(ctx, node, key = \\"\\") {
const b2 = text(\` [\`);
const b2 = text(\`
[\`);
const b3 = text(ctx['state'].count);
const b4 = text(\`] \`);
const b4 = text(\`]
\`);
const ctx1 = capture(ctx);
const b8 = comp1({slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
return multi([b2, b3, b4, b8]);
const b14 = comp1({slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
return multi([b2, b3, b4, b14]);
}
}"
`;
@@ -427,14 +524,22 @@ exports[`t-on t-on on t-slots 1`] = `
let { markRaw } = helpers;
const comp1 = app.createComponent(\`Child\`, true, true, false, true);
let block1 = createBlock(\`<p>something</p>\`);
let block5 = createBlock(\`<p>something</p>\`);
function slot1(ctx, node, key = \\"\\") {
return block1();
const b4 = text(\`
\`);
const b5 = block5();
const b6 = text(\`
\`);
return multi([b4, b5, b6]);
}
return function template(ctx, node, key = \\"\\") {
return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
const b2 = text(\`
\`);
const b7 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
return multi([b2, b7]);
}
}"
`;
@@ -447,9 +552,11 @@ exports[`t-on t-on on t-slots 2`] = `
const catcher1 = createCatcher({\\"click\\":0});
return function template(ctx, node, key = \\"\\") {
const b2 = text(\` [\`);
const b2 = text(\`
[\`);
const b3 = text(ctx['state'].count);
const b4 = text(\`] \`);
const b4 = text(\`]
\`);
const hdlr1 = [()=>this.state.count++, ctx];
const b5 = catcher1(callSlot(ctx, node, key, 'default', false, {}), [hdlr1]);
return multi([b2, b3, b4, b5]);
tests/components/__snapshots__/t_props.test.ts.snap
+29 -8
View File
@@ -6,11 +6,18 @@ exports[`t-props basic use 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, true, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = comp1(Object.assign({}, ctx['some'].obj), key + \`__1\`, node, this, null);
return block1([], [b2]);
const b2 = text(\`
\`);
const b4 = comp1(Object.assign({}, ctx['some'].obj), key + \`__1\`, node, this, null);
const b3 = block3([], [b4]);
const b5 = text(\`
\`);
return multi([b2, b3, b5]);
}
}"
`;
@@ -20,11 +27,18 @@ exports[`t-props basic use 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<span><block-text-0/></span>\`);
let block3 = createBlock(\`<span>
<block-text-0/>
</span>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
let txt1 = ctx['props'].a+ctx['props'].b;
return block1([txt1]);
const b3 = block3([txt1]);
const b4 = text(\`
\`);
return multi([b2, b3, b4]);
}
}"
`;
@@ -119,11 +133,18 @@ exports[`t-props t-props with props 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Child\`, true, false, true, false);
let block1 = createBlock(\`<div><block-child-0/></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/>
</div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = comp1(Object.assign({}, ctx['childProps'], {a: 1,b: 2}), key + \`__1\`, node, this, null);
return block1([], [b2]);
const b2 = text(\`
\`);
const b4 = comp1(Object.assign({}, ctx['childProps'], {a: 1,b: 2}), key + \`__1\`, node, this, null);
const b3 = block3([], [b4]);
const b5 = text(\`
\`);
return multi([b2, b3, b5]);
}
}"
`;
tests/components/__snapshots__/t_set.test.ts.snap
+185 -40
View File
@@ -7,24 +7,36 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
const comp1 = app.createComponent(\`Childcomp\`, true, true, false, true);
let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
let block3 = createBlock(\`<div>
<p><block-text-0/></p>
<block-child-0/>
<p><block-text-1/></p>
</div>\`);
function slot1(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b5 = text(\`
\`);
setContextValue(ctx, \\"iter\\", 'inCall');
return text('');
const b6 = text(\`
\`);
return multi([b5, b6]);
}
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
setContextValue(ctx, \\"iter\\", 'source');
let txt1 = ctx['iter'];
const ctx1 = capture(ctx);
const b2 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
const b7 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
let txt2 = ctx['iter'];
return block1([txt1, txt2], [b2]);
const b3 = block3([txt1, txt2], [b7]);
return multi([b2, b3]);
}
}"
`;
@@ -59,19 +71,33 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
function slot1(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b4 = text(\`
\`);
ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
const b3 = text(\` in slot \`);
const b4 = safeOutput(ctx['v']);
return multi([b3, b4]);
const b9 = text(\`
in slot
\`);
const b10 = safeOutput(ctx['v']);
const b11 = text(\`
\`);
return multi([b4, b9, b10, b11]);
}
function value1(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
const b6 = text(\`
\`);
const b7 = comp1({}, key + \`__1\`, node, this, null);
const b8 = text(\`
\`);
return multi([b6, b7, b8]);
}
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const ctx1 = capture(ctx);
return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
const b12 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
return multi([b2, b12]);
}
}"
`;
@@ -109,26 +135,41 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
const comp2 = app.createComponent(\`Blorg\`, true, true, false, true);
let block4 = createBlock(\`<div>coffee</div>\`);
let block9 = createBlock(\`<div>coffee</div>\`);
function slot1(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b4 = text(\`
\`);
ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
const b5 = text(\` tea \`);
const b6 = safeOutput(ctx['v']);
return multi([b5, b6]);
const b11 = text(\`
tea
\`);
const b12 = safeOutput(ctx['v']);
const b13 = text(\`
\`);
return multi([b4, b11, b12, b13]);
}
function value1(ctx, node, key = \\"\\") {
const b3 = comp1({}, key + \`__1\`, node, this, null);
const b4 = block4();
return multi([b3, b4]);
const b6 = text(\`
\`);
const b7 = comp1({}, key + \`__1\`, node, this, null);
const b8 = text(\`
\`);
const b9 = block9();
const b10 = text(\`
\`);
return multi([b6, b7, b8, b9, b10]);
}
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const ctx1 = capture(ctx);
return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
const b14 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
return multi([b2, b14]);
}
}"
`;
@@ -169,17 +210,30 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
function slot1(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b4 = text(\`
\`);
ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
return text(\` in slot \`);
const b9 = text(\`
in slot
\`);
return multi([b4, b9]);
}
function value1(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
const b6 = text(\`
\`);
const b7 = comp1({}, key + \`__1\`, node, this, null);
const b8 = text(\`
\`);
return multi([b6, b7, b8]);
}
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`
\`);
const ctx1 = capture(ctx);
return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
const b10 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
return multi([b2, b10]);
}
}"
`;
@@ -204,15 +258,22 @@ exports[`t-set t-set can't alter component even if key in component 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { isBoundary, withDefault, setContextValue } = helpers;
let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p></div>\`);
let block3 = createBlock(\`<div>
<p><block-text-0/></p>
<p><block-text-1/></p>
</div>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
let txt1 = ctx['iter'];
setContextValue(ctx, \\"iter\\", 5);
let txt2 = ctx['iter'];
return block1([txt1, txt2]);
const b3 = block3([txt1, txt2]);
return multi([b2, b3]);
}
}"
`;
@@ -223,15 +284,22 @@ exports[`t-set t-set can't alter component if key not in component 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { isBoundary, withDefault, setContextValue } = helpers;
let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p></div>\`);
let block3 = createBlock(\`<div>
<p><block-text-0/></p>
<p><block-text-1/></p>
</div>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
let txt1 = ctx['iter'];
setContextValue(ctx, \\"iter\\", 5);
let txt2 = ctx['iter'];
return block1([txt1, txt2]);
const b3 = block3([txt1, txt2]);
return multi([b2, b3]);
}
}"
`;
@@ -242,21 +310,44 @@ exports[`t-set t-set in t-if 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { isBoundary, withDefault, setContextValue } = helpers;
let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/><block-child-2/>
<p><block-text-0/></p>
</div>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
let b4,b7,b10;
setContextValue(ctx, \\"flag\\", ctx['state'].flag);
if (ctx['flag']==='if') {
const b5 = text(\`
\`);
setContextValue(ctx, \\"iter\\", 2);
const b6 = text(\`
\`);
b4 = multi([b5, b6]);
} else if (ctx['flag']==='elif') {
const b8 = text(\`
\`);
setContextValue(ctx, \\"iter\\", 3);
const b9 = text(\`
\`);
b7 = multi([b8, b9]);
} else {
const b11 = text(\`
\`);
setContextValue(ctx, \\"iter\\", 4);
const b12 = text(\`
\`);
b10 = multi([b11, b12]);
}
let txt1 = ctx['iter'];
return block1([txt1]);
const b3 = block3([txt1], [b4, b7, b10]);
return multi([b2, b3]);
}
}"
`;
@@ -268,16 +359,24 @@ exports[`t-set t-set not altered by child comp 1`] = `
let { isBoundary, withDefault, setContextValue } = helpers;
const comp1 = app.createComponent(\`Childcomp\`, true, false, false, true);
let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
let block3 = createBlock(\`<div>
<p><block-text-0/></p>
<block-child-0/>
<p><block-text-1/></p>
</div>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
setContextValue(ctx, \\"iter\\", 'source');
let txt1 = ctx['iter'];
const b2 = comp1({}, key + \`__1\`, node, this, null);
const b4 = comp1({}, key + \`__1\`, node, this, null);
let txt2 = ctx['iter'];
return block1([txt1, txt2], [b2]);
const b3 = block3([txt1, txt2], [b4]);
return multi([b2, b3]);
}
}"
`;
@@ -307,22 +406,46 @@ exports[`t-set t-set outside modified in t-if 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { isBoundary, withDefault, setContextValue } = helpers;
let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
let block3 = createBlock(\`<div>
<block-child-0/><block-child-1/><block-child-2/>
<p><block-text-0/></p>
</div>\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
let b4,b7,b10;
setContextValue(ctx, \\"iter\\", 0);
setContextValue(ctx, \\"flag\\", ctx['state'].flag);
if (ctx['flag']==='if') {
const b5 = text(\`
\`);
setContextValue(ctx, \\"iter\\", 2);
const b6 = text(\`
\`);
b4 = multi([b5, b6]);
} else if (ctx['flag']==='elif') {
const b8 = text(\`
\`);
setContextValue(ctx, \\"iter\\", 3);
const b9 = text(\`
\`);
b7 = multi([b8, b9]);
} else {
const b11 = text(\`
\`);
setContextValue(ctx, \\"iter\\", 4);
const b12 = text(\`
\`);
b10 = multi([b11, b12]);
}
let txt1 = ctx['iter'];
return block1([txt1]);
const b3 = block3([txt1], [b4, b7, b10]);
return multi([b2, b3]);
}
}"
`;
@@ -334,18 +457,29 @@ exports[`t-set t-set with a component in body 1`] = `
let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
const comp1 = app.createComponent(\`Child\`, true, false, false, true);
let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
let block3 = createBlock(\`<div>
<div><block-child-0/></div>
</div>\`);
function value1(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
const b5 = text(\`
\`);
const b6 = comp1({}, key + \`__1\`, node, this, null);
const b7 = text(\`
\`);
return multi([b5, b6, b7]);
}
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
const b3 = safeOutput(ctx['v']);
return block1([], [b3]);
const b8 = safeOutput(ctx['v']);
const b3 = block3([], [b8]);
return multi([b2, b3]);
}
}"
`;
@@ -367,19 +501,30 @@ exports[`t-set t-set with something in body 1`] = `
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
let block2 = createBlock(\`<p>coucou</p>\`);
let block3 = createBlock(\`<div>
<div><block-child-0/></div>
</div>\`);
let block6 = createBlock(\`<p>coucou</p>\`);
function value1(ctx, node, key = \\"\\") {
return block2();
const b5 = text(\`
\`);
const b6 = block6();
const b7 = text(\`
\`);
return multi([b5, b6, b7]);
}
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`
\`);
ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
const b3 = safeOutput(ctx['v']);
return block1([], [b3]);
const b8 = safeOutput(ctx['v']);
const b3 = block3([], [b8]);
return multi([b2, b3]);
}
}"
`;