feat(assets): bundle runtime assets and vendor dependencies

This commit is contained in:
2026-02-22 21:43:43 -08:00
parent d3fd47f0ec
commit ae95601698
429 changed files with 165389 additions and 0 deletions

View File

@@ -0,0 +1,73 @@
/*
* Copyright (C) 2023-2025 Yomitan Authors
* Copyright (C) 2022 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/>.
*/
/**
* The content manager which is used when generating content for Anki.
*/
export class AnkiTemplateRendererContentManager {
/**
* Creates a new instance of the class.
* @param {import('./template-renderer-media-provider.js').TemplateRendererMediaProvider} mediaProvider The media provider for the object.
* @param {import('anki-templates').NoteData} data The data object passed to the Handlebars template renderer.
*/
constructor(mediaProvider, data) {
/** @type {import('./template-renderer-media-provider.js').TemplateRendererMediaProvider} */
this._mediaProvider = mediaProvider;
/** @type {import('anki-templates').NoteData} */
this._data = data;
/** @type {import('anki-template-renderer-content-manager').OnUnloadCallback[]} */
this._onUnloadCallbacks = [];
}
/**
* Attempts to load the media file from a given dictionary.
* @param {string} path The path to the media file in the dictionary.
* @param {string} dictionary The name of the dictionary.
* @param {import('anki-template-renderer-content-manager').OnLoadCallback} onLoad The callback that is executed if the media was loaded successfully.
* No assumptions should be made about the synchronicity of this callback.
* @param {import('anki-template-renderer-content-manager').OnUnloadCallback} onUnload The callback that is executed when the media should be unloaded.
*/
loadMedia(path, dictionary, onLoad, onUnload) {
const imageUrl = this._mediaProvider.getMedia(this._data, ['dictionaryMedia', path], {dictionary, format: 'fileName', default: null});
if (imageUrl === null) { return; }
onLoad(imageUrl);
if (typeof onUnload === 'function') {
this._onUnloadCallbacks.push(onUnload);
}
}
/**
* Unloads all media that has been loaded.
*/
unloadAll() {
for (const onUnload of this._onUnloadCallbacks) {
onUnload(true);
}
this._onUnloadCallbacks = [];
}
/**
* Sets up attributes and events for a link element.
* @param {HTMLAnchorElement} element The link element.
* @param {string} href The URL.
* @param {boolean} internal Whether or not the URL is an internal or external link.
*/
prepareLink(element, href, internal) {
element.href = internal ? '#' : href;
}
}

View File

