-
-
Notifications
You must be signed in to change notification settings - Fork 93
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add /ssr entrypoint to react pkg
- Loading branch information
Showing
9 changed files
with
133 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'; | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,4 +3,5 @@ | |
/legacy | ||
/index.d.ts | ||
/next.d.ts | ||
/nextjs.d.ts | ||
/nextjs.d.ts | ||
/ssr.d.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters