diff --git a/src/app/template_set.ts b/src/app/template_set.ts index a4ec1db4..c968c37f 100644 --- a/src/app/template_set.ts +++ b/src/app/template_set.ts @@ -55,7 +55,7 @@ export class TemplateSet { const template = this.getTemplate(subTemplate); return toggler(subTemplate, template.call(owner, ctx, parent, key)); }, - getTemplate: (name: string) => this.getTemplate(name), + getTemplate: (name: string, nameSpace?: string) => this.getTemplate(name, nameSpace), }); constructor(config: TemplateSetConfig = {}) { @@ -87,13 +87,15 @@ export class TemplateSet { } } - getTemplate(name: string): Template { + getTemplate(name: string, nameSpace?: string): Template { + if (!(name in this.templates)) { const rawTemplate = this.rawTemplates[name]; if (rawTemplate === undefined) { throw new Error(`Missing template: "${name}"`); } - const templateFn = this._compileTemplate(name, rawTemplate); + console.log("getTemplate", nameSpace); + const templateFn = this._compileTemplate(name, rawTemplate, nameSpace); // first add a function to lazily get the template, in case there is a // recursive call to the template name const templates = this.templates; @@ -106,12 +108,14 @@ export class TemplateSet { return this.templates[name]; } - _compileTemplate(name: string, template: string | Node) { + _compileTemplate(name: string, template: string | Node, nameSpace?: string) { + console.log("CompileTpm", nameSpace) return compile(template, { name, dev: this.dev, translateFn: this.translateFn, translatableAttributes: this.translatableAttributes, + nameSpace: nameSpace, }); } } diff --git a/src/compiler/code_generator.ts b/src/compiler/code_generator.ts index cf622393..a55f24b6 100644 --- a/src/compiler/code_generator.ts +++ b/src/compiler/code_generator.ts @@ -33,6 +33,7 @@ export interface Config { export interface CodeGenOptions extends Config { hasSafeContext?: boolean; name?: string; + nameSpace?: string; } // using a non-html document so that HTML serializes as XML instead @@ -214,8 +215,9 @@ export class CodeGenerator { translateFn: (s: string) => string; translatableAttributes: string[]; ast: AST; - staticCalls: { id: string; template: string }[] = []; + staticCalls: { id: string; template: string, nameSpace?: string }[] = []; helpers: Set = new Set(); + nameSpace?: string; constructor(ast: AST, options: CodeGenOptions) { this.translateFn = options.translateFn || ((s: string) => s); @@ -224,6 +226,8 @@ export class CodeGenerator { this.dev = options.dev || false; this.ast = ast; this.templateName = options.name; + this.nameSpace = options.nameSpace; + console.log('ThisNS', this.nameSpace) } generateCode(): string { @@ -238,6 +242,7 @@ export class CodeGenerator { isLast: true, translate: true, tKeyExpr: null, + nameSpace: this.nameSpace, }); // define blocks and utility functions let mainCode = [ @@ -250,8 +255,12 @@ export class CodeGenerator { mainCode.push(`// Template name: "${this.templateName}"`); } - for (let { id, template } of this.staticCalls) { - mainCode.push(`const ${id} = getTemplate(${template});`); + for (let { id, template, nameSpace } of this.staticCalls) { + let ns; + if (nameSpace) { + ns = `, "${nameSpace}"`; + } + mainCode.push(`const ${id} = getTemplate(${template}${ns});`); } // define all blocks @@ -539,6 +548,7 @@ export class CodeGenerator { // attributes const attrs: { [key: string]: string } = {}; const nameSpace = ast.ns || ctx.nameSpace; + console.log(nameSpace) if (nameSpace && isNewBlock) { // specific namespace uri attrs["block-ns"] = nameSpace; @@ -960,7 +970,7 @@ export class CodeGenerator { } else { const id = this.generateId(`callTemplate_`); this.helpers.add("getTemplate"); - this.staticCalls.push({ id, template: subTemplate }); + this.staticCalls.push({ id, template: subTemplate, nameSpace: ctx.nameSpace }); block = this.createBlock(block, "multi", ctx); this.insertBlock(`${id}.call(this, ctx, node, ${key})`, block!, { ...ctx, diff --git a/src/compiler/index.ts b/src/compiler/index.ts index 547c6322..89cbac81 100644 --- a/src/compiler/index.ts +++ b/src/compiler/index.ts @@ -8,6 +8,7 @@ export type TemplateFunction = (blocks: any, utils: any) => Template; interface CompileOptions extends Config { name?: string; + nameSpace?: string, } export function compile(template: string | Node, options: CompileOptions = {}): TemplateFunction { // parsing @@ -20,8 +21,10 @@ export function compile(template: string | Node, options: CompileOptions = {}): : !template.includes("t-set") && !template.includes("t-call"); // code generation + console.log("compile", options) const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext }); const code = codeGenerator.generateCode(); + console.log(code) // template function return new Function("bdom, helpers", code) as TemplateFunction; } diff --git a/tests/compiler/__snapshots__/svg.test.ts.snap b/tests/compiler/__snapshots__/svg.test.ts.snap index 7bb81ec8..156b6bb0 100644 --- a/tests/compiler/__snapshots__/svg.test.ts.snap +++ b/tests/compiler/__snapshots__/svg.test.ts.snap @@ -57,7 +57,7 @@ exports[`properly support svg svg namespace added to sub-blocks (t-call) 1`] = ` ) { let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; let { getTemplate } = helpers; - const callTemplate_1 = getTemplate(\`path\`); + const callTemplate_1 = getTemplate(\`path\`, \\"http://www.w3.org/2000/svg\\"); let block1 = createBlock(\`\`);