Frontend bundler update nov 2024 (#3091)

Co-authored-by: Panagiotis Georgakopoulos <[email protected]>

.github/workflows/Bundle.yml

@@ -49,7 +49,7 @@ jobs:
             # Do the actual bundling
             - uses: actions/setup-node@v4
               with:
-                  node-version: 17.x
+                  node-version: 22.x
                   cache: "npm"
                   cache-dependency-path: frontend-bundler/package-lock.json
 
@@ -60,7 +60,12 @@ jobs:
               working-directory: frontend-bundler
               run: |
                 (npm run build) || (npm run build) || (npm run build)
-                
+                                
+            - name: List generated files
+              working-directory: frontend-dist
+              run: |
+                ls -lha
+
             - name: Check for corrupt files
               working-directory: frontend-dist
               run: |

frontend-bundler/.parcelrc

@@ -5,7 +5,7 @@
         "..."
     ],
     "reporters": [
-        "...", 
+        "...",
         "parcel-reporter-bundle-manifest"
     ]
 }

frontend-bundler/package.json

@@ -13,18 +13,22 @@
     "author": "",
     "license": "ISC",
     "dependencies": {
-        "@parcel/config-default": "^2.0.0",
-        "mkdirp": "^1.0.4",
-        "parcel": "^2.0.0",
+        "@parcel/config-default": "^2.11.0",
+        "mkdirp": "^3.0.1",
+        "parcel": "^2.11.0",
         "parcel-reporter-bundle-manifest": "^1.0.0",
         "parcel-resolver-like-a-browser": "file:../frontend-bundler/parcel-resolver-like-a-browser"
     },
+    "engines": {
+        "node": ">=22 <23",
+        "npm": ">=10 <11"
+    },
     "devDependencies": {
-        "@parcel/optimizer-data-url": "^2.0.0",
-        "@parcel/transformer-inline-string": "^2.0.0",
+        "@parcel/optimizer-blob-url": "^2.11.0",
+        "@parcel/optimizer-data-url": "^2.11.0",
         "@plutojl/posthtml-crossorigin": "^1.0.0",
-        "@types/node": "^16.11.6",
+        "@types/node": "^22",
         "posthtml": "^0.16.6",
-        "posthtml-sri": "^1.2.0"
+        "posthtml-sri": "^2.0.0"
     }
 }

frontend-bundler/parcel-resolver-like-a-browser/https-resolver.js

@@ -1,8 +1,7 @@
 let { Resolver } = require("@parcel/plugin")
 let path = require("path")
-let fetch = require("node-fetch")
 let fs = require("fs/promises")
-let mkdirp = require("mkdirp")
+let { mkdirp } = require("mkdirp")
 let { URL } = require("url")
 let crypto = require("crypto")
 
