refactor from exports strategy to vite-env-only

Signed-off-by: Marc MacLeod <[email protected]>

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vitest.disableWorkspaceWarning": true
 }

examples/bun-react-router/package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@elysiajs/static": "1.1.1",
     "@ssrx/react": "latest",
-    "elysia": "1.1.12",
+    "elysia": "1.1.16",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "6.26.2"

examples/remix-vite/app/routes/wait.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { Suspense } from 'react';
 
 import { sleep } from '~/utils.ts';
@@ -63,7 +63,7 @@ export default function Wait() {
 }
 
 function useWaitQuery(props: { wait: number; defer?: boolean }) {
-  const query = useQuery({
+  const query = useSuspenseQuery({
     queryKey: ['wait', props.wait],
     meta: { deferStream: props.defer },
     queryFn: async () => {

examples/remix-vite/package.json

@@ -63,6 +63,7 @@
     "typescript": "5.6.2",
     "typescript-remix-routes-plugin": "1.0.1",
     "vite": "5.4.5",
+    "vite-env-only": "3.0.3",
     "vite-tsconfig-paths": "5.0.1"
   }
 }

examples/remix-vite/vite.config.ts

@@ -1,9 +1,10 @@
 import { vitePlugin as remix } from '@remix-run/dev';
 import { defineConfig } from 'vite';
+import { envOnlyMacros } from 'vite-env-only';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-  plugins: [tsconfigPaths(), remix()],
+  plugins: [envOnlyMacros(), tsconfigPaths(), remix()],
 
   ssr: {
     resolve: {

package.json

@@ -13,7 +13,7 @@
     "typecheck": "nx run-many -t typecheck",
     "lint": "nx run-many --target lint --all",
     "release": "yarn build && changeset publish",
-    "clean": "rimraf node_modules packages/**/dist examples/**/dist packages/**/node_modules examples/**/node_modules",
+    "clean": "rimraf **/dist **/node_modules",
     "dep-graph": "nx graph"
   },
   "resolutions": {

packages/plugin-react-router/package.json

@@ -20,6 +20,7 @@
   "exports": {
     ".": {
       "types": "./src/index.ts",
+      "development": "./src/index.ts",
       "bun": "./src/index.ts",
       "default": "./dist/index.js"
     }

packages/plugin-solid-router/package.json

@@ -17,6 +17,7 @@
   "exports": {
     ".": {
       "types": "./src/index.ts",
+      "development": "./src/index.ts",
       "bun": "./src/index.ts",
       "default": "./dist/index.js"
     }

packages/plugin-tanstack-query/package.json

@@ -17,6 +17,7 @@
   "exports": {
     ".": {
       "types": "./src/index.ts",
+      "development": "./src/index.ts",
       "bun": "./src/index.ts",
       "default": "./dist/index.js"
     }

packages/plugin-tanstack-router/package.json

@@ -17,11 +17,13 @@
   "exports": {
     ".": {
       "types": "./src/index.ts",
+      "development": "./src/index.ts",
       "bun": "./src/index.ts",
       "import": "./dist/index.js"
     },
     "./adapter": {
       "types": "./src/adapter.ts",
+      "development": "./src/adapter.ts",
       "bun": "./src/adapter.ts",
       "import": "./dist/adapter.js"
     }
@@ -36,6 +38,9 @@
   "peerDependencies": {
     "@tanstack/react-router": ">=1.57"
   },
+  "dependencies": {
+    "@ssrx/renderer": "^0.4.0"
+  },
   "devDependencies": {
     "@ssrx/vite": "^0.6.0",
     "@tanstack/react-router": "1.57.13",

packages/plugin-trpc-react/package.json

@@ -20,6 +20,7 @@
   "exports": {
     ".": {
       "types": "./src/index.ts",
+      "development": "./src/index.ts",
       "bun": "./src/index.ts",
       "default": "./dist/index.js"
     }

packages/plugin-unhead/package.json

@@ -17,6 +17,7 @@
   "exports": {
     ".": {
       "types": "./src/index.ts",
+      "development": "./src/index.ts",
       "bun": "./src/index.ts",
       "default": "./dist/index.js"
     }

packages/react/package.json

@@ -20,22 +20,14 @@
   ],
   "exports": {
     ".": {
-      "types": "./src/server/index.ts",
-      "bun": "./src/server/index.ts",
-      "node": "./dist/server/index.js",
-      "worker": "./dist/server/index.js",
-      "workerd": "./dist/server/index.js",
-      "deno": "./dist/server/index.js",
-      "edge": "./dist/server/index.js",
-      "default": "./dist/client/index.js"
-    },
-    "./client": {
-      "types": "./src/client/index.ts",
-      "bun": "./src/client/index.ts",
-      "default": "./dist/client/index.js"
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "bun": "./src/index.ts",
+      "default": "./dist/index.js"
     },
     "./server": {
       "types": "./src/server/index.ts",
+      "development": "./src/server/index.ts",
       "bun": "./src/server/index.ts",
       "default": "./dist/server/index.js"
     }
@@ -59,7 +51,8 @@
     "esbuild": "0.23.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rollup": "4.21.3",
-    "rollup-plugin-esbuild": "6.1.1"
+    "rollup": "4.22.5",
+    "rollup-plugin-esbuild": "6.1.1",
+    "vite-env-only": "3.0.3"
   }
 }

packages/react/rollup.config.mjs

@@ -2,7 +2,7 @@ import esbuild from 'rollup-plugin-esbuild';
 
 const bundle = config => ({
   ...config,
-  input: ['src/client/index.ts', 'src/server/index.ts'],
+  input: ['src/index.ts', 'src/server/index.ts'],
   external: id => !/^[./]/.test(id),
 });
 

packages/react/src/handler-client.ts

@@ -0,0 +1,14 @@
+import { type ClientHandlerOpts, type RenderPlugin, type SetOptional } from '@ssrx/renderer';
+import { createApp as baseCreateApp } from '@ssrx/renderer/client';
+import { clientOnly$ } from 'vite-env-only/macros';
+
+import { RootLayout } from './default-root.tsx';
+
+export const createAppClient = clientOnly$(_createAppClient);
+
+function _createAppClient<P extends RenderPlugin<any>[]>(opts: SetOptional<ClientHandlerOpts<P>, 'RootLayout'>) {
+  return baseCreateApp({
+    RootLayout,
+    ...opts,
+  });
+}

packages/react/src/handler-server.ts

@@ -0,0 +1,20 @@
+import { type RenderPlugin, type ServerHandlerOpts, type SetOptional } from '@ssrx/renderer';
+import { createApp as baseCreateApp } from '@ssrx/renderer/server';
+import { serverOnly$ } from 'vite-env-only/macros';
+
+import { RootLayout } from './default-root.tsx';
+import { renderToStreamServer } from './server/stream.ts';
+
+export const createAppServer = serverOnly$(_createAppServer);
+
+function _createAppServer<P extends RenderPlugin<any>[]>(
+  opts: SetOptional<ServerHandlerOpts<P>, 'renderer' | 'RootLayout'>,
+) {
+  return baseCreateApp({
+    RootLayout,
+    renderer: {
+      renderToStream: renderToStreamServer!,
+    },
+    ...opts,
+  });
+}

packages/react/src/index.ts

@@ -0,0 +1,7 @@
+import './namespace.ts';
+
+import { createAppClient } from './handler-client.ts';
+import { createAppServer } from './handler-server.ts';
+export { renderAssets } from './assets.tsx';
+
+export const createApp = (import.meta.env.SSR ? createAppServer : createAppClient)!;

packages/react/src/server/index.ts

@@ -1,5 +1 @@
-import '../namespace.ts';
-
-export { renderAssets } from '../assets.tsx';
-export { createApp } from './handler.ts';
-export { renderToStream } from './stream.ts';
+export { renderToStreamServer as renderToStream } from './stream.ts';

packages/react/src/server/stream.ts

@@ -1,4 +1,4 @@
-import type { RenderToStreamFn } from '@ssrx/renderer/server';
+import type { RenderToStreamFn } from '@ssrx/renderer';
 import { injectIntoStream } from '@ssrx/streaming';
 // @ts-expect-error no types
 import isbot from 'isbot-fast';
@@ -7,7 +7,7 @@ import rd from 'react-dom/server';
 // @ts-expect-error ignore
 import { renderToReadableStream as fallbackRenderToReadableStream } from 'react-dom/server.browser';
 
-export const renderToStream: RenderToStreamFn<RenderToReadableStreamOptions> = async ({
+export const renderToStreamServer: RenderToStreamFn<RenderToReadableStreamOptions> = async ({
   app,
   req,
   injectToStream,

packages/remix/package.json

@@ -20,24 +20,10 @@
   ],
   "exports": {
     ".": {
-      "types": "./src/server.tsx",
-      "bun": "./src/server.tsx",
-      "node": "./dist/server.js",
-      "worker": "./dist/server.js",
-      "workerd": "./dist/server.js",
-      "deno": "./dist/server.js",
-      "edge": "./dist/server.js",
-      "default": "./dist/client.js"
-    },
-    "./client": {
-      "types": "./src/client.tsx",
-      "bun": "./src/client.tsx",
-      "default": "./dist/client.js"
-    },
-    "./server": {
-      "types": "./src/server.tsx",
-      "bun": "./src/server.tsx",
-      "default": "./dist/server.js"
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "bun": "./src/index.ts",
+      "default": "./dist/index.js"
     }
   },
   "scripts": {
@@ -55,7 +41,8 @@
   "devDependencies": {
     "@remix-run/react": "2.12.0",
     "esbuild": "0.23.1",
-    "rollup": "4.21.3",
-    "rollup-plugin-esbuild": "6.1.1"
+    "rollup": "4.22.5",
+    "rollup-plugin-esbuild": "6.1.1",
+    "vite-env-only": "3.0.3"
   }
 }

packages/remix/rollup.config.mjs

@@ -2,7 +2,7 @@ import esbuild from 'rollup-plugin-esbuild';
 
 const bundle = config => ({
   ...config,
-  input: ['src/client.tsx', 'src/server.tsx'],
+  input: ['src/index.ts'],
   external: id => !/^[./]/.test(id),
 });
 

packages/remix/src/handler-client.tsx

@@ -0,0 +1,16 @@
+import type { RemixServerProps } from '@remix-run/react';
+import { RemixBrowser } from '@remix-run/react';
+import { type ClientHandlerOpts, type RenderPlugin, type SetOptional } from '@ssrx/renderer';
+import { createApp as baseCreateApp } from '@ssrx/renderer/client';
+import { clientOnly$ } from 'vite-env-only/macros';
+
+export const createAppClient = clientOnly$(_createAppClient);
+
+function _createAppClient<P extends RenderPlugin<any>[]>(
+  opts: SetOptional<ClientHandlerOpts<P>, 'appRenderer'> & Pick<RemixServerProps, 'abortDelay'>,
+) {
+  return baseCreateApp({
+    appRenderer: () => () => <RemixBrowser />,
+    ...opts,
+  });
+}

packages/remix/src/server.tsx → packages/remix/src/handler-server.tsx

@@ -1,19 +1,13 @@
 import type { RemixServerProps } from '@remix-run/react';
 import { RemixServer } from '@remix-run/react';
-import type { EntryContext } from '@remix-run/react/dist/entry';
 import { renderToStream } from '@ssrx/react/server';
-import type { RenderPlugin, ServerHandlerOpts, SetOptional } from '@ssrx/renderer/server';
+import type { RenderPlugin, ServerHandlerOpts, SetOptional } from '@ssrx/renderer';
 import { createApp as baseCreateApp } from '@ssrx/renderer/server';
+import { serverOnly$ } from 'vite-env-only/macros';
 
-declare global {
-  namespace SSRx {
-    interface ReqMeta {
-      entryContext: EntryContext;
-    }
-  }
-}
+export const createAppServer = serverOnly$(_createAppServer);
 
-export function createApp<P extends RenderPlugin<any>[]>(
+function _createAppServer<P extends RenderPlugin<any>[]>(
   opts: SetOptional<ServerHandlerOpts<P>, 'appRenderer' | 'renderer'> & Pick<RemixServerProps, 'abortDelay'> = {},
 ) {
   return baseCreateApp({

packages/remix/src/index.ts

@@ -0,0 +1,6 @@
+import './namespace.ts';
+
+import { createAppClient } from './handler-client.tsx';
+import { createAppServer } from './handler-server.tsx';
+
+export const createApp = (import.meta.env.SSR ? createAppServer : createAppClient)!;