mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Géry Debongnie
3c38bbc076
We remove here old comments, add some tests and documentation, and in general, make sure the state of the code is in a good shape part of #330
512 lines
19 KiB
TypeScript
512 lines
19 KiB
TypeScript
import { QWeb } from "../qweb/index";
|
|
import { INTERP_REGEXP } from "../qweb/compilation_context";
|
|
import { MODS_CODE } from "../qweb/extensions";
|
|
|
|
//------------------------------------------------------------------------------
|
|
// t-component
|
|
//------------------------------------------------------------------------------
|
|
|
|
const T_COMPONENT_MODS_CODE = Object.assign({}, MODS_CODE, {
|
|
self: "if (e.target !== vn.elm) {return}"
|
|
});
|
|
|
|
QWeb.utils.defineProxy = function defineProxy(target, source) {
|
|
for (let k in source) {
|
|
Object.defineProperty(target, k, {
|
|
get() {
|
|
return source[k];
|
|
},
|
|
set(val) {
|
|
source[k] = val;
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* The t-component directive is certainly a complicated and hard to maintain piece
|
|
* of code. To help you, fellow developer, if you have to maintain it, I offer
|
|
* you this advice: Good luck...
|
|
*
|
|
* Since it is not 'direct' code, but rather code that generates other code, it
|
|
* is not easy to understand. To help you, here is a detailed and commented
|
|
* explanation of the code generated by the t-component directive for the following
|
|
* situation:
|
|
* ```xml
|
|
* <Child
|
|
* t-key="'somestring'"
|
|
* flag="state.flag"
|
|
* t-transition="fade"/>
|
|
* ```
|
|
*
|
|
* ```js
|
|
* // we assign utils on top of the function because it will be useful for
|
|
* // each components
|
|
* let utils = this.utils;
|
|
*
|
|
* // this is the virtual node representing the parent div
|
|
* let c1 = [], p1 = { key: 1 };
|
|
* var vn1 = h("div", p1, c1);
|
|
*
|
|
* // t-component directive: we start by evaluating the expression given by t-key:
|
|
* let key5 = "somestring";
|
|
*
|
|
* // def3 is the promise that will contain later either the new component
|
|
* // creation, or the props update...
|
|
* let def3;
|
|
*
|
|
* // this is kind of tricky: we need here to find if the component was already
|
|
* // created by a previous rendering. This is done by checking the internal
|
|
* // `cmap` (children map) of the parent component: it maps keys to component ids,
|
|
* // and, then, if there is an id, we look into the children list to get the
|
|
* // instance
|
|
* let w4 =
|
|
* key5 in context.__owl__.cmap
|
|
* ? context.__owl__.children[context.__owl__.cmap[key5]]
|
|
* : false;
|
|
*
|
|
* // We keep the index of the position of the component in the closure. We push
|
|
* // null to reserve the slot, and will replace it later by the component vnode,
|
|
* // when it will be ready (do not forget that preparing/rendering a component is
|
|
* // asynchronous)
|
|
* let _2_index = c1.length;
|
|
* c1.push(null);
|
|
*
|
|
* // we evaluate here the props given to the component. It is done here to be
|
|
* // able to easily reference it later, and also, it might be an expensive
|
|
* // computation, so it is certainly better to do it only once
|
|
* let props4 = { flag: context["state"].flag };
|
|
*
|
|
* // If we have a component, currently rendering, but not ready yet, we do not want
|
|
* // to wait for it to be ready if we can avoid it
|
|
* if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
|
|
* // we check if the props are the same. In that case, we can simply reuse
|
|
* // the previous rendering and skip all useless work
|
|
* if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
|
|
* def3 = w4.__owl__.renderPromise;
|
|
* } else {
|
|
* // if the props are not the same, we destroy the component and starts anew.
|
|
* // this will be faster than waiting for its rendering, then updating it
|
|
* w4.destroy();
|
|
* w4 = false;
|
|
* }
|
|
* }
|
|
*
|
|
* if (!w4) {
|
|
* // in this situation, we need to create a new component. First step is
|
|
* // to get a reference to the class, then create an instance with
|
|
* // current context as parent, and the props.
|
|
* let W4 = context.component && context.components[componentKey4] || QWeb.component[componentKey4];
|
|
|
|
* if (!W4) {
|
|
* throw new Error("Cannot find the definition of component 'child'");
|
|
* }
|
|
* w4 = new W4(owner, props4);
|
|
*
|
|
* // Whenever we rerender the parent component, we need to be sure that we
|
|
* // are able to find the component instance. To do that, we register it to
|
|
* // the parent cmap (children map). Note that the 'template' key is
|
|
* // used here, since this is what identify the component from the template
|
|
* // perspective.
|
|
* context.__owl__.cmap[key5] = w4.__owl__.id;
|
|
*
|
|
* // __prepare is called, to basically call willStart, then render the
|
|
* // component
|
|
* def3 = w4.__prepare();
|
|
*
|
|
* def3 = def3.then(vnode => {
|
|
* // we create here a virtual node for the parent (NOT the component). This
|
|
* // means that the vdom of the parent will be stopped here, and from
|
|
* // the parent's perspective, it simply is a vnode with no children.
|
|
* // However, it shares the same dom element with the component root
|
|
* // vnode.
|
|
* let pvnode = h(vnode.sel, { key: key5 });
|
|
*
|
|
* // we add hooks to the parent vnode so we can interact with the new
|
|
* // component at the proper time
|
|
* pvnode.data.hook = {
|
|
* insert(vn) {
|
|
* // the __mount method will patch the component vdom into the elm vn.elm,
|
|
* // then call the mounted hooks. However, suprisingly, the snabbdom
|
|
* // patch method actually replace the elm by a new elm, so we need
|
|
* // to synchronise the pvnode elm with the resulting elm
|
|
* let nvn = w4.__mount(vnode, vn.elm);
|
|
* pvnode.elm = nvn.elm;
|
|
* // what follows is only present if there are animations on the component
|
|
* utils.transitionInsert(vn, "fade");
|
|
* },
|
|
* remove() {
|
|
* // override with empty function to prevent from removing the node
|
|
* // directly. It will be removed when destroy is called anyway, which
|
|
* // delays the removal if there are animations.
|
|
* },
|
|
* destroy() {
|
|
* // if there are animations, we delay the call to destroy on the
|
|
* // component, if not, we call it directly.
|
|
* let finalize = () => {
|
|
* w4.destroy();
|
|
* };
|
|
* utils.transitionRemove(vn, "fade", finalize);
|
|
* }
|
|
* };
|
|
* // the pvnode is inserted at the correct position in the div's children
|
|
* c1[_2_index] = pvnode;
|
|
*
|
|
* // we keep here a reference to the parent vnode (representing the
|
|
* // component, so we can reuse it later whenever we update the component
|
|
* w4.__owl__.pvnode = pvnode;
|
|
* });
|
|
* } else {
|
|
* // this is the 'update' path of the directive.
|
|
* // the call to __updateProps is the actual component update
|
|
* // Note that we only update the props if we cannot reuse the previous
|
|
* // rendering work (in the case it was rendered with the same props)
|
|
* def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
|
|
* def3 = def3.then(() => {
|
|
* // if component was destroyed in the meantime, we do nothing (so, this
|
|
* // means that the parent's element children list will have a null in
|
|
* // the component's position, which will cause the pvnode to be removed
|
|
* // when it is patched.
|
|
* if (w4.__owl__.isDestroyed) {
|
|
* return;
|
|
* }
|
|
* // like above, we register the pvnode to the children list, so it
|
|
* // will not be patched out of the dom.
|
|
* let pvnode = w4.__owl__.pvnode;
|
|
* c1[_2_index] = pvnode;
|
|
* });
|
|
* }
|
|
*
|
|
* // we register the deferred here so the parent can coordinate its patch operation
|
|
* // with all the children.
|
|
* extra.promises.push(def3);
|
|
* return vn1;
|
|
* ```
|
|
*/
|
|
|
|
QWeb.addDirective({
|
|
name: "component",
|
|
extraNames: ["props", "keepalive"],
|
|
priority: 100,
|
|
atNodeEncounter({ ctx, value, node, qweb }): boolean {
|
|
ctx.addLine("//COMPONENT");
|
|
ctx.rootContext.shouldDefineOwner = true;
|
|
ctx.rootContext.shouldDefineQWeb = true;
|
|
ctx.rootContext.shouldDefineParent = true;
|
|
ctx.rootContext.shouldDefineUtils = true;
|
|
let keepAlive = node.getAttribute("t-keepalive") ? true : false;
|
|
let hasDynamicProps = node.getAttribute("t-props") ? true : false;
|
|
|
|
// t-on- events and t-transition
|
|
const events: [string, string[], string, string][] = [];
|
|
let transition: string = "";
|
|
const attributes = (<Element>node).attributes;
|
|
const props: { [key: string]: string } = {};
|
|
for (let i = 0; i < attributes.length; i++) {
|
|
const name = attributes[i].name;
|
|
const value = attributes[i].textContent!;
|
|
if (name.startsWith("t-on-")) {
|
|
const [eventName, ...mods] = name.slice(5).split(".");
|
|
let extraArgs;
|
|
let handlerValue = value.replace(/\(.*\)/, function(args) {
|
|
extraArgs = args.slice(1, -1);
|
|
return "";
|
|
});
|
|
events.push([eventName, mods, handlerValue, extraArgs]);
|
|
} else if (name === "t-transition") {
|
|
transition = value;
|
|
} else if (!name.startsWith("t-")) {
|
|
if (name !== "class" && name !== "style") {
|
|
// this is a prop!
|
|
props[name] = ctx.formatExpression(value);
|
|
}
|
|
}
|
|
}
|
|
|
|
let key = node.getAttribute("t-key");
|
|
if (key) {
|
|
key = ctx.formatExpression(key);
|
|
}
|
|
|
|
// computing the props string representing the props object
|
|
let propStr = Object.keys(props)
|
|
.map(k => k + ":" + props[k])
|
|
.join(",");
|
|
let defID = ctx.generateID();
|
|
let componentID = ctx.generateID();
|
|
let keyID = key && ctx.generateID();
|
|
if (key) {
|
|
// we bind a variable to the key (could be a complex expression, so we
|
|
// want to evaluate it only once)
|
|
ctx.addLine(`let key${keyID} = 'key' + ${key};`);
|
|
}
|
|
|
|
let locationExpr = `\`__${ctx.generateID()}__`;
|
|
for (let i = 0; i < ctx.loopNumber - 1; i++) {
|
|
locationExpr += `\${i${i + 1}}__`;
|
|
}
|
|
if (key || ctx.currentKey) {
|
|
const k = key ? `key${keyID}` : ctx.currentKey;
|
|
ctx.addLine(`let templateId${componentID} = ${locationExpr}\` + ${k};`);
|
|
} else {
|
|
locationExpr += ctx.loopNumber ? `\${i${ctx.loopNumber}}__\`` : "`";
|
|
ctx.addLine(`let templateId${componentID} = ${locationExpr};`);
|
|
}
|
|
const templateId = `templateId${componentID}`;
|
|
|
|
let ref = node.getAttribute("t-ref");
|
|
let refExpr = "";
|
|
let refKey: string = "";
|
|
if (ref) {
|
|
ctx.rootContext.shouldDefineRefs = true;
|
|
refKey = `ref${ctx.generateID()}`;
|
|
ctx.addLine(`const ${refKey} = ${ctx.interpolate(ref)};`);
|
|
refExpr = `context.__owl__.refs[${refKey}] = w${componentID};`;
|
|
}
|
|
let transitionsInsertCode = "";
|
|
if (transition) {
|
|
transitionsInsertCode = `utils.transitionInsert(vn, '${transition}');`;
|
|
}
|
|
let finalizeComponentCode = `w${componentID}.${keepAlive ? "unmount" : "destroy"}();`;
|
|
if (ref && !keepAlive) {
|
|
finalizeComponentCode += `delete context.__owl__.refs[${refKey}];`;
|
|
}
|
|
if (transition) {
|
|
finalizeComponentCode = `let finalize = () => {
|
|
${finalizeComponentCode}
|
|
};
|
|
utils.transitionRemove(vn, '${transition}', finalize);`;
|
|
}
|
|
|
|
let createHook = "";
|
|
let classAttr = node.getAttribute("class");
|
|
let tattClass = node.getAttribute("t-att-class");
|
|
let styleAttr = node.getAttribute("style");
|
|
let tattStyle = node.getAttribute("t-att-style");
|
|
if (tattStyle) {
|
|
const attVar = `_${ctx.generateID()}`;
|
|
ctx.addLine(`const ${attVar} = ${ctx.formatExpression(tattStyle)};`);
|
|
tattStyle = attVar;
|
|
}
|
|
let classObj = "";
|
|
if (classAttr || tattClass || styleAttr || tattStyle || events.length) {
|
|
if (classAttr) {
|
|
let classDef = classAttr
|
|
.trim()
|
|
.split(/\s+/)
|
|
.map(a => `'${a}':true`)
|
|
.join(",");
|
|
classObj = `_${ctx.generateID()}`;
|
|
ctx.addLine(`let ${classObj} = {${classDef}};`);
|
|
}
|
|
if (tattClass) {
|
|
let tattExpr = ctx.formatExpression(tattClass);
|
|
if (tattExpr[0] !== "{" || tattExpr[tattExpr.length - 1] !== "}") {
|
|
tattExpr = `utils.toObj(${tattExpr})`;
|
|
}
|
|
if (classAttr) {
|
|
ctx.addLine(`Object.assign(${classObj}, ${tattExpr})`);
|
|
} else {
|
|
classObj = `_${ctx.generateID()}`;
|
|
ctx.addLine(`let ${classObj} = ${tattExpr};`);
|
|
}
|
|
}
|
|
let eventsCode = events
|
|
.map(function([eventName, mods, handlerValue, extraArgs]) {
|
|
let params = "owner";
|
|
if (extraArgs) {
|
|
if (ctx.loopNumber) {
|
|
let argId = ctx.generateID();
|
|
// we need to evaluate the arguments now, because the handler will
|
|
// be set asynchronously later when the widget is ready, and the
|
|
// context might be different.
|
|
ctx.addLine(`let arg${argId} = ${ctx.formatExpression(extraArgs)};`);
|
|
params = `owner, arg${argId}`;
|
|
} else {
|
|
params = `owner, ${ctx.formatExpression(extraArgs)}`;
|
|
}
|
|
}
|
|
let handler = `function (e) {`;
|
|
handler += mods
|
|
.map(function(mod) {
|
|
return T_COMPONENT_MODS_CODE[mod];
|
|
})
|
|
.join("");
|
|
if (handlerValue) {
|
|
handler += `const fn = owner['${handlerValue}'];`;
|
|
handler += `if (fn) { fn.call(${params}, e); } else { owner.${handlerValue}; }`;
|
|
}
|
|
handler += `}`;
|
|
return `vn.elm.addEventListener('${eventName}', ${handler});`;
|
|
})
|
|
.join("");
|
|
const styleExpr = tattStyle || (styleAttr ? `'${styleAttr}'` : false);
|
|
const styleCode = styleExpr ? `vn.elm.style = ${styleExpr};` : "";
|
|
createHook = `vnode.data.hook = {create(_, vn){${styleCode}${eventsCode}}};`;
|
|
}
|
|
|
|
ctx.addLine(
|
|
`let w${componentID} = ${templateId} in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[${templateId}]] : false;`
|
|
);
|
|
let shouldProxy = !ctx.parentNode;
|
|
if (keepAlive) {
|
|
ctx.addLine(
|
|
`const fiber${componentID} = Object.assign(Object.create(extra.fiber), {patchQueue: []});`
|
|
);
|
|
}
|
|
if (shouldProxy) {
|
|
let id = ctx.generateID();
|
|
ctx.rootContext.rootNode = id;
|
|
shouldProxy = true;
|
|
ctx.rootContext.shouldDefineResult = true;
|
|
ctx.addLine(`let vn${id} = {};`);
|
|
ctx.addLine(`result = vn${id};`);
|
|
}
|
|
if (hasDynamicProps) {
|
|
const dynamicProp = ctx.formatExpression(node.getAttribute("t-props")!);
|
|
ctx.addLine(`let props${componentID} = Object.assign({${propStr}}, ${dynamicProp});`);
|
|
} else {
|
|
ctx.addLine(`let props${componentID} = {${propStr}};`);
|
|
}
|
|
ctx.addIf(
|
|
`w${componentID} && w${componentID}.__owl__.currentFiber && !w${componentID}.__owl__.vnode`
|
|
);
|
|
ctx.addLine(`w${componentID}.destroy();`);
|
|
ctx.addLine(`w${componentID} = false;`);
|
|
ctx.closeIf();
|
|
|
|
let registerCode = "";
|
|
if (shouldProxy) {
|
|
registerCode = `utils.defineProxy(vn${ctx.rootNode}, pvnode);`;
|
|
}
|
|
|
|
// SLOTS
|
|
const varDefs: string[] = [];
|
|
const hasSlots = node.childNodes.length;
|
|
if (hasSlots) {
|
|
ctx.rootContext.shouldTrackScope = true;
|
|
for (let v of Object.values(ctx.variables)) {
|
|
if (v["id"]) {
|
|
varDefs.push(v["id"]);
|
|
}
|
|
}
|
|
}
|
|
|
|
let scopeVars;
|
|
if (hasSlots) {
|
|
let scope = ctx.scopeVars.length ? `Object.assign({}, scope)` : `{}`;
|
|
let vars = varDefs.length ? `{${varDefs.join(",")}}` : "undefined";
|
|
scopeVars = `${scope}, ${vars}`;
|
|
} else {
|
|
scopeVars = "undefined, undefined";
|
|
}
|
|
|
|
ctx.addIf(`w${componentID}`);
|
|
|
|
// need to update component
|
|
let patchQueueCode = keepAlive ? `fiber${componentID}` : "extra.fiber";
|
|
if (keepAlive) {
|
|
// if we have t-keepalive="1", the component could be unmounted, but then
|
|
// we __updateProps is called. This is ok, but we do not want to call
|
|
// the willPatch/patched hooks of the component in this case, so we
|
|
// disable the patch queue
|
|
patchQueueCode = `w${componentID}.__owl__.isMounted ? extra.fiber : fiber${componentID}`;
|
|
}
|
|
if (QWeb.dev) {
|
|
ctx.addLine(`utils.validateProps(w${componentID}.constructor, props${componentID})`);
|
|
}
|
|
let styleCode = "";
|
|
if (tattStyle) {
|
|
styleCode = `.then(()=>{if (w${componentID}.__owl__.isDestroyed) {return};w${componentID}.el.style=${tattStyle};});`;
|
|
}
|
|
ctx.addLine(
|
|
`w${componentID}.__updateProps(props${componentID}, ${patchQueueCode}${scopeVars &&
|
|
", " + scopeVars}, sibling)${styleCode};`
|
|
);
|
|
ctx.addLine(`let pvnode = w${componentID}.__owl__.pvnode;`);
|
|
let keepAliveCode = "";
|
|
if (keepAlive) {
|
|
keepAliveCode = `pvnode.data.hook.insert = vn => {vn.elm.parentNode.replaceChild(w${componentID}.el,vn.elm);vn.elm=w${componentID}.el;w${componentID}.__remount();};`;
|
|
ctx.addLine(keepAliveCode);
|
|
}
|
|
if (registerCode) {
|
|
ctx.addLine(registerCode);
|
|
}
|
|
if (ctx.parentNode) {
|
|
ctx.addLine(`c${ctx.parentNode}.push(pvnode);`);
|
|
}
|
|
|
|
ctx.addElse();
|
|
|
|
// new component
|
|
let dynamicFallback = "";
|
|
if (!value.match(INTERP_REGEXP)) {
|
|
dynamicFallback = `|| ${ctx.formatExpression(value)}`;
|
|
}
|
|
const interpValue = ctx.interpolate(value);
|
|
ctx.addLine(`let componentKey${componentID} = ${interpValue};`);
|
|
ctx.addLine(
|
|
`let W${componentID} = context.constructor.components[componentKey${componentID}] || QWeb.components[componentKey${componentID}]${dynamicFallback};`
|
|
);
|
|
|
|
// maybe only do this in dev mode...
|
|
ctx.addLine(
|
|
`if (!W${componentID}) {throw new Error('Cannot find the definition of component "' + componentKey${componentID} + '"')}`
|
|
);
|
|
ctx.addLine(`w${componentID} = new W${componentID}(parent, props${componentID});`);
|
|
ctx.addLine(`parent.__owl__.cmap[${templateId}] = w${componentID}.__owl__.id;`);
|
|
|
|
if (hasSlots) {
|
|
const clone = <Element>node.cloneNode(true);
|
|
const slotNodes = clone.querySelectorAll("[t-set]");
|
|
const slotId = QWeb.nextSlotId++;
|
|
ctx.addLine(`w${componentID}.__owl__.slotId = ${slotId};`);
|
|
if (slotNodes.length) {
|
|
for (let i = 0, length = slotNodes.length; i < length; i++) {
|
|
const slotNode = slotNodes[i];
|
|
slotNode.parentElement!.removeChild(slotNode);
|
|
const key = slotNode.getAttribute("t-set")!;
|
|
slotNode.removeAttribute("t-set");
|
|
const slotFn = qweb._compile(`slot_${key}_template`, slotNode, ctx);
|
|
QWeb.slots[`${slotId}_${key}`] = slotFn;
|
|
}
|
|
}
|
|
if (clone.childNodes.length) {
|
|
const t = clone.ownerDocument!.createElement("t");
|
|
for (let child of Object.values(clone.childNodes)) {
|
|
t.appendChild(child);
|
|
}
|
|
const slotFn = qweb._compile(`slot_default_template`, t, ctx);
|
|
QWeb.slots[`${slotId}_default`] = slotFn;
|
|
}
|
|
}
|
|
|
|
ctx.addLine(`let def${defID} = w${componentID}.__prepare(extra.fiber, ${scopeVars}, sibling);`);
|
|
// hack: specify empty remove hook to prevent the node from being removed from the DOM
|
|
ctx.addLine(
|
|
`let pvnode = h('dummy', {key: ${templateId}, hook: {insert(vn) { let nvn=w${componentID}.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;${refExpr}${transitionsInsertCode}},remove() {},destroy(vn) {${finalizeComponentCode}}}});`
|
|
);
|
|
ctx.addLine(`const fiber = w${componentID}.__owl__.currentFiber;`);
|
|
ctx.addLine(
|
|
`def${defID}.then(function () {if (w${componentID}.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; ${createHook}});`
|
|
);
|
|
if (registerCode) {
|
|
ctx.addLine(registerCode);
|
|
}
|
|
if (ctx.parentNode) {
|
|
ctx.addLine(`c${ctx.parentNode}.push(pvnode);`);
|
|
}
|
|
ctx.addLine(`w${componentID}.__owl__.pvnode = pvnode;`);
|
|
|
|
ctx.closeIf();
|
|
|
|
if (classObj) {
|
|
ctx.addLine(`w${componentID}.__owl__.classObj=${classObj};`);
|
|
}
|
|
|
|
ctx.addLine(`sibling = w${componentID}.__owl__.currentFiber || sibling;`);
|
|
|
|
return true;
|
|
}
|
|
});
|