summaryrefslogtreecommitdiff
path: root/ext/bg/js
diff options
context:
space:
mode:
Diffstat (limited to 'ext/bg/js')
-rw-r--r--ext/bg/js/settings/anki-templates-controller.js4
-rw-r--r--ext/bg/js/template-renderer-frame-api.js76
-rw-r--r--ext/bg/js/template-renderer-frame-main.js27
-rw-r--r--ext/bg/js/template-renderer-proxy.js153
4 files changed, 258 insertions, 2 deletions
diff --git a/ext/bg/js/settings/anki-templates-controller.js b/ext/bg/js/settings/anki-templates-controller.js
index c53e4553..c980bfa2 100644
--- a/ext/bg/js/settings/anki-templates-controller.js
+++ b/ext/bg/js/settings/anki-templates-controller.js
@@ -17,7 +17,7 @@
/* global
* AnkiNoteBuilder
- * TemplateRenderer
+ * TemplateRendererProxy
* api
*/
@@ -28,7 +28,7 @@ class AnkiTemplatesController {
this._cachedDefinitionValue = null;
this._cachedDefinitionText = null;
this._defaultFieldTemplates = null;
- this._templateRenderer = new TemplateRenderer();
+ this._templateRenderer = new TemplateRendererProxy();
}
async prepare() {
diff --git a/ext/bg/js/template-renderer-frame-api.js b/ext/bg/js/template-renderer-frame-api.js
new file mode 100644
index 00000000..7668e176
--- /dev/null
+++ b/ext/bg/js/template-renderer-frame-api.js
@@ -0,0 +1,76 @@
+/*
+ * Copyright (C) 2020 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([
+ ['renderHandlebarsTemplate', {async: true, handler: this._onRenderHandlebarsTemplate.bind(this)}]
+ ]);
+ }
+
+ prepare() {
+ window.addEventListener('message', this._onWindowMessage.bind(this), false);
+ }
+
+ _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 _onRenderHandlebarsTemplate({template, data, marker}) {
+ return await this._templateRenderer.render(template, data, marker);
+ }
+
+ _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/bg/js/template-renderer-frame-main.js b/ext/bg/js/template-renderer-frame-main.js
new file mode 100644
index 00000000..7d3e1493
--- /dev/null
+++ b/ext/bg/js/template-renderer-frame-main.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2020 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
+ * TemplateRenderer
+ * TemplateRendererFrameApi
+ */
+
+(() => {
+ const templateRenderer = new TemplateRenderer();
+ const api = new TemplateRendererFrameApi(templateRenderer);
+ api.prepare();
+})();
diff --git a/ext/bg/js/template-renderer-proxy.js b/ext/bg/js/template-renderer-proxy.js
new file mode 100644
index 00000000..f08efdd6
--- /dev/null
+++ b/ext/bg/js/template-renderer-proxy.js
@@ -0,0 +1,153 @@
+/*
+ * Copyright (C) 2020 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('/bg/template-renderer.html');
+ this._invocations = new Set();
+ }
+
+ async render(template, data, marker) {
+ await this._prepareFrame();
+ return await this._invoke('renderHandlebarsTemplate', {template, data, marker});
+ }
+
+ // 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';
+ }
+ 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(jsonToError(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();
+ }
+}