@wandelbots/wandelbots-js-react-components 1.11.1 → 1.11.2

package/src/components/robots/SupportedRobot.tsx

@@ -31,6 +31,7 @@ import { DHRobot } from "./DHRobot"
 import * as THREE from "three"
 import { ErrorBoundary } from "react-error-boundary"
 import ConsoleFilter from "../ConsoleFilter"
+import { externalizeComponent } from "../../externalizeComponent"
 
 export type DHRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
@@ -54,201 +55,193 @@ export function defaultGetModel(modelFromController: string): string {
   return `https://cdn.jsdelivr.net/gh/wandelbotsgmbh/wandelbots-js-react-components/public/models/${modelFromController}.glb`
 }
 
-export function SupportedRobot({
-  rapidlyChangingMotionState,
-  modelFromController,
-  dhParameters,
-  getModel = defaultGetModel,
-  isGhost = false,
-  ...props
-}: SupportedRobotProps) {
-  let Robot
+export const SupportedRobot = externalizeComponent(
+  ({
+    rapidlyChangingMotionState,
+    modelFromController,
+    dhParameters,
+    getModel = defaultGetModel,
+    isGhost = false,
+    ...props
+  }: SupportedRobotProps) => {
+    let Robot
 
-  const robotRef = useRef<THREE.Group>(new THREE.Group())
+    const robotRef = useRef<THREE.Group>(new THREE.Group())
 
-  const setRobotRef = useCallback(
-    (instance: THREE.Group | null) => {
-      if (instance !== null) {
-        robotRef.current = instance
-        console.log("robotRef.current", robotRef.current)
-        if (
-          isGhost &&
-          robotRef.current &&
-          robotRef.current.children.length > 0
-        ) {
-          addGhosts()
+    const setRobotRef = useCallback(
+      (instance: THREE.Group | null) => {
+        if (instance !== null) {
+          robotRef.current = instance
+          console.log("robotRef.current", robotRef.current)
+          if (
+            isGhost &&
+            robotRef.current &&
+            robotRef.current.children.length > 0
+          ) {
+            addGhosts()
+          }
         }
-      }
-    },
-    [isGhost],
-  )
+      },
+      [isGhost],
+    )
 
-  const addGhosts = () => {
-    if (robotRef.current && !robotRef.current.userData.ghostsCreated) {
-      robotRef.current.traverse((obj) => {
-        if (obj instanceof THREE.Mesh && !obj.userData.isGhost) {
-          if (obj.material instanceof THREE.Material) {
-            obj.material.colorWrite = false
-          }
+    const addGhosts = () => {
+      if (robotRef.current && !robotRef.current.userData.ghostsCreated) {
+        robotRef.current.traverse((obj) => {
+          if (obj instanceof THREE.Mesh && !obj.userData.isGhost) {
+            if (obj.material instanceof THREE.Material) {
+              obj.material.colorWrite = false
+            }
 
-          // Create a clone of the mesh
-          const depth = obj.clone()
-          const ghost = obj.clone()
+            // Create a clone of the mesh
+            const depth = obj.clone()
+            const ghost = obj.clone()
 
-          depth.material = new THREE.MeshStandardMaterial({
-            depthTest: true,
-            depthWrite: true,
-            colorWrite: false,
-            polygonOffset: true,
-            polygonOffsetFactor: 1,
-          })
-          depth.userData.isGhost = true
+            depth.material = new THREE.MeshStandardMaterial({
+              depthTest: true,
+              depthWrite: true,
+              colorWrite: false,
+              polygonOffset: true,
+              polygonOffsetFactor: 1,
+            })
+            depth.userData.isGhost = true
 
-          // Set the material for the ghost mesh
-          ghost.material = new THREE.MeshStandardMaterial({
-            color: "#D91433",
-            opacity: 0.3,
-            depthTest: true,
-            depthWrite: false,
-            transparent: true,
-            polygonOffset: true,
-            polygonOffsetFactor: -1,
-          })
-          ghost.userData.isGhost = true
+            // Set the material for the ghost mesh
+            ghost.material = new THREE.MeshStandardMaterial({
+              color: "#D91433",
+              opacity: 0.3,
+              depthTest: true,
+              depthWrite: false,
+              transparent: true,
+              polygonOffset: true,
+              polygonOffsetFactor: -1,
+            })
+            ghost.userData.isGhost = true
 
-          if (obj.parent) {
-            obj.parent.add(depth)
-            obj.parent.add(ghost)
+            if (obj.parent) {
+              obj.parent.add(depth)
+              obj.parent.add(ghost)
+            }
           }
-        }
-      })
-      robotRef.current.userData.ghostsCreated = true
+        })
+        robotRef.current.userData.ghostsCreated = true
+      }
     }
-  }
 
-  const removeGhosts = () => {
-    if (robotRef.current) {
-      const objectsToRemove: THREE.Object3D[] = []
+    const removeGhosts = () => {
+      if (robotRef.current) {
+        const objectsToRemove: THREE.Object3D[] = []
 
-      robotRef.current.traverse((obj) => {
-        if (obj instanceof THREE.Mesh) {
-          if (obj.material instanceof THREE.Material) {
-            obj.material.colorWrite = true
+        robotRef.current.traverse((obj) => {
+          if (obj instanceof THREE.Mesh) {
+            if (obj.material instanceof THREE.Material) {
+              obj.material.colorWrite = true
+            }
           }
-        }
 
-        if (
-          obj instanceof THREE.Mesh &&
-          obj.userData !== undefined &&
-          obj.userData &&
-          obj.userData.isGhost !== undefined &&
-          obj.userData.isGhost
-        ) {
-          objectsToRemove.push(obj)
-        }
-      })
+          if (
+            obj instanceof THREE.Mesh &&
+            obj.userData !== undefined &&
+            obj.userData &&
+            obj.userData.isGhost !== undefined &&
+            obj.userData.isGhost
+          ) {
+            objectsToRemove.push(obj)
+          }
+        })
 
-      objectsToRemove.forEach((obj) => {
-        if (obj.parent) {
-          obj.parent.remove(obj)
-        }
-      })
+        objectsToRemove.forEach((obj) => {
+          if (obj.parent) {
+            obj.parent.remove(obj)
+          }
+        })
 
-      robotRef.current.userData.ghostsCreated = false
+        robotRef.current.userData.ghostsCreated = false
+      }
     }
-  }
 
-  useEffect(() => {
-    if (isGhost) {
-      addGhosts()
-    } else {
-      removeGhosts()
-    }
-  }, [isGhost])
+    useEffect(() => {
+      if (isGhost) {
+        addGhosts()
+      } else {
+        removeGhosts()
+      }
+    }, [isGhost])
 
-  switch (modelFromController) {
-    case "UniversalRobots_UR3":
-      Robot = UniversalRobots_UR3
-      break
-    case "UniversalRobots_UR3e":
-      Robot = UniversalRobots_UR3e
-      break
-    case "UniversalRobots_UR5":
-      Robot = UniversalRobots_UR5
-      break
-    case "UniversalRobots_UR5e":
-      Robot = UniversalRobots_UR5e
-      break
-    case "UniversalRobots_UR10":
-      Robot = UniversalRobots_UR10
-      break
-    case "UniversalRobots_UR10e":
-      Robot = UniversalRobots_UR10e
-      break
-    case "Yaskawa_AR900":
-      Robot = Yaskawa_AR900
-      break
-    case "Yaskawa_GP7":
-      Robot = Yaskawa_AR900
-      break
-    case "Yaskawa_AR1440":
-      Robot = Yaskawa_AR1440
-      break
-    case "Yaskawa_AR1730":
-      Robot = Yaskawa_AR1730
-      break
-    case "Yaskawa_AR2010":
-      Robot = Yaskawa_AR2010
-      break
-    case "Yaskawa_AR3120":
-      Robot = Yaskawa_AR3120
-      break
-    case "FANUC_CRX10iA":
-      Robot = FANUC_CRX10iA
-      break
-    case "FANUC_CRX20iAL":
-      Robot = FANUC_CRX20iAL
-      break
-    case "FANUC_CRX25iA":
-      Robot = FANUC_CRX25iA
-      break
-    case "FANUC_CRX25iAL":
-      Robot = FANUC_CRX25iAL
-      break
-    case "FANUC_ARC_Mate_120iD":
-      Robot = FANUC_ARC_Mate_120iD
-      break
-    case "FANUC_ARC_Mate_120iD35":
-      Robot = FANUC_ARC_Mate_120iD
-      break
-    case "FANUC_ARC_Mate_100iD":
-      Robot = FANUC_ARC_Mate_100iD
-      break
-    case "KUKA_KR210_R2700":
-      Robot = KUKA_KR210_R2700
-      break
-    case "KUKA_KR270_R2700":
-      Robot = KUKA_KR270_R2700
-      break
-    case "ABB_1200_07_7":
-      Robot = ABB_1200_07_7
-      break
-    default:
-      console.warn(`Unknown robot type: ${modelFromController}`)
-      Robot = DHRobot
-  }
+    switch (modelFromController) {
+      case "UniversalRobots_UR3":
+        Robot = UniversalRobots_UR3
+        break
+      case "UniversalRobots_UR3e":
+        Robot = UniversalRobots_UR3e
+        break
+      case "UniversalRobots_UR5":
+        Robot = UniversalRobots_UR5
+        break
+      case "UniversalRobots_UR5e":
+        Robot = UniversalRobots_UR5e
+        break
+      case "UniversalRobots_UR10":
+        Robot = UniversalRobots_UR10
+        break
+      case "UniversalRobots_UR10e":
+        Robot = UniversalRobots_UR10e
+        break
+      case "Yaskawa_AR900":
+        Robot = Yaskawa_AR900
+        break
+      case "Yaskawa_GP7":
+        Robot = Yaskawa_AR900
+        break
+      case "Yaskawa_AR1440":
+        Robot = Yaskawa_AR1440
+        break
+      case "Yaskawa_AR1730":
+        Robot = Yaskawa_AR1730
+        break
+      case "Yaskawa_AR2010":
+        Robot = Yaskawa_AR2010
+        break
+      case "Yaskawa_AR3120":
+        Robot = Yaskawa_AR3120
+        break
+      case "FANUC_CRX10iA":
+        Robot = FANUC_CRX10iA
+        break
+      case "FANUC_CRX20iAL":
+        Robot = FANUC_CRX20iAL
+        break
+      case "FANUC_CRX25iA":
+        Robot = FANUC_CRX25iA
+        break
+      case "FANUC_CRX25iAL":
+        Robot = FANUC_CRX25iAL
+        break
+      case "FANUC_ARC_Mate_120iD":
+        Robot = FANUC_ARC_Mate_120iD
+        break
+      case "FANUC_ARC_Mate_120iD35":
+        Robot = FANUC_ARC_Mate_120iD
+        break
+      case "FANUC_ARC_Mate_100iD":
+        Robot = FANUC_ARC_Mate_100iD
+        break
+      case "KUKA_KR210_R2700":
+        Robot = KUKA_KR210_R2700
+        break
+      case "KUKA_KR270_R2700":
+        Robot = KUKA_KR270_R2700
+        break
+      case "ABB_1200_07_7":
+        Robot = ABB_1200_07_7
+        break
+      default:
+        console.warn(`Unknown robot type: ${modelFromController}`)
+        Robot = DHRobot
+    }
 
-  return (
-    <ErrorBoundary
-      fallback={
-        <DHRobot
-          rapidlyChangingMotionState={rapidlyChangingMotionState}
-          dhParameters={dhParameters}
-          {...props}
-        />
-      }
-    >
-      <Suspense
+    return (
+      <ErrorBoundary
         fallback={
           <DHRobot
             rapidlyChangingMotionState={rapidlyChangingMotionState}
@@ -257,16 +250,26 @@ export function SupportedRobot({
           />
         }
       >
-        <group ref={setRobotRef}>
-          <Robot
-            rapidlyChangingMotionState={rapidlyChangingMotionState}
-            modelURL={getModel(modelFromController)}
-            dhParameters={dhParameters}
-            {...props}
-          />
-        </group>
-      </Suspense>
-      <ConsoleFilter />
-    </ErrorBoundary>
-  )
-}
+        <Suspense
+          fallback={
+            <DHRobot
+              rapidlyChangingMotionState={rapidlyChangingMotionState}
+              dhParameters={dhParameters}
+              {...props}
+            />
+          }
+        >
+          <group ref={setRobotRef}>
+            <Robot
+              rapidlyChangingMotionState={rapidlyChangingMotionState}
+              modelURL={getModel(modelFromController)}
+              dhParameters={dhParameters}
+              {...props}
+            />
+          </group>
+        </Suspense>
+        <ConsoleFilter />
+      </ErrorBoundary>
+    )
+  },
+)

package/src/components/wandelscript-editor/WandelscriptEditor.tsx

@@ -1,17 +1,13 @@
 import Editor, { useMonaco, type Monaco } from "@monaco-editor/react"
 import { useEffect, useRef, useState } from "react"
-import type {
-  BundledLanguage,
-  HighlighterGeneric} from "shiki";
-import {
-  createHighlighter,
-  type BundledTheme,
-} from "shiki"
+import type { BundledLanguage, HighlighterGeneric } from "shiki"
+import { createHighlighter, type BundledTheme } from "shiki"
 import { shikiToMonaco } from "@shikijs/monaco"
 
 import wandelscriptTextmateGrammar from "./wandelscript.tmLanguage"
 import { useTheme } from "@mui/material"
 import type { editor } from "monaco-editor"
+import { externalizeComponent } from "../../externalizeComponent"
 
 type WandelscriptEditorProps = {
   /** The current Wandelscript content of the code editor (controlled component) */
@@ -28,102 +24,104 @@ type WandelscriptEditorProps = {
 }
 
 /** A Monaco (VSCode-style) embedded code editor with Wandelscript syntax highlighting */
-export const WandelscriptEditor = (props: WandelscriptEditorProps) => {
-  const monaco = useMonaco()
-  const theme = useTheme()
-  const shikiHighlighterRef = useRef<HighlighterGeneric<
-    BundledLanguage,
-    BundledTheme
-  > | null>(null)
-
-  const [activeShikiTheme, setActiveShikiTheme] =
-    useState<BundledTheme>("dark-plus")
-
-  const targetShikiTheme =
-    theme.palette.mode === "dark" ? "dark-plus" : "light-plus"
-
-  async function setupEditor(monaco: Monaco) {
-    // Register and configure the Wandelscript language
-    monaco.languages.register({ id: "wandelscript" })
-
-    monaco.languages.setLanguageConfiguration("wandelscript", {
-      comments: {
-        lineComment: "#",
-      },
-      brackets: [
-        ["(", ")"],
-        ["[", "]"],
-      ],
-      autoClosingPairs: [
-        { open: "[", close: "]" },
-        { open: "(", close: ")" },
-      ],
-      surroundingPairs: [
-        { open: "[", close: "]" },
-        { open: "(", close: ")" },
-      ],
-    })
-
-    // Monaco doesn't support TextMate grammar config directly, so we
-    // use Shiki as an intermediary
-
-    if (!shikiHighlighterRef.current) {
-      shikiHighlighterRef.current = await createHighlighter({
-        // Our textmate grammar doesn't quite conform to the expected type
-        // here; I'm not sure what the missing properties mean exactly
-        langs: [wandelscriptTextmateGrammar as any],
-        themes: ["dark-plus", "light-plus"],
+export const WandelscriptEditor = externalizeComponent(
+  (props: WandelscriptEditorProps) => {
+    const monaco = useMonaco()
+    const theme = useTheme()
+    const shikiHighlighterRef = useRef<HighlighterGeneric<
+      BundledLanguage,
+      BundledTheme
+    > | null>(null)
+
+    const [activeShikiTheme, setActiveShikiTheme] =
+      useState<BundledTheme>("dark-plus")
+
+    const targetShikiTheme =
+      theme.palette.mode === "dark" ? "dark-plus" : "light-plus"
+
+    async function setupEditor(monaco: Monaco) {
+      // Register and configure the Wandelscript language
+      monaco.languages.register({ id: "wandelscript" })
+
+      monaco.languages.setLanguageConfiguration("wandelscript", {
+        comments: {
+          lineComment: "#",
+        },
+        brackets: [
+          ["(", ")"],
+          ["[", "]"],
+        ],
+        autoClosingPairs: [
+          { open: "[", close: "]" },
+          { open: "(", close: ")" },
+        ],
+        surroundingPairs: [
+          { open: "[", close: "]" },
+          { open: "(", close: ")" },
+        ],
+      })
+
+      // Monaco doesn't support TextMate grammar config directly, so we
+      // use Shiki as an intermediary
+
+      if (!shikiHighlighterRef.current) {
+        shikiHighlighterRef.current = await createHighlighter({
+          // Our textmate grammar doesn't quite conform to the expected type
+          // here; I'm not sure what the missing properties mean exactly
+          langs: [wandelscriptTextmateGrammar as any],
+          themes: ["dark-plus", "light-plus"],
+        })
+      }
+
+      shikiToMonaco(shikiHighlighterRef.current, monaco)
+
+      // Override the generated shiki theme to use shiki syntax highlighting
+      // but vscode colors
+      monaco.editor.defineTheme(targetShikiTheme, {
+        base: theme.palette.mode === "dark" ? "vs-dark" : "vs",
+        inherit: true,
+        rules: [],
+        colors:
+          theme.palette.mode === "dark"
+            ? {
+                "editor.background": "#262F42",
+                "editorLineNumber.foreground": "#797979",
+                "editorLineNumber.activeForeground": "#e9e9e9",
+                "editor.lineHighlightBorder": "#494949",
+              }
+            : {},
       })
-    }
 
-    shikiToMonaco(shikiHighlighterRef.current, monaco)
-
-    // Override the generated shiki theme to use shiki syntax highlighting
-    // but vscode colors
-    monaco.editor.defineTheme(targetShikiTheme, {
-      base: theme.palette.mode === "dark" ? "vs-dark" : "vs",
-      inherit: true,
-      rules: [],
-      colors:
-        theme.palette.mode === "dark"
-          ? {
-              "editor.background": "#262F42",
-              "editorLineNumber.foreground": "#797979",
-              "editorLineNumber.activeForeground": "#e9e9e9",
-              "editor.lineHighlightBorder": "#494949",
-            }
-          : {},
-    })
-
-    if (props.monacoSetup) {
-      props.monacoSetup(monaco)
+      if (props.monacoSetup) {
+        props.monacoSetup(monaco)
+      }
+
+      setActiveShikiTheme(targetShikiTheme)
     }
 
-    setActiveShikiTheme(targetShikiTheme)
-  }
+    useEffect(() => {
+      if (monaco) {
+        setupEditor(monaco)
+      }
+    }, [monaco, targetShikiTheme])
 
-  useEffect(() => {
-    if (monaco) {
-      setupEditor(monaco)
+    if (!monaco) {
+      return null
     }
-  }, [monaco, targetShikiTheme])
-
-  if (!monaco) {
-    return null
-  }
-
-  return (
-    <Editor
-      value={props.code}
-      onChange={props.onChange}
-      defaultLanguage="wandelscript"
-      theme={activeShikiTheme}
-      options={{
-        minimap: { enabled: false },
-        wordWrap: "on",
-        automaticLayout: true,
-        ...props.monacoOptions,
-      }}
-    />
-  )
-}
+
+    return (
+      <Editor
+        value={props.code}
+        onChange={props.onChange}
+        defaultLanguage="wandelscript"
+        theme={activeShikiTheme}
+        options={{
+          minimap: { enabled: false },
+          wordWrap: "on",
+          automaticLayout: true,
+          ...props.monacoOptions,
+        }}
+      />
+    )
+  },
+)

package/src/externalizeComponent.tsx

@@ -11,14 +11,16 @@ import i18n from "./i18n/config"
  * be provided by the user application; this wrapper ensures
  * they can be used either way.
  */
-export function externalizeComponent<T>(
-  Component: (props: T) => React.ReactNode,
-) {
-  return (props: T) => (
+export function externalizeComponent<T extends JSX.ElementType>(
+  Component: T,
+): T {
+  const WrappedComponent = ((props: T) => (
     <NovaComponentsProvider>
-      <Component {...(props as T & JSX.IntrinsicAttributes)} />
+      <Component {...(props as any)} />
     </NovaComponentsProvider>
-  )
+  )) as any
+
+  return WrappedComponent
 }
 
 const NovaComponentsProvider: FC<{ children: React.ReactNode }> = ({