Merge branch 'main' into fix-running-forever-maybe

fonsp · Aug 14, 2024 · 7ffabb8 · 7ffabb8
2 parents da6d31c + 294636e
commit 7ffabb8
Show file tree

Hide file tree

Showing 21 changed files with 539 additions and 171 deletions.
diff --git a/.github/workflows/IntegrationTest.yml b/.github/workflows/IntegrationTest.yml
@@ -24,6 +24,8 @@ on:
         branches-ignore:
             - release
 
+env:
+    JULIA_PLUTO_IGNORE_CDN_BUNDLE_WARNING: true
 
 jobs:
     test:

diff --git a/frontend/common/Binder.js b/frontend/common/Binder.js
@@ -1,4 +1,4 @@
-import immer from "../imports/immer.js"
+import { produce } from "../imports/immer.js"
 import { timeout_promise, ws_address_from_base } from "./PlutoConnection.js"
 import { with_query_params } from "./URLTools.js"
 
@@ -95,7 +95,7 @@ export const start_binder = async ({ setStatePromise, connect, launch_params })
         // view stats on https://stats.plutojl.org/
         count_stat(`binder-start`)
         await setStatePromise(
-            immer((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
                 state.backend_launch_phase = BackendLaunchPhase.requesting
                 state.disable_ui = false
                 // Clear the Status of the process that generated the HTML
@@ -107,7 +107,7 @@ export const start_binder = async ({ setStatePromise, connect, launch_params })
         const { binder_session_url, binder_session_token } = await request_binder(launch_params.binder_url.replace("mybinder.org/v2/", "mybinder.org/build/"), {
             on_log: (logs) =>
                 setStatePromise(
-                    immer((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+                    produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
                         state.backend_launch_logs = logs
                     })
                 ),
@@ -122,7 +122,7 @@ export const start_binder = async ({ setStatePromise, connect, launch_params })
         }
 
         await setStatePromise(
-            immer((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
                 state.backend_launch_phase = BackendLaunchPhase.created
                 state.binder_session_url = binder_session_url
                 state.binder_session_token = binder_session_token
@@ -133,7 +133,7 @@ export const start_binder = async ({ setStatePromise, connect, launch_params })
         await fetch(with_token(binder_session_url))
 
         await setStatePromise(
-            immer((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
                 state.backend_launch_phase = BackendLaunchPhase.responded
             })
         )
@@ -197,7 +197,7 @@ export const start_binder = async ({ setStatePromise, connect, launch_params })
         console.info("notebook_id:", new_notebook_id)
 
         await setStatePromise(
-            immer((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
                 state.notebook.notebook_id = new_notebook_id
                 state.backend_launch_phase = BackendLaunchPhase.notebook_running
                 state.refresh_target = edit_url

diff --git a/frontend/common/RunLocal.js b/frontend/common/RunLocal.js
@@ -1,4 +1,4 @@
-import immer from "../imports/immer.js"
+import { produce } from "../imports/immer.js"
 import { BackendLaunchPhase } from "./Binder.js"
 import { timeout_promise } from "./PlutoConnection.js"
 import { with_query_params } from "./URLTools.js"
@@ -18,7 +18,7 @@ export const start_local = async ({ setStatePromise, connect, launch_params }) =
         if (launch_params.pluto_server_url == null || launch_params.notebookfile == null) throw Error("Invalid launch parameters for starting locally.")
 
         await setStatePromise(
-            immer((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
                 state.backend_launch_phase = BackendLaunchPhase.responded
                 state.disable_ui = false
                 // Clear the Status of the process that generated the HTML
@@ -63,7 +63,7 @@ export const start_local = async ({ setStatePromise, connect, launch_params }) =
         window.history.replaceState({}, "", edit_url)
 
         await setStatePromise(
-            immer((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
                 state.notebook.notebook_id = new_notebook_id
                 state.backend_launch_phase = BackendLaunchPhase.notebook_running
             })

diff --git a/frontend/common/SliderServerClient.js b/frontend/common/SliderServerClient.js
@@ -1,7 +1,7 @@
 import { trailingslash } from "./Binder.js"
 import { plutohash_arraybuffer, debounced_promises, base64url_arraybuffer } from "./PlutoHash.js"
 import { pack, unpack } from "./MsgPack.js"
-import immer from "../imports/immer.js"
+import { produce } from "../imports/immer.js"
 import _ from "../imports/lodash.js"
 
 const assert_response_ok = (/** @type {Response} */ r) => (r.ok ? r : Promise.reject(r))
@@ -39,9 +39,19 @@ export const nothing_actions = ({ actions }) =>
         ])
     )
 
+/**
+ * @param {{
+ * setStatePromise: any,
+ * launch_params: import("../components/Editor.js").LaunchParameters,
+ * actions: any,
+ * get_original_state: () => import("../components/Editor.js").NotebookData,
+ * get_current_state: () => import("../components/Editor.js").NotebookData,
+ * apply_notebook_patches: (patches: import("../imports/immer.js").Patch[], old_state?: import("../components/Editor.js").NotebookData?, get_reverse_patches?: boolean) => Promise<any>,
+ * }} props
+ */
 export const slider_server_actions = ({ setStatePromise, launch_params, actions, get_original_state, get_current_state, apply_notebook_patches }) => {
     setStatePromise(
-        immer((state) => {
+        produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
             state.slider_server.connecting = true
         })
     )
@@ -62,7 +72,7 @@ export const slider_server_actions = ({ setStatePromise, launch_params, actions,
     bond_connections.then((x) => {
         console.log("Bond connections:", x)
         setStatePromise(
-            immer((state) => {
+            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
                 state.slider_server.connecting = false
                 state.slider_server.interactive = Object.keys(x).length > 0
             })
@@ -85,7 +95,7 @@ export const slider_server_actions = ({ setStatePromise, launch_params, actions,
 
         const update_cells_running = async (running) =>
             await setStatePromise(
-                immer((state) => {
+                produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
                     running_cells.forEach((cell_id) => (state.notebook.cell_results[cell_id][starts.has(cell_id) ? "running" : "queued"] = running))
                 })
             )
@@ -128,12 +138,12 @@ export const slider_server_actions = ({ setStatePromise, launch_params, actions,
 
                 await apply_notebook_patches(
                     patches,
-                    immer((state) => {
+                    produce(get_current_state(), (state) => {
                         const original = get_original_state()
                         ids_of_cells_that_ran.forEach((id) => {
                             state.cell_results[id] = original.cell_results[id]
                         })
-                    })(get_current_state())
+                    })
                 )
             } catch (e) {
                 console.error(unpacked, e)
@@ -148,7 +158,7 @@ export const slider_server_actions = ({ setStatePromise, launch_params, actions,
         ...nothing_actions({ actions }),
         set_bond: async (symbol, value) => {
             setStatePromise(
-                immer((state) => {
+                produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
                     state.notebook.bonds[symbol] = { value: value }
                 })
             )

diff --git a/frontend/common/useEventListener.js b/frontend/common/useEventListener.js
@@ -1,15 +1,26 @@
 import { useCallback, useEffect } from "../imports/Preact.js"
 
+/**
+ * @typedef EventListenerAddable
+ * @type Document | HTMLElement | Window | EventSource | MediaQueryList | null
+ */
+
 export const useEventListener = (
-    /** @type {Document | HTMLElement | Window | EventSource | MediaQueryList | null} */ element,
+    /** @type {EventListenerAddable | import("../imports/Preact.js").Ref<EventListenerAddable>} */ element,
     /** @type {string} */ event_name,
     /** @type {EventListenerOrEventListenerObject} */ handler,
     /** @type {any[] | undefined} */ deps
 ) => {
     let handler_cached = useCallback(handler, deps)
     useEffect(() => {
-        if (element == null) return
-        element.addEventListener(event_name, handler_cached)
-        return () => element.removeEventListener(event_name, handler_cached)
+        const e = element
+        const useme =
+            e == null || e instanceof Document || e instanceof HTMLElement || e instanceof Window || e instanceof EventSource || e instanceof MediaQueryList
+                ? /** @type {EventListenerAddable} */ (e)
+                : e.current
+
+        if (useme == null) return
+        useme.addEventListener(event_name, handler_cached)
+        return () => useme.removeEventListener(event_name, handler_cached)
     }, [element, event_name, handler_cached])
 }
diff --git a/frontend/components/CellInput.js b/frontend/components/CellInput.js
@@ -95,103 +95,103 @@ window.PLUTO_TOGGLE_CM_AUTOCOMPLETE_ON_TYPE = (val = !ENABLE_CM_AUTOCOMPLETE_ON_
 }
 
 const common_style_tags = [
-    { tag: tags.comment,        color: "var(--cm-color-comment)", fontStyle: "italic", filter: "none" },
-    { tag: tags.keyword,        color: "var(--cm-color-keyword)" },
-    { tag: tags.variableName,   color: "var(--cm-color-var)", fontWeight: 700 },
-    { tag: tags.typeName,       color: "var(--cm-color-type)", fontStyle: "italic" },
-    { tag: tags.typeOperator,   color: "var(--cm-color-type)", fontStyle: "italic" },
-    { tag: tags.tagName,        color: "var(--cm-color-tag)" }, // JS
-    { tag: tags.propertyName,   color: "var(--cm-color-property)" },
+    { tag: tags.comment, color: "var(--cm-color-comment)", fontStyle: "italic", filter: "none" },
+    { tag: tags.keyword, color: "var(--cm-color-keyword)" },
+    { tag: tags.variableName, color: "var(--cm-color-var)", fontWeight: 700 },
+    { tag: tags.typeName, color: "var(--cm-color-type)", fontStyle: "italic" },
+    { tag: tags.typeOperator, color: "var(--cm-color-type)", fontStyle: "italic" },
+    { tag: tags.tagName, color: "var(--cm-color-tag)" }, // JS
+    { tag: tags.propertyName, color: "var(--cm-color-property)" },
     // TODO: tags.labelName
-    { tag: tags.macroName,      color: "var(--cm-color-macro)", fontWeight: 700 },
-    { tag: tags.string,         color: "var(--cm-color-string)" },
+    { tag: tags.macroName, color: "var(--cm-color-macro)", fontWeight: 700 },
+    { tag: tags.string, color: "var(--cm-color-string)" },
     // TODO: tags.character
-    { tag: tags.number,         color: "var(--cm-color-number)" },
-    { tag: tags.bool,           color: "var(--cm-color-builtin)", fontWeight: 700 },
+    { tag: tags.number, color: "var(--cm-color-number)" },
+    { tag: tags.bool, color: "var(--cm-color-builtin)", fontWeight: 700 },
     // TODO: tags.escape
     // TODO: tags.self, tags.null
-    { tag: tags.atom,           color: "var(--cm-color-atom)" },
-    { tag: tags.unit,           color: "var(--cm-color-tag)" }, // TODO: Remove
+    { tag: tags.atom, color: "var(--cm-color-atom)" },
+    { tag: tags.unit, color: "var(--cm-color-tag)" }, // TODO: Remove
     // TODO? tags.operator
-    { tag: tags.bracket,        color: "var(--cm-color-bracket)" },
+    { tag: tags.bracket, color: "var(--cm-color-bracket)" },
     { tag: tags.special(tags.brace), color: "var(--cm-color-macro)", fontWeight: 700 }, // interp
 ]
 
-export const pluto_syntax_colors_julia = HighlightStyle.define(
-    common_style_tags,
+export const pluto_syntax_colors_julia = HighlightStyle.define(common_style_tags, {
+    all: { color: `var(--cm-color-editor-text)` },
+    scope: julia_andrey().language,
+})
+
+export const pluto_syntax_colors_javascript = HighlightStyle.define(common_style_tags, {
+    all: { color: `var(--cm-color-editor-text)`, filter: `contrast(0.5)` },
+    scope: javascriptLanguage,
+})
+
+export const pluto_syntax_colors_python = HighlightStyle.define(common_style_tags, {
+    all: { color: `var(--cm-color-editor-text)`, filter: `contrast(0.5)` },
+    scope: pythonLanguage,
+})
+
+export const pluto_syntax_colors_css = HighlightStyle.define(
+    [
+        { tag: tags.comment, color: "var(--cm-color-comment)", fontStyle: "italic" },
+        { tag: tags.variableName, color: "var(--cm-color-css-accent)", fontWeight: 700 },
+        { tag: tags.propertyName, color: "var(--cm-color-css-accent)", fontWeight: 700 },
+        { tag: tags.tagName, color: "var(--cm-color-css)", fontWeight: 700 },
+        //{ tag: tags.className,          color: "var(--cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa)" },
+        //{ tag: tags.constant(tags.className), color: "var(--cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa)" },
+        { tag: tags.definitionOperator, color: "var(--cm-color-css)" },
+        { tag: tags.keyword, color: "var(--cm-color-css)" },
+        { tag: tags.modifier, color: "var(--cm-color-css-accent)" },
+        { tag: tags.literal, color: "var(--cm-color-css)" },
+        // { tag: tags.unit,              color: "var(--cm-color-css-accent)" },
+        { tag: tags.punctuation, opacity: 0.5 },
+    ],
     {
-        all: { color: `var(--cm-color-editor-text)` },
-        scope: julia_andrey().language,
+        scope: cssLanguage,
+        all: { color: "var(--cm-color-css)" },
     }
 )
 
-export const pluto_syntax_colors_javascript = HighlightStyle.define(
-    common_style_tags,
+export const pluto_syntax_colors_html = HighlightStyle.define(
+    [
+        { tag: tags.comment, color: "var(--cm-color-comment)", fontStyle: "italic" },
+        { tag: tags.content, color: "var(--cm-color-html)", fontWeight: 400 },
+        { tag: tags.tagName, color: "var(--cm-color-html-accent)", fontWeight: 600 },
+        { tag: tags.documentMeta, color: "var(--cm-color-html-accent)" },
+        { tag: tags.attributeName, color: "var(--cm-color-html-accent)", fontWeight: 600 },
+        { tag: tags.attributeValue, color: "var(--cm-color-html-accent)" },
+        { tag: tags.angleBracket, color: "var(--cm-color-html-accent)", fontWeight: 600, opacity: 0.7 },
+    ],
     {
-        all: { color: `var(--cm-color-editor-text)`, filter: `contrast(0.5)` },
-        scope: javascriptLanguage,
+        all: { color: "var(--cm-color-html)" },
+        scope: htmlLanguage,
     }
 )
 
-export const pluto_syntax_colors_python = HighlightStyle.define(
-    common_style_tags,
+// https://github.com/lezer-parser/markdown/blob/d4de2b03180ced4610bad9cef0ad3a805c43b63a/src/markdown.ts#L1890
+export const pluto_syntax_colors_markdown = HighlightStyle.define(
+    [
+        { tag: tags.comment, color: "var(--cm-color-comment)", fontStyle: "italic" },
+        { tag: tags.content, color: "var(--cm-color-md)" },
+        { tag: tags.heading, color: "var(--cm-color-md)", fontWeight: 700 },
+        // TODO? tags.list
+        { tag: tags.quote, color: "var(--cm-color-md)" },
+        { tag: tags.emphasis, fontStyle: "italic" },
+        { tag: tags.strong, fontWeight: "bolder" },
+        { tag: tags.link, textDecoration: "underline" },
+        { tag: tags.url, color: "var(--cm-color-md)", textDecoration: "none" },
+        { tag: tags.monospace, color: "var(--cm-color-md-accent)" },
+
+        // Marks: `-` for lists, `#` for headers, etc.
+        { tag: tags.processingInstruction, color: "var(--cm-color-md-accent) !important", opacity: "0.5" },
+    ],
     {
-        all: { color: `var(--cm-color-editor-text)`, filter: `contrast(0.5)` },
-        scope: pythonLanguage,
+        all: { color: "var(--cm-color-md)" },
+        scope: markdownLanguage,
     }
 )
 
-export const pluto_syntax_colors_css = HighlightStyle.define([
-    { tag: tags.comment,            color: "var(--cm-color-comment)", fontStyle: "italic" },
-    { tag: tags.variableName,       color: "var(--cm-color-css-accent)", fontWeight: 700 },
-    { tag: tags.propertyName,       color: "var(--cm-color-css-accent)", fontWeight: 700 },
-    { tag: tags.tagName,            color: "var(--cm-color-css)", fontWeight: 700 },
-    //{ tag: tags.className,          color: "var(--cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa)" },
-    //{ tag: tags.constant(tags.className), color: "var(--cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa)" },
-    { tag: tags.definitionOperator, color: "var(--cm-color-css)" },
-    { tag: tags.keyword,            color: "var(--cm-color-css)" },
-    { tag: tags.modifier,           color: "var(--cm-color-css-accent)" },
-    { tag: tags.literal,            color: "var(--cm-color-css)" },
-    // { tag: tags.unit,              color: "var(--cm-color-css-accent)" },
-    { tag: tags.punctuation,        opacity: 0.5 },
-], {
-    scope: cssLanguage,
-    all: { color: "var(--cm-color-css)" },
-})
-
-export const pluto_syntax_colors_html = HighlightStyle.define([
-    { tag: tags.comment,        color: "var(--cm-color-comment)", fontStyle: "italic" },
-    { tag: tags.content,        color: "var(--cm-color-html)", fontWeight: 400 },
-    { tag: tags.tagName,        color: "var(--cm-color-html-accent)", fontWeight: 600 },
-    { tag: tags.documentMeta,   color: "var(--cm-color-html-accent)" },
-    { tag: tags.attributeName,  color: "var(--cm-color-html-accent)", fontWeight: 600 },
-    { tag: tags.attributeValue, color: "var(--cm-color-html-accent)" },
-    { tag: tags.angleBracket,   color: "var(--cm-color-html-accent)", fontWeight: 600, opacity: 0.7 },
-], {
-    all: { color: "var(--cm-color-html)" },
-    scope: htmlLanguage,
-})
-
-// https://github.com/lezer-parser/markdown/blob/d4de2b03180ced4610bad9cef0ad3a805c43b63a/src/markdown.ts#L1890
-export const pluto_syntax_colors_markdown = HighlightStyle.define([
-    { tag: tags.comment,    color: "var(--cm-color-comment)", fontStyle: "italic" },
-    { tag: tags.content,    color: "var(--cm-color-md)" },
-    { tag: tags.heading,    color: "var(--cm-color-md)", fontWeight: 700 },
-    // TODO? tags.list
-    { tag: tags.quote,      color: "var(--cm-color-md)" },
-    { tag: tags.emphasis,   fontStyle: "italic" },
-    { tag: tags.strong,     fontWeight: "bolder" },
-    { tag: tags.link,       textDecoration: "underline" },
-    { tag: tags.url,        color: "var(--cm-color-md)", textDecoration: "none" },
-    { tag: tags.monospace,  color: "var(--cm-color-md-accent)" },
-
-    // Marks: `-` for lists, `#` for headers, etc.
-    { tag: tags.processingInstruction, color: "var(--cm-color-md-accent) !important", opacity: "0.5" },
-], {
-    all: { color: "var(--cm-color-md)" },
-    scope: markdownLanguage,
-})
-
 const getValue6 = (/** @type {EditorView} */ cm) => cm.state.doc.toString()
 const setValue6 = (/** @type {EditorView} */ cm, value) =>
     cm.dispatch({
@@ -911,11 +911,16 @@ const InputContextMenu = ({ on_delete, cell_id, run_cell, skip_as_script, runnin
             })
     }
 
-    useEventListener(window, "keydown", (/** @type {KeyboardEvent} */ e) => {
-        if (e.key === "Escape") {
-            setOpen(false)
-        }
-    })
+    useEventListener(
+        window,
+        "keydown",
+        (/** @type {KeyboardEvent} */ e) => {
+            if (e.key === "Escape") {
+                setOpen(false)
+            }
+        },
+        []
+    )
 
     return html`
         <button
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,8 @@ on: @@
             branches-ignore:
                 - release
+    env:
+        JULIA_PLUTO_IGNORE_CDN_BUNDLE_WARNING: true
     jobs:
         test:
@@ Expand Down @@