Revert "Upgrade immer to 10.1.1 (#2993)"

This reverts commit 45c0a02.

frontend/common/Binder.js

@@ -1,4 +1,4 @@
-import { produce } from "../imports/immer.js"
+import immer 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(
-            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+            immer((/** @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(
-                    produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+                    immer((/** @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(
-            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+            immer((/** @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(
-            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+            immer((/** @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(
-            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+            immer((/** @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

frontend/common/RunLocal.js

@@ -1,4 +1,4 @@
-import { produce } from "../imports/immer.js"
+import immer 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(
-            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+            immer((/** @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(
-            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+            immer((/** @type {import("../components/Editor.js").EditorState} */ state) => {
                 state.notebook.notebook_id = new_notebook_id
                 state.backend_launch_phase = BackendLaunchPhase.notebook_running
             })

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 { produce } from "../imports/immer.js"
+import immer from "../imports/immer.js"
 import _ from "../imports/lodash.js"
 
 const assert_response_ok = (/** @type {Response} */ r) => (r.ok ? r : Promise.reject(r))
@@ -39,19 +39,9 @@ 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(
-        produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+        immer((state) => {
             state.slider_server.connecting = true
         })
     )
@@ -72,7 +62,7 @@ export const slider_server_actions = ({ setStatePromise, launch_params, actions,
     bond_connections.then((x) => {
         console.log("Bond connections:", x)
         setStatePromise(
-            produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+            immer((state) => {
                 state.slider_server.connecting = false
                 state.slider_server.interactive = Object.keys(x).length > 0
             })
@@ -95,7 +85,7 @@ export const slider_server_actions = ({ setStatePromise, launch_params, actions,
 
         const update_cells_running = async (running) =>
             await setStatePromise(
-                produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+                immer((state) => {
                     running_cells.forEach((cell_id) => (state.notebook.cell_results[cell_id][starts.has(cell_id) ? "running" : "queued"] = running))
                 })
             )
@@ -138,12 +128,12 @@ export const slider_server_actions = ({ setStatePromise, launch_params, actions,
 
                 await apply_notebook_patches(
                     patches,
-                    produce(get_current_state(), (state) => {
+                    immer((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)
@@ -158,7 +148,7 @@ export const slider_server_actions = ({ setStatePromise, launch_params, actions,
         ...nothing_actions({ actions }),
         set_bond: async (symbol, value) => {
             setStatePromise(
-                produce((/** @type {import("../components/Editor.js").EditorState} */ state) => {
+                immer((state) => {
                     state.notebook.bonds[symbol] = { value: value }
                 })
             )

frontend/components/Editor.js

@@ -1,6 +1,6 @@
 import { html, Component } from "../imports/Preact.js"
 import * as preact from "../imports/Preact.js"
-import { produce, applyPatches, produceWithPatches } from "../imports/immer.js"
+import immer, { applyPatches, produceWithPatches } from "../imports/immer.js"
 import _ from "../imports/lodash.js"
 
 import { empty_notebook_state, set_disable_ui_css } from "../editor.js"
@@ -20,7 +20,7 @@ import { Scroller } from "./Scroller.js"
 import { ExportBanner } from "./ExportBanner.js"
 import { Popup } from "./Popup.js"
 
-import { slice_utf8 } from "../common/UnicodeTools.js"
+import { slice_utf8, length_utf8 } from "../common/UnicodeTools.js"
 import {
     has_ctrl_or_cmd_pressed,
     ctrl_or_cmd_name,
@@ -297,10 +297,6 @@ export const url_logo_small = document.head.querySelector("link[rel='pluto-logo-
  * extended_components: any,
  * is_recording: boolean,
  * recording_waiting_to_start: boolean,
- * slider_server: {
- * connecting: boolean,
- * interactive: boolean,
- * },
  * }}
  */
 
@@ -369,7 +365,7 @@ export class Editor extends Component {
             set_doc_query: (query) => this.setState({ desired_doc_query: query }),
             set_local_cell: (cell_id, new_val) => {
                 return this.setStatePromise(
-                    produce((/** @type {EditorState} */ state) => {
+                    immer((/** @type {EditorState} */ state) => {
                         state.cell_inputs_local[cell_id] = {
                             code: new_val,
                         }
@@ -426,7 +422,7 @@ export class Editor extends Component {
                  * See ** 1 **
                  */
                 this.setState(
-                    produce((/** @type {EditorState} */ state) => {
+                    immer((/** @type {EditorState} */ state) => {
                         // Deselect everything first, to clean things up
                         state.selected_cells = []
 
@@ -464,7 +460,7 @@ export class Editor extends Component {
                 const new_code = `${block_start}\n\t${cell.code.replace(/\n/g, "\n\t")}\n${block_end}`
 
                 await this.setStatePromise(
-                    produce((/** @type {EditorState} */ state) => {
+                    immer((/** @type {EditorState} */ state) => {
                         state.cell_inputs_local[cell_id] = {
                             code: new_code,
                         }
@@ -492,7 +488,7 @@ export class Editor extends Component {
                 })
 
                 this.setState(
-                    produce((/** @type {EditorState} */ state) => {
+                    immer((/** @type {EditorState} */ state) => {
                         for (let cell of cells_to_add) {
                             state.cell_inputs_local[cell.cell_id] = cell
                         }
@@ -621,7 +617,7 @@ export class Editor extends Component {
                     // This is a "dirty" trick, as this should actually be stored in some shared request_status => status state
                     // But for now... this is fine 😼
                     await this.setStatePromise(
-                        produce((/** @type {EditorState} */ state) => {
+                        immer((/** @type {EditorState} */ state) => {
                             for (let cell_id of cell_ids) {
                                 if (state.notebook.cell_results[cell_id] != null) {
                                     state.notebook.cell_results[cell_id].queued = this.is_process_ready()
@@ -695,7 +691,7 @@ export class Editor extends Component {
                     let _copy_of_patches,
                         reverse_of_patches = []
                     this.setState(
-                        produce((/** @type {EditorState} */ state) => {
+                        immer((/** @type {EditorState} */ state) => {
                             let new_notebook
                             try {
                                 // To test this, uncomment the lines below:
@@ -1181,7 +1177,7 @@ all patches: ${JSON.stringify(patches, null, 1)}
             window.plutoDesktop?.ipcRenderer.once("PLUTO-MOVE-NOTEBOOK", async (/** @type {string?} */ loc) => {
                 if (!!loc)
                     await this.setStatePromise(
-                        produce((/** @type {EditorState} */ state) => {
+                        immer((/** @type {EditorState} */ state) => {
                             state.notebook.in_temp_dir = false
                             state.notebook.path = loc
                         })
@@ -1651,7 +1647,7 @@ The notebook file saves every time you run a cell.`
                         apply_notebook_patches=${this.apply_notebook_patches}
                         reset_notebook_state=${() =>
                             this.setStatePromise(
-                                produce((/** @type {EditorState} */ state) => {
+                                immer((/** @type {EditorState} */ state) => {
                                     state.notebook = this.props.initial_notebook_state
                                 })
                             )}

frontend/components/Editor/LaunchBackendButton.js

@@ -1,15 +1,15 @@
-import { html, useMemo } from "../../imports/Preact.js"
+import { html, useMemo, useEffect } from "../../imports/Preact.js"
 import * as preact from "../../imports/Preact.js"
 import { RunLocalButton, BinderButton } from "../EditOrRunButton.js"
 import { start_local } from "../../common/RunLocal.js"
 import { BackendLaunchPhase, start_binder } from "../../common/Binder.js"
-import { produce } from "../../imports/immer.js"
+import immer, { applyPatches, produceWithPatches } from "../../imports/immer.js"
 
 export const EditorLaunchBackendButton = ({ editor, launch_params, status }) => {
     try {
         const EnvRun = useMemo(
             // @ts-ignore
-            () => window?.pluto_injected_environment?.environment?.({ client: editor.client, editor, imports: { immer: produce, preact } })?.custom_run_or_edit,
+            () => window?.pluto_injected_environment?.environment?.({ client: editor.client, editor, imports: { immer, preact } })?.custom_run_or_edit,
             [editor.client, editor]
         )
         // @ts-ignore

frontend/components/FrontmatterInput.js

@@ -5,7 +5,7 @@ import _ from "../imports/lodash.js"
 import "https://cdn.jsdelivr.net/gh/fonsp/[email protected]/lib/rebel-tag-input.mjs"
 
 //@ts-ignore
-import { produce } from "../imports/immer.js"
+import immer from "../imports/immer.js"
 import { useDialog } from "../common/useDialog.js"
 import { FeaturedCard } from "./welcome/FeaturedCard.js"
 import { useEventListener } from "../common/useEventListener.js"
@@ -26,7 +26,7 @@ export const FrontMatterInput = ({ filename, remote_frontmatter, set_remote_fron
 
     const fm_setter = (key) => (value) =>
         set_frontmatter(
-            produce((fm) => {
+            immer((fm) => {
                 _.set(fm, key, value)
             })
         )
@@ -87,7 +87,7 @@ export const FrontMatterInput = ({ filename, remote_frontmatter, set_remote_fron
                             onClick=${() => {
                                 //  TODO
                                 set_frontmatter(
-                                    produce((fm) => {
+                                    immer((fm) => {
                                         _.unset(fm, path)
                                     })
                                 )
@@ -103,7 +103,7 @@ export const FrontMatterInput = ({ filename, remote_frontmatter, set_remote_fron
                     const fieldname = prompt("Field name:")
                     if (fieldname) {
                         set_frontmatter(
-                            produce((fm) => {
+                            immer((fm) => {
                                 _.set(fm, `${base_path}${fieldname}`, null)
                             })
                         )

frontend/components/LiveDocsTab.js

@@ -1,5 +1,5 @@
 import { html, useState, useRef, useLayoutEffect, useEffect, useMemo, useContext } from "../imports/Preact.js"
-import { produce } from "../imports/immer.js"
+import immer from "../imports/immer.js"
 import observablehq from "../common/SetupCellEnvironment.js"
 
 import { RawHTMLContainer, highlight } from "./CellOutput.js"
@@ -26,7 +26,7 @@ export let LiveDocsTab = ({ focus_on_open, desired_doc_query, on_update_doc_quer
         body: `<p>Welcome to the <b>Live docs</b>! Keep this little window open while you work on the notebook, and you will get documentation of everything you type!</p><p>You can also type a query above.</p><hr><p><em>Still stuck? Here are <a target="_blank" href="https://julialang.org/about/help/">some tips</a>.</em></p>`,
         loading: false,
     })
-    let update_state = (mutation) => set_state(produce((state) => mutation(state)))
+    let update_state = (mutation) => set_state(immer((state) => mutation(state)))
 
     useEffect(() => {
         if (state.loading) {

frontend/components/RecordingUI.js

@@ -2,7 +2,7 @@ import _ from "../imports/lodash.js"
 import { createSilentAudio, create_recorder } from "../common/AudioRecording.js"
 import { html, useEffect, useState, useRef, useCallback, useLayoutEffect, useMemo } from "../imports/Preact.js"
 import { AudioPlayer } from "./AudioPlayer.js"
-import { produce } from "../imports/immer.js"
+import immer from "../imports/immer.js"
 import { base64_arraybuffer, blob_url_to_data_url } from "../common/PlutoHash.js"
 import { pack, unpack } from "../common/MsgPack.js"