[IMP] owl: add basic support for sub roots

In this commit, we extend the owl App class to support multiple sub
roots. This is useful for situations where we want to mount sub
components in non-managed DOM. This is exactly what the Knowledge app is
doing, with mounting views in an html editor.

Currently, this requires some difficult and fragile hacks, and still,
the result is that it is very easy to mix components from the main App
and a SubApp.  But Knowledge does not actually care about creating a sub
app. It only needs the possibility to mount sub components in dynamic
places.

closes #1640
This commit is contained in:
Géry Debongnie
2024-09-26 15:23:15 +02:00
committed by Sam Degueldre
parent 2a223288d4
commit eb2b32ab60
6 changed files with 381 additions and 9 deletions
@@ -97,6 +97,19 @@ exports[`basics a component cannot be mounted in a detached node (even if node i
}"
`;
exports[`basics a component cannot be mounted in a detached node 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div/>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
}
}"
`;
exports[`basics a component inside a component 1`] = `
"function anonymous(app, bdom, helpers
) {
@@ -261,6 +274,19 @@ exports[`basics can mount a simple component with props 1`] = `
}"
`;
exports[`basics cannot mount on a documentFragment 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div>content</div>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
}
}"
`;
exports[`basics child can be updated 1`] = `
"function anonymous(app, bdom, helpers
) {
@@ -1002,6 +1028,19 @@ exports[`basics three level of components with collapsing root nodes 3`] = `
}"
`;
exports[`basics throws if mounting on target=null 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<span>simple vnode</span>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
}
}"
`;
exports[`basics two child components 1`] = `
"function anonymous(app, bdom, helpers
) {
@@ -924,6 +924,20 @@ exports[`props validation props: list of strings 1`] = `
}"
`;
exports[`props validation validate props for root component 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div><block-text-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let txt1 = ctx['message'];
return block1([txt1]);
}
}"
`;
exports[`props validation validate simple types 1`] = `
"function anonymous(app, bdom, helpers
) {