From 79738e00c7abf1b3fb70b89d8e513a1185152bb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Wed, 2 Mar 2022 10:04:54 +0100 Subject: [PATCH] [REF] small cleanup for template helpers --- src/app/template_helpers.ts | 2 +- src/app/template_set.ts | 46 ++++++++++++++++++------------------- src/index.ts | 8 +------ src/portal.ts | 2 +- src/utils.ts | 14 +++++++++++ tests/helpers.ts | 7 +++--- 6 files changed, 44 insertions(+), 35 deletions(-) diff --git a/src/app/template_helpers.ts b/src/app/template_helpers.ts index e167551c..a3495277 100644 --- a/src/app/template_helpers.ts +++ b/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, diff --git a/src/app/template_set.ts b/src/app/template_set.ts index 4c8c13d6..c043f19a 100644 --- a/src/app/template_set.ts +++ b/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) { - const name = `__template__${xml.nextId++}`; - const value = String.raw(...args); - globalTemplates[name] = value; - return name; -} - -xml.nextId = 1; diff --git a/src/index.ts b/src/index.ts index ca67b8d4..6ab34dd9 100644 --- a/src/index.ts +++ b/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, diff --git a/src/portal.ts b/src/portal.ts index c9461a85..8504c083 100644 --- a/src/portal.ts +++ b/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"; diff --git a/src/utils.ts b/src/utils.ts index e7f52357..4b3cda78 100644 --- a/src/utils.ts +++ b/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) { + const name = `__template__${xml.nextId++}`; + const value = String.raw(...args); + globalTemplates[name] = value; + return name; +} + +xml.nextId = 1; diff --git a/tests/helpers.ts b/tests/helpers.ts index 9e17f1e2..13d72654 100644 --- a/tests/helpers.ts +++ b/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 {