@@ -0,0 +1,973 @@
/*
* Copyright (C) 2023-2025 Yomitan Authors
* Copyright (C) 2021-2022 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/>.
*/
import {Handlebars} from '../../lib/handlebars.js';
import {NodeFilter} from '../../lib/linkedom.js';
import {createAnkiNoteData} from '../data/anki-note-data-creator.js';
import {getPronunciationsOfType, isNonNounVerbOrAdjective} from '../dictionary/dictionary-data-util.js';
import {PronunciationGenerator} from '../display/pronunciation-generator.js';
import {StructuredContentGenerator} from '../display/structured-content-generator.js';
import {CssStyleApplier} from '../dom/css-style-applier.js';
import {convertHiraganaToKatakana, convertKatakanaToHiragana, distributeFurigana, getKanaMorae, getPitchCategory, isMoraPitchHigh} from '../language/ja/japanese.js';
import {AnkiTemplateRendererContentManager} from './anki-template-renderer-content-manager.js';
import {TemplateRendererMediaProvider} from './template-renderer-media-provider.js';
import {TemplateRenderer} from './template-renderer.js';
/**
* This class contains all Anki-specific template rendering functionality. It is built on
* the generic TemplateRenderer class and various other Anki-related classes.
*/
export class AnkiTemplateRenderer {
/**
* Creates a new instance of the class.
* @param {Document} document
* @param {Window} window
*/
constructor(document, window) {
/** @type {CssStyleApplier} */
this._structuredContentStyleApplier = new CssStyleApplier('/data/structured-content-style.json');
/** @type {CssStyleApplier} */
this._pronunciationStyleApplier = new CssStyleApplier('/data/pronunciation-style.json');
/** @type {RegExp} */
this._structuredContentDatasetKeyIgnorePattern = /^sc([^a-z]|$)/;
/** @type {TemplateRenderer} */
this._templateRenderer = new TemplateRenderer();
/** @type {TemplateRendererMediaProvider} */
this._mediaProvider = new TemplateRendererMediaProvider();
/** @type {?(Map<string, unknown>[])} */
this._stateStack = null;
/** @type {?import('anki-note-builder').Requirement[]} */
this._requirements = null;
/** @type {(() => void)[]} */
this._cleanupCallbacks = [];
/** @type {?HTMLElement} */
this._temporaryElement = null;
/** @type {Document} */
this._document = document;
/** @type {Window} */
this._window = window;
/** @type {PronunciationGenerator} */
this._pronunciationGenerator = new PronunciationGenerator(this._document);
}
/**
* Gets the generic TemplateRenderer instance.
* @type {TemplateRenderer}
*/
get templateRenderer() {
return this._templateRenderer;
}
/**
* Prepares the data that is necessary before the template renderer can be safely used.
*/
async prepare() {
/* eslint-disable @stylistic/no-multi-spaces */
this._templateRenderer.registerHelpers([
['dumpObject', this._dumpObject.bind(this)],
['furigana', this._furigana.bind(this)],
['furiganaPlain', this._furiganaPlain.bind(this)],
['multiLine', this._multiLine.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)],
['join', this._join.bind(this)],
['concat', this._concat.bind(this)],
['pitchCategories', this._pitchCategories.bind(this)],
['formatGlossary', this._formatGlossary.bind(this)],
['formatGlossaryPlain', this._formatGlossaryPlain.bind(this)],
['hasMedia', this._hasMedia.bind(this)],
['getMedia', this._getMedia.bind(this)],
['pronunciation', this._pronunciation.bind(this)],
['hiragana', this._hiragana.bind(this)],
['katakana', this._katakana.bind(this)],
]);
/* eslint-enable @stylistic/no-multi-spaces */
this._templateRenderer.registerDataType('ankiNote', {
modifier: ({marker, commonData}) => createAnkiNoteData(marker, commonData),
composeData: ({marker}, commonData) => ({marker, commonData}),
});
this._templateRenderer.setRenderCallbacks(
this._onRenderSetup.bind(this),
this._onRenderCleanup.bind(this),
);
await Promise.all([
this._structuredContentStyleApplier.prepare(),
this._pronunciationStyleApplier.prepare(),
]);
}
// Private
/**
* @returns {{requirements: import('anki-note-builder').Requirement[]}}
*/
_onRenderSetup() {
/** @type {import('anki-note-builder').Requirement[]} */
const requirements = [];
this._stateStack = [new Map()];
this._requirements = requirements;
this._mediaProvider.requirements = requirements;
return {requirements};
}
/**
* @returns {void}
*/
_onRenderCleanup() {
for (const callback of this._cleanupCallbacks) { callback(); }
this._stateStack = null;
this._requirements = null;
this._mediaProvider.requirements = null;
this._cleanupCallbacks.length = 0;
}
/**
* @param {string} text
* @returns {string}
*/
_safeString(text) {
return new Handlebars.SafeString(text);
}
// Template helpers
/** @type {import('template-renderer').HelperFunction<string>} */
_dumpObject(object) {
return JSON.stringify(object, null, 4);
}
/** @type {import('template-renderer').HelperFunction<string>} */
_furigana(args, context, options) {
const {expression, reading} = this._getFuriganaExpressionAndReading(args, context, options);
const segments = distributeFurigana(expression, reading);
let result = '';
for (const {text, reading: reading2} of segments) {
result += (
reading2.length > 0 ?
`<ruby>${text}<rt>${reading2}</rt></ruby>` :
text
);
}
return this._safeString(result);
}
/** @type {import('template-renderer').HelperFunction<string>} */
_furiganaPlain(args, context, options) {
const {expression, reading} = this._getFuriganaExpressionAndReading(args, context, options);
const segments = distributeFurigana(expression, reading);
let result = '';
for (const {text, reading: reading2} of segments) {
if (reading2.length > 0) {
if (result.length > 0) { result += ' '; }
result += `${text}[${reading2}]`;
} else {
result += text;
}
}
return result;
}
/**
* @type {import('template-renderer').HelperFunction<{expression: string, reading: string}>}
*/
_getFuriganaExpressionAndReading(args) {
let expression;
let reading;
if (args.length >= 2) {
[expression, reading] = /** @type {[expression?: string, reading?: string]} */ (args);
} else {
({expression, reading} = /** @type {import('core').SerializableObject} */ (args[0]));
}
return {
expression: typeof expression === 'string' ? expression : '',
reading: typeof reading === 'string' ? reading : '',
};
}
/**
* @param {string} string
* @returns {string}
*/
_stringToMultiLineHtml(string) {
return string.split('\n').join('<br>');
}
/** @type {import('template-renderer').HelperFunction<string>} */
_multiLine(_args, context, options) {
return this._stringToMultiLineHtml(this._computeValueString(options, context));
}
/**
* Usage:
* ```{{#regexReplace regex string [flags] [content]...}}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
* @type {import('template-renderer').HelperFunction<string>}
*/
_regexReplace(args, context, options) {
const argCount = args.length;
let value = this._computeValueString(options, context);
if (argCount > 3) {
value = `${args.slice(3).join('')}${value}`;
}
if (argCount > 1) {
try {
const [pattern, replacement, flags] = args;
if (typeof pattern !== 'string') { throw new Error('Invalid pattern'); }
if (typeof replacement !== 'string') { throw new Error('Invalid replacement'); }
const regex = new RegExp(pattern, typeof flags === 'string' ? flags : 'g');
value = value.replace(regex, replacement);
} catch (e) {
return `${e}`;
}
}
return value;
}
/**
* Usage:
* {{#regexMatch regex [flags] [content]...}}content{{/regexMatch}}
* - regex: regular expression string
* - flags: optional flags for regular expression
* e.g. "i" for case-insensitive, "g" for match all
* @type {import('template-renderer').HelperFunction<string>}
*/
_regexMatch(args, context, options) {
const argCount = args.length;
let value = this._computeValueString(options, context);
if (argCount > 2) {
value = `${args.slice(2).join('')}${value}`;
}
if (argCount > 0) {
try {
const [pattern, flags] = args;
if (typeof pattern !== 'string') { throw new Error('Invalid pattern'); }
const regex = new RegExp(pattern, typeof flags === 'string' ? flags : '');
/** @type {string[]} */
const parts = [];
value.replace(regex, (g0) => {
parts.push(g0);
return g0;
});
value = parts.join('');
} catch (e) {
return `${e}`;
}
}
return value;
}
/**
* @type {import('template-renderer').HelperFunction<string>}
*/
_mergeTags(args) {
const [object, isGroupMode, isMergeMode] = /** @type {[object: import('anki-templates').TermDictionaryEntry, isGroupMode: boolean, isMergeMode: boolean]} */ (args);
/** @type {import('anki-templates').Tag[][]} */
const tagSources = [];
if (Array.isArray(object.termTags)) {
tagSources.push(object.termTags);
}
if (isGroupMode || isMergeMode) {
const {definitions} = object;
if (Array.isArray(definitions)) {
for (const definition of definitions) {
tagSources.push(definition.definitionTags);
}
}
} else {
if (Array.isArray(object.definitionTags)) {
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(', ');
}
/** @type {import('template-renderer').HelperFunction<string>} */
_eachUpTo(args, context, options) {
const [iterable, maxCount] = /** @type {[iterable: Iterable<unknown>, maxCount: number]} */ (args);
if (iterable) {
const results = [];
let any = false;
for (const entry of iterable) {
any = true;
if (results.length >= maxCount) { break; }
const processedEntry = this._computeValue(options, entry);
results.push(processedEntry);
}
if (any) {
return results.join('');
}
}
return this._computeInverseString(options, context);
}
/** @type {import('template-renderer').HelperFunction<unknown[]>} */
_spread(args) {
const result = [];
for (const array of /** @type {Iterable<unknown>[]} */ (args)) {
try {
result.push(...array);
} catch (e) {
// NOP
}
}
return result;
}
/** @type {import('template-renderer').HelperFunction<unknown>} */
_op(args) {
const [operator] = /** @type {[operator: string, operand1: import('core').SafeAny, operand2?: import('core').SafeAny, operand3?: import('core').SafeAny]} */ (args);
switch (args.length) {
case 2: return this._evaluateUnaryExpression(operator, args[1]);
case 3: return this._evaluateBinaryExpression(operator, args[1], args[2]);
case 4: return this._evaluateTernaryExpression(operator, args[1], args[2], args[3]);
default: return void 0;
}
}
/**
* @param {string} operator
* @param {import('core').SafeAny} operand1
* @returns {unknown}
*/
_evaluateUnaryExpression(operator, operand1) {
switch (operator) {
case '+': return +operand1;
case '-': return -operand1;
case '~': return ~operand1;
case '!': return !operand1;
default: return void 0;
}
}
/**
* @param {string} operator
* @param {import('core').SafeAny} operand1
* @param {import('core').SafeAny} operand2
* @returns {unknown}
*/
_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;
}
}
/**
* @param {string} operator
* @param {import('core').SafeAny} operand1
* @param {import('core').SafeAny} operand2
* @param {import('core').SafeAny} operand3
* @returns {unknown}
*/
_evaluateTernaryExpression(operator, operand1, operand2, operand3) {
switch (operator) {
case '?:': return operand1 ? operand2 : operand3;
default: return void 0;
}
}
/** @type {import('template-renderer').HelperFunction<unknown>} */
_get(args) {
const [key] = /** @type {[key: string]} */ (args);
const stateStack = this._stateStack;
if (stateStack === null) { throw new Error('Invalid state'); }
for (let i = stateStack.length; --i >= 0;) {
const map = stateStack[i];
if (map.has(key)) {
return map.get(key);
}
}
return void 0;
}
/** @type {import('template-renderer').HelperFunction<string>} */
_set(args, context, options) {
const stateStack = this._stateStack;
if (stateStack === null) { throw new Error('Invalid state'); }
switch (args.length) {
case 1:
{
const [key] = /** @type {[key: string]} */ (args);
const value = this._computeValue(options, context);
stateStack[stateStack.length - 1].set(key, value);
}
break;
case 2:
{
const [key, value] = /** @type {[key: string, value: unknown]} */ (args);
stateStack[stateStack.length - 1].set(key, value);
}
break;
}
return '';
}
/** @type {import('template-renderer').HelperFunction<unknown>} */
_scope(_args, context, options) {
const stateStack = this._stateStack;
if (stateStack === null) { throw new Error('Invalid state'); }
try {
stateStack.push(new Map());
return this._computeValue(options, context);
} finally {
if (stateStack.length > 1) {
stateStack.pop();
}
}
}
/** @type {import('template-renderer').HelperFunction<unknown>} */
_property(args) {
const ii = args.length;
if (ii <= 0) { return void 0; }
try {
let value = args[0];
for (let i = 1; i < ii; ++i) {
if (typeof value !== 'object' || value === null) { throw new Error('Invalid object'); }
const key = args[i];
switch (typeof key) {
case 'number':
case 'string':
case 'symbol':
break;
default:
throw new Error('Invalid key');
}
value = /** @type {import('core').UnknownObject} */ (value)[key];
}
return value;
} catch (e) {
return void 0;
}
}
/** @type {import('template-renderer').HelperFunction<unknown>} */
_noop(_args, context, options) {
return this._computeValue(options, context);
}
/** @type {import('template-renderer').HelperFunction<boolean>} */
_isMoraPitchHigh(args) {
const [index, position] = /** @type {[index: number, position: number]} */ (args);
return isMoraPitchHigh(index, position);
}
/** @type {import('template-renderer').HelperFunction<string[]>} */
_getKanaMorae(args) {
const [text] = /** @type {[text: string]} */ (args);
return getKanaMorae(`${text}`);
}
/** @type {import('template-renderer').HelperFunction<import('core').TypeofResult>} */
_getTypeof(args, context, options) {
const ii = args.length;
const value = (ii > 0 ? args[0] : this._computeValue(options, context));
return typeof value;
}
/** @type {import('template-renderer').HelperFunction<string>} */
_join(args) {
return args.length > 0 ? args.slice(1, args.length).flat().join(/** @type {string} */ (args[0])) : '';
}
/** @type {import('template-renderer').HelperFunction<string>} */
_concat(args) {
let result = '';
for (let i = 0, ii = args.length; i < ii; ++i) {
// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
result += args[i];
}
return result;
}
/** @type {import('template-renderer').HelperFunction<string[]>} */
_pitchCategories(args) {
const [data] = /** @type {[data: import('anki-templates').NoteData]} */ (args);
const {dictionaryEntry} = data;
if (dictionaryEntry.type !== 'term') { return []; }
const {pronunciations: termPronunciations, headwords} = dictionaryEntry;
/** @type {Set<string>} */
const categories = new Set();
for (const {headwordIndex, pronunciations} of termPronunciations) {
const {reading, wordClasses} = headwords[headwordIndex];
const isVerbOrAdjective = isNonNounVerbOrAdjective(wordClasses);
const pitches = getPronunciationsOfType(pronunciations, 'pitch-accent');
for (const {positions} of pitches) {
const category = getPitchCategory(reading, positions, isVerbOrAdjective);
if (category !== null) {
categories.add(category);
}
}
}
return [...categories];
}
/**
* @returns {HTMLElement}
*/
_getTemporaryElement() {
let element = this._temporaryElement;
if (element === null) {
element = this._document.createElement('div');
this._temporaryElement = element;
}
return element;
}
/**
* @param {Element} node
* @returns {string}
*/
_getStructuredContentHtml(node) {
return this._getHtml(node, this._structuredContentStyleApplier, this._structuredContentDatasetKeyIgnorePattern);
}
/**
* @param {Element} node
* @returns {string}
*/
_getStructuredContentText(node) {
return this._getText(node, this._structuredContentStyleApplier, this._structuredContentDatasetKeyIgnorePattern);
}
/**
* @param {Element} node
* @returns {string}
*/
_getPronunciationHtml(node) {
return this._getHtml(node, this._pronunciationStyleApplier, null);
}
/**
* @param {Element} node
* @param {CssStyleApplier} styleApplier
* @param {?RegExp} datasetKeyIgnorePattern
* @returns {string}
*/
_getHtml(node, styleApplier, datasetKeyIgnorePattern) {
const container = this._getTemporaryElement();
container.appendChild(node);
this._normalizeHtml(container, styleApplier, datasetKeyIgnorePattern);
const result = container.innerHTML;
container.textContent = '';
return this._safeString(result);
}
/**
* @param {Element} node
* @param {CssStyleApplier} styleApplier
* @param {?RegExp} datasetKeyIgnorePattern
* @returns {string}
*/
_getText(node, styleApplier, datasetKeyIgnorePattern) {
const container = this._getTemporaryElement();
container.appendChild(node);
this._normalizeHtml(container, styleApplier, datasetKeyIgnorePattern);
const result = container.innerHTML
.replaceAll(/<(div|li|ol|ul|br|details|summary|hr)(\s.*?>|>)/g, '\n') // tags that usually cause line breaks
.replaceAll(/<(span|a|ruby)(\s.*?>|>)/g, ' ') // tags that usually signify some change in content
.replaceAll(/<rt(\s.*?>|>)/g, '[') // ruby start
.replaceAll('</rt>', ']') // ruby end
.replaceAll(/<.*?>/gs, '') // remove all remaining tags
.replaceAll('<', '&lt;') // escape remaining <
.replaceAll('>', '&rt;') // and >
.replaceAll(/\n+/g, '<br>') // convert newlines into linebreaks and condense newlines
.replaceAll(/^(\s*<br>\s*|\s)*/g, '') // remove leading linebreaks and whitespace
.replaceAll('<br>', '<br>\n');
container.textContent = '';
return this._safeString(result);
}
/**
* @param {Element} root
* @param {CssStyleApplier} styleApplier
* @param {?RegExp} datasetKeyIgnorePattern
*/
_normalizeHtml(root, styleApplier, datasetKeyIgnorePattern) {
const TEXT_NODE = this._document.TEXT_NODE;
const ELEMENT_NODE = this._document.ELEMENT_NODE;
const treeWalker = this._document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
/** @type {HTMLElement[]} */
const elements = [];
/** @type {Text[]} */
const textNodes = [];
while (true) {
const node = treeWalker.nextNode();
if (node === null) { break; }
switch (node.nodeType) {
case ELEMENT_NODE:
elements.push(/** @type {HTMLElement} */ (node));
break;
case TEXT_NODE:
textNodes.push(/** @type {Text} */ (node));
break;
}
}
styleApplier.applyClassStyles(elements);
for (const element of elements) {
const {dataset} = element;
for (const key of Object.keys(dataset)) {
if (datasetKeyIgnorePattern !== null && datasetKeyIgnorePattern.test(key)) { continue; }
delete dataset[key];
}
}
for (const textNode of textNodes) {
this._replaceNewlines(textNode);
}
}
/**
* @param {Text} textNode
*/
_replaceNewlines(textNode) {
const parts = /** @type {string} */ (textNode.nodeValue).split('\n');
if (parts.length <= 1) { return; }
const {parentNode} = textNode;
if (parentNode === null) { return; }
const fragment = this._document.createDocumentFragment();
for (let i = 0, ii = parts.length; i < ii; ++i) {
if (i > 0) { fragment.appendChild(this._document.createElement('br')); }
fragment.appendChild(this._document.createTextNode(parts[i]));
}
parentNode.replaceChild(fragment, textNode);
}
/**
* @param {import('anki-templates').NoteData} data
* @returns {StructuredContentGenerator}
*/
_createStructuredContentGenerator(data) {
const contentManager = new AnkiTemplateRendererContentManager(this._mediaProvider, data);
const instance = new StructuredContentGenerator(contentManager, this._document, this._window);
this._cleanupCallbacks.push(() => contentManager.unloadAll());
return instance;
}
/**
* @param {import('template-renderer').HelperOptions} options
* @returns {import('anki-templates').NoteData}
*/
_getNoteDataFromOptions(options) {
return options.data.root;
}
/**
* @type {import('template-renderer').HelperFunction<string>}
*/
_formatGlossary(args, _context, options) {
const [dictionary, content] = /** @type {[dictionary: string, content: import('dictionary-data').TermGlossaryContent]} */ (args);
const data = this._getNoteDataFromOptions(options);
if (typeof content === 'string') { return this._safeString(this._stringToMultiLineHtml(content)); }
if (!(typeof content === 'object' && content !== null)) { return ''; }
switch (content.type) {
case 'image': return this._formatGlossaryImage(content, dictionary, data);
case 'structured-content': return this._formatStructuredContent(content, dictionary, data);
case 'text': return this._safeString(this._stringToMultiLineHtml(content.text));
}
return '';
}
/**
* @param {import('dictionary-data').TermGlossaryImage} content
* @param {string} dictionary
* @param {import('anki-templates').NoteData} data
* @returns {string}
*/
_formatGlossaryImage(content, dictionary, data) {
const structuredContentGenerator = this._createStructuredContentGenerator(data);
const node = structuredContentGenerator.createDefinitionImage(content, dictionary);
return this._getStructuredContentHtml(node);
}
/**
* @param {import('dictionary-data').TermGlossaryStructuredContent} content
* @param {string} dictionary
* @param {import('anki-templates').NoteData} data
* @returns {string}
*/
_formatStructuredContent(content, dictionary, data) {
const structuredContentGenerator = this._createStructuredContentGenerator(data);
const node = structuredContentGenerator.createStructuredContent(content.content, dictionary);
return node !== null ? this._getStructuredContentHtml(node) : '';
}
/**
* @type {import('template-renderer').HelperFunction<string>}
*/
_formatGlossaryPlain(args, _context, options) {
const [dictionary, content] = /** @type {[dictionary: string, content: import('dictionary-data').TermGlossaryContent]} */ (args);
const data = this._getNoteDataFromOptions(options);
if (typeof content === 'string') { return this._safeString(content); }
if (!(typeof content === 'object' && content !== null)) { return ''; }
const structuredContentGenerator = this._createStructuredContentGenerator(data);
switch (content.type) {
case 'image': return '';
case 'structured-content': {
const glossaryStrings = this._extractGlossaryData(content, structuredContentGenerator);
if (glossaryStrings.length > 0) {
return glossaryStrings.join('<br>\n');
} else {
const node = structuredContentGenerator.createStructuredContent(content.content, dictionary);
return node !== null ? this._getStructuredContentText(node) : '';
}
}
case 'text': return this._safeString(content.text);
}
return '';
}
/**
* @param {import('structured-content.js').Content[]} content
* @returns {import('structured-content.js').Content[]}
*/
_extractGlossaryStructuredContentRecursive(content) {
/** @type {import('structured-content.js').Content[]} */
const extractedContent = [];
for (let i = 0; i < content.length; i++) {
const structuredContent = content[i];
if (Array.isArray(structuredContent)) {
extractedContent.push(...this._extractGlossaryStructuredContentRecursive(structuredContent));
} else if (typeof structuredContent === 'object' && structuredContent) {
// @ts-expect-error - Checking if `data` exists
if (structuredContent.data?.content === 'glossary') {
extractedContent.push(structuredContent);
continue;
}
if (structuredContent.content) {
extractedContent.push(...this._extractGlossaryStructuredContentRecursive([structuredContent.content]));
}
}
}
return extractedContent;
}
/**
* @param {import('structured-content.js').Content[]} content
* @param {StructuredContentGenerator} structuredContentGenerator
* @returns {string[]}
*/
_convertGlossaryStructuredContentRecursive(content, structuredContentGenerator) {
/** @type {string[]} */
const rawGlossaryContent = [];
for (let i = 0; i < content.length; i++) {
const structuredGloss = content[i];
if (typeof structuredGloss === 'string') {
rawGlossaryContent.push(structuredGloss);
} else if (Array.isArray(structuredGloss)) {
rawGlossaryContent.push(...this._convertGlossaryStructuredContentRecursive(structuredGloss, structuredContentGenerator));
} else if (typeof structuredGloss === 'object' && structuredGloss.content) {
if (structuredGloss.tag === 'ruby') {
const node = structuredContentGenerator.createStructuredContent(structuredGloss.content, '');
rawGlossaryContent.push(node !== null ? this._getStructuredContentText(node) : '');
continue;
}
rawGlossaryContent.push(...this._convertGlossaryStructuredContentRecursive([structuredGloss.content], structuredContentGenerator));
}
}
return rawGlossaryContent;
}
/**
* @param {import('dictionary-data').TermGlossaryStructuredContent} content
* @param {StructuredContentGenerator} structuredContentGenerator
* @returns {string[]}
*/
_extractGlossaryData(content, structuredContentGenerator) {
/** @type {import('structured-content.js').Content[]} */
const glossaryContentQueue = this._extractGlossaryStructuredContentRecursive([content.content]);
/** @type {string[]} */
return this._convertGlossaryStructuredContentRecursive(glossaryContentQueue, structuredContentGenerator);
}
/**
* @type {import('template-renderer').HelperFunction<boolean>}
*/
_hasMedia(args, _context, options) {
const data = this._getNoteDataFromOptions(options);
return this._mediaProvider.hasMedia(data, args, options.hash);
}
/**
* @type {import('template-renderer').HelperFunction<?string>}
*/
_getMedia(args, _context, options) {
const data = this._getNoteDataFromOptions(options);
return this._mediaProvider.getMedia(data, args, options.hash);
}
/**
* @type {import('template-renderer').HelperFunction<string>}
*/
_pronunciation(_args, _context, options) {
const {format, reading, pitchPositions} = options.hash;
if (
typeof reading !== 'string' ||
reading.length === 0 ||
(typeof pitchPositions !== 'number' && typeof pitchPositions !== 'string')
) {
return '';
}
const morae = getKanaMorae(reading);
switch (format) {
case 'text':
{
const nasalPositions = this._getValidNumberArray(options.hash.nasalPositions);
const devoicePositions = this._getValidNumberArray(options.hash.devoicePositions);
return this._getPronunciationHtml(this._pronunciationGenerator.createPronunciationText(morae, pitchPositions, nasalPositions, devoicePositions));
}
case 'graph':
return this._getPronunciationHtml(this._pronunciationGenerator.createPronunciationGraph(morae, pitchPositions));
case 'graph-jj':
return this._getPronunciationHtml(this._pronunciationGenerator.createPronunciationGraphJJ(morae, pitchPositions));
case 'position':
return this._getPronunciationHtml(this._pronunciationGenerator.createPronunciationDownstepPosition(pitchPositions));
default:
return '';
}
}
/**
* @param {unknown} value
* @returns {number[]}
*/
_getValidNumberArray(value) {
const result = [];
if (Array.isArray(value)) {
for (const item of value) {
if (typeof item === 'number') { result.push(item); }
}
}
return result;
}
/**
* @type {import('template-renderer').HelperFunction<string>}
*/
_hiragana(args, context, options) {
const ii = args.length;
const {keepProlongedSoundMarks} = options.hash;
const value = (ii > 0 ? args[0] : this._computeValue(options, context));
return typeof value === 'string' ? convertKatakanaToHiragana(value, keepProlongedSoundMarks === true) : '';
}
/**
* @type {import('template-renderer').HelperFunction<string>}
*/
_katakana(args, context, options) {
const ii = args.length;
const value = (ii > 0 ? args[0] : this._computeValue(options, context));
return typeof value === 'string' ? convertHiraganaToKatakana(value) : '';
}
/**
* @param {unknown} value
* @returns {string}
*/
_asString(value) {
return typeof value === 'string' ? value : `${value}`;
}
/**
* @param {import('template-renderer').HelperOptions} options
* @param {unknown} context
* @returns {unknown}
*/
_computeValue(options, context) {
return typeof options.fn === 'function' ? options.fn(context) : '';
}
/**
* @param {import('template-renderer').HelperOptions} options
* @param {unknown} context
* @returns {string}
*/
_computeValueString(options, context) {
return this._asString(this._computeValue(options, context));
}
/**
* @param {import('template-renderer').HelperOptions} options
* @param {unknown} context
* @returns {unknown}
*/
_computeInverse(options, context) {
return typeof options.inverse === 'function' ? options.inverse(context) : '';
}
/**
* @param {import('template-renderer').HelperOptions} options
* @param {unknown} context
* @returns {string}
*/
_computeInverseString(options, context) {
return this._asString(this._computeInverse(options, context));
}
}

