From 35b9bb2734e3ab4b756caa613070c77af06e40ea Mon Sep 17 00:00:00 2001 From: Matt Hillsdon Date: Wed, 13 Mar 2024 15:20:42 +0000 Subject: [PATCH] Template index.html --- index.html | 5 +- package-lock.json | 147 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 + vite.config.ts | 29 ++++++++- 4 files changed, 177 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 9e84ae86e..d1b853252 100644 --- 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." /> - + <% } %> diff --git a/package-lock.json b/package-lock.json index 7fc0b7db2..418655ccb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -66,9 +66,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", @@ -3418,6 +3420,12 @@ "@types/trusted-types": "*" } }, + "node_modules/@types/ejs": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-3.1.5.tgz", + "integrity": "sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==", + "dev": true + }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -3961,6 +3969,12 @@ "node": "*" } }, + "node_modules/async": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz", + "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==", + "dev": true + }, "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -4829,6 +4843,21 @@ "tslib": "^2.0.3" } }, + "node_modules/ejs": { + "version": "3.1.9", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz", + "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==", + "dev": true, + "dependencies": { + "jake": "^10.8.5" + }, + "bin": { + "ejs": "bin/cli.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/electron-to-chromium": { "version": "1.4.701", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.701.tgz", @@ -5061,6 +5090,36 @@ "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz", "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==" }, + "node_modules/filelist": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", + "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==", + "dev": true, + "dependencies": { + "minimatch": "^5.0.1" + } + }, + "node_modules/filelist/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/filelist/node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -5905,6 +5964,94 @@ "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", "dev": true }, + "node_modules/jake": { + "version": "10.8.7", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz", + "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==", + "dev": true, + "dependencies": { + "async": "^3.2.3", + "chalk": "^4.0.2", + "filelist": "^1.0.4", + "minimatch": "^3.1.2" + }, + "bin": { + "jake": "bin/cli.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/jake/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/jake/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jake/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/jake/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/jake/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/jake/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/jest-diff": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz", diff --git a/package.json b/package.json index db66c2969..88f4c0c81 100644 --- 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 index 752eaced0..3099f0778 100644 --- 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: {