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.

Sign up for GitHub

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

Jump to bottom

fix(rsc): Load all css links to support css with rsc #10544

Merged
merged 8 commits into from
May 11, 2024
Merged

fix(rsc): Load all css links to support css with rsc #10544

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1ac0e30
get it working
Josh-Walker-GM May 7, 2024
71cd535
re-enable smoke tests
Josh-Walker-GM May 7, 2024
1b0329d
remove unused test
Josh-Walker-GM May 7, 2024
5c438f3
Merge remote-tracking branch 'origin/main' into jgmw/rsc-css-inject-t…
Josh-Walker-GM May 7, 2024
07e199c
minor refactoring
Josh-Walker-GM May 7, 2024
9c6684b
Make existingLinks optional
Tobbe May 11, 2024
5b3f87f
add note in code
Josh-Walker-GM May 11, 2024
027d22e
Merge branch 'main' into jgmw/rsc-css-inject-to-document
Josh-Walker-GM May 11, 2024
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
4 changes: 1 addition & 3 deletions packages/vite/src/buildRscClientAndServer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ import { rscBuildRwEnvVars } from './rsc/rscBuildRwEnvVars.js'

export const buildRscClientAndServer = async () => {
// Analyze all files and generate a list of RSCs and RSFs
const { clientEntryFiles, serverEntryFiles, componentImportMap } =
await rscBuildAnalyze()
const { clientEntryFiles, serverEntryFiles } = await rscBuildAnalyze()

// Generate the client bundle
const clientBuildOutput = await rscBuildClient(clientEntryFiles)
Expand All @@ -18,7 +17,6 @@ export const buildRscClientAndServer = async () => {
clientEntryFiles,
serverEntryFiles,
{},
componentImportMap,
)

// Copy CSS assets from server to client
Expand Down
8 changes: 7 additions & 1 deletion packages/vite/src/clientSsr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type { default as RSDWServerModule } from 'react-server-dom-webpack/serve
import { getPaths } from '@redwoodjs/project-config'

import { StatusError } from './lib/StatusError.js'
import { getRscStylesheetLinkGenerator } from './rsc/rscCss.js'
import { moduleMap } from './streaming/ssrModuleMap.js'
import { importModule } from './streaming/streamHelpers.js'
import { makeFilePath } from './utils.js'
Expand Down Expand Up @@ -97,6 +98,8 @@ export function renderFromDist<TProps extends Record<string, any>>(
) {
console.log('renderFromDist rscId', rscId)

const cssLinks = getRscStylesheetLinkGenerator([])()

// Create temporary client component that wraps the component (Page, most
// likely) returned by the `createFromReadableStream` call.
const SsrComponent = async (props: TProps) => {
Expand Down Expand Up @@ -153,7 +156,10 @@ export function renderFromDist<TProps extends Record<string, any>>(
const stream = renderToReadableStream(
// createElement(layout, undefined, createElement(page, props)),
// @ts-expect-error - WIP
createElement(ServerEntry, { location: { pathname: rscId } }),
createElement(ServerEntry, {
location: { pathname: rscId },
css: cssLinks,
}),
Comment on lines +159 to +162
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really nice implementation 🥇

Copy link
Collaborator Author

@Josh-Walker-GM Josh-Walker-GM May 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! The way that Tobbe and Danny laid the groundwork here made it somewhat easy to pass the collected css links through and have them loaded.

bundlerConfig,
)

Expand Down
Loading
Loading