Implement SWC transformer for server and client graphs

packages/next-swc/crates/core/Cargo.toml

@@ -40,6 +40,7 @@ swc_core = { version = "0.22.4", features = [
   "__ecma_transforms",
   "ecma_transforms_react",
   "ecma_transforms_typescript",
+  "ecma_transforms_optimization",
   "ecma_parser",
   "ecma_parser_typescript",
   "cached",

packages/next-swc/crates/core/src/lib.rs

@@ -54,6 +54,7 @@ pub mod next_dynamic;
 pub mod next_ssg;
 pub mod page_config;
 pub mod react_remove_properties;
+pub mod react_server_components;
 #[cfg(not(target_arch = "wasm32"))]
 pub mod relay;
 pub mod remove_console;
@@ -84,6 +85,9 @@ pub struct TransformOptions {
     #[serde(default)]
     pub is_server: bool,
 
+    #[serde(default)]
+    pub server_components: Option<react_server_components::Config>,
+
     #[serde(default)]
     pub styled_components: Option<styled_components::Config>,
 
@@ -113,7 +117,10 @@ pub fn custom_before_pass<'a, C: Comments + 'a>(
     opts: &'a TransformOptions,
     comments: C,
     eliminated_packages: Rc<RefCell<FxHashSet<String>>>,
-) -> impl Fold + 'a {
+) -> impl Fold + 'a
+where
+    C: Clone,
+{
     #[cfg(target_arch = "wasm32")]
     let relay_plugin = noop();
 
@@ -132,6 +139,15 @@ pub fn custom_before_pass<'a, C: Comments + 'a>(
 
     chain!(
         disallow_re_export_all_in_page::disallow_re_export_all_in_page(opts.is_page_file),
+        match &opts.server_components {
+            Some(config) if config.truthy() =>
+                Either::Left(react_server_components::server_components(
+                    file.name.clone(),
+                    config.clone(),
+                    comments.clone(),
+                )),
+            _ => Either::Right(noop()),
+        },
         styled_jsx::styled_jsx(cm.clone(), file.name.clone()),
         hook_optimizer::hook_optimizer(),
         match &opts.styled_components {

packages/next-swc/crates/core/src/react_server_components.rs

@@ -0,0 +1,338 @@
+use serde::Deserialize;
+
+use swc_core::{
+    common::{
+        comments::{Comment, CommentKind, Comments},
+        errors::HANDLER,
+        FileName, Span, DUMMY_SP,
+    },
+    ecma::ast::*,
+    ecma::utils::{prepend_stmts, quote_ident, quote_str, ExprFactory},
+    ecma::visit::{as_folder, noop_visit_mut_type, Fold, VisitMut, VisitMutWith},
+};
+
+#[derive(Clone, Debug, Deserialize)]
+#[serde(untagged)]
+pub enum Config {
+    All(bool),
+    WithOptions(Options),
+}
+
+impl Config {
+    pub fn truthy(&self) -> bool {
+        match self {
+            Config::All(b) => *b,
+            Config::WithOptions(_) => true,
+        }
+    }
+}
+
+#[derive(Clone, Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct Options {
+    pub is_server: bool,
+}
+
+struct ReactServerComponents<'a, C: Comments> {
+    is_server: bool,
+    filepath: String,
+    comments: C,
+    invalid_server_imports: Vec<&'a str>,
+    invalid_client_imports: Vec<&'a str>,
+    invalid_server_react_apis: Vec<&'a str>,
+    invalid_server_react_dom_apis: Vec<&'a str>,
+}
+
+struct ModuleImports {
+    source: (String, Span),
+    specifiers: Vec<(String, Span)>,
+}
+
+impl<C: Comments> VisitMut for ReactServerComponents<'_, C> {
+    noop_visit_mut_type!();
+
+    fn visit_mut_module(&mut self, module: &mut Module) {
+        let (is_client_entry, imports) = self.collect_top_level_directives_and_imports(module);
+
+        if self.is_server {
+            if !is_client_entry {
+                self.assert_server_graph(&imports);
+            } else {
+                self.to_module_ref(module);
+                return;
+            }
+        } else {
+            self.assert_client_graph(&imports);
+        }
+        module.visit_mut_children_with(self)
+    }
+}
+
+impl<C: Comments> ReactServerComponents<'_, C> {
+    // Collects top level directives and imports, then removes specific ones
+    // from the AST.
+    fn collect_top_level_directives_and_imports(
+        &self,
+        module: &mut Module,
+    ) -> (bool, Vec<ModuleImports>) {
+        let mut imports: Vec<ModuleImports> = vec![];
+        let mut finished_directives = false;
+        let mut is_client_entry = false;
+
+        let _ = &module.body.retain(|item| {
+            match item {
+                ModuleItem::Stmt(stmt) => {
+                    if !finished_directives {
+                        if !stmt.is_expr() {
+                            // Not an expression.
+                            finished_directives = true;
+                        }
+
+                        match stmt.as_expr() {
+                            Some(expr_stmt) => {
+                                match &*expr_stmt.expr {
+                                    Expr::Lit(Lit::Str(Str { value, .. })) => {
+                                        if value.to_string() == "client" {
+                                            is_client_entry = true;
+
+                                            // Remove the directive.
+                                            return false;
+                                        }
+                                    }
+                                    _ => {
+                                        // Other expression types.
+                                        finished_directives = true;
+                                    }
+                                }
+                            }
+                            None => {
+                                // Not an expression.
+                                finished_directives = true;
+                            }
+                        }
+                    }
+                }
+                ModuleItem::ModuleDecl(ModuleDecl::Import(import)) => {
+                    let source = import.src.value.to_string();
+                    let specifiers = import
+                        .specifiers
+                        .iter()
+                        .map(|specifier| match specifier {
+                            ImportSpecifier::Named(named) => match &named.imported {
+                                Some(imported) => match &imported {
+                                    ModuleExportName::Ident(i) => (i.sym.to_string(), i.span),
+                                    ModuleExportName::Str(s) => (s.value.to_string(), s.span),
+                                },
+                                None => (named.local.sym.to_string(), named.local.span),
+                            },
+                            ImportSpecifier::Default(d) => ("".to_string(), d.span),
+                            ImportSpecifier::Namespace(n) => ("*".to_string(), n.span),
+                        })
+                        .collect();
+
+                    imports.push(ModuleImports {
+                        source: (source, import.span),
+                        specifiers,
+                    });
+
+                    finished_directives = true;
+                }
+                _ => {
+                    finished_directives = true;
+                }
+            }
+            return true;
+        });
+
+        (is_client_entry, imports)
+    }
+
+    // Convert the client module to the module reference code and add a special
+    // comment to the top of the file.
+    fn to_module_ref(&self, module: &mut Module) {
+        // Clear all the statements and module declarations.
+        module.body.clear();
+
+        let proxy_ident = quote_ident!("createProxy");
+        let filepath = quote_str!(self.filepath.clone());
+
+        prepend_stmts(
+            &mut module.body,
+            vec![
+                ModuleItem::Stmt(Stmt::Decl(Decl::Var(VarDecl {
+                    span: DUMMY_SP,
+                    kind: VarDeclKind::Const,
+                    decls: vec![VarDeclarator {
+                        span: DUMMY_SP,
+                        name: Pat::Object(ObjectPat {
+                            span: DUMMY_SP,
+                            props: vec![ObjectPatProp::Assign(AssignPatProp {
+                                span: DUMMY_SP,
+                                key: proxy_ident.clone(),
+                                value: None,
+                            })],
+                            optional: false,
+                            type_ann: None,
+                        }),
+                        init: Some(Box::new(Expr::Call(CallExpr {
+                            span: DUMMY_SP,
+                            callee: quote_ident!("require").as_callee(),
+                            args: vec![quote_str!("private-next-rsc-mod-ref-proxy").as_arg()],
+                            type_args: Default::default(),
+                        }))),
+                        definite: false,
+                    }],
+                    declare: false,
+                }))),
+                ModuleItem::Stmt(Stmt::Expr(ExprStmt {
+                    span: DUMMY_SP,
+                    expr: Box::new(Expr::Assign(AssignExpr {
+                        span: DUMMY_SP,
+                        left: PatOrExpr::Expr(Box::new(Expr::Member(MemberExpr {
+                            span: DUMMY_SP,
+                            obj: Box::new(Expr::Ident(quote_ident!("module"))),
+                            prop: MemberProp::Ident(quote_ident!("exports")),
+                        }))),
+                        op: op!("="),
+                        right: Box::new(Expr::Call(CallExpr {
+                            span: DUMMY_SP,
+                            callee: quote_ident!("createProxy").as_callee(),
+                            args: vec![filepath.as_arg()],
+                            type_args: Default::default(),
+                        })),
+                    })),
+                })),
+            ]
+            .into_iter(),
+        );
+
+        // Prepend a special comment to the top of the file.
+        self.comments.add_leading(
+            module.span.lo,
+            Comment {
+                span: DUMMY_SP,
+                kind: CommentKind::Block,
+                text: " __next_internal_client_entry_do_not_use__ ".into(),
+            },
+        );
+    }
+
+    fn assert_server_graph(&self, imports: &Vec<ModuleImports>) {
+        for import in imports {
+            let source = import.source.0.as_str();
+            if self.invalid_server_imports.contains(&source) {
+                HANDLER.with(|handler| {
+                    handler
+                        .struct_span_err(
+                            import.source.1,
+                            format!(
+                                "Disallowed import of `{}` in the Server Components compilation.",
+                                source
+                            )
+                            .as_str(),
+                        )
+                        .emit()
+                })
+            }
+            if source == "react" {
+                for specifier in &import.specifiers {
+                    if self
+                        .invalid_server_react_apis
+                        .contains(&specifier.0.as_str())
+                    {
+                        HANDLER.with(|handler| {
+                            handler
+                                .struct_span_err(
+                                    specifier.1,
+                                    format!(
+                                        "Disallowed React API `{}` in the Server Components \
+                                         compilation.",
+                                        &specifier.0
+                                    )
+                                    .as_str(),
+                                )
+                                .emit()
+                        })
+                    }
+                }
+            }
+            if source == "react-dom" {
+                for specifier in &import.specifiers {
+                    if self
+                        .invalid_server_react_dom_apis
+                        .contains(&specifier.0.as_str())
+                    {
+                        HANDLER.with(|handler| {
+                            handler
+                                .struct_span_err(
+                                    specifier.1,
+                                    format!(
+                                        "Disallowed ReactDOM API `{}` in the Server Components \
+                                         compilation.",
+                                        &specifier.0
+                                    )
+                                    .as_str(),
+                                )
+                                .emit()
+                        })
+                    }
+                }
+            }
+        }
+    }
+
+    fn assert_client_graph(&self, imports: &Vec<ModuleImports>) {
+        for import in imports {
+            let source = import.source.0.as_str();
+            if self.invalid_client_imports.contains(&source) {
+                HANDLER.with(|handler| {
+                    handler
+                        .struct_span_err(
+                            import.source.1,
+                            format!(
+                                "Disallowed import of `{}` in the Client Components compilation.",
+                                source
+                            )
+                            .as_str(),
+                        )
+                        .emit()
+                })
+            }
+        }
+    }
+}
+
+pub fn server_components<C: Comments>(
+    filename: FileName,
+    config: Config,
+    comments: C,
+) -> impl Fold + VisitMut {
+    let is_server: bool = match config {
+        Config::WithOptions(x) => x.is_server,
+        _ => true,
+    };
+    as_folder(ReactServerComponents {
+        is_server,
+        comments,
+        filepath: filename.to_string(),
+        invalid_server_imports: vec!["client-only", "react-dom/client", "react-dom/server"],
+        invalid_client_imports: vec!["server-only"],
+        invalid_server_react_dom_apis: vec!["findDOMNode", "flushSync", "unstable_batchedUpdates"],
+        invalid_server_react_apis: vec![
+            "Component",
+            "createContext",
+            "createFactory",
+            "PureComponent",
+            "useDeferredValue",
+            "useEffect",
+            "useImperativeHandle",
+            "useInsertionEffect",
+            "useLayoutEffect",
+            "useReducer",
+            "useRef",
+            "useState",
+            "useSyncExternalStore",
+            "useTransition",
+        ],
+    })
+}