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

poc: xml function returns function

Browse Source
This commit is contained in:
Géry Debongnie
2022-03-14 12:15:59 +01:00
parent 77ff5ee895
commit da5fa6d45e
8 changed files with 151 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/template_set.ts
+9 -6
View File
@@ -1,10 +1,9 @@
import { createBlock, html, list, multi, text, toggler, comment } from "../blockdom";
import { compile, Template } from "../compiler";
import { compile, Template, TemplateFunction } from "../compiler";
import { markRaw } from "../reactivity";
import { Portal } from "../portal";
import { component, getCurrent } from "../component/component_node";
import { helpers } from "./template_helpers";
import { globalTemplates } from "../utils";
const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
@@ -48,7 +47,7 @@ function makeHelpers(getTemplate: (name: string) => Template): any {
markRaw,
getTemplate,
call: (owner: any, subTemplate: string, ctx: any, parent: any, key: any) => {
const template = getTemplate(subTemplate);
const template = typeof subTemplate === "string" ? getTemplate(subTemplate) : subTemplate;
return toggler(subTemplate, template.call(owner, ctx, parent, key));
},
});
@@ -63,11 +62,12 @@ export interface TemplateSetConfig {
export class TemplateSet {
dev: boolean;
rawTemplates: typeof globalTemplates = Object.create(globalTemplates);
rawTemplates: any = {}; //typeof globalTemplates = Object.create(globalTemplates);
templates: { [name: string]: Template } = {};
translateFn?: (s: string) => string;
translatableAttributes?: string[];
helpers: any;
bdom: any = bdom;
constructor(config: TemplateSetConfig = {}) {
this.dev = config.dev || false;
@@ -102,8 +102,11 @@ export class TemplateSet {
}
}
getTemplate(name: string): Template {
getTemplate(name: string | any): Template {
if (!(name in this.templates)) {
if (typeof name === "function") {
return name(this);
}
const rawTemplate = this.rawTemplates[name];
if (rawTemplate === undefined) {
let extraInfo = "";
@@ -126,7 +129,7 @@ export class TemplateSet {
return this.templates[name];
}
_compileTemplate(name: string, template: string | Element) {
_compileTemplate(name: string, template: string | Element): TemplateFunction {
return compile(template, {
name,
dev: this.dev,
src/component/component.ts
+3 -1
View File
@@ -1,4 +1,6 @@
import type { ComponentNode } from "./component_node";
import type { TemplateFunction } from "../compiler/index";
import type { App } from "..";
// -----------------------------------------------------------------------------
// Component Class
@@ -20,7 +22,7 @@ export type ComponentConstructor<P extends Props = any, E = any> = (new (
StaticComponentProperties;
export class Component<Props = any, Env = any> {
static template: string = "";
static template: string | ((app: App) => TemplateFunction) = "";
static props?: any;
static defaultProps?: any;
src/utils.ts
+33 -5
View File
@@ -75,13 +75,41 @@ export function markup(value: any) {
// -----------------------------------------------------------------------------
// xml tag helper
// -----------------------------------------------------------------------------
export const globalTemplates: { [key: string]: string | Element } = {};
export function xml(...args: Parameters<typeof String.raw>) {
const name = `__template__${xml.nextId++}`;
export function xml(...args: Parameters<typeof String.raw>): any {
const subTemplates: any = {};
let hasSubTemplates = false;
for (let i = 0; i < args.length; i++) {
const arg = args[i];
if (typeof arg === "function") {
hasSubTemplates = true;
const id = `__template__${xml.nextId++}`;
subTemplates[id] = arg;
args[i] = `{{__owl__.subTemplates.${id}(__owl__.app)}}`;
}
}
const value = String.raw(...args);
globalTemplates[name] = value;
return name;
let cache = new WeakMap();
return (app: any) => {
debugger;
let renderFn = cache.get(app);
if (!renderFn) {
let templateFn = app._compileTemplate("", value);
renderFn = templateFn(app.bdom, app.helpers);
if (hasSubTemplates) {
let origRenderFn = renderFn;
renderFn = (context: any, vnode: any, key?: any) => {
debugger;
context.__owl__.subTemplates = subTemplates;
return origRenderFn(context, vnode, key);
};
}
cache.set(app, renderFn);
}
return renderFn;
};
}
xml.nextId = 1;
tests/components/__snapshots__/basics.test.ts.snap
+3 -3
View File
@@ -169,11 +169,11 @@ exports[`basics can inject values in tagged templates 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { getTemplate } = helpers;
const callTemplate_1 = getTemplate(\`__template__999\`);
let { call } = helpers;
return function template(ctx, node, key = \\"\\") {
return callTemplate_1.call(this, ctx, node, key + \`__1\`);
const template1 = (ctx['__owl__'].subTemplates.__template__1(ctx['__owl__'].app));
return call(this, template1, ctx, node, key + \`__1\`);
}
}"
`;
tests/components/__snapshots__/slots.test.ts.snap
+67 -67
View File
@@ -249,11 +249,11 @@ exports[`slots can use t-call in default-content of t-slot 2`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { callSlot, getTemplate } = helpers;
const callTemplate_1 = getTemplate(\`__template__999\`);
let { callSlot, call } = helpers;
function defaultContent1(ctx, node, key = \\"\\") {
return callTemplate_1.call(this, ctx, node, key + \`__1\`);
const template1 = (ctx['__owl__'].subTemplates.__template__3(ctx['__owl__'].app));
return call(this, template1, ctx, node, key + \`__1\`);
}
return function template(ctx, node, key = \\"\\") {
@@ -772,12 +772,12 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { capture, getTemplate, markRaw } = helpers;
const callTemplate_1 = getTemplate(\`__template__1002\`);
let { capture, call, markRaw } = helpers;
function slot1(ctx, node, key = \\"\\") {
const b2 = text(\`[A]\`);
const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
const template1 = (ctx['__owl__'].subTemplates.__template__5(ctx['__owl__'].app));
const b3 = call(this, template1, ctx, node, key + \`__1\`);
return multi([b2, b3]);
}
@@ -790,41 +790,6 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
exports[`slots mix of slots, t-call, t-call with body, and giving own props child 4`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
const callTemplate_1 = getTemplate(\`__template__1001\`);
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`[sub1] \`);
setContextValue(ctx, \\"dummy\\", ctx['validate']);
ctx = Object.create(ctx);
ctx[isBoundary] = 1;
setContextValue(ctx, \\"v\\", ctx['props'].number);
const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
return multi([b2, b3]);
}
}"
`;
exports[`slots mix of slots, t-call, t-call with body, and giving own props child 5`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`[sub2\`);
const b3 = text(ctx['v']);
const b4 = text(\`]\`);
return multi([b2, b3, b4]);
}
}"
`;
exports[`slots mix of slots, t-call, t-call with body, and giving own props child 6`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -836,7 +801,7 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
}"
`;
exports[`slots mix of slots, t-call, t-call with body, and giving own props child 7`] = `
exports[`slots mix of slots, t-call, t-call with body, and giving own props child 5`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -850,6 +815,41 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
}"
`;
exports[`slots mix of slots, t-call, t-call with body, and giving own props child 6`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { isBoundary, withDefault, setContextValue, call } = helpers;
return function template(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
ctx[isBoundary] = 1
const b2 = text(\`[sub1] \`);
setContextValue(ctx, \\"dummy\\", ctx['validate']);
ctx = Object.create(ctx);
ctx[isBoundary] = 1;
setContextValue(ctx, \\"v\\", ctx['props'].number);
const template1 = (ctx['__owl__'].subTemplates.__template__4(ctx['__owl__'].app));
const b3 = call(this, template1, ctx, node, key + \`__1\`);
return multi([b2, b3]);
}
}"
`;
exports[`slots mix of slots, t-call, t-call with body, and giving own props child 7`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
return function template(ctx, node, key = \\"\\") {
const b2 = text(\`[sub2\`);
const b3 = text(ctx['v']);
const b4 = text(\`]\`);
return multi([b2, b3, b4]);
}
}"
`;
exports[`slots multiple roots are allowed in a default slot 1`] = `
"function anonymous(bdom, helpers
) {
@@ -1486,13 +1486,13 @@ exports[`slots slot and (inline) t-call 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { capture, getTemplate, markRaw } = helpers;
const callTemplate_1 = getTemplate(\`__template__999\`);
let { capture, call, markRaw } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
function slot1(ctx, node, key = \\"\\") {
return callTemplate_1.call(this, ctx, node, key + \`__1\`);
const template1 = (ctx['__owl__'].subTemplates.__template__2(ctx['__owl__'].app));
return call(this, template1, ctx, node, key + \`__1\`);
}
return function template(ctx, node, key = \\"\\") {
@@ -1505,19 +1505,6 @@ exports[`slots slot and (inline) t-call 1`] = `
exports[`slots slot and (inline) t-call 2`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let block1 = createBlock(\`<p>sokka</p>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
}
}"
`;
exports[`slots slot and (inline) t-call 3`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { callSlot } = helpers;
@@ -1531,17 +1518,30 @@ exports[`slots slot and (inline) t-call 3`] = `
}"
`;
exports[`slots slot and (inline) t-call 3`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let block1 = createBlock(\`<p>sokka</p>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
}
}"
`;
exports[`slots slot and t-call 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { capture, getTemplate, markRaw } = helpers;
const callTemplate_1 = getTemplate(\`__template__999\`);
let { capture, call, markRaw } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
function slot1(ctx, node, key = \\"\\") {
return callTemplate_1.call(this, ctx, node, key + \`__1\`);
const template1 = (ctx['__owl__'].subTemplates.__template__1(ctx['__owl__'].app));
return call(this, template1, ctx, node, key + \`__1\`);
}
return function template(ctx, node, key = \\"\\") {
@@ -1556,11 +1556,13 @@ exports[`slots slot and t-call 2`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { callSlot } = helpers;
let block1 = createBlock(\`<p>sokka</p>\`);
let block1 = createBlock(\`<span><block-child-0/></span>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
const b2 = callSlot(ctx, node, key, 'default', false, null);
return block1([], [b2]);
}
}"
`;
@@ -1569,13 +1571,11 @@ exports[`slots slot and t-call 3`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { callSlot } = helpers;
let block1 = createBlock(\`<span><block-child-0/></span>\`);
let block1 = createBlock(\`<p>sokka</p>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = callSlot(ctx, node, key, 'default', false, null);
return block1([], [b2]);
return block1();
}
}"
`;
tests/components/__snapshots__/t_call.test.ts.snap
+15 -15
View File
@@ -116,13 +116,13 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { getTemplate } = helpers;
const callTemplate_1 = getTemplate(\`__template__999\`);
let { call } = helpers;
let block1 = 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 template1 = (ctx['__owl__'].subTemplates.__template__1(ctx['__owl__'].app));
const b2 = call(this, template1, ctx, node, key + \`__1\`);
let txt1 = ctx['counter'];
return block1([txt1], [b2]);
}
@@ -147,13 +147,13 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { getTemplate } = helpers;
const callTemplate_1 = getTemplate(\`__template__999\`);
let { call } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
const template1 = (ctx['__owl__'].subTemplates.__template__6(ctx['__owl__'].app));
const b2 = call(this, template1, ctx, node, key + \`__1\`);
return block1([], [b2]);
}
}"
@@ -178,13 +178,13 @@ exports[`t-call parent is set within t-call 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { getTemplate } = helpers;
const callTemplate_1 = getTemplate(\`__template__999\`);
let { call } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
const template1 = (ctx['__owl__'].subTemplates.__template__3(ctx['__owl__'].app));
const b2 = call(this, template1, ctx, node, key + \`__1\`);
return block1([], [b2]);
}
}"
@@ -218,11 +218,11 @@ exports[`t-call parent is set within t-call with no parentNode 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { getTemplate } = helpers;
const callTemplate_1 = getTemplate(\`__template__999\`);
let { call } = helpers;
return function template(ctx, node, key = \\"\\") {
return callTemplate_1.call(this, ctx, node, key + \`__1\`);
const template1 = (ctx['__owl__'].subTemplates.__template__5(ctx['__owl__'].app));
return call(this, template1, ctx, node, key + \`__1\`);
}
}"
`;
@@ -353,8 +353,7 @@ exports[`t-call t-call in t-foreach and children component 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let { prepareList, getTemplate, withKey } = helpers;
const callTemplate_1 = getTemplate(\`__template__999\`);
let { prepareList, call, withKey } = helpers;
let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -368,7 +367,8 @@ exports[`t-call t-call in t-foreach and children component 1`] = `
ctx[\`val_index\`] = i1;
ctx[\`val_value\`] = k_block2[i1];
const key1 = ctx['val'];
c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
const template1 = (ctx['__owl__'].subTemplates.__template__4(ctx['__owl__'].app));
c_block2[i1] = withKey(call(this, template1, ctx, node, key + \`__1__\${key1}\`), key1);
}
const b2 = list(c_block2);
return block1([], [b2]);
tests/components/hooks.test.ts
+3 -3
View File
@@ -444,6 +444,7 @@ describe("hooks", () => {
let cleanupRun = 0;
let steps = [];
class MyComponent extends Component {
static template = xml`<div/>`;
state = useState({
value: 0,
});
@@ -455,7 +456,6 @@ describe("hooks", () => {
});
}
}
MyComponent.template = xml`<div/>`;
const component = await mount(MyComponent, fixture);
@@ -512,6 +512,7 @@ describe("hooks", () => {
test("dependencies prevent effects from rerunning when unchanged", async () => {
let steps = [];
class MyComponent extends Component {
static template = xml`<div/>`;
state = useState({
a: 0,
b: 0,
@@ -540,7 +541,6 @@ describe("hooks", () => {
);
}
}
MyComponent.template = xml`<div/>`;
steps.push("before mount");
const component = await mount(MyComponent, fixture);
steps.push("after mount");
@@ -597,6 +597,7 @@ describe("hooks", () => {
test("effect with empty dependency list never reruns", async () => {
let steps = [];
class MyComponent extends Component {
static template = xml`<div t-esc="state.value"/>`;
state = useState({
value: 0,
});
@@ -610,7 +611,6 @@ describe("hooks", () => {
);
}
}
MyComponent.template = xml`<div t-esc="state.value"/>`;
const component = await mount(MyComponent, fixture);
tests/helpers.ts
+18 -8
View File
@@ -13,13 +13,13 @@ import {
onWillUpdateProps,
status,
useComponent,
xml,
} from "../src";
import { helpers } from "../src/app/template_helpers";
import { TemplateSet } from "../src/app/template_set";
import { BDom } from "../src/blockdom";
import { compile } from "../src/compiler";
import { globalTemplates } from "../src/utils";
import { Portal } from "../src/portal";
// import { globalTemplates } from "../src/utils";
const mount = blockDom.mount;
@@ -39,9 +39,6 @@ export function makeTestFixture() {
return fixture;
}
beforeEach(() => {
xml.nextId = 999;
});
export async function nextTick(): Promise<void> {
await new Promise((resolve) => setTimeout(resolve));
await new Promise((resolve) => requestAnimationFrame(resolve));
@@ -117,16 +114,29 @@ export function snapshotEverything() {
// this function has already been called
return;
}
const globalTemplateNames = new Set(Object.keys(globalTemplates));
shouldSnapshot = true;
beforeEach(() => {
snapshottedTemplates.clear();
});
const getTemplate = TemplateSet.prototype.getTemplate;
TemplateSet.prototype.getTemplate = function (this: any, name: string) {
if (name === Portal.template) {
this.skipSnapshot = true;
}
const result = getTemplate.call(this, name);
this.skipSnapshot = false;
return result;
};
const originalCompileTemplate = TemplateSet.prototype._compileTemplate;
TemplateSet.prototype._compileTemplate = function (name: string, template: string | Element) {
TemplateSet.prototype._compileTemplate = function (
this: any,
name: string,
template: string | Element
) {
const fn = originalCompileTemplate.call(this, "", template);
if (!globalTemplateNames.has(name)) {
if (!this.skipSnapshot) {
expect(fn.toString()).toMatchSnapshot();
}
return fn;