frontend: Rename Controller to AppCtx

thetarnav · thetarnav · commit f19ae873cd15 · 2024-12-31T10:06:53.000+01:00
diff --git a/packages/frontend/src/SidePanel.tsx b/packages/frontend/src/SidePanel.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import * as s from 'solid-js'
 import * as theme from '@solid-devtools/shared/theme'
-import {useController} from './controller.tsx'
+import {useAppCtx} from './controller.tsx'
 import * as dgraph from './dgraph.tsx'
 import {InspectorView} from './inspector.tsx'
 import * as ui from './ui/index.ts'
@@ -31,8 +31,8 @@ export const action_button = clsx(hover_background, hover_text, 'w-6 h-6 rounded
 export const action_icon = 'w-4 h-4'
 
 export function createSidePanel() {
-    
-    const ctx = useController()
+
+    const ctx = useAppCtx()
     const {inspector} = ctx
     const {state, openComponentLocation, setInspectedOwner} = inspector
 
diff --git a/packages/frontend/src/controller.tsx b/packages/frontend/src/controller.tsx
@@ -53,63 +53,22 @@ export type DevtoolsOptions = Partial<DevtoolsOptionsWithDefaults>
 
 export function createDevtools(props: DevtoolsOptions) {
 
-    let output_listeners: OutputListener[] = []
-    const output: OutputEventBus = {
-        listen(listener) {
-            output_listeners.push(listener)
-            s.onCleanup(() => {
-                mutate_remove(output_listeners, listener)
-            })
-        },
-        emit(e) {
-            s.batch(() => {
-                for (let fn of output_listeners) {
-                    fn(e)
-                }
-            })
-        },
-    }
-
-    let input_listeners: InputListener[] = []
-    const input: InputEventBus = {
-        listen(listener) {
-            input_listeners.push(listener)
-            s.onCleanup(() => {
-                mutate_remove(input_listeners, listener)
-            })
-        },
-        emit(e) {
-            s.batch(() => {
-                for (let fn of input_listeners) {
-                    fn(e)
-                }
-            })
-        },
-    }
-
-    let options: DevtoolsOptionsWithDefaults = {
-        errorOverlayFooter: props.errorOverlayFooter ?? (() => null),
-        headerSubtitle:     props.headerSubtitle     ?? (() => null),
-        useShortcuts:       props.useShortcuts       ?? false,
-        catchWindowErrors:  props.catchWindowErrors  ?? false,
-    }
-
-    const controller = createController(output, input, options)
+    const ctx = createAppCtx(props)
 
     return {
-        output,
-        input,
+        output: ctx.output,
+        input:  ctx.input,
         Devtools() {
             return (
                 <div class={ui.devtools_root_class + ' h-inherit'}>
                     <ui.Styles />
                     <ui.ErrorOverlay
-                        footer={options.errorOverlayFooter()}
-                        catchWindowErrors={options.catchWindowErrors}
+                        footer={ctx.options.errorOverlayFooter()}
+                        catchWindowErrors={ctx.options.catchWindowErrors}
                     >
-                        <ControllerCtx.Provider value={controller}>
-                            <App headerSubtitle={options.headerSubtitle()} />
-                        </ControllerCtx.Provider>
+                        <AppCtx.Provider value={ctx}>
+                            <App headerSubtitle={ctx.options.headerSubtitle()} />
+                        </AppCtx.Provider>
                     </ui.ErrorOverlay>
                 </div>
             )
@@ -157,11 +116,49 @@ function createViewCache() {
     return {set: setCacheGetter, get: getCache}
 }
 
-function createController(
-    output:  OutputEventBus,
-    input:   InputEventBus,
-    options: DevtoolsOptions,
-) {
+function createAppCtx(props: DevtoolsOptions) {
+
+    let output_listeners: OutputListener[] = []
+    const output: OutputEventBus = {
+        listen(listener) {
+            output_listeners.push(listener)
+            s.onCleanup(() => {
+                mutate_remove(output_listeners, listener)
+            })
+        },
+        emit(e) {
+            s.batch(() => {
+                for (let fn of output_listeners) {
+                    fn(e)
+                }
+            })
+        },
+    }
+
+    let input_listeners: InputListener[] = []
+    const input: InputEventBus = {
+        listen(listener) {
+            input_listeners.push(listener)
+            s.onCleanup(() => {
+                mutate_remove(input_listeners, listener)
+            })
+        },
+        emit(e) {
+            s.batch(() => {
+                for (let fn of input_listeners) {
+                    fn(e)
+                }
+            })
+        },
+    }
+
+    let options: DevtoolsOptionsWithDefaults = {
+        errorOverlayFooter: props.errorOverlayFooter ?? (() => null),
+        headerSubtitle:     props.headerSubtitle     ?? (() => null),
+        useShortcuts:       props.useShortcuts       ?? false,
+        catchWindowErrors:  props.catchWindowErrors  ?? false,
+    }
+
     //
     // LOCATOR
     //
@@ -308,8 +305,8 @@ function createController(
     }
 }
 
-export type Controller = ReturnType<typeof createController>
+export type AppCtx = ReturnType<typeof createAppCtx>
 
-const ControllerCtx = s.createContext<Controller>('ControllerCtx' as any as Controller)
+const AppCtx = s.createContext<AppCtx>('ControllerCtx' as any as AppCtx)
 
-export const useController = () => s.useContext(ControllerCtx)
+export const useAppCtx = () => s.useContext(AppCtx)
diff --git a/packages/frontend/src/dgraph.tsx b/packages/frontend/src/dgraph.tsx
@@ -3,11 +3,11 @@ import * as s from 'solid-js'
 import * as debug from '@solid-devtools/debugger/types'
 import {createHover} from '@solid-devtools/shared/primitives'
 import * as theme from '@solid-devtools/shared/theme'
-import {useController} from './controller.tsx'
+import {useAppCtx} from './controller.tsx'
 import * as ui from './ui/index.ts'
 
 export function createDependencyGraph() {
-    const ctx = useController()
+    const ctx = useAppCtx()
 
     const [graph, setGraph] = s.createSignal<debug.DGraphUpdate>(null)
 
@@ -220,7 +220,7 @@ function Line(props: {
 }
 
 export function Dgraph_View(): s.JSX.Element {
-    const ctx = useController()
+    const ctx = useAppCtx()
     const {inspector, hovered} = ctx
     const dgraph = createDependencyGraph()
 
diff --git a/packages/frontend/src/inspector.tsx b/packages/frontend/src/inspector.tsx
@@ -8,7 +8,7 @@ import {error, splitOnColon} from '@solid-devtools/shared/utils'
 import * as debug from '@solid-devtools/debugger/types'
 import * as theme from '@solid-devtools/shared/theme'
 import {SidePanelCtx} from './SidePanel.tsx'
-import {useController, type InputEventBus, type OutputEventBus} from './controller.tsx'
+import {useAppCtx, type InputEventBus, type OutputEventBus} from './controller.tsx'
 import * as ui from './ui/index.ts'
 import * as decode from './decode.ts'
 
@@ -311,7 +311,7 @@ export default function createInspector(
                         error(`ValueItem not found for id ${value_item_id}.`)
                         break
                     }
-    
+
                     if (decode.isObjectType(value_item.value)) {
                         decode.updateCollapsedValue(value_item.value, value, storeNodeMap)
                     }
@@ -324,7 +324,7 @@ export default function createInspector(
                 }
                 case 'propState': {
                     if (!state.props) break
-    
+
                     for (const [key, getterState] of entries(update[DATA])) {
                         state.props.record[key]?.setGetter(getterState)
                     }
@@ -399,7 +399,7 @@ function ListSignals<T>(props: {when: T; title: s.JSX.Element; children: s.JSX.E
 
 export function InspectorView(): s.JSX.Element {
 
-    const {inspector, hovered} = useController()
+    const {inspector, hovered} = useAppCtx()
     const {state} = inspector
 
     const {setOpenPanel} = s.useContext(SidePanelCtx)!
diff --git a/packages/frontend/src/structure.tsx b/packages/frontend/src/structure.tsx
@@ -9,7 +9,7 @@ import {type Atom, atom, createHover} from '@solid-devtools/shared/primitives'
 import * as theme from '@solid-devtools/shared/theme'
 import * as debug from '@solid-devtools/debugger/types'
 import {hover_background, panel_header_el_border} from './SidePanel.tsx'
-import {useController} from './controller.tsx'
+import {useAppCtx} from './controller.tsx'
 import * as ui from './ui/index.ts'
 
 
@@ -72,7 +72,7 @@ export function getNodePath(node: Structure.Node): Structure.Node[] {
 }
 
 export function createStructure() {
-    const ctx = useController()
+    const ctx = useAppCtx()
     const cachedInitialState = ctx.viewCache.get(debug.DevtoolsMainView.Structure)
 
     const [mode, setMode] = s.createSignal<debug.TreeWalkerMode>(
@@ -352,7 +352,7 @@ export function StructureView(): s.JSXElement {
 }
 
 const LocatorButton: s.Component = () => {
-    const {locator} = useController()
+    const {locator} = useAppCtx()
     return (
         <ui.ToggleButton
             class="shrink-0 w-7 h-7"
@@ -366,7 +366,7 @@ const LocatorButton: s.Component = () => {
 }
 
 const Search: s.Component = () => {
-    const ctx = useController()
+    const ctx = useAppCtx()
     const structure = useStructure()
 
     const [value, setValue] = s.createSignal('')
@@ -496,7 +496,7 @@ const getFocusedNodeData = (
 }
 
 const DisplayStructureTree: s.Component = () => {
-    
+
     const [containerScroll, setContainerScroll] = s.createSignal({
         top:    0,
         height: 0,
@@ -526,7 +526,7 @@ const DisplayStructureTree: s.Component = () => {
         })
     }
 
-    const ctx = useController()
+    const ctx = useAppCtx()
     const {inspector, hovered} = ctx
     const structure = useStructure()
 
@@ -825,7 +825,7 @@ const DisplayStructureTree: s.Component = () => {
 
 
 export const OwnerPath: s.Component = () => {
-    const {inspector, hovered} = useController()
+    const {inspector, hovered} = useAppCtx()
     const structure = useStructure()
 
     let container!: HTMLDivElement
@@ -919,7 +919,7 @@ export const OwnerNode: s.Component<{
     listenToUpdate(cb: VoidFunction): VoidFunction
     toggleCollapsed(node: Structure.Node): void
 }> = props => {
-    
+
     const {onHoverChange, listenToUpdate, onInspectChange, toggleCollapsed} = props
     const {name, type, hmr} = props.owner
 
