editor/web: use render function from shared package

.gitignore

@@ -1,14 +1,13 @@
 .vscode/
-
-build/
-*.egg-info/
-__pycache__/
-dist/
-
-node_modules/
+.DS_Store
 
 .venv/
 venv/
-ttt/
+
+node_modules/
+build/
+dist/
+*.egg-info/
+__pycache__/
 
 instance/

editor/web/package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "bootstrap": "^5.3.8",
+    "cloudflare-error-page": "../../javascript",
     "ejs": "^3.1.10"
   }
 }

editor/web/src/index.js

@@ -5,8 +5,7 @@
   - inputs call render() on change
   - "Open in new tab" opens the rendered HTML in a new window using a blob URL
 */
-import ejs from 'ejs';
-import templateContent from './template.ejs?raw';
+import { render as render_cf_error_page } from 'cloudflare-error-page';
 
 import 'bootstrap/js/src/modal.js';
 import Popover from 'bootstrap/js/src/popover.js';
@@ -14,8 +13,6 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 
 import { jsCodeGen, jsonCodeGen, pythonCodeGen } from './codegen';
 
-let template = ejs.compile(templateContent);
-
 // can be changed if specified by '?from=<name>'
 let initialConfig = {
   title: 'Internal server error',
@@ -255,24 +252,9 @@ function readConfig() {
     },
   };
 }
-function formatUtcTimestamp() {
-  const d = new Date();
-
-  const year = d.getUTCFullYear();
-  const month = String(d.getUTCMonth() + 1).padStart(2, '0');
-  const day = String(d.getUTCDate()).padStart(2, '0');
-
-  const hours = String(d.getUTCHours()).padStart(2, '0');
-  const minutes = String(d.getUTCMinutes()).padStart(2, '0');
-  const seconds = String(d.getUTCSeconds()).padStart(2, '0');
-
-  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} UTC`;
-}
 
 function renderEjs(params) {
-  return template({
-    params: params,
-  });
+  return render_cf_error_page(params);
 }
 
 /* Basic render: build HTML string from config and put into iframe.srcdoc */
@@ -280,9 +262,8 @@ function render() {
   const cfg = readConfig();
   window.lastCfg = cfg;
 
-  cfg.time = formatUtcTimestamp();
+  // TODO: input box for Ray ID / Client IP?
   cfg.ray_id = '0123456789abcdef';
-  cfg.client_ip = '1.1.1.1';
   if (Number.isNaN(Number(cfg.error_code))) {
     cfg.html_title = cfg.title || 'Internal server error';
   }
@@ -305,8 +286,8 @@ function render() {
 let lastRenderedHtml = '';
 function openInNewTab() {
   if (!lastRenderedHtml) render();
-  const wnd = window.open()
-  wnd.document.documentElement.innerHTML = lastRenderedHtml
+  const wnd = window.open();
+  wnd.document.documentElement.innerHTML = lastRenderedHtml;
 }
 
 function createShareableLink() {
@@ -448,10 +429,10 @@ function updateSaveAsDialog(e) {
   if (codegen) {
     saveAsContent = codegen.generate(params);
   } else if (saveAsType == 'static') {
-    render() // rerender the page
+    render(); // rerender the page
     saveAsContent = lastRenderedHtml;
   } else {
-    throw new Error('unexpected saveAsType=' + saveAsType)
+    throw new Error('unexpected saveAsType=' + saveAsType);
   }
   $('saveAsDialogCode').value = saveAsContent;
   $('saveAsDialogCode').scrollTop = 0;

editor/web/vite.config.ts

@@ -13,6 +13,9 @@ export default defineConfig(({ mode }) => {
       minify: true,
       sourcemap: true,
     },
+    resolve: {
+      dedupe: ['ejs'],
+    },
     server: {
       port: 3000,
       proxy: {

editor/web/yarn.lock

@@ -392,6 +392,11 @@ clean-css@~5.3.2:
   dependencies:
     source-map "~0.6.0"
 
+cloudflare-error-page@../../javascript:
+  version "0.1.0"
+  dependencies:
+    ejs "^3.1.10"
+
 commander@^10.0.0:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"