Template index.html

microbit-foundation · Mar 13, 2024 · 35b9bb2 · 35b9bb2
1 parent 260c748
commit 35b9bb2
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -23,8 +23,7 @@
       content="A Python Editor for the BBC micro:bit, built by the Micro:bit Educational Foundation and the global Python Community."
     />
     <meta property="og:image" content="%VITE_FULL_URL%social.png" />
-    <!-- TODO: ejs support or similar likely via a tiny plugin
-    <% if (process.env.VITE_FOUNDATION_BUILD === 'true') { %>
+    <% if (VITE_FOUNDATION_BUILD === 'true') { %>
     <script
       src="https://shared-assets.microbit.org/common/v1/common.js"
       async
@@ -42,7 +41,7 @@
           window.dataLayer.push(arguments);
         };
     </script>
-    <% } %>-->
+    <% } %>
     <script type="module" src="/src/index.tsx"></script>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -62,9 +62,11 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",
+    "@types/ejs": "^3.1.5",
     "@types/file-saver": "^2.0.3",
     "@vitejs/plugin-react": "^4.2.1",
     "cross-env": "^7.0.3",
+    "ejs": "^3.1.9",
     "jsdom": "^24.0.0",
     "pptr-testing-library": "^0.7.0",
     "prettier": "2.3.2",

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,17 +1,34 @@
 import { configDefaults, defineConfig, UserConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
 import svgr from "vite-plugin-svgr";
-import { loadEnv } from "vite";
+import {
+  IndexHtmlTransformContext,
+  IndexHtmlTransformResult,
+  loadEnv,
+  Plugin,
+} from "vite";
 import fs from "node:fs";
 import path from "node:path";
+import ejs from "ejs";
 
 // Support optionally pulling in external branding if the module is installed.
 const theme = "@microbit-foundation/python-editor-v3-microbit";
 const external = `node_modules/${theme}`;
 const internal = "src/deployment/default";
 
+// There are third-party options but seems better to just depend on ejs.
+const viteEjsPlugin = ({ data }: { data: ejs.Data }): Plugin => ({
+  name: "ejs",
+  transformIndexHtml: {
+    order: "pre",
+    handler: (
+      html: string,
+      _ctx: IndexHtmlTransformContext
+    ): IndexHtmlTransformResult => ejs.render(html, data),
+  },
+});
+
 export default defineConfig(({ mode }) => {
-  const commonEnv = loadEnv(mode, process.cwd(), "");
   const unitTest: UserConfig["test"] = {
     globals: true,
     exclude: [...configDefaults.exclude, "**/e2e/**"],
@@ -39,7 +56,13 @@ export default defineConfig(({ mode }) => {
       port: 3000,
     },
     assetsInclude: ["**/*.hex"],
-    plugins: [react(), svgr()],
+    plugins: [
+      viteEjsPlugin({
+        data: loadEnv(mode, process.cwd(), "VITE_"),
+      }),
+      react(),
+      svgr(),
+    ],
     test: mode === "e2e" ? e2eTest : unitTest,
     resolve: {
       alias: {