-
Notifications
You must be signed in to change notification settings - Fork 46.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Flight Fixture] Show SSR Support with CSS (#26263)
Builds on #26257. To do this we need access to a manifest for which scripts and CSS are used for each "page" (entrypoint). The initial script to bootstrap the app is inserted with `bootstrapScripts`. Subsequent content are loaded using the chunks mechanism built-in. The stylesheets for each pages are prepended to each RSC payload and rendered using Float. This doesn't yet support styles imported in components that are also SSR:ed nor imported through Server Components. That's more complex and not implemented in the node loader. HMR doesn't work after reloads right now because the SSR renderer isn't hot reloaded because there's no idiomatic way to hot reload ESM modules in Node.js yet. Without killing the HMR server. This leads to hydration mismatches when reloading the page after a hot reload. Notably this doesn't show serializing the stream through the HTML like real implementations do. This will lead to possible hydration mismatches based on the data. However, manually serializing the stream as a string isn't exactly correct due to binary data. It's not the idiomatic way this is supposed to work. This will all be built-in which will make this automatic in the future.
- Loading branch information
1 parent
40755c0
commit 67a61d5
Showing
15 changed files
with
312 additions
and
183 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 |
---|---|---|
|
@@ -10,7 +10,6 @@ | |
|
||
# production | ||
/build | ||
/dist | ||
.eslintcache | ||
|
||
# misc | ||
|
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,51 @@ | ||
import babel from '@babel/core'; | ||
|
||
const babelOptions = { | ||
babelrc: false, | ||
ignore: [/\/(build|node_modules)\//], | ||
plugins: [ | ||
'@babel/plugin-syntax-import-meta', | ||
'@babel/plugin-transform-react-jsx', | ||
], | ||
}; | ||
|
||
export async function load(url, context, defaultLoad) { | ||
const {format} = context; | ||
const result = await defaultLoad(url, context, defaultLoad); | ||
if (result.format === 'module') { | ||
const opt = Object.assign({filename: url}, babelOptions); | ||
const newResult = await babel.transformAsync(result.source, opt); | ||
if (!newResult) { | ||
if (typeof result.source === 'string') { | ||
return result; | ||
} | ||
return { | ||
source: Buffer.from(result.source).toString('utf8'), | ||
format: 'module', | ||
}; | ||
} | ||
return {source: newResult.code, format: 'module'}; | ||
} | ||
return defaultLoad(url, context, defaultLoad); | ||
} | ||
|
||
async function babelTransformSource(source, context, defaultTransformSource) { | ||
const {format} = context; | ||
if (format === 'module') { | ||
const opt = Object.assign({filename: context.url}, babelOptions); | ||
const newResult = await babel.transformAsync(source, opt); | ||
if (!newResult) { | ||
if (typeof source === 'string') { | ||
return {source}; | ||
} | ||
return { | ||
source: Buffer.from(source).toString('utf8'), | ||
}; | ||
} | ||
return {source: newResult.code}; | ||
} | ||
return defaultTransformSource(source, context, defaultTransformSource); | ||
} | ||
|
||
export const transformSource = | ||
process.version < 'v16' ? babelTransformSource : undefined; |
File renamed without changes.
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 was deleted.
Oops, something went wrong.
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
Oops, something went wrong.