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"