View File

@@ -0,0 +1,112 @@
/*
* Copyright (C) 2023-2025 Yomitan Authors
* Copyright (C) 2021-2022 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/>.
*/
export class TemplatePatcher {
constructor() {
/** @type {RegExp} */
this._diffPattern1 = /\n?\{\{<<<<<<<\}\}\n/g;
/** @type {RegExp} */
this._diffPattern2 = /\n\{\{=======\}\}\n/g;
/** @type {RegExp} */
this._diffPattern3 = /\n\{\{>>>>>>>\}\}\n*/g;
/** @type {RegExp} */
this._lookupMarkerPattern = /[ \t]*\{\{~?>\s*\(\s*lookup\s*\.\s*"marker"\s*\)\s*~?\}\}/g;
}
/**
* @param {string} content
* @returns {import('template-patcher').Patch}
*/
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};
}
/**
* @param {string} template
* @param {import('template-patcher').Patch} patch
* @returns {string}
*/
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
/**
* @param {string} template
* @param {string} addition
* @returns {string}
*/
_addFieldTemplatesBeforeEnd(template, addition) {
if (addition.length === 0) { return template; }
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;
}
}

View File

@@ -0,0 +1,103 @@
/*
* Copyright (C) 2023-2025 Yomitan Authors
* Copyright (C) 2020-2022 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/>.
*/
import {createApiMap, invokeApiMapHandler} from '../core/api-map.js';
import {parseJson} from '../core/json.js';
export class TemplateRendererFrameApi {
/**
* @param {import('./template-renderer.js').TemplateRenderer} templateRenderer
*/
constructor(templateRenderer) {
/** @type {import('./template-renderer.js').TemplateRenderer} */
this._templateRenderer = templateRenderer;
/** @type {import('template-renderer-proxy').FrontendApiMap} */
this._windowMessageHandlers = createApiMap([
['render', this._onRender.bind(this)],
['renderMulti', this._onRenderMulti.bind(this)],
['getModifiedData', this._onGetModifiedData.bind(this)],
]);
}
/**
* @returns {void}
*/
prepare() {
window.addEventListener('message', this._onWindowMessage.bind(this), false);
this._postMessage(window.parent, 'ready', void 0, null);
}
// Private
/**
* @param {MessageEvent<import('template-renderer-proxy').FrontendMessageAny>} e
*/
_onWindowMessage(e) {
const {source, data: {action, params, id}} = e;
invokeApiMapHandler(this._windowMessageHandlers, action, params, [], (response) => {
this._postMessage(/** @type {Window} */ (source), 'response', response, id);
});
}
/**
* @param {{template: string, data: import('template-renderer').PartialOrCompositeRenderData, type: import('anki-templates').RenderMode}} event
* @returns {import('template-renderer').RenderResult}
*/
_onRender({template, data, type}) {
return this._templateRenderer.render(template, data, type);
}
/**
* @param {{items: import('template-renderer').RenderMultiItem[]}} event
* @returns {import('core').Response<import('template-renderer').RenderResult>[]}
*/
_onRenderMulti({items}) {
return this._templateRenderer.renderMulti(items);
}
/**
* @param {{data: import('template-renderer').CompositeRenderData, type: import('anki-templates').RenderMode}} event
* @returns {import('anki-templates').NoteData}
*/
_onGetModifiedData({data, type}) {
const result = this._templateRenderer.getModifiedData(data, type);
return this._clone(result);
}
/**
* @template [T=unknown]
* @param {T} value
* @returns {T}
*/
_clone(value) {
return parseJson(JSON.stringify(value));
}
/**
* @template {import('template-renderer-proxy').BackendApiNames} TName
* @param {Window} target
* @param {TName} action
* @param {import('template-renderer-proxy').BackendApiParams<TName>} params
* @param {?string} id
*/
_postMessage(target, action, params, id) {
/** @type {import('template-renderer-proxy').BackendMessageAny} */
const data = {action, params, id};
target.postMessage(data, '*');
}
}

