Add setElementInterface function to setup to support custom renderers

Author: thetarnav

.changeset/proud-dogs-end.md

@@ -0,0 +1,6 @@
+---
+"@solid-devtools/debugger": minor
+"solid-devtools": minor
+---
+
+Add setElementInterface funtion to setup to support custom renderers (closes #343)

packages/debugger/src/inspector/index.ts

@@ -62,7 +62,7 @@ export function createInspector(props: {
                     const encoded = encodeValue(
                         node.getValue(),
                         selected,
-                        setup.debugger_options.eli,
+                        setup.eli,
                         selected &&
                             (storeNode => node.addStoreObserver(observeStoreNode(storeNode))),
                     )
@@ -80,7 +80,7 @@ export function createInspector(props: {
                         [
                             storeProperty,
                             typeof data === 'object'
-                                ? encodeValue(data.value, true, setup.debugger_options.eli, undefined, true)
+                                ? encodeValue(data.value, true, setup.eli, undefined, true)
                                 : data ?? null,
                         ],
                     ])
@@ -164,7 +164,7 @@ export function createInspector(props: {
                 onValueUpdate:     pushValueUpdate,
                 onPropStateChange: pushPropState,
                 observedPropsMap:  propsMap,
-                eli:               setup.debugger_options.eli,
+                eli:               setup.eli,
             })
 
             props.emit(msg('InspectedNodeDetails', result.details))

packages/debugger/src/main/index.ts

@@ -19,18 +19,11 @@ import {
     type NodeID,
     type OutputListener,
     type OutputMessage,
-    type DebuggerOptions,
 } from './types.ts'
 
-function createDebugger<TEl extends object>(
-    options?: DebuggerOptions<TEl>,
-) {
+function createDebugger() {
     assert(globalThis.SolidDevtools$$, 'solid-devtools is not setup')
 
-    if (options != null) {
-        globalThis.SolidDevtools$$.debugger_options = options
-    }
-
     initRoots()
 
     const _output_listeners: OutputListener[] = []
@@ -147,7 +140,7 @@ function createDebugger<TEl extends object>(
         }
     }
 
-    let component_registry = walker.makeComponentRegistry(setup.debugger_options.eli)
+    let component_registry = walker.makeComponentRegistry(setup.eli)
 
     //
     // Structure:
@@ -278,9 +271,7 @@ let _debugger_instance: Debugger | undefined
 /**
  * Used for connecting debugger to devtools
  */
-export function useDebugger<TEl extends object>(
-    options?: DebuggerOptions<TEl>,
-): Debugger {
-    _debugger_instance ??= createDebugger(options)
+export function useDebugger(): Debugger {
+    _debugger_instance ??= createDebugger()
     return _debugger_instance
 }

packages/debugger/src/main/types.ts

@@ -173,10 +173,6 @@ export const dom_element_interface: ElementInterface<Element> = {
     },
 }
 
-export type DebuggerOptions<TEl extends object> = {
-    eli: ElementInterface<TEl>,
-}
-
 //
 // EXPOSED SOLID API
 //

packages/debugger/src/setup.ts

@@ -20,9 +20,9 @@ export function setLocatorOptions(options: debug.LocatorOptions) {
     globalThis.SolidDevtools$$.locator_options = options
 }
 
-export function setDebuggerOptions(options: debug.DebuggerOptions<any>) {
+export function setElementInterface(eli: debug.ElementInterface<any>) {
     assert(globalThis.SolidDevtools$$, 'solid-devtools is not setup')
-    globalThis.SolidDevtools$$.debugger_options = options
+    globalThis.SolidDevtools$$.eli = eli
 }
 
 export function setClientVersion(version: string) {
@@ -51,7 +51,7 @@ export type SetupApi = {
         $RAW:         typeof store.$RAW
     }
     // custom
-    debugger_options: debug.DebuggerOptions<any>
+    eli:              debug.ElementInterface<any>
     locator_options:  debug.LocatorOptions | null
     get_created_owners:  () => debug.Solid.Owner[]
     get_locator_options: () => debug.LocatorOptions | null
@@ -106,13 +106,9 @@ if (!s.DEV || !store.DEV) {
             created_owners = null
             return events
         },
-        debugger_options: {
-            eli: debug.dom_element_interface,
-        },
+        eli:             debug.dom_element_interface,
         locator_options: null,
-        get_locator_options() {
-            return this.locator_options
-        },
+        get_locator_options() {return this.locator_options},
         versions: {
             client:              null,
             solid:               null,

packages/main/src/setup.ts

@@ -10,5 +10,5 @@ setSolidVersion(process.env.SOLID_VERSION, process.env.EXPECTED_SOLID_VERSION)
 
 export {
     setLocatorOptions,
-    setDebuggerOptions,
+    setElementInterface,
 } from '@solid-devtools/debugger/setup'

packages/main/src/setup_noop.ts

@@ -2,8 +2,8 @@ import type * as API from './setup.ts'
 
 export const {
     setLocatorOptions,
-    setDebuggerOptions,
+    setElementInterface,
 }: typeof API = {
-    setLocatorOptions()  {/**/},
-    setDebuggerOptions() {/**/},
+    setLocatorOptions()   {/**/},
+    setElementInterface() {/**/},
 }

packages/overlay/src/index.tsx

@@ -6,7 +6,6 @@ import {createBodyCursor} from '@solid-primitives/cursor'
 import {makeEventListener} from '@solid-primitives/event-listener'
 import * as num from '@nothing-but/utils/num'
 import {useDebugger} from '@solid-devtools/debugger/bundled'
-import * as debug from '@solid-devtools/debugger/types'
 import {Icon, MountIcons, createDevtools} from '@solid-devtools/frontend'
 import {useIsMobile, useIsTouch, atom} from '@solid-devtools/shared/primitives'
 import {msg} from '@solid-devtools/shared/utils'
@@ -15,10 +14,9 @@ import frontendStyles from '@solid-devtools/frontend/dist/styles.css'
 import overlayStyles from './styles.css'
 
 export type OverlayOptions = {
-    defaultOpen?:     boolean
-    alwaysOpen?:      boolean
-    noPadding?:       boolean
-    debuggerOptions?: debug.DebuggerOptions<any>
+    defaultOpen?: boolean
+    alwaysOpen?:  boolean
+    noPadding?:   boolean
 }
 
 export function attachDevtoolsOverlay(props?: OverlayOptions): (() => void) {
@@ -43,9 +41,9 @@ export function attachDevtoolsOverlay(props?: OverlayOptions): (() => void) {
 
 const Overlay: s.Component<OverlayOptions> = props => {
 
-    let {alwaysOpen, debuggerOptions, defaultOpen, noPadding} = props
+    let {alwaysOpen, defaultOpen, noPadding} = props
 
-    const instance = useDebugger(debuggerOptions)
+    const instance = useDebugger()
 
     if (defaultOpen || alwaysOpen) {
         instance.toggleEnabled(true)