Pass typescript checks

frontend/components/CellInput/pluto_collab.js

@@ -23,7 +23,7 @@ import { ReactWidget } from "./ReactWidget.js"
 
 /**
  * @param {Array<Delta>} ops
- * @returns {Array<ChangeSet>}
+ * @returns {Array<{ from: number, to?: number, insert?: string }>}
  **/
 const delta_to_specs = (ops) => {
  const specs = []
@@ -182,7 +182,7 @@ const CaretField = (client_id, cell_id) =>
  return new_value
  },
  provide: (f) =>
- EditorView.decorations.compute([f, UsersFacet], (/** @type {import("../Editor.js").EditorState} */ state) => {
+ EditorView.decorations.compute([f, UsersFacet], (/** @type {import("../../imports/CodemirrorPlutoSetup.js").EditorState} */ state) => {
  const value = state.field(f)
  const decorations = []
 
@@ -239,18 +239,20 @@ export const pluto_collab = (startVersion, { pluto_actions, cell_id, client_id }
  pluto_actions.register_collab_plugin(cell_id, this)
  }
 
- update(/** @type ViewUpdate */ update) {
+ update(/** @type import("../../imports/CodemirrorPlutoSetup.d.ts").ViewUpdate */ update) {
  if (update.docChanged) // NOTE: remove this to have cursor sync
  this.push()
  }
 
  makeUpdate() {
+ /** @type any */
  const updates = sendableUpdates(this.view.state)
  const version = getSyncedVersion(this.view.state)
  return makeUpdates(cell_id, version, updates)
  }
 
  async push() {
+ /** @type any */
  const updates = sendableUpdates(this.view.state)
  if (this.pushing || !updates.length) {
  return
@@ -318,7 +320,8 @@ export const pluto_collab = (startVersion, { pluto_actions, cell_id, client_id }
  // })
 
  return [
- collab({ clientID: client_id, startVersion,
+ collab({
+ clientID: client_id, startVersion,
  // sharedEffects: (tr) => tr.effects.filter((effect) => effect.is(CaretEffect) || effect.is(RunEffect)),
  }),
  plugin,

frontend/components/Editor.js

@@ -571,7 +571,7 @@ export class Editor extends Component {
  notebook.cell_inputs[id] = {
  cell_id: id,
  code,
- last_run_version: 0,
+ last_run_code: "",
  start_version: 0,
  cm_updates: [],
  code_folded: false,
@@ -910,7 +910,9 @@ patch: ${JSON.stringify(
  this.client.send("complete", { query: "sq" }, { notebook_id: this.state.notebook.notebook_id })
  this.client.send("complete", { query: "\\sq" }, { notebook_id: this.state.notebook.notebook_id })
 
- const users = this.actions.get_notebook()?.users
+ /** @type import("./Editor.js").NotebookData */ // @ts-ignore
+ const nb = this.actions.get_notebook() // @ts-ignore
+ const users = nb?.users
  if (users) {
  const names = ["Mars", "Earth", "Moon", "Sun"]
  const colors = ["#ffc09f", "#a0ced9", "#adf7b6", "#fcf5c7"]

frontend/components/MultiplayerPanel.js

@@ -1,5 +1,5 @@
 import _ from "../imports/lodash.js"
-import { html, useEffect, useRef, useContext, useState, useLayoutEffect, useCallback } from "../imports/Preact.js"
+import { html, useEffect, useRef, useContext, useState, useMemo, useLayoutEffect, useCallback } from "../imports/Preact.js"
 import { PerfectCursor } from "../imports/PerfectCursors.js"
 import { PlutoActionsContext } from "../common/PlutoContext.js"
 
@@ -68,8 +68,8 @@ const update_mouse_data = (mouseX, mouseY) => {
  * @returns {Function}
  **/
 const usePerfectCursor = (cb, point) => {
- /** @type {Array<any>} */
- const [pc] = useState(() => new PerfectCursor(cb))
+ /** @type {PerfectCursor} */
+ const pc = useMemo(() => new PerfectCursor(cb), [])
 
  useLayoutEffect(() => {
  if (point) pc.addPoint(point)

frontend/imports/PerfectCursors.d.ts

@@ -0,0 +1,33 @@
+export declare class Spline {
+ points: number[][];
+ lengths: number[];
+ totalLength: number;
+ private prev?;
+ constructor(points?: number[][]);
+ addPoint: (point: number[]) => void;
+ clear: () => void;
+ getSplinePoint: (rt: number) => number[];
+}
+declare type AnimationState = 'stopped' | 'idle' | 'animating';
+declare type Animation = {
+ from: number[];
+ to: number[];
+ start: number;
+ duration: number;
+};
+export declare class PerfectCursor {
+ state: AnimationState;
+ queue: Animation[];
+ timestamp: number;
+ lastRequestId: number;
+ timeoutId: any;
+ prevPoint?: number[];
+ spline: Spline;
+ cb: (point: number[]) => void;
+ constructor(cb: (point: number[]) => void);
+ addPoint: (point: number[]) => void;
+ animateNext: (animation: Animation) => void;
+ static MAX_INTERVAL: number;
+ dispose: () => void;
+}
+export {};

frontend/imports/PerfectCursors.js

@@ -1,2 +1,5 @@
-import { PerfectCursor } from "https://esm.sh/[email protected]/dist/esm/index.js"
+import {
+ PerfectCursor,
+ // @ts-ignore
+} from "https://esm.sh/[email protected]/dist/esm/index.js"
 export { PerfectCursor }