Merge branch 'main' of https://github.com/microsoft/jacdac-docs

.eslintrc.json

@@ -22,5 +22,6 @@
         "@typescript-eslint/no-empty-function": "off",
         "react/display-name": "off",
         "@typescript-eslint/explicit-module-boundary-types": "off"
-    }
+    },
+    "ignorePatterns": ["jacscript/samples/*.js"]
 }

src/components/blockly/BlockMinimap.tsx

@@ -11,7 +11,7 @@ import {
     ComponentManager,
 } from "blockly"
 import React, { useCallback, useEffect, useRef, useState } from "react"
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
 import { arrayConcatMany } from "../../../jacdac-ts/src/jdom/utils"
 import { svgPointerPoint } from "../widgets/svgutils"
 import useWorkspaceEvent from "./useWorkspaceEvent"
@@ -221,7 +221,8 @@ class MinimapPlugin implements IPositionable {
             class: "minimap",
         })
         utils.dom.insertAfter(this.svgGroup_, this.workspace_.getBubbleCanvas())
-        ReactDOM.render(this.render(), this.svgGroup_)
+        const root = createRoot(this.svgGroup_)
+        root.render(this.render())
     }
 
     private render() {

src/components/blockly/dsl/servicesbase.ts

@@ -18,6 +18,7 @@ import {
     SRV_INFRASTRUCTURE,
     SRV_JACSCRIPT_CLOUD,
     SRV_JACSCRIPT_CONDITION,
+    SRV_JACSCRIPT_MANAGER,
     SRV_LOGGER,
     SRV_PROTO_TEST,
     SRV_PROXY,
@@ -127,7 +128,8 @@ const ignoredServices = [
     SRV_PROXY,
     SRV_UNIQUE_BRAIN,
     SRV_JACSCRIPT_CLOUD,
-    SRV_JACSCRIPT_CONDITION
+    SRV_JACSCRIPT_CONDITION,
+    SRV_JACSCRIPT_MANAGER,
 ]
 
 const customMessages = [

src/components/blockly/dsl/workers/proxy.ts

@@ -22,13 +22,26 @@ export interface WorkerResponse {
 }
 
 export class WorkerProxy extends JDEventSource {
-    readonly pendings: SMap<{
-        resolve: (res: any) => void
-        reject: (err: any) => void
-    }> = {}
+    readonly pendings: Record<
+        string,
+        {
+            resolve: (res: any) => void
+            reject: (err: any) => void
+        }
+    > = {}
     constructor(readonly worker: Worker, readonly workerid: VMType) {
         super()
-        this.worker.addEventListener("message", this.handleMessage.bind(this))
+        this.handleMessage = this.handleMessage.bind(this)
+        this.worker.addEventListener("message", this.handleMessage)
+    }
+
+    terminate() {
+        delete _workers[this.workerid]
+        this.worker.removeEventListener("message", this.handleMessage)
+        this.worker.terminate()
+        Object.values(this.pendings).forEach(({ reject }) =>
+            reject(new Error("worker terminated"))
+        )
     }
 
     private handleMessage(event: MessageEvent) {

src/components/blockly/fields/ReactField.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from "react"
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
 import Blockly from "blockly"
 import JacdacProvider from "../../../jacdac/Provider"
 import { ReactNode } from "react"
@@ -39,6 +39,8 @@ export default class ReactField<T> extends ReactFieldBase<T> {
     SERIALIZABLE = true
     public readonly events = new JDEventSource()
     protected div_: Element
+    // React root
+    private root_: any
     protected view: SVGElement
     protected darkMode: "light" | "dark" = "dark"
 
@@ -117,7 +119,8 @@ export default class ReactField<T> extends ReactFieldBase<T> {
 
     showEditor_() {
         this.div_ = Blockly.DropDownDiv.getContentDiv()
-        ReactDOM.render(this.render(), this.div_)
+        this.root_ = createRoot(this.div_)
+        this.root_.render(this.render())
         const border = this.sourceBlock_.getColourTertiary()
         Blockly.DropDownDiv.setColour(this.sourceBlock_.getColour(), border)
 
@@ -139,7 +142,8 @@ export default class ReactField<T> extends ReactFieldBase<T> {
         // this blows on hot reloads
         try {
             this.events.emit(UNMOUNT)
-            ReactDOM.unmountComponentAtNode(this.div_)
+            this.root_?.unmount()
+            this.root_ = undefined
         } catch (e) {
             console.error(e)
         }
@@ -181,6 +185,8 @@ export default class ReactField<T> extends ReactFieldBase<T> {
 
     dispose() {
         this.view = undefined
+        this.root_?.unmount()
+        this.root_ = undefined
         super.dispose()
     }
 }

src/components/blockly/fields/ReactInlineField.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
 import ReactField from "./ReactField"
 import { child } from "../../widgets/svg"
 import DarkModeProvider from "../../ui/DarkModeProvider"
@@ -13,6 +13,8 @@ import { SnackbarProvider } from "notistack"
 export default class ReactInlineField<T = unknown> extends ReactField<T> {
     protected container: HTMLDivElement
     protected resizeObserver: ResizeObserver
+    // React root
+    private root_: any
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(options?: any) {
@@ -58,14 +60,16 @@ export default class ReactInlineField<T = unknown> extends ReactField<T> {
         )
         this.resizeObserver.observe(this.container)
 
-        ReactDOM.render(this.renderBlock(), this.container)
+        this.root_ = createRoot(this.container)
+        this.root_.render(this.renderBlock())
         return fo
     }
 
     dispose() {
         if (this.container) {
-            ReactDOM.unmountComponentAtNode(this.container)
+            this.root_?.unmount()
             this.container = undefined
+            this.root_ = undefined
         }
         if (this.resizeObserver) {
             this.resizeObserver.disconnect()

src/components/dashboard/DashboardJascriptManager.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { ChangeEvent } from "react"
 import { Alert, Grid } from "@mui/material"
 // tslint:disable-next-line: no-submodule-imports match-default-export-name
 import PlayArrowIcon from "@mui/icons-material/PlayArrow"
@@ -45,6 +45,14 @@ function JacscriptManagerToolbar(
 
     const handleRun = () => runningRegister?.sendSetBoolAsync(true, true)
     const handleStop = () => runningRegister?.sendSetBoolAsync(false, true)
+    const handleAutoStartChange = (
+        event: ChangeEvent<HTMLInputElement>,
+        checked: boolean
+    ) => autoStartRegister?.sendSetBoolAsync(checked, true)
+    const handleLoggingChange = (
+        event: ChangeEvent<HTMLInputElement>,
+        checked: boolean
+    ) => loggingRegister?.sendSetBoolAsync(checked, true)
 
     return (
         <Grid container spacing={1}>
@@ -61,13 +69,15 @@ function JacscriptManagerToolbar(
                     label="auto start"
                     checked={autoStart}
                     disabled={autoStart === undefined}
+                    onChange={handleAutoStartChange}
                 />
             </Grid>
             <Grid item>
                 <SwitchWithLabel
                     label="logging"
                     checked={logging}
                     disabled={logging === undefined}
+                    onChange={handleLoggingChange}
                 />
             </Grid>
             {noProgram && (

src/components/hooks/useLocalStorage.ts

@@ -2,7 +2,7 @@ import useStorage from "./useStorage"
 
 const storage = (() => {
     try {
-        typeof window !== "undefined" && window.localStorage
+        return typeof window !== "undefined" && window.localStorage
     } catch {
         return undefined
     }

src/components/hooks/useSessionStorage.ts

@@ -2,7 +2,7 @@ import useStorage from "./useStorage"
 
 const storage = (() => {
     try {
-        typeof window !== "undefined" && window.sessionStorage
+        return typeof window !== "undefined" && window.sessionStorage
     } catch {
         return undefined
     }

src/components/jacscript/JacscriptEditor.tsx

@@ -43,7 +43,6 @@ import {
     useRegisterUnpackedValue,
 } from "../../jacdac/useRegisterValue"
 import DeviceAvatar from "../devices/DeviceAvatar"
-import useBus from "../../jacdac/useBus"
 import useServices from "../hooks/useServices"
 import { jacscriptBridge } from "../blockly/dsl/workers/vm.proxy"
 import { OutPipe } from "../../../jacdac-ts/src/jdom/pipes"
@@ -96,7 +95,6 @@ function JacscriptExecutor(props: { service: JDService }) {
 function JacscriptEditorWithContext() {
     const { dsls, workspaceJSON, roleManager, setWarnings } =
         useContext(BlockContext)
-    const bus = useBus()
     const [program, setProgram] = useState<VMProgram>()
     const [jscProgram, setJscProgram] = useState<JacscriptProgram>()
     const [jscCompiled, setJscCompiled] = useState<JacscriptCompileResponse>()
@@ -110,7 +108,7 @@ function JacscriptEditorWithContext() {
 
     useEffect(() => {
         // start the bridge (and worker)
-        const _bridge = jacscriptBridge()
+        jacscriptBridge()
         // currently now way to stop it
         return () => {}
     }, [])

src/workers/vm/tsconfig.json

@@ -5,7 +5,8 @@
         "types": [],
         "module": "ESNext",
         "moduleResolution": "node",
-        "declaration": true
+        "declaration": true,
+        "allowSyntheticDefaultImports": true
     },
     "exclude": ["node_modules"]
 }