Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] compiler: improve name of compiled template functions #1500

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

[WIP] compiler: improve name of compiled template functions #1500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e60a24f
better template names
sdegueldre Jul 31, 2023
1a04fa1
snapshots
sdegueldre Jul 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion src/compiler/code_generator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export interface Config {
export interface CodeGenOptions extends Config {
hasSafeContext?: boolean;
name?: string;
alias?: string;
}

// using a non-html document so that <inner/outer>HTML serializes as XML instead
Expand Down Expand Up @@ -197,6 +198,7 @@ class CodeTarget {
hasRefWrapper: boolean = false;

constructor(name: string, on?: EventHandlers | null) {
debugger
this.name = name;
this.on = on || null;
}
Expand Down Expand Up @@ -243,6 +245,13 @@ class CodeTarget {
}
}

function toFnName(name: string = "", alias?: string) {
if (alias) {
name += `_${alias}`;
}
return name.replace(/[^A-Za-z_$0-9]+/g, "_") || "template";
}

const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
const translationRE = /^(\s*)([\s\S]+?)(\s*)$/;

Expand All @@ -252,7 +261,7 @@ export class CodeGenerator {
hasSafeContext: boolean;
isDebug: boolean = false;
targets: CodeTarget[] = [];
target = new CodeTarget("template");
target: CodeTarget;
templateName?: string;
dev: boolean;
translateFn: (s: string) => string;
Expand All @@ -263,6 +272,7 @@ export class CodeGenerator {
helpers: Set<string> = new Set();

constructor(ast: AST, options: CodeGenOptions) {
this.target = new CodeTarget(toFnName(options.name, options.alias));
this.translateFn = options.translateFn || ((s: string) => s);
if (options.translatableAttributes) {
const attrs = new Set(TRANSLATABLE_ATTRS);
Expand Down
1 change: 1 addition & 0 deletions src/compiler/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export type TemplateFunction = (app: TemplateSet, bdom: any, helpers: any) => Te

interface CompileOptions extends Config {
name?: string;
alias?: string;
}
export function compile(
template: string | Element,
Expand Down
4 changes: 3 additions & 1 deletion src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@ export * from "./runtime";

TemplateSet.prototype._compileTemplate = function _compileTemplate(
name: string,
template: string | Element
template: string | Element,
alias?: string
) {
return compile(template, {
name,
alias,
dev: this.dev,
translateFn: this.translateFn,
translatableAttributes: this.translatableAttributes,
Expand Down
2 changes: 1 addition & 1 deletion src/runtime/component_node.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
}
this.component = new C(props, env, this);
const ctx = Object.assign(Object.create(this.component), { this: this.component });
this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
this.renderFn = app.getTemplate(C.template, C.name).bind(this.component, ctx, this);
this.component.setup();
currentNode = null;
}
Expand Down
8 changes: 4 additions & 4 deletions src/runtime/template_set.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export class TemplateSet {
}
}

getTemplate(name: string): Template {
getTemplate(name: string, alias?: string): Template {
if (!(name in this.templates)) {
const rawTemplate = this.rawTemplates[name];
if (rawTemplate === undefined) {
Expand All @@ -106,7 +106,7 @@ export class TemplateSet {
throw new OwlError(`Missing template: "${name}"${extraInfo}`);
}
const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate, alias);
// first add a function to lazily get the template, in case there is a
// recursive call to the template name
const templates = this.templates;
Expand All @@ -119,7 +119,7 @@ export class TemplateSet {
return this.templates[name];
}

_compileTemplate(name: string, template: string | Element): ReturnType<typeof compile> {
_compileTemplate(name: string, template: string | Element, alias?: string): ReturnType<typeof compile> {
throw new OwlError(`Unable to compile a template. Please use owl full build instead`);
}

Expand All @@ -135,7 +135,7 @@ export class TemplateSet {
export const globalTemplates: { [key: string]: string | Element | TemplateFunction } = {};

export function xml(...args: Parameters<typeof String.raw>) {
const name = `__template__${xml.nextId++}`;
const name = `xml_template_${xml.nextId++}`;
const value = String.raw(...args);
globalTemplates[name] = value;
return name;
Expand Down
54 changes: 36 additions & 18 deletions tests/__snapshots__/reactivity.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,12 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_1000\\"
const comp1 = app.createComponent(\`Child\`, true, false, false, []);

let block1 = createBlock(\`<div><block-child-0/></div>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
let b2;
if (ctx['state'].flag) {
b2 = comp1({}, key + \`__1\`, node, this, null);
Expand All @@ -68,10 +69,11 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_999\\"

let block1 = createBlock(\`<span><block-text-0/></span>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_999_Child(ctx, node, key = \\"\\") {
let txt1 = ctx['contextObj'].a;
return block1([txt1]);
}
Expand All @@ -82,11 +84,12 @@ exports[`Reactivity: useState destroyed component is inactive 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_1000\\"
const comp1 = app.createComponent(\`Child\`, true, false, false, []);

let block1 = createBlock(\`<div><block-child-0/></div>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
let b2;
if (ctx['state'].flag) {
b2 = comp1({}, key + \`__1\`, node, this, null);
Expand All @@ -100,10 +103,11 @@ exports[`Reactivity: useState destroyed component is inactive 2`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_999\\"

let block1 = createBlock(\`<span><block-text-0/></span>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_999_Child(ctx, node, key = \\"\\") {
let txt1 = ctx['contextObj'].a;
return block1([txt1]);
}
Expand All @@ -114,10 +118,11 @@ exports[`Reactivity: useState one components can subscribe twice to same context
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_999\\"

let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_999_Comp(ctx, node, key = \\"\\") {
let txt1 = ctx['contextObj1'].a;
let txt2 = ctx['contextObj2'].b;
return block1([txt1, txt2]);
Expand All @@ -129,11 +134,12 @@ exports[`Reactivity: useState parent and children subscribed to same context 1`]
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_1000\\"
const comp1 = app.createComponent(\`Child\`, true, false, false, []);

let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
const b2 = comp1({}, key + \`__1\`, node, this, null);
let txt1 = ctx['contextObj'].b;
return block1([txt1], [b2]);
Expand All @@ -145,10 +151,11 @@ exports[`Reactivity: useState parent and children subscribed to same context 2`]
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_999\\"

let block1 = createBlock(\`<span><block-text-0/></span>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_999_Child(ctx, node, key = \\"\\") {
let txt1 = ctx['contextObj'].a;
return block1([txt1]);
}
Expand Down Expand Up @@ -222,12 +229,13 @@ exports[`Reactivity: useState two components are updated in parallel 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_1000\\"
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
const comp2 = app.createComponent(\`Child\`, true, false, false, []);

let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
const b2 = comp1({}, key + \`__1\`, node, this, null);
const b3 = comp2({}, key + \`__2\`, node, this, null);
return block1([], [b2, b3]);
Expand All @@ -239,10 +247,11 @@ exports[`Reactivity: useState two components are updated in parallel 2`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_999\\"

let block1 = createBlock(\`<span><block-text-0/></span>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_999_Child(ctx, node, key = \\"\\") {
let txt1 = ctx['contextObj'].value;
return block1([txt1]);
}
Expand All @@ -253,12 +262,13 @@ exports[`Reactivity: useState two components can subscribe to same context 1`] =
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_1000\\"
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
const comp2 = app.createComponent(\`Child\`, true, false, false, []);

let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
const b2 = comp1({}, key + \`__1\`, node, this, null);
const b3 = comp2({}, key + \`__2\`, node, this, null);
return block1([], [b2, b3]);
Expand All @@ -270,10 +280,11 @@ exports[`Reactivity: useState two components can subscribe to same context 2`] =
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_999\\"

let block1 = createBlock(\`<span><block-text-0/></span>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_999_Child(ctx, node, key = \\"\\") {
let txt1 = ctx['contextObj'].value;
return block1([txt1]);
}
Expand All @@ -284,12 +295,13 @@ exports[`Reactivity: useState two independent components on different levels are
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_1001\\"
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
const comp2 = app.createComponent(\`Parent\`, true, false, false, []);

let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_1001_GrandFather(ctx, node, key = \\"\\") {
const b2 = comp1({}, key + \`__1\`, node, this, null);
const b3 = comp2({}, key + \`__2\`, node, this, null);
return block1([], [b2, b3]);
Expand All @@ -301,10 +313,11 @@ exports[`Reactivity: useState two independent components on different levels are
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_999\\"

let block1 = createBlock(\`<span><block-text-0/></span>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_999_Child(ctx, node, key = \\"\\") {
let txt1 = ctx['contextObj'].value;
return block1([txt1]);
}
Expand All @@ -315,11 +328,12 @@ exports[`Reactivity: useState two independent components on different levels are
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_1000\\"
const comp1 = app.createComponent(\`Child\`, true, false, false, []);

let block1 = createBlock(\`<div><block-child-0/></div>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
const b2 = comp1({}, key + \`__1\`, node, this, null);
return block1([], [b2]);
}
Expand All @@ -330,10 +344,11 @@ exports[`Reactivity: useState useContext=useState hook is reactive, for one comp
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_999\\"

let block1 = createBlock(\`<div><block-text-0/></div>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_999_Comp(ctx, node, key = \\"\\") {
let txt1 = ctx['contextObj'].value;
return block1([txt1]);
}
Expand All @@ -345,11 +360,12 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let { prepareList, withKey } = helpers;
// Template name: \\"xml_template_1000\\"
const comp1 = app.createComponent(\`Quantity\`, true, false, false, [\\"id\\"]);

let block1 = createBlock(\`<div><block-child-0/> Total: <block-text-0/> Count: <block-text-1/></div>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_1000_ListOfQuantities(ctx, node, key = \\"\\") {
ctx = Object.create(ctx);
const [k_block2, v_block2, l_block2, c_block2] = prepareList(Object.keys(ctx['state']));;
for (let i1 = 0; i1 < l_block2; i1++) {
Expand All @@ -370,10 +386,11 @@ exports[`Reactivity: useState useless atoms should be deleted 2`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_999\\"

let block1 = createBlock(\`<div><block-text-0/></div>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_999_Quantity(ctx, node, key = \\"\\") {
let txt1 = ctx['state'].quantity;
return block1([txt1]);
}
Expand All @@ -384,10 +401,11 @@ exports[`Reactivity: useState very simple use, with initial value 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
// Template name: \\"xml_template_999\\"

let block1 = createBlock(\`<div><block-text-0/></div>\`);

return function template(ctx, node, key = \\"\\") {
return function xml_template_999_Comp(ctx, node, key = \\"\\") {
let txt1 = ctx['contextObj'].value;
return block1([txt1]);
}
Expand Down
Loading
Loading