fix(es/typescript): preserve Flow component type semantics

.changeset/preserve-flow-component-type-semantics.md

@@ -0,0 +1,14 @@
+---
+swc: patch
+swc_core: major
+swc_ecma_ast: major
+swc_ecma_codegen: patch
+swc_ecma_hooks: patch
+swc_ecma_parser: major
+swc_ecma_react_compiler: patch
+swc_ecma_transforms_typescript: patch
+swc_ecma_visit: patch
+swc_estree_compat: patch
+---
+
+fix(es/typescript): Preserve Flow component type semantics

bindings/binding_core_wasm/src/types.rs

@@ -2636,7 +2636,10 @@ export type TsType =
   | TsTypePredicate
   | TsImportType;
 
-export type TsFnOrConstructorType = TsFunctionType | TsConstructorType;
+export type TsFnOrConstructorType =
+  | TsFunctionType
+  | TsConstructorType
+  | TsComponentType;
 
 export interface TsKeywordType extends Node, HasSpan {
   type: "TsKeywordType";
@@ -2678,6 +2681,15 @@ export interface TsFunctionType extends Node, HasSpan {
   typeAnnotation: TsTypeAnnotation;
 }
 
+export interface TsComponentType extends Node, HasSpan {
+  type: "TsComponentType";
+
+  params: TsFnParameter[];
+
+  typeParams?: TsTypeParameterDeclaration;
+  typeAnnotation: TsTypeAnnotation;
+}
+
 export interface TsConstructorType extends Node, HasSpan {
   type: "TsConstructorType";
 

bindings/binding_minifier_wasm/src/types.rs

@@ -2542,7 +2542,10 @@ export type TsType =
   | TsTypePredicate
   | TsImportType;
 
-export type TsFnOrConstructorType = TsFunctionType | TsConstructorType;
+export type TsFnOrConstructorType =
+  | TsFunctionType
+  | TsConstructorType
+  | TsComponentType;
 
 export interface TsKeywordType extends Node, HasSpan {
   type: "TsKeywordType";
@@ -2584,6 +2587,15 @@ export interface TsFunctionType extends Node, HasSpan {
   typeAnnotation: TsTypeAnnotation;
 }
 
+export interface TsComponentType extends Node, HasSpan {
+  type: "TsComponentType";
+
+  params: TsFnParameter[];
+
+  typeParams?: TsTypeParameterDeclaration;
+  typeAnnotation: TsTypeAnnotation;
+}
+
 export interface TsConstructorType extends Node, HasSpan {
   type: "TsConstructorType";
 

crates/swc/examples/node_counter.rs

@@ -179,6 +179,7 @@ macro_rules! node_ref_variants {
             TsArrayType,
             TsAsExpr,
             TsCallSignatureDecl,
+            TsComponentType,
             TsConditionalType,
             TsConstAssertion,
             TsConstructSignatureDecl,

crates/swc/tests/flow_strip_correctness.rs

@@ -9,6 +9,7 @@ use swc::{
 use swc_common::FileName;
 use swc_ecma_ast::EsVersion;
 use swc_ecma_parser::{parse_file_as_program, EsSyntax, FlowSyntax, Syntax};
+use swc_ecma_testing::{exec_node_js, JsExecOptions};
 use testing::Tester;
 
 #[testing::fixture("../swc_ecma_parser/tests/flow/**/*.js")]
@@ -97,6 +98,60 @@ fn flow_strip_correctness(input: PathBuf) {
         .unwrap();
 }
 
+#[test]
+fn issue_12045_component_arrow_supports_react_native_mock_access() {
+    Tester::new()
+        .print_errors(|cm, handler| {
+            let compiler = Compiler::new(cm.clone());
+            let fm = cm.new_source_file(
+                FileName::Custom("issue-12045.js".into()).into(),
+                "const MyComponent: component(ref?: mixed, ...props: mixed) = ({ ref, ...rest }) \
+                 => null;",
+            );
+            let output = compiler
+                .process_js_file(
+                    fm,
+                    &handler,
+                    &Options {
+                        swcrc: false,
+                        config: Config {
+                            jsc: JscConfig {
+                                syntax: Some(Syntax::Flow(FlowSyntax {
+                                    components: true,
+                                    ..Default::default()
+                                })),
+                                target: Some(EsVersion::Es2022),
+                                ..Default::default()
+                            },
+                            ..Default::default()
+                        },
+                        ..Default::default()
+                    },
+                )
+                .expect("failed to compile Flow component arrow");
+
+            assert!(
+                output
+                    .code
+                    .contains("const MyComponent = function MyComponent("),
+                "expected a named component function, got: {}",
+                output.code
+            );
+
+            let runtime = format!(
+                "{}\nconst RealComponent = MyComponent;\nconst constructor = \
+                 RealComponent.prototype.constructor;\nconsole.log(constructor === MyComponent);",
+                output.code
+            );
+            let stdout = exec_node_js(&runtime, JsExecOptions::default())
+                .expect("React Native mock prototype access should execute");
+            assert_eq!(stdout.trim(), "true");
+
+            Ok(())
+        })
+        .unwrap();
+}
+
 fn load_flow_syntax(config_path: PathBuf, is_jsx: bool) -> FlowSyntax {
     let mut flow_syntax = FlowSyntax {
         jsx: is_jsx,

crates/swc_ecma_ast/src/lib.rs

@@ -56,7 +56,7 @@ pub use self::{
         SwitchCase, SwitchStmt, ThrowStmt, TryStmt, VarDeclOrExpr, WhileStmt, WithStmt,
     },
     typescript::{
-        Accessibility, TruePlusMinus, TsArrayType, TsAsExpr, TsCallSignatureDecl,
+        Accessibility, TruePlusMinus, TsArrayType, TsAsExpr, TsCallSignatureDecl, TsComponentType,
         TsConditionalType, TsConstAssertion, TsConstructSignatureDecl, TsConstructorType,
         TsEntityName, TsEnumDecl, TsEnumMember, TsEnumMemberId, TsExportAssignment,
         TsExprWithTypeArgs, TsExternalModuleRef, TsFnOrConstructorType, TsFnParam, TsFnType,

crates/swc_ecma_ast/src/typescript.rs

@@ -318,6 +318,7 @@ pub enum TsType {
 
     #[tag("TsFunctionType")]
     #[tag("TsConstructorType")]
+    #[tag("TsComponentType")]
     TsFnOrConstructorType(TsFnOrConstructorType),
 
     #[tag("TsTypeReference")]
@@ -414,6 +415,12 @@ pub enum TsFnOrConstructorType {
     TsFnType(TsFnType),
     #[tag("TsConstructorType")]
     TsConstructorType(TsConstructorType),
+    /// A Flow `component(...)` type.
+    ///
+    /// This is distinct from [`TsFnType`] because Flow stripping gives
+    /// component-typed arrow bindings function semantics.
+    #[tag("TsComponentType")]
+    TsComponentType(TsComponentType),
 }
 
 impl From<TsFnType> for TsType {
@@ -428,6 +435,12 @@ impl From<TsConstructorType> for TsType {
     }
 }
 
+impl From<TsComponentType> for TsType {
+    fn from(t: TsComponentType) -> Self {
+        TsFnOrConstructorType::TsComponentType(t).into()
+    }
+}
+
 impl From<TsUnionType> for TsType {
     fn from(t: TsUnionType) -> Self {
         TsUnionOrIntersectionType::TsUnionType(t).into()
@@ -543,6 +556,28 @@ pub struct TsFnType {
     pub type_ann: Box<TsTypeAnn>,
 }
 
+/// A Flow `component(...)` type annotation.
+///
+/// Flow component parameters describe a single props object, so the parser
+/// represents them as one object-pattern entry in `params`.
+#[ast_node("TsComponentType")]
+#[derive(Eq, Hash, EqIgnoreSpan)]
+#[cfg_attr(feature = "arbitrary", derive(arbitrary::Arbitrary))]
+#[cfg_attr(feature = "shrink-to-fit", derive(shrink_to_fit::ShrinkToFit))]
+pub struct TsComponentType {
+    pub span: Span,
+    pub params: Vec<TsFnParam>,
+
+    #[cfg_attr(feature = "serde-impl", serde(default))]
+    #[cfg_attr(
+        feature = "encoding-impl",
+        encoding(with = "cbor4ii::core::types::Maybe")
+    )]
+    pub type_params: Option<Box<TsTypeParamDecl>>,
+    #[cfg_attr(feature = "serde-impl", serde(rename = "typeAnnotation"))]
+    pub type_ann: Box<TsTypeAnn>,
+}
+
 #[ast_node("TsConstructorType")]
 #[derive(Eq, Hash, EqIgnoreSpan)]
 #[cfg_attr(feature = "arbitrary", derive(arbitrary::Arbitrary))]

crates/swc_ecma_codegen/Cargo.toml

@@ -49,7 +49,7 @@ swc_allocator = { version = "5.0.0", path = "../swc_allocator" }
 swc_common = { version = "24.0.0", path = "../swc_common", features = [
   "sourcemap",
 ] }
-swc_ecma_parser = { version = "43.0.0", path = "../swc_ecma_parser" }
+swc_ecma_parser = { version = "43.0.0", path = "../swc_ecma_parser", features = ["flow"] }
 swc_ecma_testing = { version = "25.0.0", path = "../swc_ecma_testing" }
 swc_malloc = { version = "1.2.5", path = "../swc_malloc" }
 swc_sourcemap = { workspace = true }

crates/swc_ecma_codegen/src/typescript.rs

@@ -290,6 +290,7 @@ impl MacroNode for TsFnOrConstructorType {
         match self {
             TsFnOrConstructorType::TsFnType(n) => emit!(n),
             TsFnOrConstructorType::TsConstructorType(n) => emit!(n),
+            TsFnOrConstructorType::TsComponentType(n) => emit!(n),
             #[cfg(swc_ast_unknown)]
             _ => return Err(unknown_error()),
         }
@@ -332,6 +333,80 @@ impl MacroNode for TsFnType {
     }
 }
 
+#[node_impl]
+impl MacroNode for TsComponentType {
+    fn emit(&mut self, emitter: &mut Macro) -> Result {
+        emitter.emit_leading_comments_of_span(self.span(), false)?;
+
+        keyword!(emitter, "component");
+        emit!(self.type_params);
+
+        punct!(emitter, "(");
+        // Flow component parameters are stored as a single props object
+        // pattern. Emit its properties without object-pattern braces to
+        // reconstruct `component(prop: Type, ...rest: Type)` syntax.
+        if let [TsFnParam::Object(props)] = self.params.as_slice() {
+            for (index, prop) in props.props.iter().enumerate() {
+                if index != 0 {
+                    punct!(emitter, ",");
+                    formatting_space!(emitter);
+                }
+
+                match prop {
+                    ObjectPatProp::KeyValue(prop) => {
+                        let is_shorthand = match prop.value.as_ref() {
+                            Pat::Ident(binding) => match &prop.key {
+                                PropName::Ident(key) => key.sym == binding.id.sym,
+                                _ => false,
+                            },
+                            Pat::Assign(assign) => match assign.left.as_ref() {
+                                Pat::Ident(binding) => match &prop.key {
+                                    PropName::Ident(key) => key.sym == binding.id.sym,
+                                    _ => false,
+                                },
+                                _ => false,
+                            },
+                            _ => false,
+                        };
+
+                        if is_shorthand {
+                            emit!(prop.value);
+                        } else {
+                            emit!(prop.key);
+                            formatting_space!(emitter);
+                            keyword!(emitter, "as");
+                            formatting_space!(emitter);
+                            emit!(prop.value);
+                        }
+                    }
+                    ObjectPatProp::Assign(prop) => emit!(prop),
+                    ObjectPatProp::Rest(prop) => emit!(prop),
+                    #[cfg(swc_ast_unknown)]
+                    _ => return Err(unknown_error()),
+                }
+            }
+        } else {
+            emitter.emit_list(self.span, Some(&self.params), ListFormat::Parameters)?;
+        }
+        punct!(emitter, ")");
+
+        if !matches!(
+            self.type_ann.type_ann.as_ref(),
+            TsType::TsKeywordType(TsKeywordType {
+                kind: TsKeywordTypeKind::TsAnyKeyword,
+                ..
+            })
+        ) {
+            formatting_space!(emitter);
+            keyword!(emitter, "renders");
+            space!(emitter);
+            emit!(self.type_ann);
+        }
+
+        Ok(())
+    }
+}
+
 #[node_impl]
 impl MacroNode for TsImportEqualsDecl {
     fn emit(&mut self, emitter: &mut Macro) -> Result {