[REF] small cleanup for template helpers

src/app/template_helpers.ts

@@ -183,7 +183,7 @@ function multiRefSetter(refs: RefMap, name: string): RefSetter {
   };
 }
 
-export const UTILS = {
+export const helpers = {
   withDefault,
   zero: Symbol("zero"),
   isBoundary,

src/app/template_set.ts

@@ -1,12 +1,13 @@
 import { createBlock, html, list, multi, text, toggler, comment } from "../blockdom";
 import { compile, Template } from "../compiler";
+import { markRaw } from "../reactivity";
+import { Portal } from "../portal";
 import { component, getCurrent } from "../component/component_node";
-import { UTILS } from "./template_helpers";
+import { helpers } from "./template_helpers";
+import { globalTemplates } from "../utils";
 
 const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
 
-export const globalTemplates: { [key: string]: string | Element } = {};
-
 function parseXML(xml: string): Document {
   const parser = new DOMParser();
 
@@ -37,6 +38,22 @@ function parseXML(xml: string): Document {
   return doc;
 }
 
+/**
+ * Returns the helpers object that will be injected in each template closure
+ * function
+ */
+function makeHelpers(getTemplate: (name: string) => Template): any {
+  return Object.assign({}, helpers, {
+    Portal,
+    markRaw,
+    getTemplate,
+    call: (owner: any, subTemplate: string, ctx: any, parent: any, key: any) => {
+      const template = getTemplate(subTemplate);
+      return toggler(subTemplate, template.call(owner, ctx, parent, key));
+    },
+  });
+}
+
 export interface TemplateSetConfig {
   dev?: boolean;
   translatableAttributes?: string[];
@@ -50,13 +67,7 @@ export class TemplateSet {
   templates: { [name: string]: Template } = {};
   translateFn?: (s: string) => string;
   translatableAttributes?: string[];
-  utils: typeof UTILS = Object.assign({}, UTILS, {
-    call: (owner: any, subTemplate: string, ctx: any, parent: any, key: any) => {
-      const template = this.getTemplate(subTemplate);
-      return toggler(subTemplate, template.call(owner, ctx, parent, key));
-    },
-    getTemplate: (name: string) => this.getTemplate(name),
-  });
+  helpers: any;
 
   constructor(config: TemplateSetConfig = {}) {
     this.dev = config.dev || false;
@@ -65,6 +76,7 @@ export class TemplateSet {
     if (config.templates) {
       this.addTemplates(config.templates);
     }
+    this.helpers = makeHelpers(this.getTemplate.bind(this));
   }
 
   addTemplate(
@@ -108,7 +120,7 @@ export class TemplateSet {
       this.templates[name] = function (context, parent) {
         return templates[name].call(this, context, parent);
       };
-      const template = templateFn(bdom, this.utils);
+      const template = templateFn(bdom, this.helpers);
       this.templates[name] = template;
     }
     return this.templates[name];
@@ -123,15 +135,3 @@ export class TemplateSet {
     });
   }
 }
-
-// -----------------------------------------------------------------------------
-//  xml tag helper
-// -----------------------------------------------------------------------------
-export function xml(...args: Parameters<typeof String.raw>) {
-  const name = `__template__${xml.nextId++}`;
-  const value = String.raw(...args);
-  globalTemplates[name] = value;
-  return name;
-}
-
-xml.nextId = 1;

src/index.ts

@@ -1,4 +1,3 @@
-import { UTILS } from "./app/template_helpers";
 import {
   config,
   createBlock,
@@ -13,14 +12,10 @@ import {
   comment,
 } from "./blockdom";
 import { mainEventHandler } from "./component/handler";
-import { Portal } from "./portal";
-import { markRaw } from "./reactivity";
 export type { Reactive } from "./reactivity";
 
 config.shouldNormalizeDom = false;
 config.mainEventHandler = mainEventHandler;
-(UTILS as any).Portal = Portal;
-(UTILS as any).markRaw = markRaw;
 
 export const blockDom = {
   config,
@@ -42,10 +37,9 @@ export { App, mount } from "./app/app";
 export { Component } from "./component/component";
 export { useComponent, useState } from "./component/component_node";
 export { status } from "./component/status";
-export { xml } from "./app/template_set";
 export { reactive, markRaw, toRaw } from "./reactivity";
 export { useEffect, useEnv, useExternalListener, useRef, useChildSubEnv, useSubEnv } from "./hooks";
-export { EventBus, whenReady, loadFile, markup } from "./utils";
+export { EventBus, whenReady, loadFile, markup, xml } from "./utils";
 export {
   onWillStart,
   onMounted,

src/portal.ts

@@ -1,5 +1,5 @@
 import { onWillUnmount } from "./component/lifecycle_hooks";
-import { xml } from "./app/template_set";
+import { xml } from "./utils";
 import { BDom, text, VNode } from "./blockdom";
 import { Component } from "./component/component";
 

src/utils.ts

@@ -71,3 +71,17 @@ export class Markup extends String {}
 export function markup(value: any) {
   return new Markup(value);
 }
+
+// -----------------------------------------------------------------------------
+//  xml tag helper
+// -----------------------------------------------------------------------------
+export const globalTemplates: { [key: string]: string | Element } = {};
+
+export function xml(...args: Parameters<typeof String.raw>) {
+  const name = `__template__${xml.nextId++}`;
+  const value = String.raw(...args);
+  globalTemplates[name] = value;
+  return name;
+}
+
+xml.nextId = 1;

tests/helpers.ts

@@ -15,10 +15,11 @@ import {
   useComponent,
   xml,
 } from "../src";
-import { UTILS } from "../src/app/template_helpers";
-import { globalTemplates, TemplateSet } from "../src/app/template_set";
+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";
 
 const mount = blockDom.mount;
 
@@ -91,7 +92,7 @@ export function renderToBdom(template: string, context: any = {}, node?: any): B
     snapshottedTemplates.add(template);
     expect(fn.toString()).toMatchSnapshot();
   }
-  return fn(blockDom, UTILS)(context, node);
+  return fn(blockDom, helpers)(context, node);
 }
 
 export function renderToString(template: string, context: any = {}, node?: any): string {