fix: safe build for target ssr (#109)

- used tsup and new mapping as in query-devtools
https://github.com/TanStack/query/blob/main/packages/query-devtools/package.json
- eliminated browser only code for a server build, this makes sure
projects with server side rendering can safely execute this code

---------

Co-authored-by: Szymon Prusak <szymon.prusak@lastminute.com>

Author: sprusak

.changeset/puny-eels-boil.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': patch
+---
+
+Changed package.json exports to allow safe usage in ssr environments

.gitignore

@@ -55,3 +55,4 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
 .angular
+.nitro

examples/react/start/package.json

@@ -11,7 +11,8 @@
     "db:migrate": "prisma migrate dev --name init",
     "db:reset": " prisma migrate reset",
     "db:gen": "prisma generate",
-    "db:studio": "prisma studio"
+    "db:studio": "prisma studio",
+    "build": "vite build"
   },
   "dependencies": {
     "@prisma/client": "^6.13.0",

package.json

@@ -47,7 +47,7 @@
   },
   "size-limit": [
     {
-      "path": "packages/devtools/dist/esm/index.js",
+      "path": "packages/devtools/dist/index.js",
       "limit": "40 KB"
     },
     {

packages/devtools/package.json

@@ -18,16 +18,23 @@
     "devtools"
   ],
   "type": "module",
-  "types": "dist/esm/index.d.ts",
-  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
   "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      }
+    "browser": {
+      "development": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/dev.js"
+      },
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
-    "./package.json": "./package.json"
+    "node": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/server.js"
+    },
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.js"
   },
   "sideEffects": false,
   "engines": {
@@ -45,7 +52,7 @@
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
     "test:build": "publint --strict",
-    "build": "vite build"
+    "build": "tsup"
   },
   "dependencies": {
     "@solid-primitives/keyboard": "^1.2.8",
@@ -60,6 +67,8 @@
     "solid-js": ">=1.9.7"
   },
   "devDependencies": {
+    "tsup": "^8.5.0",
+    "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.11.6"
   }
 }

packages/devtools/src/core.tsx

@@ -61,6 +61,9 @@ export class TanStackDevtoolsCore {
   }
 
   mount<T extends HTMLElement>(el: T) {
+    //  tsup-preset-solid statically replaces this variable during build, which eliminates this code from server bundle
+    if (import.meta.env.SSR) return
+
     if (this.#isMounted) {
       throw new Error('Devtools is already mounted')
     }

packages/devtools/tsconfig.json

@@ -1,12 +1,6 @@
 {
   "extends": "../../tsconfig.json",
-  "include": [
-    "src",
-    "eslint.config.js",
-    "vite.config.ts",
-    "tests",
-    "src/server"
-  ],
+  "include": ["src", "*.config.*", "tests", "src/server"],
   "compilerOptions": {
     "jsxImportSource": "solid-js",
     "jsx": "preserve",

packages/devtools/tsup.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'tsup'
+import { generateTsupOptions, parsePresetOptions } from 'tsup-preset-solid'
+
+const preset_options = {
+  entries: {
+    entry: 'src/index.ts',
+    dev_entry: true,
+    server_entry: true,
+  },
+  cjs: false,
+  drop_console: true,
+}
+
+export default defineConfig(() => {
+  const parsed_data = parsePresetOptions(preset_options)
+  const tsup_options = generateTsupOptions(parsed_data)
+
+  return tsup_options
+})