From 8179846e381eb0a87bf3bc266abec8f4400565bc Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Fri, 2 Apr 2021 12:42:06 -0400 Subject: Refactor template rendering (#1583) * Update _errorToJson to _serializeError * Remove async * Refactor render * Simplify _getModifiedData * Rename data => commonData * Rename templates => template for consistency * Improve errors check * Update tests --- ext/js/templates/template-renderer-frame-api.js | 18 +++++----- ext/js/templates/template-renderer-frame-main.js | 2 +- ext/js/templates/template-renderer.js | 43 +++++++++++++----------- 3 files changed, 34 insertions(+), 29 deletions(-) (limited to 'ext/js/templates') diff --git a/ext/js/templates/template-renderer-frame-api.js b/ext/js/templates/template-renderer-frame-api.js index 6eebc199..104e357b 100644 --- a/ext/js/templates/template-renderer-frame-api.js +++ b/ext/js/templates/template-renderer-frame-api.js @@ -19,8 +19,8 @@ class TemplateRendererFrameApi { constructor(templateRenderer) { this._templateRenderer = templateRenderer; this._windowMessageHandlers = new Map([ - ['render', {async: true, handler: this._onRender.bind(this)}], - ['getModifiedData', {async: true, handler: this._onGetModifiedData.bind(this)}] + ['render', {async: false, handler: this._onRender.bind(this)}], + ['getModifiedData', {async: false, handler: this._onGetModifiedData.bind(this)}] ]); } @@ -47,25 +47,25 @@ class TemplateRendererFrameApi { } response = {result}; } catch (error) { - response = {error: this._errorToJson(error)}; + response = {error: this._serializeError(error)}; } if (typeof id === 'undefined') { return; } source.postMessage({action: `${action}.response`, params: response, id}, '*'); } - async _onRender({template, data, type}) { - return await this._templateRenderer.render(template, data, type); + _onRender({template, data, type}) { + return this._templateRenderer.render(template, data, type); } - async _onGetModifiedData({data, type}) { - const result = await this._templateRenderer.getModifiedData(data, type); + _onGetModifiedData({data, type}) { + const result = this._templateRenderer.getModifiedData(data, type); return this._clone(result); } - _errorToJson(error) { + _serializeError(error) { try { - if (error !== null && typeof error === 'object') { + if (typeof error === 'object' && error !== null) { return { name: error.name, message: error.message, diff --git a/ext/js/templates/template-renderer-frame-main.js b/ext/js/templates/template-renderer-frame-main.js index c915d6b0..40ecf308 100644 --- a/ext/js/templates/template-renderer-frame-main.js +++ b/ext/js/templates/template-renderer-frame-main.js @@ -27,7 +27,7 @@ const templateRenderer = new TemplateRenderer(japaneseUtil); const ankiNoteDataCreator = new AnkiNoteDataCreator(japaneseUtil); templateRenderer.registerDataType('ankiNote', { - modifier: ({data, marker}) => ankiNoteDataCreator.create(marker, data) + modifier: ({marker, commonData}) => ankiNoteDataCreator.create(marker, commonData) }); const templateRendererFrameApi = new TemplateRendererFrameApi(templateRenderer); templateRendererFrameApi.prepare(); diff --git a/ext/js/templates/template-renderer.js b/ext/js/templates/template-renderer.js index a7a4a842..5441528c 100644 --- a/ext/js/templates/template-renderer.js +++ b/ext/js/templates/template-renderer.js @@ -33,10 +33,21 @@ class TemplateRenderer { this._dataTypes.set(name, {modifier}); } - async render(template, data, type) { + render(template, data, type) { + const instance = this._getTemplateInstance(template); + data = this._getModifiedData(data, type); + return this._renderTemplate(instance, data); + } + + getModifiedData(data, type) { + return this._getModifiedData(data, type); + } + + // Private + + _getTemplateInstance(template) { if (!this._helpersRegistered) { this._registerHelpers(); - this._helpersRegistered = true; } const cache = this._cache; @@ -47,8 +58,11 @@ class TemplateRenderer { cache.set(template, instance); } + return instance; + } + + _renderTemplate(instance, data) { try { - data = this._getModifiedData(data, type); this._stateStack = [new Map()]; return instance(data).trim(); } finally { @@ -56,27 +70,16 @@ class TemplateRenderer { } } - async getModifiedData(data, type) { - return this._getModifiedData(data, type); - } - - // Private - - _getModifier(type) { + _getModifiedData(data, type) { if (typeof type === 'string') { const typeInfo = this._dataTypes.get(type); if (typeof typeInfo !== 'undefined') { - return typeInfo.modifier; + const {modifier} = typeInfo; + if (typeof modifier === 'function') { + data = modifier(data); + } } } - return null; - } - - _getModifiedData(data, type) { - const modifier = this._getModifier(type); - if (typeof modifier === 'function') { - data = modifier(data); - } return data; } @@ -122,6 +125,8 @@ class TemplateRenderer { for (const [name, helper] of helpers) { this._registerHelper(name, helper); } + + this._helpersRegistered = true; } _registerHelper(name, helper) { -- cgit v1.2.3