feat: make direct imports production-safe (#8)

Author: birkskyum

.changeset/safe-production-imports.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/start-devtools": patch
+---
+
+Make direct imports production-safe with a no-op default export and development-only browser and server implementations. Register server-function observers from the browser entry.

README.md

@@ -18,10 +18,11 @@ import { DevToolbar } from "@solidjs/start-devtools";
 </DevToolbar>;
 ```
 
-For authored server and client entries, render `DevToolbar` around the app in a shared
-document or root component. The package selects an SSR-safe build on the server, so the
-same component provides the development error boundary on both sides.
+For custom server and client entries, render `DevToolbar` around the app in a shared
+document or root component. In development, the package selects the browser or SSR build
+for the current environment. In production, it becomes a children-only passthrough and
+does not include the toolbar.
 
-The package is intended for development and should not be imported into production entries.
+The same import is safe in development and production entries.
 
 For component and reactivity inspection, see [Solid Devtools](https://github.com/thetarnav/solid-devtools).

package.json

@@ -11,11 +11,14 @@
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "worker": "./dist/server.js",
-      "browser": "./dist/index.js",
-      "deno": "./dist/server.js",
-      "node": "./dist/server.js",
-      "import": "./dist/index.js"
+      "development": {
+        "worker": "./dist/server.js",
+        "browser": "./dist/index.js",
+        "deno": "./dist/server.js",
+        "node": "./dist/server.js",
+        "import": "./dist/index.js"
+      },
+      "default": "./dist/noop.js"
     }
   },
   "scripts": {

rollup.config.js

@@ -105,4 +105,11 @@ export default [
     generate: 'ssr',
     server: true,
   }),
+  config({
+    input: 'src/noop.ts',
+    entryFileNames: 'noop.js',
+    chunkFileNames: 'noop-chunks/[name]-[hash].js',
+    generate: 'ssr',
+    server: true,
+  }),
 ];

src/exports.test.ts

@@ -0,0 +1,25 @@
+import { execFileSync } from 'node:child_process';
+import { describe, expect, it } from 'vitest';
+
+function resolvePackage(...conditions: string[]): string {
+  return execFileSync(
+    process.execPath,
+    [
+      ...conditions.map((condition) => `--conditions=${condition}`),
+      '--input-type=module',
+      '--eval',
+      `console.log(import.meta.resolve('@solidjs/start-devtools'))`,
+    ],
+    { encoding: 'utf-8' },
+  ).trim();
+}
+
+describe('package exports', () => {
+  it('uses the no-op build by default', () => {
+    expect(resolvePackage()).toMatch(/\/dist\/noop\.js$/);
+  });
+
+  it('uses the server build for development in Node', () => {
+    expect(resolvePackage('development')).toMatch(/\/dist\/server\.js$/);
+  });
+});

src/index.tsx

@@ -1,11 +1,18 @@
 import { render } from '@solidjs/web';
-import { pushServerFunctionCall } from './dev-toolbar/functions/tracker.js';
-import { DevToolbar } from './dev-toolbar/index.js';
+import * as serverFunctions from '@solidjs/web/server-functions';
+import {
+  pushServerFunctionCall,
+  type ServerFunctionCall,
+} from './dev-toolbar/functions/tracker.js';
+import { DevToolbar, type DevToolbarProps } from './dev-toolbar/index.js';
 
 let dispose: (() => void) | undefined;
 let frame: number | undefined;
 
-export { DevToolbar, pushServerFunctionCall };
+export { DevToolbar, type DevToolbarProps, pushServerFunctionCall, type ServerFunctionCall };
+
+const observe = Reflect.get(serverFunctions, 'observeServerFunctionCalls');
+if (typeof observe === 'function') observe(pushServerFunctionCall);
 
 export function mountDevToolbar(): () => void {
   if (dispose) return dispose;

src/noop.ts

@@ -0,0 +1,14 @@
+import type { ServerFunctionCall } from './dev-toolbar/functions/tracker.js';
+import type { DevToolbarProps } from './dev-toolbar/index.js';
+
+export type { DevToolbarProps, ServerFunctionCall };
+
+export function DevToolbar(props: DevToolbarProps) {
+  return props.children;
+}
+
+export function mountDevToolbar(): () => void {
+  return () => {};
+}
+
+export function pushServerFunctionCall(_event: ServerFunctionCall): void {}

src/server.tsx

@@ -1,7 +1,10 @@
-import { pushServerFunctionCall } from './dev-toolbar/functions/tracker.js';
-import { DevToolbar } from './dev-toolbar/index.js';
+import {
+  pushServerFunctionCall,
+  type ServerFunctionCall,
+} from './dev-toolbar/functions/tracker.js';
+import { DevToolbar, type DevToolbarProps } from './dev-toolbar/index.js';
 
-export { DevToolbar, pushServerFunctionCall };
+export { DevToolbar, type DevToolbarProps, pushServerFunctionCall, type ServerFunctionCall };
 
 export function mountDevToolbar(): () => void {
   return () => {};