@@ -86,16 +85,16 @@ module.exports = new Resolver({
                     }
                     // Can't directly use the value from the request, as parcel really wants a string,
                     // and converting binary assets into strings and then passing them doesn't work 🤷‍♀️.
-                    let buffer = await response.buffer()
+                    let buffer = await response.arrayBuffer()
 
-                    const response_length = buffer.length
+                    const response_length = buffer.byteLength
 
                     if (response_length === 0) {
                         throw new Error(`${specifier} returned an empty reponse.`)
                     }
 
                     await mkdirp(folder)
-                    const write_result = await fs.writeFile(fullpath, buffer)
+                    const write_result = await fs.writeFile(fullpath, Buffer.from(buffer))
 
                     // Verify that the file was written correctly:
                     if (write_result !== undefined || (await fs.readFile(fullpath)).length !== response_length) {

frontend-bundler/parcel-resolver-like-a-browser/package.json

@@ -12,8 +12,7 @@
     "author": "",
     "license": "ISC",
     "dependencies": {
-        "@parcel/node-resolver-core": "^2.0.0",
-        "@parcel/plugin": "^2.0.0",
-        "node-fetch": "^2.6.5"
+        "@parcel/node-resolver-core": "^3.3.0",
+        "@parcel/plugin": "^2.0.0"
     }
 }

frontend/common/AudioRecording.js

@@ -1,10 +1,13 @@
 // @ts-ignore
-import vmsg from "https://cdn.jsdelivr.net/npm/[email protected]/vmsg.js"
+import vmsg from "https://cdn.jsdelivr.net/npm/[email protected]/vmsg.js" // when modifying, also modify the version number in all other files.
+import { get_included_external_source } from "./external_source.js"
 
-export const create_recorder = async () => {
-    const recorder = new vmsg.Recorder({
-        wasmURL: new URL("https://unpkg.com/[email protected]/vmsg.wasm", import.meta.url),
-    })
+const create_recorder_mp3 = async () => {
+    const wasmURL = get_included_external_source("vmsg-wasm")?.href
+
+    if (!wasmURL) throw new Error("wasmURL not found")
+
+    const recorder = new vmsg.Recorder({ wasmURL })
 
     return {
         start: async () => {
@@ -20,8 +23,18 @@ export const create_recorder = async () => {
     }
 }
 
+export const create_recorder = () => {
+    try {
+        return create_recorder_mp3()
+    } catch (e) {
+        console.error("Failed to create mp3 recorder", e)
+    }
+
+    return create_recorder_native()
+}
+
 // really nice but it can only record to audio/ogg or sometihng, nothing that works across all browsers
-export const create_recorder_native = async () => {
+const create_recorder_native = async () => {
     const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
 
     let chunks = []

frontend/common/SetupMathJax.js

@@ -1,4 +1,5 @@
 import "https://cdn.jsdelivr.net/npm/[email protected]/index.js"
+import { get_included_external_source } from "./external_source.js"
 
 let setup_done = false
 
@@ -75,14 +76,20 @@ export const setup_mathjax = () => {
     requestIdleCallback(
         () => {
             console.log("Loading mathjax!!")
-            const script = document.head.querySelector("#MathJax-script")
-            script?.addEventListener("load", () => {
+            const src = get_included_external_source("MathJax-script")
+            if (!src) throw new Error("Could not find mathjax source")
+
+            const script = document.createElement("script")
+            script.addEventListener("load", () => {
                 console.log("MathJax loaded!")
                 if (window["MathJax"]?.version !== "3.2.2") {
                     twowasloaded()
                 }
             })
-            script.setAttribute("src", script.getAttribute("not-the-src-yet"))
+            script.crossOrigin = src.crossOrigin
+            script.integrity = src.integrity
+            script.src = src.href
+            document.head.append(script)
         },
         { timeout: 2000 }
     )

frontend/common/external_source.js

@@ -0,0 +1,6 @@
+/**
+ * Get a `<link rel="pluto-external-source">` element from editor.html.
+ * @param {String} id
+ * @returns {HTMLLinkElement?}
+ */
+export const get_included_external_source = (id) => document.head.querySelector(`link[rel='pluto-external-source'][id='${id}']`)

frontend/components/Editor.js

@@ -45,6 +45,7 @@ import { get_environment } from "../common/Environment.js"
 import { ProcessStatus } from "../common/ProcessStatus.js"
 import { SafePreviewUI } from "./SafePreviewUI.js"
 import { open_pluto_popup } from "../common/open_pluto_popup.js"
+import { get_included_external_source } from "../common/external_source.js"
 
 // This is imported asynchronously - uncomment for development
 // import environment from "../common/Environment.js"
@@ -257,8 +258,8 @@ const first_true_key = (obj) => {
  * }}
  */
 
-const url_logo_big = document.head.querySelector("link[rel='pluto-logo-big']")?.getAttribute("href") ?? ""
-export const url_logo_small = document.head.querySelector("link[rel='pluto-logo-small']")?.getAttribute("href") ?? ""
+const url_logo_big = get_included_external_source("pluto-logo-big")?.href
+export const url_logo_small = get_included_external_source("pluto-logo-small")?.href
 
 /**
  * @typedef EditorProps

frontend/components/Popup.js

@@ -8,14 +8,12 @@ import { useDebouncedTruth } from "./RunArea.js"
 import { time_estimate, usePackageTimingData } from "../common/InstallTimeEstimate.js"
 import { pretty_long_time } from "./EditOrRunButton.js"
 import { useEventListener } from "../common/useEventListener.js"
+import { get_included_external_source } from "../common/external_source.js"
 
-// This funny thing is a way to tell parcel to bundle these files..
-// Eventually I'll write a plugin that is able to parse html`...`, but this is it for now.
-// https://parceljs.org/languages/javascript/#url-dependencies
-export const arrow_up_circle_icon = new URL("https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/arrow-up-circle-outline.svg", import.meta.url)
-export const document_text_icon = new URL("https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/document-text-outline.svg", import.meta.url)
-export const help_circle_icon = new URL("https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/help-circle-outline.svg", import.meta.url)
-export const open_icon = new URL("https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/open-outline.svg", import.meta.url)
+export const arrow_up_circle_icon = get_included_external_source("arrow_up_circle_icon")?.href
+export const document_text_icon = get_included_external_source("document_text_icon")?.href
+export const help_circle_icon = get_included_external_source("help_circle_icon")?.href
+export const open_icon = get_included_external_source("open_icon")?.href
 
 /**
  * @typedef PkgPopupDetails

frontend/editor.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 @import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/dialog-polyfill.css");
 
 /* @import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,500,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext"); */
@@ -3765,9 +3767,9 @@ pluto-cell.hooked_up pluto-output {
 }
 
 .markdown-code-block-button::before {
-    background-image: url("https://unpkg.com/ionicons@7.1.0/dist/svg/copy-outline.svg");
+    background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/copy-outline.svg");
 }
 
 .markdown-code-block-copied-code-button::before {
-    background-image: url("https://unpkg.com/ionicons@7.1.0/dist/svg/checkmark-outline.svg");
+    background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/checkmark-outline.svg");
 }

frontend/editor.html

@@ -14,8 +14,8 @@
     <link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16x16.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="96x96" href="./img/favicon-96x96.png" />
-    <link rel="pluto-logo-big" href="./img/logo.svg" />
-    <link rel="pluto-logo-small" href="./img/favicon_unsaturated.svg" />
+    <link rel="pluto-external-source" id="pluto-logo-big" href="./img/logo.svg" />
+    <link rel="pluto-external-source" id="pluto-logo-small" href="./img/favicon_unsaturated.svg" />
 
     <script defer>
         console.log(
@@ -28,6 +28,12 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/ansi_up.min.js" defer></script>
 
+    <link rel="pluto-external-source" id="vmsg-wasm" href="https://unpkg.com/[email protected]/vmsg.wasm">
+    <link rel="pluto-external-source" id="arrow_up_circle_icon" href="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/arrow-up-circle-outline.svg">
+    <link rel="pluto-external-source" id="document_text_icon" href="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/document-text-outline.svg">
+    <link rel="pluto-external-source" id="help_circle_icon" href="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/help-circle-outline.svg">
+    <link rel="pluto-external-source" id="open_icon" href="https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/open-outline.svg">
+
     <!-- This doesn't do anything unless activated, and it makes sure parcel bundles this -->
     <script id="iframe-resizer-content-window-script" src="https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.contentWindow.min.js" crossorigin="anonymous" defer></script>
 
@@ -42,7 +48,7 @@
     <script src="./warn_old_browsers.js"></script>
 
     <!-- This script will be enabled by JS after the notebook has initialized to prevent taking up bandwidth during the initial load. -->
-    <script type="text/javascript" id="MathJax-script" integrity="sha384-4kE/rQ11E8xT9QgrCBTyvenkuPfQo8rXYQvJZuMgxyPOoUfpatjQPlgdv6V5yhUK" crossorigin="anonymous" not-the-src-yet="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-svg-full.js" async></script>
+    <link rel="pluto-external-source" id="MathJax-script" href="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-svg-full.js" type="text/javascript">
 
     <meta name="pluto-insertion-spot-preload">
 </head>

frontend/error.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 * {
     box-sizing: border-box;
 }

frontend/index.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 @import url("https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/400.css");
 @import url("https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/400-italic.css");
 

frontend/treeview.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 @import url("https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/400.css");
 @import url("https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/400-italic.css");
 @import url("https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/700.css");

frontend/welcome.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 @import url("https://cdn.jsdelivr.net/npm/[email protected]/inter-latin.css");
 
 :root {