better template names

src/compiler/code_generator.ts

@@ -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
@@ -197,6 +198,7 @@ class CodeTarget {
   hasRefWrapper: boolean = false;
 
   constructor(name: string, on?: EventHandlers | null) {
+    debugger
     this.name = name;
     this.on = on || null;
   }
@@ -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*)$/;
 
@@ -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;
@@ -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);

src/compiler/index.ts

@@ -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,

src/index.ts

@@ -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,

src/runtime/component_node.ts

@@ -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;
   }

src/runtime/template_set.ts

@@ -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) {
@@ -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;
@@ -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`);
   }
 
@@ -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;

tests/helpers.ts

@@ -128,8 +128,8 @@ export function snapshotEverything() {
   });
 
   const originalCompileTemplate = TemplateSet.prototype._compileTemplate;
-  TemplateSet.prototype._compileTemplate = function (name: string, template: string | Element) {
-    const fn = originalCompileTemplate.call(this, "", template);
+  TemplateSet.prototype._compileTemplate = function (name: string, template: string | Element, alias?: string) {
+    const fn = originalCompileTemplate.call(this, name, template, alias);
     if (!globalTemplateNames.has(name)) {
       expect(fn.toString()).toMatchSnapshot();
     }