[IMP] component: support dynamic t-component

This commit is contained in:
Géry Debongnie
2019-09-21 09:28:56 +02:00
parent bbbaf95c8e
commit cc82b3ffcd
10 changed files with 133 additions and 101 deletions
+2 -2
View File
@@ -27,7 +27,7 @@ exports[`animations t-transition combined with component 1`] = `
}
if (!w4) {
let componentKey4 = \`Child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -73,7 +73,7 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
}
if (!w4) {
let componentKey4 = \`Child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -40,7 +40,7 @@ exports[`async rendering delayed component with t-asyncroot directive 1`] = `
}
if (!w8) {
let componentKey8 = \`Child\`;
let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8];
let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8]|| context['Child'];
if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
w8 = new W8(parent, props8);
parent.__owl__.cmap[8] = w8.__owl__.id;
@@ -68,7 +68,7 @@ exports[`async rendering delayed component with t-asyncroot directive 1`] = `
}
if (!w11) {
let componentKey11 = \`AsyncChild\`;
let W11 = context.constructor.components[componentKey11] || QWeb.components[componentKey11];
let W11 = context.constructor.components[componentKey11] || QWeb.components[componentKey11]|| context['AsyncChild'];
if (!W11) {throw new Error('Cannot find the definition of component \\"' + componentKey11 + '\\"')}
w11 = new W11(parent, props11);
parent.__owl__.cmap[11] = w11.__owl__.id;
@@ -124,7 +124,7 @@ exports[`async rendering fast component with t-asyncroot directive 1`] = `
}
if (!w8) {
let componentKey8 = \`Child\`;
let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8];
let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8]|| context['Child'];
if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
w8 = new W8(parent, props8);
parent.__owl__.cmap[8] = w8.__owl__.id;
@@ -151,7 +151,7 @@ exports[`async rendering fast component with t-asyncroot directive 1`] = `
}
if (!w11) {
let componentKey11 = \`AsyncChild\`;
let W11 = context.constructor.components[componentKey11] || QWeb.components[componentKey11];
let W11 = context.constructor.components[componentKey11] || QWeb.components[componentKey11]|| context['AsyncChild'];
if (!W11) {throw new Error('Cannot find the definition of component \\"' + componentKey11 + '\\"')}
w11 = new W11(parent, props11);
parent.__owl__.cmap[11] = w11.__owl__.id;
@@ -206,7 +206,7 @@ exports[`async rendering t-component with t-asyncroot directive: mixed re-render
}
if (!w8) {
let componentKey8 = \`Child\`;
let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8];
let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8]|| context['Child'];
if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
w8 = new W8(parent, props8);
parent.__owl__.cmap[8] = w8.__owl__.id;
@@ -234,7 +234,7 @@ exports[`async rendering t-component with t-asyncroot directive: mixed re-render
}
if (!w11) {
let componentKey11 = \`AsyncChild\`;
let W11 = context.constructor.components[componentKey11] || QWeb.components[componentKey11];
let W11 = context.constructor.components[componentKey11] || QWeb.components[componentKey11]|| context['AsyncChild'];
if (!W11) {throw new Error('Cannot find the definition of component \\"' + componentKey11 + '\\"')}
w11 = new W11(parent, props11);
parent.__owl__.cmap[11] = w11.__owl__.id;
@@ -277,7 +277,7 @@ exports[`class and style attributes with t-component dynamic t-att-style is prop
}
if (!w4) {
let componentKey4 = \`child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -322,7 +322,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
}
if (!w4) {
let componentKey4 = \`Child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -382,7 +382,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
}
if (!w4) {
let componentKey4 = \`Child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -440,7 +440,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
}
if (!w4) {
let componentKey4 = \`child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -485,7 +485,7 @@ exports[`composition sub components dom state with t-keepalive is preserved 1`]
}
if (!w4) {
let componentKey4 = \`InputWidget\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['InputWidget'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -545,7 +545,7 @@ exports[`composition sub components with some state rendered in a loop 1`] = `
}
if (!w7) {
let componentKey7 = \`ChildWidget\`;
let W7 = context.constructor.components[componentKey7] || QWeb.components[componentKey7];
let W7 = context.constructor.components[componentKey7] || QWeb.components[componentKey7]|| context['ChildWidget'];
if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
w7 = new W7(parent, props7);
parent.__owl__.cmap[templateId9] = w7.__owl__.id;
@@ -672,7 +672,7 @@ exports[`dynamic t-props basic use 1`] = `
}
if (!w4) {
let componentKey4 = \`Child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -716,7 +716,7 @@ exports[`lifecycle hooks willPatch/patched hook with t-keepalive 1`] = `
}
if (!w4) {
let componentKey4 = \`ChildWidget\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['ChildWidget'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -759,7 +759,7 @@ exports[`other directives with t-component t-on with handler bound to argument 1
}
if (!w4) {
let componentKey4 = \`child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -801,7 +801,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
}
if (!w4) {
let componentKey4 = \`child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -843,7 +843,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
}
if (!w4) {
let componentKey4 = \`child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -885,7 +885,7 @@ exports[`other directives with t-component t-on with handler bound to object 1`]
}
if (!w4) {
let componentKey4 = \`child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -927,7 +927,7 @@ exports[`other directives with t-component t-on with prevent and self modifiers
}
if (!w4) {
let componentKey4 = \`Child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -969,7 +969,7 @@ exports[`other directives with t-component t-on with self and prevent modifiers
}
if (!w4) {
let componentKey4 = \`child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -1011,7 +1011,7 @@ exports[`other directives with t-component t-on with self modifier 1`] = `
}
if (!w4) {
let componentKey4 = \`child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -1053,7 +1053,7 @@ exports[`other directives with t-component t-on with stop and/or prevent modifie
}
if (!w4) {
let componentKey4 = \`child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -1097,7 +1097,7 @@ exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
}
if (!w4) {
let componentKey4 = \`child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[templateId6] = w4.__owl__.id;
@@ -1157,7 +1157,7 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument
}
if (!w7) {
let componentKey7 = \`Child\`;
let W7 = context.constructor.components[componentKey7] || QWeb.components[componentKey7];
let W7 = context.constructor.components[componentKey7] || QWeb.components[componentKey7]|| context['Child'];
if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
w7 = new W7(parent, props7);
parent.__owl__.cmap[templateId9] = w7.__owl__.id;
@@ -1381,7 +1381,7 @@ exports[`t-slot directive can define and call slots 1`] = `
}
if (!w4) {
let componentKey4 = \`Dialog\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Dialog'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
w4 = new W4(parent, props4);
parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -1623,7 +1623,7 @@ exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
}
if (!w9) {
let componentKey9 = \`Link\`;
let W9 = context.constructor.components[componentKey9] || QWeb.components[componentKey9];
let W9 = context.constructor.components[componentKey9] || QWeb.components[componentKey9]|| context['Link'];
if (!W9) {throw new Error('Cannot find the definition of component \\"' + componentKey9 + '\\"')}
w9 = new W9(parent, props9);
parent.__owl__.cmap[templateId10] = w9.__owl__.id;
@@ -1728,7 +1728,7 @@ exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
}
if (!w10) {
let componentKey10 = \`Link\`;
let W10 = context.constructor.components[componentKey10] || QWeb.components[componentKey10];
let W10 = context.constructor.components[componentKey10] || QWeb.components[componentKey10]|| context['Link'];
if (!W10) {throw new Error('Cannot find the definition of component \\"' + componentKey10 + '\\"')}
w10 = new W10(parent, props10);
parent.__owl__.cmap[templateId11] = w10.__owl__.id;
@@ -1786,7 +1786,7 @@ exports[`t-slot directive slots are rendered with proper context, part 4 1`] = `
}
if (!w5) {
let componentKey5 = \`Link\`;
let W5 = context.constructor.components[componentKey5] || QWeb.components[componentKey5];
let W5 = context.constructor.components[componentKey5] || QWeb.components[componentKey5]|| context['Link'];
if (!W5) {throw new Error('Cannot find the definition of component \\"' + componentKey5 + '\\"')}
w5 = new W5(parent, props5);
parent.__owl__.cmap[5] = w5.__owl__.id;
@@ -1840,7 +1840,7 @@ exports[`top level sub widgets basic use 1`] = `
}
if (!w3) {
let componentKey3 = \`Child\`;
let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3];
let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['Child'];
if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
w3 = new W3(parent, props3);
parent.__owl__.cmap[3] = w3.__owl__.id;
@@ -1881,7 +1881,7 @@ exports[`top level sub widgets can select a sub widget 1`] = `
}
if (!w3) {
let componentKey3 = \`Child\`;
let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3];
let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['Child'];
if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
w3 = new W3(parent, props3);
parent.__owl__.cmap[3] = w3.__owl__.id;
@@ -1910,7 +1910,7 @@ exports[`top level sub widgets can select a sub widget 1`] = `
}
if (!w7) {
let componentKey7 = \`OtherChild\`;
let W7 = context.constructor.components[componentKey7] || QWeb.components[componentKey7];
let W7 = context.constructor.components[componentKey7] || QWeb.components[componentKey7]|| context['OtherChild'];
if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
w7 = new W7(parent, props7);
parent.__owl__.cmap[7] = w7.__owl__.id;
@@ -31,7 +31,7 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
}
if (!w4) {
let componentKey4 = \`Child\`;
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
utils.validateProps(W4, props4)
w4 = new W4(parent, props4);
+24
View File
@@ -920,6 +920,30 @@ describe("composition", () => {
delete QWeb.components["WidgetB"];
});
test("can use dynamic components (the class) if given", async () => {
class A extends Component<any, any, any> {
static template = xml`<span>child a</span>`;
}
class B extends Component<any, any, any> {
static template = xml`<span>child b</span>`;
}
class App extends Component<any, any, any> {
static template = xml`<t t-component="myComponent" t-key="state.child"/>`;
state = {
child: "a"
};
get myComponent() {
return this.state.child === "a" ? A : B;
}
}
const widget = new App(env);
await widget.mount(fixture);
expect(fixture.innerHTML).toBe("<span>child a</span>");
widget.state.child = "b";
await nextTick();
expect(fixture.innerHTML).toBe("<span>child b</span>");
});
test("don't fallback to global registry if widget defined locally", async () => {
QWeb.registerComponent("WidgetB", WidgetB); // should not use this widget
env.qweb.addTemplate("ParentWidget", `<div><t t-component="WidgetB"/></div>`);
@@ -8,52 +8,37 @@ exports[`RouteComponent can render simple cases 1`] = `
let parent = context;
let owner = context;
let result;
context = Object.create(context);
var h = this.h;
var _1 = context['routes'];
if (!_1) { throw new Error('QWeb error: Invalid loop expression')}
var _2 = _3 = _1;
if (!(_1 instanceof Array)) {
_2 = Object.keys(_1);
_3 = Object.values(_1);
}
var _length2 = _2.length;
for (let i = 0; i < _length2; i++) {
context.route_first = i === 0;
context.route_last = i === _length2 - 1;
context.route_index = i;
context.route = _2[i];
context.route_value = _3[i];
if (context['env'].router.currentRouteName===context['route'].name) {
//COMPONENT
let def5;
let templateId7 = String(-6 - i);
let w6 = templateId7 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[templateId7]] : false;
let vn8 = {};
result = vn8;
let props6 = Object.assign({}, context['env'].router.currentParams);
if (w6 && w6.__owl__.currentFiber && !w6.__owl__.vnode) {
if (utils.shallowEqual(props6, w6.__owl__.currentFiber.props)) {
def5 = w6.__owl__.currentFiber.promise;
} else {
w6.destroy();
w6 = false;
}
}
if (!w6) {
let componentKey6 = (context['route'].component);
let W6 = context.constructor.components[componentKey6] || QWeb.components[componentKey6];
if (!W6) {throw new Error('Cannot find the definition of component \\"' + componentKey6 + '\\"')}
w6 = new W6(parent, props6);
parent.__owl__.cmap[templateId7] = w6.__owl__.id;
def5 = w6.__prepare(extra.fiber, undefined, undefined);
def5 = def5.then(vnode=>{if (w6.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: templateId7, hook: {insert(vn) {let nvn=w6.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w6.destroy();}}});utils.defineProxy(vn8, pvnode);w6.__owl__.pvnode = pvnode;});
if (context['routeComponent']) {
//COMPONENT
let key4 = 'key' + context['env'].router.currentRouteName;
let def2;
let templateId5 = key4;
let w3 = templateId5 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[templateId5]] : false;
let vn6 = {};
result = vn6;
let props3 = Object.assign({}, context['env'].router.currentParams);
if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
if (utils.shallowEqual(props3, w3.__owl__.currentFiber.props)) {
def2 = w3.__owl__.currentFiber.promise;
} else {
def5 = def5 || w6.__updateProps(props6, extra.fiber, undefined, undefined);
def5 = def5.then(()=>{if (w6.__owl__.isDestroyed) {return};let pvnode=w6.__owl__.pvnode;utils.defineProxy(vn8, pvnode);});
w3.destroy();
w3 = false;
}
extra.promises.push(def5);
}
if (!w3) {
let componentKey3 = \`routeComponent\`;
let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['routeComponent'];
if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
w3 = new W3(parent, props3);
parent.__owl__.cmap[templateId5] = w3.__owl__.id;
def2 = w3.__prepare(extra.fiber, undefined, undefined);
def2 = def2.then(vnode=>{if (w3.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: templateId5, hook: {insert(vn) {let nvn=w3.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});utils.defineProxy(vn6, pvnode);w3.__owl__.pvnode = pvnode;});
} else {
def2 = def2 || w3.__updateProps(props3, extra.fiber, undefined, undefined);
def2 = def2.then(()=>{if (w3.__owl__.isDestroyed) {return};let pvnode=w3.__owl__.pvnode;utils.defineProxy(vn6, pvnode);});
}
extra.promises.push(def2);
}
return result;
}"