Merge branch 'feat/add_shell' of https://github.com/TanStack/devtools into feat/add_shell

Author: AlemTuzlak

packages/devtools/src/components/trigger.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx'
 import { useDevtoolsSettings } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { TanStackLogo } from './logo'
-import type { Accessor} from 'solid-js';
+import type { Accessor } from 'solid-js'
 
 export const Trigger = ({
   isOpen,

packages/devtools/src/context/devtools-context.tsx

@@ -2,92 +2,92 @@ import { createContext } from 'solid-js'
 import { createStore } from 'solid-js/store'
 import { tryParseJson } from '../utils/sanitize'
 import {
-	TANSTACK_DEVTOOLS_SETTINGS,
-	TANSTACK_DEVTOOLS_STATE,
-	getStorageItem,
-	setStorageItem,
+  TANSTACK_DEVTOOLS_SETTINGS,
+  TANSTACK_DEVTOOLS_STATE,
+  getStorageItem,
+  setStorageItem,
 } from '../utils/storage'
 import { initialState } from './devtools-store'
-import type { DevtoolsStore } from './devtools-store';
+import type { DevtoolsStore } from './devtools-store'
 import type { Setter } from 'solid-js'
 import type { JSX } from 'solid-js/jsx-runtime'
 
 export interface DevtoolsPlugin {
-	name: string | ((el: HTMLDivElement) => void)
-	id: string
-	component: (el: HTMLDivElement) => void
+  name: string | ((el: HTMLDivElement) => void)
+  id: string
+  component: (el: HTMLDivElement) => void
 }
 
 export const DevtoolsContext = createContext<{
-	store: DevtoolsStore
-	setStore: Setter<DevtoolsStore>
+  store: DevtoolsStore
+  setStore: Setter<DevtoolsStore>
 }>()
 
 interface ContextProps {
-	children: JSX.Element
-	plugins?: Array<DevtoolsPlugin>
-	config?: DevtoolsSettings
+  children: JSX.Element
+  plugins?: Array<DevtoolsPlugin>
+  config?: DevtoolsSettings
 }
 
 const getSettings = () => {
-	const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS)
-	const settings = tryParseJson<DevtoolsStore['settings']>(settingsString)
-	return {
-		...settings,
-	}
+  const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS)
+  const settings = tryParseJson<DevtoolsStore['settings']>(settingsString)
+  return {
+    ...settings,
+  }
 }
 
 const getExistingStateFromStorage = (
-	config?: DevtoolsSettings,
-	plugins?: Array<DevtoolsPlugin>,
+  config?: DevtoolsSettings,
+  plugins?: Array<DevtoolsPlugin>,
 ) => {
-	const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)
-	const settings = getSettings()
+  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)
+  const settings = getSettings()
 
-	const state: DevtoolsStore = {
-		...initialState,
-		plugins: plugins || [],
-		state: {
-			...initialState.state,
-			...(existingState ? JSON.parse(existingState) : {}),
-		},
-		settings: {
-			...initialState.settings,
-			...config,
-			...settings,
-		},
-	}
-	return state
+  const state: DevtoolsStore = {
+    ...initialState,
+    plugins: plugins || [],
+    state: {
+      ...initialState.state,
+      ...(existingState ? JSON.parse(existingState) : {}),
+    },
+    settings: {
+      ...initialState.settings,
+      ...config,
+      ...settings,
+    },
+  }
+  return state
 }
 
 export type DevtoolsSettings = DevtoolsStore['settings']
 
 export const DevtoolsProvider = (props: ContextProps) => {
-	const [store, setStore] = createStore(
-		getExistingStateFromStorage(props.config, props.plugins),
-	)
+  const [store, setStore] = createStore(
+    getExistingStateFromStorage(props.config, props.plugins),
+  )
 
-	const value = {
-		store,
-		setStore: (
-			updater: (prev: DevtoolsStore) => DevtoolsStore | Partial<DevtoolsStore>,
-		) => {
-			const newState = updater(store)
-			const { settings, state: internalState } = newState
-			// Store user settings for dev tools into local storage
-			setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings))
-			// Store general state into local storage
-			setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState))
-			setStore((prev) => ({
-				...prev,
-				...newState,
-			}))
-		},
-	}
+  const value = {
+    store,
+    setStore: (
+      updater: (prev: DevtoolsStore) => DevtoolsStore | Partial<DevtoolsStore>,
+    ) => {
+      const newState = updater(store)
+      const { settings, state: internalState } = newState
+      // Store user settings for dev tools into local storage
+      setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings))
+      // Store general state into local storage
+      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState))
+      setStore((prev) => ({
+        ...prev,
+        ...newState,
+      }))
+    },
+  }
 
-	return (
-		<DevtoolsContext.Provider value={value}>
-			{props.children}
-		</DevtoolsContext.Provider>
-	)
+  return (
+    <DevtoolsContext.Provider value={value}>
+      {props.children}
+    </DevtoolsContext.Provider>
+  )
 }

packages/devtools/src/core.tsx

@@ -1,12 +1,11 @@
 import { lazy } from 'solid-js'
 import { Portal, render } from 'solid-js/web'
-import {
-  DevtoolsProvider,
-} from './context/devtools-context'
+import { DevtoolsProvider } from './context/devtools-context'
 import { initialState } from './context/devtools-store'
 import type {
   DevtoolsPlugin,
-  DevtoolsSettings} from './context/devtools-context';
+  DevtoolsSettings,
+} from './context/devtools-context'
 
 export interface DevtoolsOptions {
   options?: Partial<DevtoolsSettings>