Frontend bundler update nov 2024 (#3091)

Co-authored-by: Panagiotis Georgakopoulos <panagiotis.georgakopoulos@juliacomputing.com>

Author: fonsp

.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-lock.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/package.json

@@ -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/https-resolver.js

@@ -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-bundler/parcel-resolver-like-a-browser/package.json

@@ -1,10 +1,13 @@
 // @ts-ignore
-import vmsg from "https://cdn.jsdelivr.net/npm/vmsg@0.4.0/vmsg.js"
+import vmsg from "https://cdn.jsdelivr.net/npm/vmsg@0.4.0/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/vmsg@0.4.0/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/AudioRecording.js

@@ -1,4 +1,5 @@
 import "https://cdn.jsdelivr.net/npm/requestidlecallback-polyfill@1.0.2/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/SetupMathJax.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/common/external_source.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