View File

@@ -0,0 +1,30 @@
/*
* Copyright (C) 2023-2025 Yomitan Authors
* Copyright (C) 2020-2022 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/>.
*/
import {AnkiTemplateRenderer} from './anki-template-renderer.js';
import {TemplateRendererFrameApi} from './template-renderer-frame-api.js';
/** Entry point. */
async function main() {
const ankiTemplateRenderer = new AnkiTemplateRenderer(document, window);
await ankiTemplateRenderer.prepare();
const templateRendererFrameApi = new TemplateRendererFrameApi(ankiTemplateRenderer.templateRenderer);
templateRendererFrameApi.prepare();
}
await main();

View File

@@ -0,0 +1,198 @@
/*
* Copyright (C) 2023-2025 Yomitan Authors
* Copyright (C) 2021-2022 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/>.
*/
import {Handlebars} from '../../lib/handlebars.js';
export class TemplateRendererMediaProvider {
constructor() {
/** @type {?import('anki-note-builder').Requirement[]} */
this._requirements = null;
}
/** @type {?import('anki-note-builder').Requirement[]} */
get requirements() {
return this._requirements;
}
set requirements(value) {
this._requirements = value;
}
/**
* @param {import('anki-templates').NoteData} root
* @param {unknown[]} args
* @param {import('core').SerializableObject} namedArgs
* @returns {boolean}
*/
hasMedia(root, args, namedArgs) {
const {media} = root;
const data = this._getMediaData(media, args, namedArgs);
return (data !== null);
}
/**
* @param {import('anki-templates').NoteData} root
* @param {unknown[]} args
* @param {import('core').SerializableObject} namedArgs
* @returns {?string}
*/
getMedia(root, args, namedArgs) {
const {media} = root;
const data = this._getMediaData(media, args, namedArgs);
if (data !== null) {
const result = this._getFormattedValue(data, namedArgs);
if (typeof result === 'string') { return result.replaceAll('\n', '<br>\n'); }
}
const defaultValue = namedArgs.default;
return defaultValue === null || typeof defaultValue === 'string' ? defaultValue : '';
}
// Private
/**
* @param {import('anki-note-builder').Requirement} value
*/
_addRequirement(value) {
if (this._requirements === null) { return; }
this._requirements.push(value);
}
/**
* @param {import('anki-templates').MediaObject} data
* @param {import('core').SerializableObject} namedArgs
* @returns {string}
*/
_getFormattedValue(data, namedArgs) {
let {value} = data;
const {escape = true} = namedArgs;
if (escape) {
// Handlebars is a custom version of the library without type information, so it's assumed to be "any".
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
value = Handlebars.Utils.escapeExpression(value);
}
return value;
}
/**
* @param {import('anki-templates').Media} media
* @param {unknown[]} args
* @param {import('core').SerializableObject} namedArgs
* @returns {?(import('anki-templates').MediaObject)}
*/
_getMediaData(media, args, namedArgs) {
const type = args[0];
switch (type) {
case 'audio': return this._getSimpleMediaData(media, 'audio');
case 'screenshot': return this._getSimpleMediaData(media, 'screenshot');
case 'clipboardImage': return this._getSimpleMediaData(media, 'clipboardImage');
case 'clipboardText': return this._getSimpleMediaData(media, 'clipboardText');
case 'popupSelectionText': return this._getSimpleMediaData(media, 'popupSelectionText');
case 'textFurigana': return this._getTextFurigana(media, args[1], namedArgs, 'furiganaHtml');
case 'textFuriganaPlain': return this._getTextFurigana(media, args[1], namedArgs, 'furiganaPlain');
case 'dictionaryMedia': return this._getDictionaryMedia(media, args[1], namedArgs);
default: return null;
}
}
/**
* @param {import('anki-templates').Media} media
* @param {import('anki-templates').MediaSimpleType} type
* @returns {?import('anki-templates').MediaObject}
*/
_getSimpleMediaData(media, type) {
const result = media[type];
if (typeof result === 'object' && result !== null) { return result; }
this._addRequirement({type});
return null;
}
/**
* @param {import('anki-templates').Media} media
* @param {unknown} path
* @param {import('core').SerializableObject} namedArgs
* @returns {?import('anki-templates').MediaObject}
*/
_getDictionaryMedia(media, path, namedArgs) {
if (typeof path !== 'string') { return null; }
const {dictionaryMedia} = media;
const {dictionary} = namedArgs;
if (typeof dictionary !== 'string') { return null; }
if (
typeof dictionaryMedia !== 'undefined' &&
Object.prototype.hasOwnProperty.call(dictionaryMedia, dictionary)
) {
const dictionaryMedia2 = dictionaryMedia[dictionary];
if (Object.prototype.hasOwnProperty.call(dictionaryMedia2, path)) {
const result = dictionaryMedia2[path];
if (typeof result === 'object' && result !== null) {
return result;
}
}
}
this._addRequirement({
type: 'dictionaryMedia',
dictionary,
path,
});
return null;
}
/**
* @param {import('anki-templates').Media} media
* @param {unknown} text
* @param {import('core').SerializableObject} namedArgs
* @param {import('anki-note-builder').TextFuriganaFormats} furiganaFormat
* @returns {?import('anki-templates').MediaObject}
*/
_getTextFurigana(media, text, namedArgs, furiganaFormat) {
if (typeof text !== 'string') { return null; }
const readingMode = this._normalizeReadingMode(namedArgs.readingMode);
const {textFurigana} = media;
if (Array.isArray(textFurigana)) {
for (const entry of textFurigana) {
if (entry.text !== text || entry.readingMode !== readingMode) { continue; }
switch (furiganaFormat) {
case 'furiganaHtml':
return entry.detailsHtml;
case 'furiganaPlain':
return entry.detailsPlain;
}
}
}
this._addRequirement({
type: 'textFurigana',
text,
readingMode,
});
return null;
}
/**
* @param {unknown} value
* @returns {?import('anki-templates').TextFuriganaReadingMode}
*/
_normalizeReadingMode(value) {
switch (value) {
case 'hiragana':
case 'katakana':
return value;
default:
return null;
}
}
}

