diff options
Diffstat (limited to 'ext/js/templates')
-rw-r--r-- | ext/js/templates/template-patcher.js | 92 | ||||
-rw-r--r-- | ext/js/templates/template-renderer-frame-api.js | 78 | ||||
-rw-r--r-- | ext/js/templates/template-renderer-frame-main.js | 33 | ||||
-rw-r--r-- | ext/js/templates/template-renderer-proxy.js | 157 | ||||
-rw-r--r-- | ext/js/templates/template-renderer.js | 416 |
5 files changed, 776 insertions, 0 deletions
diff --git a/ext/js/templates/template-patcher.js b/ext/js/templates/template-patcher.js new file mode 100644 index 00000000..57178957 --- /dev/null +++ b/ext/js/templates/template-patcher.js @@ -0,0 +1,92 @@ +/* + * Copyright (C) 2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +class TemplatePatcher { + constructor() { + this._diffPattern1 = /\n?\{\{<<<<<<<\}\}\n/g; + this._diffPattern2 = /\n\{\{=======\}\}\n/g; + this._diffPattern3 = /\n\{\{>>>>>>>\}\}\n*/g; + this._lookupMarkerPattern = /[ \t]*\{\{~?>\s*\(\s*lookup\s*\.\s*"marker"\s*\)\s*~?\}\}/g; + } + + parsePatch(content) { + const diffPattern1 = this._diffPattern1; + const diffPattern2 = this._diffPattern2; + const diffPattern3 = this._diffPattern3; + const modifications = []; + let index = 0; + + while (true) { + // Find modification boundaries + diffPattern1.lastIndex = index; + const m1 = diffPattern1.exec(content); + if (m1 === null) { break; } + + diffPattern2.lastIndex = m1.index + m1[0].length; + const m2 = diffPattern2.exec(content); + if (m2 === null) { break; } + + diffPattern3.lastIndex = m2.index + m2[0].length; + const m3 = diffPattern3.exec(content); + if (m3 === null) { break; } + + // Construct + const current = content.substring(m1.index + m1[0].length, m2.index); + const replacement = content.substring(m2.index + m2[0].length, m3.index); + + if (current.length > 0) { + modifications.push({current, replacement}); + } + + // Update + content = content.substring(0, m1.index) + content.substring(m3.index + m3[0].length); + index = m1.index; + } + + return {addition: content, modifications}; + } + + applyPatch(template, patch) { + for (const {current, replacement} of patch.modifications) { + let fromIndex = 0; + while (true) { + const index = template.indexOf(current, fromIndex); + if (index < 0) { break; } + template = template.substring(0, index) + replacement + template.substring(index + current.length); + fromIndex = index + replacement.length; + } + } + template = this._addFieldTemplatesBeforeEnd(template, patch.addition); + return template; + } + + // Private + + _addFieldTemplatesBeforeEnd(template, addition) { + const newline = '\n'; + let replaced = false; + template = template.replace(this._lookupMarkerPattern, (g0) => { + replaced = true; + return `${addition}${newline}${g0}`; + }); + if (!replaced) { + template += newline; + template += addition; + } + return template; + } +} diff --git a/ext/js/templates/template-renderer-frame-api.js b/ext/js/templates/template-renderer-frame-api.js new file mode 100644 index 00000000..4936a2af --- /dev/null +++ b/ext/js/templates/template-renderer-frame-api.js @@ -0,0 +1,78 @@ +/* + * Copyright (C) 2020-2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +class TemplateRendererFrameApi { + constructor(templateRenderer) { + this._templateRenderer = templateRenderer; + this._windowMessageHandlers = new Map([ + ['render', {async: true, handler: this._onRender.bind(this)}] + ]); + } + + prepare() { + window.addEventListener('message', this._onWindowMessage.bind(this), false); + } + + // Private + + _onWindowMessage(e) { + const {source, data: {action, params, id}} = e; + const messageHandler = this._windowMessageHandlers.get(action); + if (typeof messageHandler === 'undefined') { return; } + + this._onWindowMessageInner(messageHandler, action, params, source, id); + } + + async _onWindowMessageInner({handler, async}, action, params, source, id) { + let response; + try { + let result = handler(params); + if (async) { + result = await result; + } + response = {result}; + } catch (error) { + response = {error: this._errorToJson(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); + } + + _errorToJson(error) { + try { + if (error !== null && typeof error === 'object') { + return { + name: error.name, + message: error.message, + stack: error.stack, + data: error.data + }; + } + } catch (e) { + // NOP + } + return { + value: error, + hasValue: true + }; + } +} diff --git a/ext/js/templates/template-renderer-frame-main.js b/ext/js/templates/template-renderer-frame-main.js new file mode 100644 index 00000000..d25eb56d --- /dev/null +++ b/ext/js/templates/template-renderer-frame-main.js @@ -0,0 +1,33 @@ +/* + * Copyright (C) 2020-2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +/* globals + * AnkiNoteData + * JapaneseUtil + * TemplateRenderer + * TemplateRendererFrameApi + */ + +(() => { + const japaneseUtil = new JapaneseUtil(null); + const templateRenderer = new TemplateRenderer(japaneseUtil); + templateRenderer.registerDataType('ankiNote', { + modifier: ({data, marker}) => new AnkiNoteData(data, marker).createPublic() + }); + const api = new TemplateRendererFrameApi(templateRenderer); + api.prepare(); +})(); diff --git a/ext/js/templates/template-renderer-proxy.js b/ext/js/templates/template-renderer-proxy.js new file mode 100644 index 00000000..6a49832b --- /dev/null +++ b/ext/js/templates/template-renderer-proxy.js @@ -0,0 +1,157 @@ +/* + * Copyright (C) 2020-2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +class TemplateRendererProxy { + constructor() { + this._frame = null; + this._frameNeedsLoad = true; + this._frameLoading = false; + this._frameLoadPromise = null; + this._frameUrl = chrome.runtime.getURL('/template-renderer.html'); + this._invocations = new Set(); + } + + async render(template, data, type) { + await this._prepareFrame(); + return await this._invoke('render', {template, data, type}); + } + + // Private + + async _prepareFrame() { + if (this._frame === null) { + this._frame = document.createElement('iframe'); + this._frame.addEventListener('load', this._onFrameLoad.bind(this), false); + const style = this._frame.style; + style.opacity = '0'; + style.width = '0'; + style.height = '0'; + style.position = 'absolute'; + style.border = '0'; + style.margin = '0'; + style.padding = '0'; + style.pointerEvents = 'none'; + } + if (this._frameNeedsLoad) { + this._frameNeedsLoad = false; + this._frameLoading = true; + this._frameLoadPromise = this._loadFrame(this._frame, this._frameUrl) + .finally(() => { this._frameLoading = false; }); + } + await this._frameLoadPromise; + } + + _loadFrame(frame, url, timeout=5000) { + return new Promise((resolve, reject) => { + let ready = false; + const cleanup = () => { + frame.removeEventListener('load', onLoad, false); + if (timer !== null) { + clearTimeout(timer); + timer = null; + } + }; + const onLoad = () => { + if (!ready) { return; } + cleanup(); + resolve(); + }; + + let timer = setTimeout(() => { + cleanup(); + reject(new Error('Timeout')); + }, timeout); + + frame.removeAttribute('src'); + frame.removeAttribute('srcdoc'); + frame.addEventListener('load', onLoad, false); + try { + document.body.appendChild(frame); + ready = true; + frame.contentDocument.location.href = url; + } catch (e) { + cleanup(); + reject(e); + } + }); + } + + _invoke(action, params, timeout=null) { + return new Promise((resolve, reject) => { + const frameWindow = (this._frame !== null ? this._frame.contentWindow : null); + if (frameWindow === null) { + reject(new Error('Frame not set up')); + return; + } + + const id = generateId(16); + const invocation = { + cancel: () => { + cleanup(); + reject(new Error('Terminated')); + } + }; + + const cleanup = () => { + this._invocations.delete(invocation); + window.removeEventListener('message', onMessage, false); + if (timer !== null) { + clearTimeout(timer); + timer = null; + } + }; + const onMessage = (e) => { + if ( + e.source !== frameWindow || + e.data.id !== id || + e.data.action !== `${action}.response` + ) { + return; + } + + const response = e.data.params; + cleanup(); + const {error} = response; + if (error) { + reject(deserializeError(error)); + } else { + resolve(response.result); + } + }; + + let timer = (typeof timeout === 'number' ? setTimeout(() => { + cleanup(); + reject(new Error('Timeout')); + }, timeout) : null); + + this._invocations.add(invocation); + + window.addEventListener('message', onMessage, false); + frameWindow.postMessage({action, params, id}, '*'); + }); + } + + _onFrameLoad() { + if (this._frameLoading) { return; } + this._frameNeedsLoad = true; + + for (const invocation of this._invocations) { + invocation.cancel(); + } + this._invocations.clear(); + } +} diff --git a/ext/js/templates/template-renderer.js b/ext/js/templates/template-renderer.js new file mode 100644 index 00000000..ae39e478 --- /dev/null +++ b/ext/js/templates/template-renderer.js @@ -0,0 +1,416 @@ +/* + * Copyright (C) 2016-2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +/* global + * Handlebars + */ + +class TemplateRenderer { + constructor(japaneseUtil) { + this._japaneseUtil = japaneseUtil; + this._cache = new Map(); + this._cacheMaxSize = 5; + this._helpersRegistered = false; + this._stateStack = null; + this._dataTypes = new Map(); + } + + registerDataType(name, {modifier=null, modifierPost=null}) { + this._dataTypes.set(name, {modifier, modifierPost}); + } + + async render(template, data, type) { + if (!this._helpersRegistered) { + this._registerHelpers(); + this._helpersRegistered = true; + } + + const cache = this._cache; + let instance = cache.get(template); + if (typeof instance === 'undefined') { + this._updateCacheSize(this._cacheMaxSize - 1); + instance = Handlebars.compile(template); + cache.set(template, instance); + } + + let modifier = null; + let modifierPost = null; + if (typeof type === 'string') { + const typeInfo = this._dataTypes.get(type); + if (typeof typeInfo !== 'undefined') { + ({modifier, modifierPost} = typeInfo); + } + } + + try { + if (typeof modifier === 'function') { + data = modifier(data); + } + + this._stateStack = [new Map()]; + return instance(data).trim(); + } finally { + this._stateStack = null; + + if (typeof modifierPost === 'function') { + modifierPost(data); + } + } + } + + // Private + + _updateCacheSize(maxSize) { + const cache = this._cache; + let removeCount = cache.size - maxSize; + if (removeCount <= 0) { return; } + + for (const key of cache.keys()) { + cache.delete(key); + if (--removeCount <= 0) { break; } + } + } + + _registerHelpers() { + Handlebars.partials = Handlebars.templates; + + const helpers = [ + ['dumpObject', this._dumpObject.bind(this)], + ['furigana', this._furigana.bind(this)], + ['furiganaPlain', this._furiganaPlain.bind(this)], + ['kanjiLinks', this._kanjiLinks.bind(this)], + ['multiLine', this._multiLine.bind(this)], + ['sanitizeCssClass', this._sanitizeCssClass.bind(this)], + ['regexReplace', this._regexReplace.bind(this)], + ['regexMatch', this._regexMatch.bind(this)], + ['mergeTags', this._mergeTags.bind(this)], + ['eachUpTo', this._eachUpTo.bind(this)], + ['spread', this._spread.bind(this)], + ['op', this._op.bind(this)], + ['get', this._get.bind(this)], + ['set', this._set.bind(this)], + ['scope', this._scope.bind(this)], + ['property', this._property.bind(this)], + ['noop', this._noop.bind(this)], + ['isMoraPitchHigh', this._isMoraPitchHigh.bind(this)], + ['getKanaMorae', this._getKanaMorae.bind(this)], + ['typeof', this._getTypeof.bind(this)] + ]; + + for (const [name, helper] of helpers) { + this._registerHelper(name, helper); + } + } + + _registerHelper(name, helper) { + function wrapper(...args) { + return helper(this, ...args); + } + Handlebars.registerHelper(name, wrapper); + } + + _escape(text) { + return Handlebars.Utils.escapeExpression(text); + } + + _dumpObject(context, options) { + const dump = JSON.stringify(options.fn(context), null, 4); + return this._escape(dump); + } + + _furigana(context, ...args) { + const {expression, reading} = this._getFuriganaExpressionAndReading(context, ...args); + const segs = this._japaneseUtil.distributeFurigana(expression, reading); + + let result = ''; + for (const seg of segs) { + if (seg.furigana.length > 0) { + result += `<ruby>${seg.text}<rt>${seg.furigana}</rt></ruby>`; + } else { + result += seg.text; + } + } + + return result; + } + + _furiganaPlain(context, ...args) { + const {expression, reading} = this._getFuriganaExpressionAndReading(context, ...args); + const segs = this._japaneseUtil.distributeFurigana(expression, reading); + + let result = ''; + for (const seg of segs) { + if (seg.furigana.length > 0) { + if (result.length > 0) { result += ' '; } + result += `${seg.text}[${seg.furigana}]`; + } else { + result += seg.text; + } + } + + return result; + } + + _getFuriganaExpressionAndReading(context, ...args) { + const options = args[args.length - 1]; + if (args.length >= 3) { + return {expression: args[0], reading: args[1]}; + } else { + const {expression, reading} = options.fn(context); + return {expression, reading}; + } + } + + _kanjiLinks(context, options) { + const jp = this._japaneseUtil; + let result = ''; + for (const c of options.fn(context)) { + if (jp.isCodePointKanji(c.codePointAt(0))) { + result += `<a href="#" class="kanji-link">${c}</a>`; + } else { + result += c; + } + } + + return result; + } + + _multiLine(context, options) { + return options.fn(context).split('\n').join('<br>'); + } + + _sanitizeCssClass(context, options) { + return options.fn(context).replace(/[^_a-z0-9\u00a0-\uffff]/ig, '_'); + } + + _regexReplace(context, ...args) { + // Usage: + // {{#regexReplace regex string [flags]}}content{{/regexReplace}} + // regex: regular expression string + // string: string to replace + // flags: optional flags for regular expression + // e.g. "i" for case-insensitive, "g" for replace all + let value = args[args.length - 1].fn(context); + if (args.length >= 3) { + try { + const flags = args.length > 3 ? args[2] : 'g'; + const regex = new RegExp(args[0], flags); + value = value.replace(regex, args[1]); + } catch (e) { + return `${e}`; + } + } + return value; + } + + _regexMatch(context, ...args) { + // Usage: + // {{#regexMatch regex [flags]}}content{{/regexMatch}} + // regex: regular expression string + // flags: optional flags for regular expression + // e.g. "i" for case-insensitive, "g" for match all + let value = args[args.length - 1].fn(context); + if (args.length >= 2) { + try { + const flags = args.length > 2 ? args[1] : ''; + const regex = new RegExp(args[0], flags); + const parts = []; + value.replace(regex, (g0) => parts.push(g0)); + value = parts.join(''); + } catch (e) { + return `${e}`; + } + } + return value; + } + + _mergeTags(context, object, isGroupMode, isMergeMode) { + const tagSources = []; + if (isGroupMode || isMergeMode) { + for (const definition of object.definitions) { + tagSources.push(definition.definitionTags); + } + } else { + tagSources.push(object.definitionTags); + } + + const tags = new Set(); + for (const tagSource of tagSources) { + for (const tag of tagSource) { + tags.add(tag.name); + } + } + + return [...tags].join(', '); + } + + _eachUpTo(context, iterable, maxCount, options) { + if (iterable) { + const results = []; + let any = false; + for (const entry of iterable) { + any = true; + if (results.length >= maxCount) { break; } + const processedEntry = options.fn(entry); + results.push(processedEntry); + } + if (any) { + return results.join(''); + } + } + return options.inverse(context); + } + + _spread(context, ...args) { + const result = []; + for (let i = 0, ii = args.length - 1; i < ii; ++i) { + try { + result.push(...args[i]); + } catch (e) { + // NOP + } + } + return result; + } + + _op(context, ...args) { + switch (args.length) { + case 3: return this._evaluateUnaryExpression(args[0], args[1]); + case 4: return this._evaluateBinaryExpression(args[0], args[1], args[2]); + case 5: return this._evaluateTernaryExpression(args[0], args[1], args[2], args[3]); + default: return void 0; + } + } + + _evaluateUnaryExpression(operator, operand1) { + switch (operator) { + case '+': return +operand1; + case '-': return -operand1; + case '~': return ~operand1; + case '!': return !operand1; + default: return void 0; + } + } + + _evaluateBinaryExpression(operator, operand1, operand2) { + switch (operator) { + case '+': return operand1 + operand2; + case '-': return operand1 - operand2; + case '/': return operand1 / operand2; + case '*': return operand1 * operand2; + case '%': return operand1 % operand2; + case '**': return operand1 ** operand2; + case '==': return operand1 == operand2; // eslint-disable-line eqeqeq + case '!=': return operand1 != operand2; // eslint-disable-line eqeqeq + case '===': return operand1 === operand2; + case '!==': return operand1 !== operand2; + case '<': return operand1 < operand2; + case '<=': return operand1 <= operand2; + case '>': return operand1 > operand2; + case '>=': return operand1 >= operand2; + case '<<': return operand1 << operand2; + case '>>': return operand1 >> operand2; + case '>>>': return operand1 >>> operand2; + case '&': return operand1 & operand2; + case '|': return operand1 | operand2; + case '^': return operand1 ^ operand2; + case '&&': return operand1 && operand2; + case '||': return operand1 || operand2; + default: return void 0; + } + } + + _evaluateTernaryExpression(operator, operand1, operand2, operand3) { + switch (operator) { + case '?:': return operand1 ? operand2 : operand3; + default: return void 0; + } + } + + _get(context, key) { + for (let i = this._stateStack.length; --i >= 0;) { + const map = this._stateStack[i]; + if (map.has(key)) { + return map.get(key); + } + } + return void 0; + } + + _set(context, ...args) { + switch (args.length) { + case 2: + { + const [key, options] = args; + const value = options.fn(context); + this._stateStack[this._stateStack.length - 1].set(key, value); + } + break; + case 3: + { + const [key, value] = args; + this._stateStack[this._stateStack.length - 1].set(key, value); + } + break; + } + return ''; + } + + _scope(context, options) { + try { + this._stateStack.push(new Map()); + return options.fn(context); + } finally { + if (this._stateStack.length > 1) { + this._stateStack.pop(); + } + } + } + + _property(context, ...args) { + const ii = args.length - 1; + if (ii <= 0) { return void 0; } + + try { + let value = args[0]; + for (let i = 1; i < ii; ++i) { + value = value[args[i]]; + } + return value; + } catch (e) { + return void 0; + } + } + + _noop(context, options) { + return options.fn(context); + } + + _isMoraPitchHigh(context, index, position) { + return this._japaneseUtil.isMoraPitchHigh(index, position); + } + + _getKanaMorae(context, text) { + return this._japaneseUtil.getKanaMorae(`${text}`); + } + + _getTypeof(context, ...args) { + const ii = args.length - 1; + const value = (ii > 0 ? args[0] : args[ii].fn(context)); + return typeof value; + } +} |