@tanstack/router-devtools-core 1.20.3-alpha.1

package/src/TanStackRouterDevtoolsCore.tsx

@@ -0,0 +1,152 @@
+import { createSignal, lazy } from 'solid-js'
+import { render } from 'solid-js/web'
+import type { AnyRouter } from '@tanstack/router-core'
+import type { Signal } from 'solid-js'
+
+interface DevtoolsOptions {
+  /**
+   * Set this true if you want the dev tools to default to being open
+   */
+  initialIsOpen?: boolean
+  /**
+   * Use this to add props to the panel. For example, you can add class, style (merge and override default style), etc.
+   */
+  panelProps?: any & {
+    ref?: any
+  }
+  /**
+   * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.
+   */
+  closeButtonProps?: any & {
+    ref?: any
+  }
+  /**
+   * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.
+   */
+  toggleButtonProps?: any & {
+    ref?: any
+  }
+  /**
+   * The position of the TanStack Router logo to open and close the devtools panel.
+   * Defaults to 'bottom-left'.
+   */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  /**
+   * Use this to render the devtools inside a different type of container element for a11y purposes.
+   * Any string which corresponds to a valid intrinsic JSX element is allowed.
+   * Defaults to 'footer'.
+   */
+  containerElement?: string | any
+  /**
+   * A boolean variable indicating if the "lite" version of the library is being used
+   */
+  router: AnyRouter
+  routerState: any
+  /**
+   * Use this to attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+}
+
+class TanStackRouterDevtoolsCore {
+  #router: Signal<AnyRouter>
+  #routerState: Signal<any>
+  #position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  #initialIsOpen: boolean
+  #shadowDOMTarget?: ShadowRoot
+
+  #panelProps: any
+  #closeButtonProps: any
+  #toggleButtonProps: any
+
+  #isMounted = false
+  #Component: any
+  #dispose?: () => void
+
+  constructor(config: DevtoolsOptions) {
+    this.#router = createSignal(config.router)
+    this.#routerState = createSignal(config.routerState)
+    this.#position = config.position ?? 'bottom-left'
+    this.#initialIsOpen = config.initialIsOpen ?? false
+    this.#shadowDOMTarget = config.shadowDOMTarget
+
+    this.#panelProps = config.panelProps
+    this.#closeButtonProps = config.closeButtonProps
+    this.#toggleButtonProps = config.toggleButtonProps
+  }
+
+  mount<T extends HTMLElement>(el: T) {
+    if (this.#isMounted) {
+      throw new Error('Devtools is already mounted')
+    }
+
+    const dispose = render(() => {
+      const [router] = this.#router
+      const [routerState] = this.#routerState
+      const position = this.#position
+      const initialIsOpen = this.#initialIsOpen
+      const shadowDOMTarget = this.#shadowDOMTarget
+
+      const panelProps = this.#panelProps
+      const closeButtonProps = this.#closeButtonProps
+      const toggleButtonProps = this.#toggleButtonProps
+
+      let Devtools
+
+      if (this.#Component) {
+        Devtools = this.#Component
+      } else {
+        Devtools = lazy(() => import('./FloatingTanStackRouterDevtools'))
+        this.#Component = Devtools
+      }
+
+      return (
+        <Devtools
+          position={position}
+          initialIsOpen={initialIsOpen}
+          shadowDOMTarget={shadowDOMTarget}
+          router={router}
+          routerState={routerState}
+          panelProps={panelProps}
+          closeButtonProps={closeButtonProps}
+          toggleButtonProps={toggleButtonProps}
+        />
+      )
+    }, el)
+
+    this.#isMounted = true
+    this.#dispose = dispose
+  }
+
+  unmount() {
+    if (!this.#isMounted) {
+      throw new Error('Devtools is not mounted')
+    }
+    this.#dispose?.()
+    this.#isMounted = false
+  }
+
+  setRouter(router: AnyRouter) {
+    this.#router[1](router)
+  }
+
+  setRouterState(routerState: any) {
+    this.#routerState[1](routerState)
+  }
+
+  setOptions(options: Partial<DevtoolsOptions>) {
+    if (options.position !== undefined) {
+      this.#position = options.position
+    }
+
+    if (options.initialIsOpen !== undefined) {
+      this.#initialIsOpen = options.initialIsOpen
+    }
+
+    if (options.shadowDOMTarget !== undefined) {
+      this.#shadowDOMTarget = options.shadowDOMTarget
+    }
+  }
+}
+
+export { TanStackRouterDevtoolsCore }

package/src/TanStackRouterDevtoolsPanelCore.tsx

@@ -0,0 +1,131 @@
+import { render } from 'solid-js/web'
+import { createSignal, lazy } from 'solid-js'
+import { DevtoolsOnCloseContext, ShadowDomTargetContext } from './context'
+import type { JSX } from 'solid-js'
+import type { AnyRouter } from '@tanstack/router-core'
+
+interface TanStackRouterDevtoolsPanelCoreOptions {
+  /**
+   * The standard React style object used to style a component with inline styles
+   */
+  style?: JSX.CSSProperties
+  /**
+   * The standard React class property used to style a component with classes
+   */
+  className?: string
+  /**
+   * A boolean variable indicating whether the panel is open or closed
+   */
+  isOpen?: boolean
+  /**
+   * A function that toggles the open and close state of the panel
+   */
+  setIsOpen?: (isOpen: boolean) => void
+  /**
+   * Handles the opening and closing the devtools panel
+   */
+  handleDragStart?: (e: any) => void
+  /**
+   * A boolean variable indicating if the "lite" version of the library is being used
+   */
+  router: AnyRouter
+
+  routerState: any
+  /**
+   * Use this to attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+}
+
+class TanStackRouterDevtoolsPanelCore {
+  #router: any
+  #routerState: any
+  #shadowDOMTarget?: ShadowRoot
+  #isMounted = false
+  #setIsOpen?: (isOpen: boolean) => void
+  #dispose?: () => void
+  #Component: any
+
+  constructor(config: TanStackRouterDevtoolsPanelCoreOptions) {
+    const { router, routerState, shadowDOMTarget, setIsOpen } = config
+
+    this.#router = createSignal(router)
+    this.#routerState = createSignal(routerState)
+    this.#shadowDOMTarget = shadowDOMTarget
+    this.#setIsOpen = setIsOpen
+  }
+
+  mount<T extends HTMLElement>(el: T) {
+    if (this.#isMounted) {
+      throw new Error('Devtools is already mounted')
+    }
+
+    const dispose = render(() => {
+      const [router] = this.#router
+      const [routerState] = this.#routerState
+      const shadowDOMTarget = this.#shadowDOMTarget
+      const setIsOpen = this.#setIsOpen
+
+      let BaseTanStackRouterDevtoolsPanel
+
+      if (this.#Component) {
+        BaseTanStackRouterDevtoolsPanel = this.#Component
+      } else {
+        BaseTanStackRouterDevtoolsPanel = lazy(
+          () => import('./BaseTanStackRouterDevtoolsPanel'),
+        )
+        this.#Component = BaseTanStackRouterDevtoolsPanel
+      }
+
+      return (
+        <ShadowDomTargetContext.Provider value={shadowDOMTarget}>
+          <DevtoolsOnCloseContext.Provider
+            value={{
+              onCloseClick: () => {},
+            }}
+          >
+            <BaseTanStackRouterDevtoolsPanel
+              router={router}
+              routerState={routerState}
+              shadowDOMTarget={shadowDOMTarget}
+              setIsOpen={setIsOpen}
+            />
+          </DevtoolsOnCloseContext.Provider>
+        </ShadowDomTargetContext.Provider>
+      )
+    }, el)
+
+    this.#isMounted = true
+    this.#dispose = dispose
+  }
+
+  unmount() {
+    if (!this.#isMounted) {
+      throw new Error('Devtools is not mounted')
+    }
+    this.#dispose?.()
+    this.#isMounted = false
+  }
+
+  setRouter(router: AnyRouter) {
+    this.#router[1](router)
+  }
+
+  setRouterState(routerState: any) {
+    this.#routerState[1](routerState)
+  }
+
+  setOptions(options: Partial<TanStackRouterDevtoolsPanelCoreOptions>) {
+    if (options.shadowDOMTarget !== undefined) {
+      this.#shadowDOMTarget = options.shadowDOMTarget
+    }
+    if (options.router !== undefined) {
+      this.setRouter(options.router)
+    }
+    if (options.routerState !== undefined) {
+      this.setRouterState(options.routerState)
+    }
+  }
+}
+
+export { TanStackRouterDevtoolsPanelCore }

package/src/context.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'solid-js'
+
+export const ShadowDomTargetContext = createContext<ShadowRoot | undefined>(
+  undefined,
+)
+
+export const DevtoolsOnCloseContext = createContext<
+  | {
+      onCloseClick: (
+        e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element },
+      ) => void
+    }
+  | undefined
+>(undefined)
+
+export const useDevtoolsOnClose = () => {
+  const context = useContext(DevtoolsOnCloseContext)
+  if (!context) {
+    throw new Error(
+      'useDevtoolsOnClose must be used within a TanStackRouterDevtools component',
+    )
+  }
+  return context
+}

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { TanStackRouterDevtoolsCore } from './TanStackRouterDevtoolsCore'
+export { TanStackRouterDevtoolsPanelCore } from './TanStackRouterDevtoolsPanelCore'