Support custom renderers

[thetarnav]

Closes #343

By default the debugger assumes you are using "solid-js/web" as jsx renderer and that the rendered elements are HTMLElements.

If you are using a custom renderer—such as Three.js, Pixi.js, or Lightning.js—you need to provide the debugger with an ElementInterface implementation.

import * as debug from '@solid-devtools/debugger/types'
import {setElementInterface} from '@solid-devtools/debugger/setup' // or 'solid-devtools/setup'

/** ElementInterface implementation for DOM Element */
let element_interface: debug.ElementInterface<Element> = {
    isElement:    obj => obj instanceof Element,
    getElementAt: e => e.target as Element | null,
    getName:      el => el.localName,
    getChildren:  el => el.children,
    getParent:    el => el.parentElement,
    getRect:      el => el.getBoundingClientRect(),
    getLocation:  el => {
        let attr = debug.getLocationAttr(el)
        return attr && debug.parseLocationString(attr) || null
    },
}

setElementInterface(element_interface)

[changeset-bot]

🦋 Changeset detected

Latest commit: e364a4e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@solid-devtools/debugger	Minor
solid-devtools	Minor
@solid-devtools/shared	Patch
@solid-devtools/extension	Patch
@solid-devtools/frontend	Patch
@solid-devtools/logger	Patch
@solid-devtools/overlay	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR