Support client component interop (#57)

* Add test cases

* Separate test cases

* Use different test path

* Change outDir

* Add serialize function

* Format tools code

* Add SuperJSONComponent

* Fix test cases

* Change package files

* Refactor and complete

* Update README.md

Author: orionmiz

README.md

@@ -2,21 +2,17 @@
 
 ```jsx
 export default function Page({ date }) {
-  return (
-    <div>
-      Today is {date.toDateString()}
-    </div>
-  )
+  return <div>Today is {date.toDateString()}</div>;
 }
 
 // You can also use getInitialProps, getStaticProps
 export const getServerSideProps = () => {
   return {
     props: {
-      date: new Date()
-    }
-  }
-}
+      date: new Date(),
+    },
+  };
+};
 ```
 
 <p align="middle">
@@ -45,19 +41,35 @@ Add the plugin into `next.config.js`
 // next.config.js
 module.exports = {
   experimental: {
-    swcPlugins: [
-      ['next-superjson-plugin', {}],
-    ],
+    swcPlugins: [["next-superjson-plugin", {}]],
   },
-}
+};
 ```
 
 ### Options
+
 You can use the `excluded` option to exclude specific properties from serialization.
+
 ```js
 ['next-superjson-plugin', { excluded: ["someProp"] }],
 ```
 
+### Server Component -> Client Component
+
+```jsx
+export default function ServerComponent() {
+  const date = new Date();
+  return (
+    <>
+      <AnotherServerComponent date={date} />
+
+      {/* Use "data-superjson" attribute to pass non-serializable props to client components */}
+      <ClientComponent date={date} data-superjson />
+    </>
+  );
+}
+```
+
 ## How it works
 
 ```mermaid
@@ -73,12 +85,13 @@ sequenceDiagram
     Note over SWC Plugin: getInitialProps <br> getServerSideProps <br> getStaticProps
     SuperJSON->>Next.js: Deserialize Props
     Note over SWC Plugin: Page Component
-    
+
 ```
 
 ## Contributing
 
 [Leave an issue](https://github.com/orionmiz/next-superjson-plugin/issues)
 
 ## Special Thanks
+
 - [kdy1](https://github.com/kdy1) (Main creator of swc project)

package.json

@@ -17,12 +17,17 @@
     "swc-plugin"
   ],
   "main": "next_superjson.wasm",
+  "exports": {
+    ".": "./dist/next_superjson.wasm",
+    "./tools": "./dist/tools.js",
+    "./client": "./dist/client.js"
+  },
   "scripts": {
-    "prepack": "tsc && cp target/wasm32-wasi/release/next_superjson.wasm .",
+    "prepack": "tsc && cp target/wasm32-wasi/release/next_superjson.wasm ./dist",
     "prepare": "husky install"
   },
   "files": [
-    "tools.*"
+    "dist"
   ],
   "peerDependencies": {
     "next": "^13",

src/app.rs

@@ -0,0 +1,218 @@
+use std::vec;
+
+use swc_common::util::take::Take;
+use swc_core::{
+    common::DUMMY_SP,
+    ecma::{
+        ast::*,
+        utils::{is_valid_ident, prepend_stmts},
+        visit::*,
+    },
+};
+
+use crate::Config;
+
+static DIRECTIVE: &str = "data-superjson";
+static SERIALIZER_FUNCTION: &str = "serialize";
+static DESERIALIZER_COMPONENT: &str = "SuperJSONComponent";
+static DESERIALIZER_PROPS_ATTR: &str = "props";
+static DESERIALIZER_PROPS_COMPONENT: &str = "component";
+static TOOLS_SRC: &str = "next-superjson-plugin/tools";
+static CLIENT_SRC: &str = "next-superjson-plugin/client";
+
+struct AppTransformer {
+    transformed: bool,
+}
+
+pub fn transform_app(_: Config) -> impl VisitMut {
+    AppTransformer { transformed: false }
+}
+
+trait JSXUtil {
+    fn as_expr(&self) -> Expr;
+}
+
+impl JSXUtil for JSXMemberExpr {
+    fn as_expr(&self) -> Expr {
+        match &self.obj {
+            JSXObject::Ident(id) => id.clone().into(),
+            JSXObject::JSXMemberExpr(member) => MemberExpr {
+                obj: Box::new(member.as_expr()),
+                prop: MemberProp::Ident(member.prop.clone()),
+                span: DUMMY_SP,
+            }
+            .into(),
+        }
+    }
+}
+
+impl JSXUtil for JSXElementName {
+    fn as_expr(&self) -> Expr {
+        match self {
+            JSXElementName::Ident(id) => {
+                if is_valid_ident(&id.sym) {
+                    id.clone().into()
+                } else {
+                    Lit::Str(id.sym.clone().into()).into()
+                }
+            }
+            JSXElementName::JSXMemberExpr(member) => MemberExpr {
+                obj: Box::new(member.as_expr()),
+                prop: member.prop.clone().into(),
+                span: DUMMY_SP,
+            }
+            .into(),
+            // namespace cannot be component
+            _ => unreachable!(),
+        }
+    }
+}
+
+impl VisitMut for AppTransformer {
+    fn visit_mut_module_items(&mut self, items: &mut Vec<ModuleItem>) {
+        items.visit_mut_children_with(self);
+
+        if self.transformed {
+            // add import decl
+
+            prepend_stmts(
+                items,
+                vec![
+                    ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl {
+                        specifiers: vec![ImportNamedSpecifier {
+                            local: Ident::new(SERIALIZER_FUNCTION.into(), DUMMY_SP),
+                            span: DUMMY_SP,
+                            imported: None,
+                            is_type_only: false,
+                        }
+                        .into()],
+                        src: Box::new(TOOLS_SRC.into()),
+                        ..ImportDecl::dummy()
+                    })),
+                    ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl {
+                        specifiers: vec![ImportDefaultSpecifier {
+                            local: Ident::new(DESERIALIZER_COMPONENT.into(), DUMMY_SP),
+                            span: DUMMY_SP,
+                        }
+                        .into()],
+                        src: Box::new(CLIENT_SRC.into()),
+                        ..ImportDecl::dummy()
+                    })),
+                ]
+                .into_iter(),
+            );
+        }
+    }
+
+    fn visit_mut_jsx_opening_element(&mut self, elem: &mut JSXOpeningElement) {
+        elem.visit_mut_children_with(self);
+
+        let mut found = false;
+
+        // find and remove data-superjson directive
+        elem.attrs.retain(|attr_or_spread| {
+            if let JSXAttrOrSpread::JSXAttr(JSXAttr {
+                name: JSXAttrName::Ident(id),
+                ..
+            }) = attr_or_spread
+            {
+                if &*id.sym == DIRECTIVE {
+                    found = true;
+                    return false;
+                }
+            }
+            true
+        });
+
+        if found {
+            // attrs -> obj props
+            let list: Vec<PropOrSpread> = elem
+                .attrs
+                .take()
+                .into_iter()
+                .map(|attr_or_spread| match attr_or_spread {
+                    JSXAttrOrSpread::JSXAttr(attr) => {
+                        let key: PropName = match attr.name {
+                            JSXAttrName::Ident(id) => id.into(),
+                            JSXAttrName::JSXNamespacedName(ns_name) => PropName::Str(
+                                format!("{}:{}", ns_name.ns.sym, ns_name.name.sym).into(),
+                            ),
+                        };
+
+                        let value: Box<Expr> = match attr.value {
+                            Some(JSXAttrValue::JSXExprContainer(JSXExprContainer {
+                                expr: JSXExpr::Expr(expr),
+                                ..
+                            })) => expr,
+                            Some(JSXAttrValue::JSXElement(element)) => {
+                                Box::new(Expr::JSXElement(element))
+                            }
+                            Some(JSXAttrValue::JSXFragment(fragment)) => {
+                                Box::new(Expr::JSXFragment(fragment))
+                            }
+                            Some(JSXAttrValue::Lit(lit)) => lit.into(),
+                            None => Box::new(Expr::Lit(Lit::Bool(Bool {
+                                value: true,
+                                span: DUMMY_SP,
+                            }))),
+                            _ => unreachable!(),
+                        };
+
+                        Box::new(Prop::KeyValue(KeyValueProp { key, value })).into()
+                    }
+                    JSXAttrOrSpread::SpreadElement(spread) => SpreadElement {
+                        expr: spread.expr,
+                        dot3_token: DUMMY_SP,
+                    }
+                    .into(),
+                })
+                .collect();
+
+            // replace attrs
+            elem.attrs = vec![
+                JSXAttr {
+                    name: Ident::new(DESERIALIZER_PROPS_ATTR.into(), DUMMY_SP).into(),
+                    span: DUMMY_SP,
+                    value: Some(
+                        JSXExprContainer {
+                            expr: Box::new(Expr::Call(CallExpr {
+                                args: vec![Expr::Object(ObjectLit {
+                                    span: DUMMY_SP,
+                                    props: list,
+                                })
+                                .into()],
+                                callee: Box::new(Expr::Ident(Ident::new(
+                                    SERIALIZER_FUNCTION.into(),
+                                    DUMMY_SP,
+                                )))
+                                .into(),
+                                span: DUMMY_SP,
+                                type_args: None,
+                            }))
+                            .into(),
+                            span: DUMMY_SP,
+                        }
+                        .into(),
+                    ),
+                }
+                .into(),
+                JSXAttr {
+                    name: Ident::new(DESERIALIZER_PROPS_COMPONENT.into(), DUMMY_SP).into(),
+                    span: DUMMY_SP,
+                    value: Some(
+                        JSXExprContainer {
+                            expr: Box::new(elem.name.as_expr()).into(),
+                            span: DUMMY_SP,
+                        }
+                        .into(),
+                    ),
+                }
+                .into(),
+            ];
+
+            // change element name
+            elem.name = Ident::new(DESERIALIZER_COMPONENT.into(), DUMMY_SP).into();
+            self.transformed = true;
+        }
+    }
+}