fix(devtools): prevent solid-js from leaking into server bundles

.changeset/strong-buttons-wear.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools-utils': patch
+'@tanstack/devtools': patch
+---
+
+Fix issues with bundling solid

examples/react/bundling-repro/package.json

@@ -30,9 +30,9 @@
     "@tanstack/react-router-devtools": "^1.132.0",
     "@tanstack/react-router-ssr-query": "^1.131.7",
     "@tanstack/react-start": "^1.132.0",
-    "@tanstack/react-store": "^0.8.0",
+    "@tanstack/react-store": "^0.9.0",
     "@tanstack/router-plugin": "^1.132.0",
-    "@tanstack/store": "^0.8.0",
+    "@tanstack/store": "^0.9.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "highlight.js": "^11.11.1",

examples/react/bundling-repro/src/components/demo-AIAssistant.tsx

@@ -79,7 +79,7 @@ function Messages({ messages }: { messages: ChatMessages }) {
 }
 
 export default function AIAssistant() {
-  const isOpen = useStore(showAIAssistant)
+  const isOpen = useStore(showAIAssistant, (state) => state)
   const { messages, sendMessage } = useGuitarRecommendationChat()
   const [input, setInput] = useState('')
 

examples/react/bundling-repro/src/feat/demo-store-devtools.tsx

@@ -1,7 +1,7 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 import { useState, useEffect } from 'react'
 
-import { store, fullName } from './demo-store'
+import { store } from './demo-store'
 
 type EventMap = {
   'store-devtools:state': {
@@ -25,15 +25,15 @@ store.subscribe(() => {
   sdec.emit('state', {
     firstName: store.state.firstName,
     lastName: store.state.lastName,
-    fullName: fullName.state,
+    fullName: `${store.state.firstName} ${store.state.lastName}`,
   })
 })
 
 function DevtoolPanel() {
   const [state, setState] = useState<EventMap['store-devtools:state']>(() => ({
     firstName: store.state.firstName,
     lastName: store.state.lastName,
-    fullName: fullName.state,
+    fullName: `${store.state.firstName} ${store.state.lastName}`,
   }))
 
   useEffect(() => {

examples/react/bundling-repro/src/feat/demo-store.ts

@@ -1,13 +1,6 @@
-import { Derived, Store } from '@tanstack/store'
+import { Store } from '@tanstack/store'
 
 export const store = new Store({
   firstName: 'Jane',
   lastName: 'Smith',
 })
-
-export const fullName = new Derived({
-  fn: () => `${store.state.firstName} ${store.state.lastName}`,
-  deps: [store],
-})
-
-fullName.mount()

examples/react/bundling-repro/src/routeTree.gen.ts

@@ -149,7 +149,7 @@ export interface FileRoutesByFullPath {
   '/demo/guitars/$guitarId': typeof DemoGuitarsGuitarIdRoute
   '/demo/start/api-request': typeof DemoStartApiRequestRoute
   '/demo/start/server-funcs': typeof DemoStartServerFuncsRoute
-  '/demo/guitars': typeof DemoGuitarsIndexRoute
+  '/demo/guitars/': typeof DemoGuitarsIndexRoute
   '/demo/api/ai/chat': typeof DemoApiAiChatRoute
   '/demo/api/ai/image': typeof DemoApiAiImageRoute
   '/demo/api/ai/structured': typeof DemoApiAiStructuredRoute
@@ -158,7 +158,7 @@ export interface FileRoutesByFullPath {
   '/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute
   '/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute
   '/demo/start/ssr/spa-mode': typeof DemoStartSsrSpaModeRoute
-  '/demo/start/ssr': typeof DemoStartSsrIndexRoute
+  '/demo/start/ssr/': typeof DemoStartSsrIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -221,7 +221,7 @@ export interface FileRouteTypes {
     | '/demo/guitars/$guitarId'
     | '/demo/start/api-request'
     | '/demo/start/server-funcs'
-    | '/demo/guitars'
+    | '/demo/guitars/'
     | '/demo/api/ai/chat'
     | '/demo/api/ai/image'
     | '/demo/api/ai/structured'
@@ -230,7 +230,7 @@ export interface FileRouteTypes {
     | '/demo/start/ssr/data-only'
     | '/demo/start/ssr/full-ssr'
     | '/demo/start/ssr/spa-mode'
-    | '/demo/start/ssr'
+    | '/demo/start/ssr/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -350,7 +350,7 @@ declare module '@tanstack/react-router' {
     '/demo/guitars/': {
       id: '/demo/guitars/'
       path: '/demo/guitars'
-      fullPath: '/demo/guitars'
+      fullPath: '/demo/guitars/'
       preLoaderRoute: typeof DemoGuitarsIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
@@ -392,7 +392,7 @@ declare module '@tanstack/react-router' {
     '/demo/start/ssr/': {
       id: '/demo/start/ssr/'
       path: '/demo/start/ssr'
-      fullPath: '/demo/start/ssr'
+      fullPath: '/demo/start/ssr/'
       preLoaderRoute: typeof DemoStartSsrIndexRouteImport
       parentRoute: typeof rootRouteImport
     }

examples/react/bundling-repro/src/routes/demo/store.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useStore } from '@tanstack/react-store'
 
-import { fullName, store } from '@/feat/demo-store'
+import { store } from '@/feat/demo-store'
 
 export const Route = createFileRoute('/demo/store')({
   component: DemoStore,
@@ -36,10 +36,11 @@ function LastName() {
 }
 
 function FullName() {
-  const fName = useStore(fullName)
+  const firstName = useStore(store, (state) => state.firstName)
+  const lastName = useStore(store, (state) => state.lastName)
   return (
     <div className="bg-white/10 rounded-lg px-4 py-2 outline-none ">
-      {fName}
+      {firstName} {lastName}
     </div>
   )
 }

examples/react/bundling-repro/vite.config.ts

@@ -24,9 +24,7 @@ const config = defineConfig({
     tailwindcss(),
     tanstackStart(),
     viteReact({
-      babel: {
-        plugins: ['babel-plugin-react-compiler'],
-      },
+      babel: {},
     }),
   ],
 })

examples/react/start/src/routeTree.gen.ts

@@ -67,7 +67,7 @@ export interface FileRoutesByFullPath {
   '/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute
   '/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute
   '/demo/start/ssr/spa-mode': typeof DemoStartSsrSpaModeRoute
-  '/demo/start/ssr': typeof DemoStartSsrIndexRoute
+  '/demo/start/ssr/': typeof DemoStartSsrIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -100,7 +100,7 @@ export interface FileRouteTypes {
     | '/demo/start/ssr/data-only'
     | '/demo/start/ssr/full-ssr'
     | '/demo/start/ssr/spa-mode'
-    | '/demo/start/ssr'
+    | '/demo/start/ssr/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -167,7 +167,7 @@ declare module '@tanstack/react-router' {
     '/demo/start/ssr/': {
       id: '/demo/start/ssr/'
       path: '/demo/start/ssr'
-      fullPath: '/demo/start/ssr'
+      fullPath: '/demo/start/ssr/'
       preLoaderRoute: typeof DemoStartSsrIndexRouteImport
       parentRoute: typeof rootRouteImport
     }

packages/devtools-utils/package.json

@@ -32,6 +32,10 @@
       }
     },
     "./solid": {
+      "workerd": {
+        "types": "./dist/solid/esm/index.d.ts",
+        "import": "./dist/solid/esm/server.js"
+      },
       "browser": {
         "development": {
           "types": "./dist/solid/esm/index.d.ts",
@@ -47,6 +51,12 @@
       "types": "./dist/solid/esm/index.d.ts",
       "import": "./dist/solid/esm/index.js"
     },
+    "./solid/class": {
+      "import": {
+        "types": "./dist/solid-class/esm/class.d.ts",
+        "default": "./dist/solid-class/esm/class.js"
+      }
+    },
     "./vue": {
       "import": {
         "types": "./dist/vue/esm/index.d.ts",
@@ -98,7 +108,7 @@
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
     "test:build": "publint --strict",
-    "build": "vite build && vite build --config vite.config.preact.ts && vite build --config vite.config.vue.ts && tsup "
+    "build": "vite build && vite build --config vite.config.preact.ts && vite build --config vite.config.vue.ts && vite build --config vite.config.solid-class.ts && tsup"
   },
   "devDependencies": {
     "tsup": "^8.5.0",

packages/devtools-utils/src/solid/class-mount-impl.tsx

@@ -0,0 +1,31 @@
+/** @jsxImportSource solid-js - we use Solid.js as JSX here */
+
+import { lazy } from 'solid-js'
+import { Portal, render } from 'solid-js/web'
+import type { JSX } from 'solid-js'
+
+export function __mountComponent(
+  el: HTMLElement,
+  theme: 'light' | 'dark',
+  importFn: () => Promise<{ default: () => JSX.Element }>,
+): () => void {
+  const Component = lazy(importFn)
+  const ThemeProvider = lazy(() =>
+    import('@tanstack/devtools-ui').then((m) => ({
+      default: m.ThemeContextProvider,
+    })),
+  )
+
+  return render(
+    () => (
+      <Portal mount={el}>
+        <div style={{ height: '100%' }}>
+          <ThemeProvider theme={theme}>
+            <Component />
+          </ThemeProvider>
+        </div>
+      </Portal>
+    ),
+    el,
+  )
+}