Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(rsc): Extract importRsdwServer() and move type assertions to utils #11688

Merged
merged 2 commits into from
Oct 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 3 additions & 19 deletions packages/router/src/rsc/clientSsr.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
import path from 'node:path'

import type { default as RSDWClientModule } from 'react-server-dom-webpack/client.edge'
import type { default as RSDWServerModule } from 'react-server-dom-webpack/server.edge'

import { getPaths } from '@redwoodjs/project-config'

import { moduleMap } from './ssrModuleMap.js'
import { importRsdwClient, importReact } from './utils.js'
import { importRsdwClient, importRsdwServer, importReact } from './utils.js'
import { makeFilePath } from './utils.js'

type RSDWClientType = typeof RSDWClientModule
type RSDWServerType = typeof RSDWServerModule

async function getEntries() {
const entriesPath = getPaths().web.distRscEntries
const entries = await import(makeFilePath(entriesPath))
Expand Down Expand Up @@ -110,17 +104,7 @@ export async function renderRoutesSsr(pathname: string) {
)

const { createElement } = await importReact()

// We need to do this weird import dance because we need to import a version
// of react-server-dom-webpack/server.edge that has been built with the
// `react-server` condition. If we just did a regular import, we'd get the
// generic version in node_modules, and it'd throw an error about not being
// run in an environment with the `react-server` condition.
const dynamicImport = ''
const { renderToReadableStream }: RSDWServerType = await import(
/* @vite-ignore */
dynamicImport + 'react-server-dom-webpack/server.edge'
)
const { renderToReadableStream } = await importRsdwServer()

console.log('clientSsr.ts right before renderToReadableStream')
// We're in clientSsr.ts, but we're supposed to be pretending we're in the
Expand All @@ -132,7 +116,7 @@ export async function renderRoutesSsr(pathname: string) {
// react-server-dom-webpack/client.edge that uses the same bundled version
// of React as all the client components. Also see comment in
// streamHelpers.ts about the rd-server import for some more context
const { createFromReadableStream }: RSDWClientType = await importRsdwClient()
const { createFromReadableStream } = await importRsdwClient()

// Here we use `createFromReadableStream`, which is equivalent to
// `createFromFetch` as used in the browser
Expand Down
23 changes: 20 additions & 3 deletions packages/router/src/rsc/utils.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import path from 'node:path'
import { pathToFileURL } from 'node:url'

import type { default as RSDWClientModule } from 'react-server-dom-webpack/client.edge'
import type { default as RSDWServerModule } from 'react-server-dom-webpack/server.edge'

import { getPaths } from '@redwoodjs/project-config'

type RSDWClientType = typeof RSDWClientModule
type RSDWServerType = typeof RSDWServerModule

export function makeFilePath(path: string) {
return pathToFileURL(path).href
}

/**
*
* See vite/streamHelpers.ts.
*
* This function ensures we load the same version of rsdw_client to prevent multiple instances of React
Expand All @@ -21,16 +26,28 @@ export async function importReact() {
}

/**
*
* See vite/streamHelpers.ts.
*
* This function ensures we load the same version of rsdw_client to prevent multiple instances of React
*/
export async function importRsdwClient() {
export async function importRsdwClient(): Promise<RSDWClientType> {
const distSsr = getPaths().web.distSsr
const rsdwClientPath = makeFilePath(
path.join(distSsr, '__rwjs__rsdw-client.mjs'),
)

return (await import(rsdwClientPath)).default
}

export async function importRsdwServer(): Promise<RSDWServerType> {
// We need to do this weird import dance because we need to import a version
// of react-server-dom-webpack/server.edge that has been built with the
// `react-server` condition. If we just did a regular import, we'd get the
// generic version in node_modules, and it'd throw an error about not being
// run in an environment with the `react-server` condition.
const dynamicImport = ''
return import(
/* @vite-ignore */
dynamicImport + 'react-server-dom-webpack/server.edge'
)
}
Loading