View File

@@ -0,0 +1,253 @@
/*
* Copyright (C) 2023-2025 Yomitan Authors
* Copyright (C) 2020-2022 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/>.
*/
import {ExtensionError} from '../core/extension-error.js';
import {generateId} from '../core/utilities.js';
export class TemplateRendererProxy {
constructor() {
/** @type {?HTMLIFrameElement} */
this._frame = null;
/** @type {boolean} */
this._frameNeedsLoad = true;
/** @type {boolean} */
this._frameLoading = false;
/** @type {?Promise<void>} */
this._frameLoadPromise = null;
/** @type {string} */
this._frameUrl = chrome.runtime.getURL('/template-renderer.html');
/** @type {Set<{cancel: () => void}>} */
this._invocations = new Set();
}
/**
* @param {string} template
* @param {import('template-renderer').PartialOrCompositeRenderData} data
* @param {import('anki-templates').RenderMode} type
* @returns {Promise<import('template-renderer').RenderResult>}
*/
async render(template, data, type) {
await this._prepareFrame();
return await this._invoke('render', {template, data, type});
}
/**
* @param {import('template-renderer').RenderMultiItem[]} items
* @returns {Promise<import('core').Response<import('template-renderer').RenderResult>[]>}
*/
async renderMulti(items) {
await this._prepareFrame();
return await this._invoke('renderMulti', {items});
}
/**
* @param {import('template-renderer').CompositeRenderData} data
* @param {import('anki-templates').RenderMode} type
* @returns {Promise<import('anki-templates').NoteData>}
*/
async getModifiedData(data, type) {
await this._prepareFrame();
return await this._invoke('getModifiedData', {data, type});
}
// Private
/**
* @returns {Promise<void>}
*/
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;
}
/**
* @param {HTMLIFrameElement} frame
* @param {string} url
* @param {number} [timeout]
* @returns {Promise<void>}
*/
_loadFrame(frame, url, timeout = 5000) {
return new Promise((resolve, reject) => {
let state = 0x0; // 0x1 = frame added; 0x2 = frame loaded; 0x4 = frame ready
const cleanup = () => {
frame.removeEventListener('load', onLoad, false);
window.removeEventListener('message', onWindowMessage, false);
if (timer !== null) {
clearTimeout(timer);
timer = null;
}
};
/**
* @param {number} flags
*/
const updateState = (flags) => {
state |= flags;
if (state !== 0x7) { return; }
cleanup();
resolve();
};
const onLoad = () => {
if ((state & 0x3) !== 0x1) { return; }
updateState(0x2);
};
/**
* @param {MessageEvent<import('template-renderer-proxy').BackendMessageAny>} e
*/
const onWindowMessage = (e) => {
if ((state & 0x5) !== 0x1) { return; }
const frameWindow = frame.contentWindow;
if (frameWindow === null || frameWindow !== e.source) { return; }
const {data} = e;
if (!(typeof data === 'object' && data !== null && data.action === 'ready')) { return; }
updateState(0x4);
};
/** @type {?number} */
let timer = window.setTimeout(() => {
timer = null;
cleanup();
reject(new Error('Timeout'));
}, timeout);
frame.removeAttribute('src');
frame.removeAttribute('srcdoc');
frame.addEventListener('load', onLoad, false);
window.addEventListener('message', onWindowMessage, false);
try {
document.body.appendChild(frame);
state = 0x1;
const {contentDocument} = frame;
if (contentDocument === null) { throw new Error('Failed to initialize frame URL'); }
contentDocument.location.href = url;
} catch (e) {
cleanup();
reject(e);
}
});
}
/**
* @template {import('template-renderer-proxy').FrontendApiNames} TName
* @param {TName} action
* @param {import('template-renderer-proxy').FrontendApiParams<TName>} params
* @param {?number} [timeout]
* @returns {Promise<import('template-renderer-proxy').FrontendApiReturn<TName>>}
*/
_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;
}
};
/**
* @param {MessageEvent<import('template-renderer-proxy').BackendMessageAny>} event
*/
const onMessage = (event) => {
if (event.source !== frameWindow) { return; }
const {data} = event;
if (
typeof data !== 'object' ||
data === null ||
data.id !== id ||
data.action !== 'response'
) {
return;
}
// This type should probably be able to be inferred without a cast, but for some reason it isn't.
const responseData = /** @type {import('template-renderer-proxy').BackendMessage<'response'>} */ (data);
const response = responseData.params;
if (typeof response !== 'object' || response === null) { return; }
cleanup();
const {error} = response;
if (error) {
reject(ExtensionError.deserialize(error));
} else {
resolve(/** @type {import('template-renderer-proxy').FrontendApiReturn<TName>} */ (response.result));
}
};
let timer = (
typeof timeout === 'number' ?
setTimeout(() => {
cleanup();
reject(new Error('Timeout'));
}, timeout) :
null
);
this._invocations.add(invocation);
window.addEventListener('message', onMessage, false);
/** @type {import('template-renderer-proxy').FrontendMessage<TName>} */
const requestMessage = {action, params, id};
frameWindow.postMessage(requestMessage, '*');
});
}
/**
* @returns {void}
*/
_onFrameLoad() {
if (this._frameLoading) { return; }
this._frameNeedsLoad = true;
for (const invocation of this._invocations) {
invocation.cancel();
}
this._invocations.clear();
}
}

View File

@@ -0,0 +1,208 @@
/*
* Copyright (C) 2023-2025 Yomitan Authors
* Copyright (C) 2016-2022 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/>.
*/
import {Handlebars} from '../../lib/handlebars.js';
import {ExtensionError} from '../core/extension-error.js';
export class TemplateRenderer {
constructor() {
/** @type {Map<string, import('handlebars').TemplateDelegate<import('anki-templates').NoteData>>} */
this._cache = new Map();
/** @type {number} */
this._cacheMaxSize = 5;
/** @type {Map<import('anki-templates').RenderMode, import('template-renderer').DataType>} */
this._dataTypes = new Map();
/** @type {?((noteData: import('anki-templates').NoteData) => import('template-renderer').SetupCallbackResult)} */
this._renderSetup = null;
/** @type {?((noteData: import('anki-templates').NoteData) => import('template-renderer').CleanupCallbackResult)} */
this._renderCleanup = null;
}
/**
* @param {import('template-renderer').HelperFunctionsDescriptor} helpers
*/
registerHelpers(helpers) {
for (const [name, helper] of helpers) {
this._registerHelper(name, helper);
}
}
/**
* @param {import('anki-templates').RenderMode} name
* @param {import('template-renderer').DataType} details
*/
registerDataType(name, {modifier, composeData}) {
this._dataTypes.set(name, {modifier, composeData});
}
/**
* @param {?((noteData: import('anki-templates').NoteData) => import('template-renderer').SetupCallbackResult)} setup
* @param {?((noteData: import('anki-templates').NoteData) => import('template-renderer').CleanupCallbackResult)} cleanup
*/
setRenderCallbacks(setup, cleanup) {
this._renderSetup = setup;
this._renderCleanup = cleanup;
}
/**
* @param {string} template
* @param {import('template-renderer').PartialOrCompositeRenderData} data
* @param {import('anki-templates').RenderMode} type
* @returns {import('template-renderer').RenderResult}
*/
render(template, data, type) {
const instance = this._getTemplateInstance(template);
const modifiedData = this._getModifiedData(data, void 0, type);
return this._renderTemplate(instance, modifiedData);
}
/**
* @param {import('template-renderer').RenderMultiItem[]} items
* @returns {import('core').Response<import('template-renderer').RenderResult>[]}
*/
renderMulti(items) {
/** @type {import('core').Response<import('template-renderer').RenderResult>[]} */
const results = [];
for (const {template, templateItems} of items) {
const instance = this._getTemplateInstance(template);
for (const {type, commonData, datas} of templateItems) {
for (const data of datas) {
let result;
try {
const data2 = this._getModifiedData(data, commonData, type);
const renderResult = this._renderTemplate(instance, data2);
result = {result: renderResult};
} catch (error) {
result = {error: ExtensionError.serialize(error)};
}
results.push(result);
}
}
}
return results;
}
/**
* @param {import('template-renderer').CompositeRenderData} data
* @param {import('anki-templates').RenderMode} type
* @returns {import('anki-templates').NoteData}
*/
getModifiedData(data, type) {
return this._getModifiedData(data, void 0, type);
}
// Private
/**
* @param {string} template
* @returns {import('handlebars').TemplateDelegate<import('anki-templates').NoteData>}
*/
_getTemplateInstance(template) {
const cache = this._cache;
let instance = cache.get(template);
if (typeof instance === 'undefined') {
this._updateCacheSize(this._cacheMaxSize - 1);
// Handlebars is a custom version of the library without type information, so it's assumed to be "any".
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
instance = /** @type {import('handlebars').TemplateDelegate<import('anki-templates').NoteData>} */ (Handlebars.compileAST(template));
cache.set(template, instance);
}
return instance;
}
/**
* @param {import('handlebars').TemplateDelegate<import('anki-templates').NoteData>} instance
* @param {import('anki-templates').NoteData} data
* @returns {import('template-renderer').RenderResult}
*/
_renderTemplate(instance, data) {
const renderSetup = this._renderSetup;
const renderCleanup = this._renderCleanup;
/** @type {string} */
let result;
/** @type {?import('template-renderer').SetupCallbackResult} */
let additions1;
/** @type {?import('template-renderer').CleanupCallbackResult} */
let additions2;
try {
additions1 = (typeof renderSetup === 'function' ? renderSetup(data) : null);
result = instance(data).replace(/^\n+|\n+$/g, '');
} finally {
additions2 = (typeof renderCleanup === 'function' ? renderCleanup(data) : null);
}
return /** @type {import('template-renderer').RenderResult} */ (Object.assign({result}, additions1, additions2));
}
/**
* @param {import('template-renderer').PartialOrCompositeRenderData} data
* @param {import('anki-note-builder').CommonData|undefined} commonData
* @param {import('anki-templates').RenderMode} type
* @returns {import('anki-templates').NoteData}
* @throws {Error}
*/
_getModifiedData(data, commonData, type) {
if (typeof type === 'string') {
const typeInfo = this._dataTypes.get(type);
if (typeof typeInfo !== 'undefined') {
if (typeof commonData !== 'undefined') {
const {composeData} = typeInfo;
data = composeData(data, commonData);
} else if (typeof data.commonData === 'undefined') {
throw new Error('Incomplete data');
}
const {modifier} = typeInfo;
return modifier(/** @type {import('template-renderer').CompositeRenderData} */ (data));
}
}
throw new Error(`Invalid type: ${type}`);
}
/**
* @param {number} maxSize
*/
_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; }
}
}
/**
* @param {string} name
* @param {import('template-renderer').HelperFunction} helper
*/
_registerHelper(name, helper) {
/**
* @this {unknown}
* @param {unknown[]} args
* @returns {unknown}
*/
function wrapper(...args) {
const argCountM1 = Math.max(0, args.length - 1);
const options = /** @type {import('handlebars').HelperOptions} */ (args[argCountM1]);
args.length = argCountM1;
return helper(args, this, options);
}
Handlebars.registerHelper(name, wrapper);
}
}