Convert CodeMirror theme toggling behavior to Extension

e2e/playwright/fixtures/editorFixture.ts

@@ -211,7 +211,7 @@ export class EditorFixture {
   scrollToText(text: string, placeCursor?: boolean) {
     return this.page.evaluate(
       (args: { text: string; placeCursor?: boolean }) => {
-        const editorView = window.editorManager.getEditorView()
+        const editorView = window.kclManager.getEditorView()
         // error TS2339: Property 'docView' does not exist on type 'EditorView'.
         // Except it does so :shrug:
         // @ts-ignore

e2e/playwright/lib/console-error-whitelist.ts

@@ -100,7 +100,7 @@ export const isErrorWhitelisted = (exception: Error) => {
     +     at resolveTransaction (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:2155:24)
     +     at _EditorState.update (http://localhost:3000/node_modules/.vite/deps/chunk-3BHLKIA4.js?v=412eae63:2281:12)
     +     at _EditorView.dispatch (http://localhost:3000/node_modules/.vite/deps/chunk-IZYF444B.js?v=412eae63:6988:148)
-    +     at EditorManager.selectRange (http://localhost:3000/src/editor/manager.ts:182:22)
+    +     at KclManager.selectRange (http://localhost:3000/src/lang/KclSingleton.ts:1255:22)
     +     at AST extrude (http://localhost:3000/src/machines/modelingMachine.ts:828:25)`,
       foundInSpec: 'e2e/playwright/editor-tests.spec.ts',
       project: 'Google Chrome',

e2e/playwright/projects.spec.ts

@@ -1730,7 +1730,7 @@ profile001 = startProfile(sketch001, at = [0, 0])
       // go to sketch mode
       await (await toolbar.getFeatureTreeOperation('Sketch', 0)).dblclick()
 
-      // Without this, "add axis n grid" action runs after editing the sketch and invokes codeManager.writeToFile()
+      // Without this, "add axis n grid" action runs after editing the sketch and invokes kclManager.writeToFile()
       // so we wait for that action to run first before we start editing the sketch and making sure it's saving
       // because of those edits.
       await page.waitForTimeout(2000)

e2e/playwright/test-utils.ts

@@ -161,12 +161,12 @@ async function openKclCodePanel(page: Page) {
 
   // Code Mirror lazy loads text! Wowza! Let's force-load the text for tests.
   await page.evaluate(() => {
-    // editorManager is available on the window object.
+    // kclManager is available on the window object.
     //@ts-ignore this is in an entirely different context that tsc can't see.
-    editorManager.getEditorView().dispatch({
+    kclManager.getEditorView().dispatch({
       selection: {
         //@ts-ignore this is in an entirely different context that tsc can't see.
-        anchor: editorManager.getEditorView().docView.length,
+        anchor: kclManager.getEditorView().docView.length,
       },
       scrollIntoView: true,
     })

package.json

@@ -35,6 +35,8 @@
     "@microlink/react-json-view": "^1.27.0",
     "@million/lint": "^1.0.14",
     "@msgpack/msgpack": "^3.1.2",
+    "@preact/signals-core": "^1.12.1",
+    "@preact/signals-react": "^3.6.1",
     "@react-hook/resize-observer": "^2.0.1",
     "@replit/codemirror-interact": "^6.3.1",
     "@ts-stack/markdown": "^1.5.0",
@@ -164,6 +166,7 @@
     "@lezer/generator": "^1.7.3",
     "@nabla/vite-plugin-eslint": "^2.0.6",
     "@playwright/test": "^1.52.0",
+    "@preact/signals-react-transform": "^0.6.0",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^15.0.7",
     "@types/diff": "^7.0.2",

src/App.tsx

@@ -37,8 +37,6 @@ import { PATHS } from '@src/lib/paths'
 import { getSelectionTypeDisplayText } from '@src/lib/selections'
 import {
   billingActor,
-  codeManager,
-  editorManager,
   getSettings,
   kclManager,
   useLayout,
@@ -64,6 +62,7 @@ import {
   MlEphantManagerReactContext,
   MlEphantManagerTransitions2,
 } from '@src/machines/mlEphantManagerMachine2'
+import { useSignalEffect } from '@preact/signals-react'
 
 if (window.electron) {
   maybeWriteToDisk(window.electron)
@@ -119,11 +118,11 @@ export function App() {
   // with the wrapper.
   useHotkeys('mod+z', (e) => {
     e.preventDefault()
-    editorManager.undo()
+    kclManager.undo()
   })
   useHotkeys('mod+shift+z', (e) => {
     e.preventDefault()
-    editorManager.redo()
+    kclManager.redo()
   })
   useHotkeyWrapper(
     [isDesktop() ? 'mod + ,' : 'shift + mod + ,'],
@@ -172,7 +171,6 @@ export function App() {
           TutorialRequestToast({
             onboardingStatus: settings.app.onboardingStatus.current,
             navigate,
-            codeManager,
             kclManager,
             theme: getResolvedTheme(settings.app.theme.current),
             accountUrl: withSiteBaseURL('/account'),
@@ -194,8 +192,14 @@ export function App() {
     authToken,
   ])
 
-  useEffect(() => {
-    const needsWasmInitFailedToast = !isDesktop() && kclManager.wasmInitFailed
+  // This is, at time of writing, the only spot we need @preact/signals-react,
+  // because we can't use the core `effect()` function for this signal, because
+  // it is initially set to `true`, and will break the web app.
+  // TODO: get the loading pattern of KclManager in order so that it's for real available,
+  // then you might be able to uninstall this package and stick to just using signals-core.
+  useSignalEffect(() => {
+    const needsWasmInitFailedToast =
+      !isDesktop() && kclManager.wasmInitFailedSignal.value
     if (needsWasmInitFailedToast) {
       toast.success(
         () =>
@@ -212,7 +216,7 @@ export function App() {
       )
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
-  }, [kclManager.wasmInitFailed])
+  })
 
   // Only create the native file menus on desktop
   useEffect(() => {
@@ -237,7 +241,7 @@ export function App() {
             projectMenuChildren={
               <UndoRedoButtons
                 data-testid="app-header-undo-redo"
-                editorManager={editorManager}
+                kclManager={kclManager}
                 className="flex items-center px-2 border-x border-chalkboard-30 dark:border-chalkboard-80"
               />
             }

src/Root.tsx

@@ -6,7 +6,6 @@ import { OpenInDesktopAppHandler } from '@src/components/OpenInDesktopAppHandler
 import { SystemIOMachineLogicListenerDesktop } from '@src/components/Providers/SystemIOProviderDesktop'
 import { SystemIOMachineLogicListenerWeb } from '@src/components/Providers/SystemIOProviderWeb'
 import { RouteProvider } from '@src/components/RouteProvider'
-import { KclContextProvider } from '@src/lang/KclProvider'
 import { isDesktop } from '@src/lib/isDesktop'
 import { Outlet } from 'react-router-dom'
 import { MlEphantManagerReactContext } from '@src/machines/mlEphantManagerMachine2'
@@ -35,18 +34,16 @@ function RootLayout() {
             }}
           >
             <LspProvider>
-              <KclContextProvider>
-                <AppStateProvider>
-                  <MachineManagerProvider>
-                    {isDesktop() ? (
-                      <SystemIOMachineLogicListenerDesktop />
-                    ) : (
-                      <SystemIOMachineLogicListenerWeb />
-                    )}
-                    <Outlet />
-                  </MachineManagerProvider>
-                </AppStateProvider>
-              </KclContextProvider>
+              <AppStateProvider>
+                <MachineManagerProvider>
+                  {isDesktop() ? (
+                    <SystemIOMachineLogicListenerDesktop />
+                  ) : (
+                    <SystemIOMachineLogicListenerWeb />
+                  )}
+                  <Outlet />
+                </MachineManagerProvider>
+              </AppStateProvider>
             </LspProvider>
           </MlEphantManagerReactContext.Provider>
         </Auth>

src/Router.tsx

@@ -28,7 +28,7 @@ import makeUrlPathRelative from '@src/lib/makeUrlPathRelative'
 import { PATHS } from '@src/lib/paths'
 import { fileLoader, homeLoader } from '@src/lib/routeLoaders'
 import {
-  codeManager,
+  kclManager,
   engineCommandManager,
   rustContext,
 } from '@src/lib/singletons'
@@ -175,12 +175,7 @@ function CoreDump() {
   const token = useToken()
   const coreDumpManager = useMemo(
     () =>
-      new CoreDumpManager(
-        engineCommandManager,
-        codeManager,
-        rustContext,
-        token
-      ),
+      new CoreDumpManager(engineCommandManager, kclManager, rustContext, token),
     // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
     []
   )

src/Toolbar.tsx

@@ -9,14 +9,12 @@ import Tooltip from '@src/components/Tooltip'
 import { useModelingContext } from '@src/hooks/useModelingContext'
 import { useNetworkContext } from '@src/hooks/useNetworkContext'
 import { NetworkHealthState } from '@src/hooks/useNetworkStatus'
-import { useKclContext } from '@src/lang/KclProvider'
 import { isCursorInFunctionDefinition } from '@src/lang/queryAst'
 import { isCursorInSketchCommandRange } from '@src/lang/util'
 import { filterEscHotkey } from '@src/lib/hotkeyWrapper'
 import { isDesktop } from '@src/lib/isDesktop'
 import { openExternalBrowserIfDesktop } from '@src/lib/openWindow'
-import { editorManager, kclManager } from '@src/lib/singletons'
-import { codeManager, commandBarActor } from '@src/lib/singletons'
+import { kclManager, commandBarActor } from '@src/lib/singletons'
 import type {
   ToolbarDropdown,
   ToolbarItem,
@@ -41,10 +39,10 @@ export function Toolbar({
     'bg-chalkboard-transparent dark:bg-transparent disabled:bg-transparent dark:disabled:bg-transparent enabled:hover:bg-chalkboard-10 dark:enabled:hover:bg-chalkboard-100 pressed:!bg-primary pressed:enabled:hover:!text-chalkboard-10'
   const buttonBorderClassName = '!border-transparent'
 
-  const isInTemporaryWorkspace = codeManager.isBufferMode
+  const isInTemporaryWorkspace = kclManager.isBufferMode
 
   const onClickSave = () => {
-    codeManager.exitFromTemporaryWorkspaceMode()
+    kclManager.exitFromTemporaryWorkspaceMode()
   }
 
   const sketchPathId = useMemo(() => {
@@ -64,14 +62,13 @@ export function Toolbar({
 
   const toolbarButtonsRef = useRef<HTMLUListElement>(null)
   const { overallState, immediateState } = useNetworkContext()
-  const { isExecuting } = useKclContext()
   const { isStreamReady, isStreamAcceptingInput } = useAppState()
   const [showRichContent, setShowRichContent] = useState(false)
 
   const disableAllButtons =
     (overallState !== NetworkHealthState.Ok &&
       overallState !== NetworkHealthState.Weak) ||
-    isExecuting ||
+    kclManager.isExecutingSignal.value ||
     immediateState.type !== EngineConnectionStateType.ConnectionEstablished ||
     !isStreamReady ||
     !isStreamAcceptingInput
@@ -91,7 +88,7 @@ export function Toolbar({
       modelingState: state,
       modelingSend: send,
       sketchPathId,
-      editorHasFocus: editorManager.getEditorView()?.hasFocus,
+      editorHasFocus: kclManager.getEditorView()?.hasFocus,
       isActive: false, // Default value - individual items will override this
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
@@ -101,7 +98,7 @@ export function Toolbar({
       commandBarActor.send,
       sketchPathId,
       // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
-      editorManager.getEditorView()?.hasFocus,
+      kclManager.getEditorView()?.hasFocus,
     ]
   )
 

src/clientSideScene/ClientSideSceneComp.tsx

@@ -31,8 +31,6 @@ import type { CallExpressionKw, Expr, PathToNode } from '@src/lang/wasm'
 import { parse, recast, resultIsOk } from '@src/lang/wasm'
 import { cameraMouseDragGuards } from '@src/lib/cameraControls'
 import {
-  codeManager,
-  editorManager,
   engineCommandManager,
   kclManager,
   sceneEntitiesManager,
@@ -271,7 +269,7 @@ const Overlay = ({
 
   const constraints = getConstraintInfoKw(
     callExpression,
-    codeManager.code,
+    kclManager.codeSignal.value,
     overlay.pathToNode,
     overlay.filterValue
   )
@@ -549,10 +547,10 @@ const ConstraintSymbol = ({
               : 'bg-primary/30 dark:bg-primary text-primary dark:text-chalkboard-10 dark:border-transparent group-hover:bg-primary/40 group-hover:border-primary/50 group-hover:brightness-125'
         } h-[26px] w-[26px] rounded-sm relative m-0 p-0`}
         onMouseEnter={() => {
-          editorManager.setHighlightRange([range])
+          kclManager.setHighlightRange([range])
         }}
         onMouseLeave={() => {
-          editorManager.setHighlightRange([defaultSourceRange()])
+          kclManager.setHighlightRange([defaultSourceRange()])
         }}
         // disabled={isConstrained || !convertToVarEnabled}
         // disabled={implicitDesc} TODO why does this change styles that are hard to override?
@@ -605,7 +603,7 @@ const ConstraintSymbol = ({
               // Code editor will be updated in the modelingMachine.
               const newCode = recast(modifiedAst)
               if (err(newCode)) return
-              codeManager.updateCodeEditor(newCode)
+              kclManager.updateCodeEditor(newCode)
             } catch (e) {
               console.log('error', e)
             }