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

Turbopack: Allow client components from foreign code in app routes #64751

Merged
merged 5 commits into from Apr 26, 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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 2 additions & 9 deletions packages/next-swc/crates/next-core/src/next_edge/context.rs
Expand Up @@ -108,15 +108,8 @@ pub async fn get_edge_resolve_options_context(
.map(ToString::to_string),
);

match ty {
ServerContextType::AppRSC { .. } => custom_conditions.push("react-server".to_string()),
ServerContextType::AppRoute { .. }
| ServerContextType::Pages { .. }
| ServerContextType::PagesData { .. }
| ServerContextType::PagesApi { .. }
| ServerContextType::AppSSR { .. }
| ServerContextType::Middleware { .. }
| ServerContextType::Instrumentation { .. } => {}
if ty.supports_react_server() {
custom_conditions.push("react-server".to_string());
};

let resolve_options_context = ResolveOptionsContext {
Expand Down
Expand Up @@ -728,7 +728,7 @@ async fn rsc_aliases(
}

if runtime == NextRuntime::Edge {
if matches!(ty, ServerContextType::AppRSC { .. }) {
if ty.supports_react_server() {
alias["react"] = format!("next/dist/compiled/react{react_channel}/react.react-server");
alias["react-dom"] =
format!("next/dist/compiled/react-dom{react_channel}/react-dom.react-server");
Expand Down
41 changes: 24 additions & 17 deletions packages/next-swc/crates/next-core/src/next_server/context.rs
Expand Up @@ -98,6 +98,17 @@ pub enum ServerContextType {
Instrumentation,
}

impl ServerContextType {
pub fn supports_react_server(&self) -> bool {
matches!(
self,
ServerContextType::AppRSC { .. }
| ServerContextType::AppRoute { .. }
| ServerContextType::PagesApi { .. }
)
}
}

#[turbo_tasks::function]
pub async fn get_server_resolve_options_context(
project_path: Vc<FileSystemPath>,
Expand Down Expand Up @@ -151,18 +162,10 @@ pub async fn get_server_resolve_options_context(
.map(ToString::to_string),
);

match ty {
ServerContextType::AppRSC { .. }
| ServerContextType::AppRoute { .. }
| ServerContextType::PagesApi { .. }
| ServerContextType::Middleware { .. } => {
custom_conditions.push("react-server".to_string())
}
ServerContextType::Pages { .. }
| ServerContextType::PagesData { .. }
| ServerContextType::AppSSR { .. }
| ServerContextType::Instrumentation { .. } => {}
if ty.supports_react_server() {
custom_conditions.push("react-server".to_string());
};

let external_cjs_modules_plugin = ExternalCjsModulesResolvePlugin::new(
project_path,
project_path.root(),
Expand Down Expand Up @@ -324,7 +327,7 @@ pub async fn get_server_module_options_context(
let mut foreign_next_server_rules =
get_next_server_transforms_rules(next_config, ty.into_value(), mode, true, next_runtime)
.await?;
let internal_custom_rules = get_next_server_internal_transforms_rules(
let mut internal_custom_rules = get_next_server_internal_transforms_rules(
ty.into_value(),
next_config.mdx_rs().await?.is_some(),
)
Expand Down Expand Up @@ -614,10 +617,16 @@ pub async fn get_server_module_options_context(
ecmascript_client_reference_transition_name,
} => {
next_server_rules.extend(source_transform_rules);

let mut common_next_server_rules = vec![
get_next_react_server_components_transform_rule(next_config, true, Some(app_dir))
.await?,
];

if let Some(ecmascript_client_reference_transition_name) =
ecmascript_client_reference_transition_name
{
next_server_rules.push(get_ecma_transform_rule(
common_next_server_rules.push(get_ecma_transform_rule(
Box::new(ClientDirectiveTransformer::new(
ecmascript_client_reference_transition_name,
)),
Expand All @@ -626,10 +635,8 @@ pub async fn get_server_module_options_context(
));
}

next_server_rules.push(
get_next_react_server_components_transform_rule(next_config, true, Some(app_dir))
.await?,
);
next_server_rules.extend(common_next_server_rules.iter().cloned());
internal_custom_rules.extend(common_next_server_rules);
Copy link
Contributor

Choose a reason for hiding this comment

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

this rule combination & ordering game gets more and more interesting 😅


let module_options_context = ModuleOptionsContext {
esm_url_rewrite_behavior: Some(UrlRewriteBehavior::Full),
Expand Down
Expand Up @@ -14,6 +14,7 @@ describe('referencing a client component in an app route', () => {
expect(JSON.parse(await next.render('/runtime'))).toEqual({
// Turbopack's proxy components are functions
clientComponent: process.env.TURBOPACK ? 'function' : 'object',
myModuleClientComponent: process.env.TURBOPACK ? 'function' : 'object',
})
})
})
@@ -1,8 +1,10 @@
import { NextResponse } from 'next/server'
import { ClientComponent } from '../../ClientComponent'
import { MyModuleClientComponent } from 'my-module/MyModuleClientComponent'

export function GET() {
return NextResponse.json({
clientComponent: typeof ClientComponent,
myModuleClientComponent: typeof MyModuleClientComponent,
})
}

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.