feat: Add /ssr entrypoint to react pkg

.changeset/itchy-pumpkins-know.md

@@ -0,0 +1,12 @@
+---
+'@data-client/react': patch
+---
+
+Add /ssr entrypoint - eliminating the need for @data-client/ssr package completely
+
+```ts
+import {
+  createPersistedStore,
+  createServerDataComponent,
+} from '@data-client/react/ssr';
+```

docs/core/guides/ssr.md

@@ -40,7 +40,7 @@ export default function RootLayout({ children }) {
           <header>Title</header>
           <AsyncBoundary>{children}</AsyncBoundary>
           <footer></footer>
-        // highlight-next-line
+          // highlight-next-line
         </DataProvider>
       </body>
     </html>
@@ -92,7 +92,9 @@ class User extends Entity {
   id = '';
   username = '';
 
-  pk() { return this.id }
+  pk() {
+    return this.id;
+  }
 
   // highlight-next-line
   static key = 'User';
@@ -212,8 +214,6 @@ export default class MyDocument extends DataClientDocument {
 
 When implementing your own server using express.
 
-<PkgTabs pkgs="@data-client/ssr @data-client/redux redux" />
-
 ### Server side
 
 ```tsx
@@ -222,15 +222,16 @@ import { renderToPipeableStream } from 'react-dom/server';
 import {
   createPersistedStore,
   createServerDataComponent,
-} from '@data-client/ssr';
+} from '@data-client/react/ssr';
 
 const rootId = 'react-root';
 
 const app = express();
 app.get('/*', (req: any, res: any) => {
   const [ServerDataProvider, useReadyCacheState, controller] =
     createPersistedStore();
-  const ServerDataComponent = createServerDataComponent(useReadyCacheState);
+  const ServerDataComponent =
+    createServerDataComponent(useReadyCacheState);
 
   controller.fetch(NeededForPage, { id: 5 });
 
@@ -266,13 +267,13 @@ app.get('/*', (req: any, res: any) => {
 app.listen(3000, () => {
   console.log(`Listening at ${PORT}...`);
 });
-````
+```
 
 ### Client
 
 ```tsx
 import { hydrateRoot } from 'react-dom';
-import { awaitInitialData } from '@data-client/ssr';
+import { awaitInitialData } from '@data-client/react/ssr';
 
 const rootId = 'react-root';
 

packages/react/.gitignore

@@ -3,4 +3,5 @@
 /legacy
 /index.d.ts
 /next.d.ts
-/nextjs.d.ts
+/nextjs.d.ts
+/ssr.d.ts

packages/react/package.json

@@ -67,6 +67,9 @@
       "nextjs": [
         "lib/server/nextjs/index.d.ts"
       ],
+      "ssr": [
+        "lib/server/index.d.ts"
+      ],
       "*": [
         "lib/index.d.ts"
       ]
@@ -78,6 +81,9 @@
       "next": [
         "ts3.4/next/index.d.ts"
       ],
+      "ssr": [
+        "lib/server/index.d.ts"
+      ],
       "*": [
         "ts3.4/index.d.ts"
       ]
@@ -99,6 +105,10 @@
       "types": "./lib/server/nextjs/index.d.ts",
       "default": "./lib/server/nextjs/index.js"
     },
+    "./ssr": {
+      "types": "./lib/server/index.d.ts",
+      "default": "./lib/server/index.js"
+    },
     "./package.json": "./package.json"
   },
   "type": "module",

packages/react/rollup.config.js

@@ -62,6 +62,11 @@ if (process.env.BROWSERSLIST_ENV !== 'node12') {
     input: './lib/server/nextjs/index.d.ts',
     output: [{ file: 'nextjs.d.ts', format: 'es' }],
   });
+  configs.push({
+    ...typeConfig,
+    input: './lib/server/index.d.ts',
+    output: [{ file: 'ssr.d.ts', format: 'es' }],
+  });
 } else {
   // node-friendly commonjs build
   [

packages/react/src/server/createPersistedStore.tsx

@@ -0,0 +1,65 @@
+'use client';
+import {
+  Controller,
+  Manager,
+  NetworkManager,
+  State,
+  initialState,
+  createReducer,
+  applyManager,
+} from '@data-client/core';
+import { useSyncExternalStore } from 'react';
+
+import { ExternalDataProvider, PromiseifyMiddleware } from './redux/index.js';
+import { createStore, applyMiddleware } from './redux/redux.js';
+
+export default function createPersistedStore(managers?: Manager[]) {
+  const controller = new Controller();
+  managers = managers ?? [new NetworkManager()];
+  const nm: NetworkManager = managers.find(
+    m => m instanceof NetworkManager,
+  ) as any;
+  if (nm === undefined)
+    throw new Error('managers must include a NetworkManager');
+  const reducer = createReducer(controller);
+  const enhancer = applyMiddleware(
+    // redux 5's types are wrong and do not allow any return typing from next, which is incorrect.
+    // `next: (action: unknown) => unknown`: allows any action, but disallows all return types.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ...applyManager(managers, controller),
+    PromiseifyMiddleware,
+  );
+  const store = createStore(reducer, initialState as any, enhancer);
+  managers.forEach(manager => manager.init?.(store.getState()));
+
+  const selector = (state: any) => state;
+
+  const getState = () => selector(store.getState());
+  let firstRender = true;
+  function useReadyCacheState(): State<unknown> {
+    const inFlightFetches = nm.allSettled();
+    if (inFlightFetches) {
+      firstRender = false;
+      throw inFlightFetches;
+    }
+    if (firstRender) {
+      firstRender = false;
+      throw new Promise(resolve => setTimeout(resolve, 10));
+    }
+    return useSyncExternalStore(store.subscribe, getState, getState);
+  }
+
+  function ServerDataProvider({ children }: { children: React.ReactNode }) {
+    return (
+      <ExternalDataProvider
+        store={store}
+        selector={selector}
+        controller={controller}
+      >
+        {children}
+      </ExternalDataProvider>
+    );
+  }
+  return [ServerDataProvider, useReadyCacheState, controller, store] as const;
+}

packages/react/src/server/createServerDataComponent.tsx

@@ -0,0 +1,20 @@
+import type { State } from '@data-client/core';
+import { Suspense } from 'react';
+
+import ServerData from './ServerData.js';
+
+export default function createServerDataComponent(
+  useReadyCacheState: () => State<unknown>,
+  id = 'data-client-data',
+) {
+  const ServerDataAsync = ({ nonce }: { nonce?: string | undefined }) => {
+    const data = useReadyCacheState();
+    return <ServerData data={data} id={id} nonce={nonce} />;
+  };
+  const ServerDataComponent = ({ nonce }: { nonce?: string | undefined }) => (
+    <Suspense>
+      <ServerDataAsync nonce={nonce} />
+    </Suspense>
+  );
+  return ServerDataComponent;
+}

packages/react/src/server/index.ts

@@ -0,0 +1,9 @@
+Object.hasOwn =
+  Object.hasOwn ||
+  /* istanbul ignore next */ function hasOwn(it, key) {
+    return Object.prototype.hasOwnProperty.call(it, key);
+  };
+export { default as createPersistedStore } from './createPersistedStore.js';
+export * from './getInitialData.js';
+export { default as createServerDataComponent } from './createServerDataComponent.js';
+export { default as ServerData } from './ServerData.js';

scripts/copywebsitetypes.sh

@@ -12,6 +12,7 @@ cp ./packages/rest/next.d.ts ./website/src/components/Playground/editor-types/@d
 cp ./packages/core/next.d.ts ./website/src/components/Playground/editor-types/@data-client/core/next.d.ts
 cp ./packages/react/next.d.ts ./website/src/components/Playground/editor-types/@data-client/react/next.d.ts
 cp ./packages/react/nextjs.d.ts ./website/src/components/Playground/editor-types/@data-client/react/nextjs.d.ts
+cp ./packages/react/ssr.d.ts ./website/src/components/Playground/editor-types/@data-client/react/ssr.d.ts
 cp ./node_modules/@types/react/index.d.ts ./website/src/components/Playground/editor-types/react.d.ts
 rm ./website/src/components/Playground/editor-types/globals.d.ts
 yarn run rollup --config ./scripts/globals.rollup.config.js

website/src/components/Playground/editor-types/@data-client/react/ssr.d.ts

@@ -0,0 +1,24 @@
+import * as _data_client_core from '@data-client/core';
+import { Manager, State, Controller } from '@data-client/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function createPersistedStore(managers?: Manager[]): readonly [({ children }: {
+    children: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element, () => State<unknown>, Controller<_data_client_core.DataClientDispatch>, undefined<State<unknown>, _data_client_core.ActionTypes, unknown> & {
+    dispatch: unknown;
+}]
+
+declare const awaitInitialData: (id?: string) => Promise<any>;
+declare const getInitialData: (id?: string) => any;
+
+declare function createServerDataComponent(useReadyCacheState: () => State<unknown>, id?: string): ({ nonce }: {
+    nonce?: string | undefined;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const ServerData: ({ data, nonce, id, }: {
+    data: State<unknown>;
+    id?: string;
+    nonce?: string | undefined;
+}) => react_jsx_runtime.JSX.Element | null;
+
+export { ServerData, awaitInitialData, createPersistedStore, createServerDataComponent, getInitialData };