From a998a0b31c9e2d008eb678f175a262af561d2b42 Mon Sep 17 00:00:00 2001 From: Nathaniel Tucker Date: Thu, 13 Jun 2024 07:33:48 -0700 Subject: [PATCH] feat: Add @data-client/react/nextjs entrypoint (#3093) --- .changeset/brave-bottles-talk.md | 21 + docs/core/guides/ssr.md | 2 +- docs/core/shared/_installation.mdx | 5 +- packages/react/.gitignore | 1 + packages/react/package.json | 7 + packages/react/rollup.config.js | 5 + packages/react/src/server/ServerData.tsx | 31 + packages/react/src/server/getInitialData.ts | 52 ++ .../nextjs/DataProvider/DataProvider.tsx | 29 + .../DataProvider/ServerDataComponent.tsx | 17 + .../DataProvider/createPersistedStore.ts | 8 + .../createPersistedStoreClient.tsx | 32 + .../createPersistedStoreServer.tsx | 85 +++ packages/react/src/server/nextjs/index.ts | 1 + .../server/redux/ExternalCacheProvider.tsx | 86 +++ .../src/server/redux/PromiseifyMiddleware.ts | 11 + packages/react/src/server/redux/index.ts | 6 + .../react/src/server/redux/mapMiddleware.ts | 16 + packages/react/src/server/redux/redux.d.ts | 717 ++++++++++++++++++ packages/react/src/server/redux/redux.js | 334 ++++++++ scripts/copywebsitetypes.sh | 1 + .../editor-types/@data-client/react.d.ts | 4 +- .../@data-client/react/nextjs.d.ts | 24 + 23 files changed, 1488 insertions(+), 7 deletions(-) create mode 100644 .changeset/brave-bottles-talk.md create mode 100644 packages/react/src/server/ServerData.tsx create mode 100644 packages/react/src/server/getInitialData.ts create mode 100644 packages/react/src/server/nextjs/DataProvider/DataProvider.tsx create mode 100644 packages/react/src/server/nextjs/DataProvider/ServerDataComponent.tsx create mode 100644 packages/react/src/server/nextjs/DataProvider/createPersistedStore.ts create mode 100644 packages/react/src/server/nextjs/DataProvider/createPersistedStoreClient.tsx create mode 100644 packages/react/src/server/nextjs/DataProvider/createPersistedStoreServer.tsx create mode 100644 packages/react/src/server/nextjs/index.ts create mode 100644 packages/react/src/server/redux/ExternalCacheProvider.tsx create mode 100644 packages/react/src/server/redux/PromiseifyMiddleware.ts create mode 100644 packages/react/src/server/redux/index.ts create mode 100644 packages/react/src/server/redux/mapMiddleware.ts create mode 100644 packages/react/src/server/redux/redux.d.ts create mode 100644 packages/react/src/server/redux/redux.js create mode 100644 website/src/components/Playground/editor-types/@data-client/react/nextjs.d.ts diff --git a/.changeset/brave-bottles-talk.md b/.changeset/brave-bottles-talk.md new file mode 100644 index 00000000000..d5528ed8f58 --- /dev/null +++ b/.changeset/brave-bottles-talk.md @@ -0,0 +1,21 @@ +--- +'@data-client/react': patch +--- + +Add /nextjs entrypoint - eliminating the need for @data-client/ssr package + +```tsx +import { DataProvider } from '@data-client/react/nextjs'; + +export default function RootLayout({ children }) { + return ( + + + + {children} + + + + ); +} +``` \ No newline at end of file diff --git a/docs/core/guides/ssr.md b/docs/core/guides/ssr.md index c87a3163f97..60410c47f53 100644 --- a/docs/core/guides/ssr.md +++ b/docs/core/guides/ssr.md @@ -28,7 +28,7 @@ performance improvements, as well as dynamic and nested routing. Place [DataProvider](https://dataclient.io/docs/api/DataProvider) in your [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) ```tsx title="app/layout.tsx" -import { DataProvider } from '@data-client/ssr/nextjs'; +import { DataProvider } from '@data-client/react/nextjs'; import { AsyncBoundary } from '@data-client/react'; export default function RootLayout({ children }) { diff --git a/docs/core/shared/_installation.mdx b/docs/core/shared/_installation.mdx index 5ddf3e6ccee..200d3c4ab5d 100644 --- a/docs/core/shared/_installation.mdx +++ b/docs/core/shared/_installation.mdx @@ -67,15 +67,12 @@ Alternatively [integrate state with redux](../guides/redux.md) - -

Full NextJS Guide

```tsx title="app/layout.tsx" -import { DataProvider } from '@data-client/ssr/nextjs'; -import { AsyncBoundary } from '@data-client/react'; +import { DataProvider } from '@data-client/react/nextjs'; export default function RootLayout({ children }) { return ( diff --git a/packages/react/.gitignore b/packages/react/.gitignore index 94450d85e37..b63ff9a6b10 100644 --- a/packages/react/.gitignore +++ b/packages/react/.gitignore @@ -3,3 +3,4 @@ /legacy /index.d.ts /next.d.ts +/nextjs.d.ts \ No newline at end of file diff --git a/packages/react/package.json b/packages/react/package.json index 666e550b0bb..f2d3905786b 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -64,6 +64,9 @@ "next": [ "lib/next/index.d.ts" ], + "nextjs": [ + "lib/server/nextjs/index.d.ts" + ], "*": [ "lib/index.d.ts" ] @@ -92,6 +95,10 @@ "require": "./dist/next.js", "default": "./lib/next/index.js" }, + "./nextjs": { + "types": "./lib/server/nextjs/index.d.ts", + "default": "./lib/server/nextjs/index.js" + }, "./package.json": "./package.json" }, "type": "module", diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js index 493cc6f9dc3..1a510dec0fa 100644 --- a/packages/react/rollup.config.js +++ b/packages/react/rollup.config.js @@ -57,6 +57,11 @@ if (process.env.BROWSERSLIST_ENV !== 'node12') { }); configs.push(typeConfig); configs.push(typeConfigNext); + configs.push({ + ...typeConfig, + input: './lib/server/nextjs/index.d.ts', + output: [{ file: 'nextjs.d.ts', format: 'es' }], + }); } else { // node-friendly commonjs build [ diff --git a/packages/react/src/server/ServerData.tsx b/packages/react/src/server/ServerData.tsx new file mode 100644 index 00000000000..2b55fac0db2 --- /dev/null +++ b/packages/react/src/server/ServerData.tsx @@ -0,0 +1,31 @@ +import type { State } from '@data-client/core'; + +export const ServerData = ({ + data, + nonce, + id = 'data-client-data', +}: { + data: State; + id?: string; + nonce?: string | undefined; +}) => { + try { + const encoded = JSON.stringify(data); + return ( +