Feat rsc data

examples/with-rsc/server/api-server.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict';
+
+const express = require('express');
+const compress = require('compression');
+const cors = require('cors');
+
+const PORT = 4000;
+const app = express();
+
+app.use(compress());
+app.use(cors());
+app.use(express.json());
+
+app.use(cors({
+  origin: 'http://localhost:3000/',
+  methods: ['GET', 'POST', 'PUT', 'DELETE'], // 允许的HTTP方法
+  allowedHeaders: ['Content-Type', 'Authorization'], // 允许的请求头
+}));
+
+app.listen(PORT, () => {
+  console.log(`React Notes listening at ${PORT}...`);
+});
+
+app.get('/getData', (req, res) => {
+  const data = {
+    name: 'John',
+    age: 25,
+    city: 'New York',
+  };
+
+  res.json(data);
+});

examples/with-rsc/src/components/Container.tsx

@@ -0,0 +1,31 @@
+'use server';
+
+import EditButton from '@/components/EditButton';
+import Counter from '@/components/Counter';
+import InnerServer from '@/components/Content';
+
+export default async function Container() {
+  const data = await getData('http://localhost:4000/getData');
+
+  return (
+    <>
+      <Counter>
+        <InnerServer />
+      </Counter>
+      <EditButton noteId="editButton">
+        hello world
+      </EditButton>
+      <div> {serverPrint('serverPrint call')} </div>
+      <div> data from api server: {JSON.stringify(data)} </div>
+    </>
+  );
+}
+
+export function serverPrint(sentence) {
+  return sentence;
+}
+
+export async function getData(url: string) {
+  const res = await fetch(url);
+  return res.json();
+}

examples/with-rsc/src/components/Content.tsx

@@ -0,0 +1,9 @@
+'use server';
+
+export default function InnerServer() {
+  return (
+    <div>
+      inner server
+    </div>
+  );
+}

examples/with-rsc/src/components/Counter.client.tsx → examples/with-rsc/src/components/Counter.tsx

@@ -2,8 +2,9 @@
 import { useState } from 'react';
 import { useAppContext } from 'ice';
 import styles from './index.module.css';
+import { clientPrint } from './EditButton';
 
-export default function Counter() {
+export default function Counter({ children }) {
   const [count, setCount] = useState(0);
 
   function updateCount() {
@@ -16,6 +17,8 @@ export default function Counter() {
   return (
     <button className={styles.button} type="button" onClick={updateCount}>
       👍🏻 {count}
+      <div> {clientPrint('clientPrint call')} </div>
+      {children}
     </button>
   );
 }

examples/with-rsc/src/components/EditButton.client.tsx → examples/with-rsc/src/components/EditButton.tsx

@@ -22,3 +22,7 @@ export default function EditButton({ noteId, children }) {
     </button>
   );
 }
+
+export function clientPrint(sentence) {
+  return sentence;
+}

examples/with-rsc/src/pages/index.tsx

@@ -1,7 +1,6 @@
 import { useAppContext } from 'ice';
 import styles from './index.module.css';
-import EditButton from '@/components/EditButton.client';
-import Counter from '@/components/Counter.client';
+import Container from '@/components/Container';
 
 export default function Home() {
   console.log('Render: Index');
@@ -12,10 +11,7 @@ export default function Home() {
   return (
     <div className={styles.app}>
       <h2>Home Page</h2>
-      <Counter />
-      <EditButton noteId="editButton">
-        hello world
-      </EditButton>
+      <Container />
     </div>
   );
 }

packages/ice/package.json

@@ -46,6 +46,9 @@
     "@swc/helpers": "0.5.1",
     "@types/express": "^4.17.14",
     "address": "^1.1.2",
+    "acorn": "^8.10.0",
+    "acorn-jsx": "^5.3.2",
+    "recast": "^0.23.4",
     "build-scripts": "^2.1.2-0",
     "chalk": "^4.0.0",
     "commander": "^9.0.0",

packages/ice/src/esbuild/rscServerRegister.ts

@@ -1,26 +1,137 @@
+import fs from 'fs';
 import url from 'url';
 import type { Plugin, PluginBuild } from 'esbuild';
+import { Parser } from 'acorn';
+import jsx from 'acorn-jsx';
+import recast from 'recast';
+import ts from 'typescript';
+
+export function rscCodeTransform({ content, path }: { content: string; path: string }): string {
+  if (content.indexOf('use client') === -1 && content.indexOf('use server') === -1) {
+    return content;
+  }
+
+  //  transform tsx/ts code to es6 jsx code
+  if (path.endsWith('tsx') || path.endsWith('ts')) {
+    const result = ts.transpileModule(content, {
+      compilerOptions: {
+        target: ts.ScriptTarget.ES2022,
+        module: ts.ModuleKind.ES2022,
+        jsx: ts.JsxEmit.Preserve,
+        moduleResolution: ts.ModuleResolutionKind.NodeJs,
+      },
+    });
+    content = result.outputText;
+  }
+
+  let body;
+  try {
+    // get AST of source code.
+    body = (Parser.extend(jsx()).parse(content, {
+      ecmaVersion: 2024,
+      sourceType: 'module',
+    }) as any).body;
+  } catch (x) {
+    console.error('Error parsing %s %s %s', url, x.message, path);
+    return content;
+  }
+
+  let useClient = false;
+  let useServer = false;
+  for (let i = 0; i < body.length; i++) {
+    const node = body[i];
+    if (node.type !== 'ExpressionStatement' || !node.directive) {
+      break;
+    }
+    if (node.directive === 'use client') {
+      useClient = true;
+    }
+    if (node.directive === 'use server') {
+      useServer = true;
+    }
+  }
+
+  if (!useClient && !useServer) {
+    return content;
+  }
+
+  if (useClient && useServer) {
+    throw new Error(
+      'Cannot have both "use client" and "use server" directives in the same file.',
+    );
+  }
+
+  let source: string = content;
+  const moduleId: string = url.pathToFileURL(path).href;
+
+  if (useClient) {
+    source = 'const Server = require(\'react-server-dom-webpack/server.node\');\n';
+    source += 'const createClientModuleProxy = Server.createClientModuleProxy;\n';
+    source += transformContent(moduleId);
+  } else if (useServer) {
+    source = 'const Server = require(\'react-server-dom-webpack/server.node\');\n';
+    source += 'const registerServerReference = Server.registerServerReference;\n';
+    for (let i = 0; i < body.length; i++) {
+      const node = body[i];
+      if (['ExpressionStatement', 'VariableDeclaration', 'AssignmentExpression', 'ForStatement', 'IfStatement'].includes(node.type)) {
+        // concat top level statements.
+        const { start, end } = node;
+        const statement = content.substring(start, end);
+        if (statement.indexOf('use client') === -1 && statement.indexOf('use server') === -1) {
+          source += `${statement}\n`;
+        }
+      } else if (node.type === 'ImportDeclaration') {
+        // concat the 'import' statements.
+        const { start, end } = node;
+        source += `${content.substring(start, end)}\n`;
+      } else if (node.type === 'ExportNamedDeclaration' || node.type === 'ExportDefaultDeclaration') {
+        const { declaration } = node;
+        // Handling the case where the export is a function.
+        if (declaration.type === 'FunctionDeclaration') {
+          const functionName = declaration.id.name;
+          source += `${recast.print(declaration).code};\n`;
+          if (node.type === 'ExportNamedDeclaration') {
+            source += `registerServerReference(${functionName}, '${moduleId}', '${functionName}');\n`;
+            source += `module.exports.${functionName} = ${functionName};\n`;
+          } else {
+            source += `registerServerReference(${functionName}, '${moduleId}', null);\n`;
+            source += `module.exports = ${functionName};\n`;
+          }
+        } else {
+          //  concat export variables
+          const exportNames = declaration.declarations.map(item => item.id.name);
+          source += `${recast.print(declaration).code}\n`;
+          for (const exportName of exportNames) {
+            source += `module.exports.${exportName} = ${exportName};\n`;
+          }
+        }
+      } else if (node.type === 'FunctionDeclaration') {
+        source += `${recast.print(node).code};\n`;
+      }
+    }
+  }
+
+  return source;
+}
 
 const rscServerRegister = (): Plugin => {
   return {
     name: 'rsc-server-register',
     setup: async (build: PluginBuild) => {
-      build.onLoad({ filter: /\/src\/.*\.client\.(js|ts|jsx|tsx)$/ }, async (args) => { //  /src\/.*\
+      build.onLoad({ filter: /\/src\/.*\.(js|ts|jsx|tsx)$/ }, async (args) => {
         const { path } = args;
         const loader = path.endsWith('.tsx') || path.endsWith('.ts') ? 'tsx' : 'jsx';
-        const moduleId: string = url.pathToFileURL(path).href;
-        let source = 'const Server: any = require(\'react-server-dom-webpack/server.node\');const createClientModuleProxy = Server.createClientModuleProxy;';
-        source += transformContent(moduleId);
+        let content: string = await fs.promises.readFile(path, 'utf-8');
+        const source = rscCodeTransform({ content, path });
         return { contents: source, loader };
       });
     },
   };
 };
 
 function transformContent(moduleId: string) {
-  const content = `\
-    const comp = createClientModuleProxy('${moduleId}');
-    module.exports = comp`;
+  let content = `const comp = createClientModuleProxy('${moduleId}');\n`;
+  content += 'module.exports = comp;\n';
   return content;
 }
 

packages/ice/tests/fixtures/rscTransform/client/clientInput1.tsx

@@ -0,0 +1,28 @@
+'use client';
+import { useState } from 'react';
+import styles from './index.module.css';
+import { clientPrint } from './EditButton';
+
+type Name = string;
+interface Obj {
+  name: Name;
+  age: number;
+}
+
+export default function Counter({ children }) {
+  const [count, setCount] = useState(0);
+  const obj: Obj = { name: 'name', age: 100 };
+
+  function updateCount() {
+    setCount(count + 1);
+  }
+
+  return (
+    <button className={styles.button} type="button" onClick={updateCount}>
+      👍🏻 {count}
+      <div> {clientPrint('clientPrint call')} </div>
+      {children}
+      <div> {JSON.stringify(obj)} </div>
+    </button>
+  );
+}

packages/ice/tests/fixtures/rscTransform/client/clientInput2.jsx

@@ -0,0 +1,20 @@
+'use client';
+import { useState } from 'react';
+import styles from './index.module.css';
+import { clientPrint } from './EditButton';
+
+export default function Counter({ children }) {
+  const [count, setCount] = useState(0);
+
+  function updateCount() {
+    setCount(count + 1);
+  }
+
+  return (
+    <button className={styles.button} type="button" onClick={updateCount}>
+      👍🏻 {count}
+      <div> {clientPrint('clientPrint call')} </div>
+      {children}
+    </button>
+  );
+}

packages/ice/tests/fixtures/rscTransform/client/clientInput3.js

@@ -0,0 +1,20 @@
+'use client';
+import { useState } from 'react';
+import styles from './index.module.css';
+import { clientPrint } from './EditButton';
+
+export default function Counter({ children }) {
+  const [count, setCount] = useState(0);
+
+  function updateCount() {
+    setCount(count + 1);
+  }
+
+  return (
+    <button className={styles.button} type="button" onClick={updateCount}>
+      👍🏻 {count}
+      <div> {clientPrint('clientPrint call')} </div>
+      {children}
+    </button>
+  );
+}

packages/ice/tests/fixtures/rscTransform/client/clientOutput1.tsx

@@ -0,0 +1,4 @@
+const Server = require('react-server-dom-webpack/server.node');
+const createClientModuleProxy = Server.createClientModuleProxy;
+const comp = createClientModuleProxy('file:///Users/lzx/Documents/project/ice/packages/ice/tests/fixtures/rscTransform/client/clientInput1.tsx');
+module.exports = comp;

packages/ice/tests/fixtures/rscTransform/client/clientOutput2.jsx

@@ -0,0 +1,4 @@
+const Server = require('react-server-dom-webpack/server.node');
+const createClientModuleProxy = Server.createClientModuleProxy;
+const comp = createClientModuleProxy('file:///Users/lzx/Documents/project/ice/packages/ice/tests/fixtures/rscTransform/client/clientInput2.jsx');
+module.exports = comp;

packages/ice/tests/fixtures/rscTransform/client/clientOutput3.js

@@ -0,0 +1,4 @@
+const Server = require('react-server-dom-webpack/server.node');
+const createClientModuleProxy = Server.createClientModuleProxy;
+const comp = createClientModuleProxy('file:///Users/lzx/Documents/project/ice/packages/ice/tests/fixtures/rscTransform/client/clientInput3.js');
+module.exports = comp;

packages/ice/tests/fixtures/rscTransform/others/otherInput1.tsx

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+
+'use client'
+export default function Counter({ children }) {
+  const [count, setCount] = useState(0);
+
+  function updateCount() {
+    setCount(count + 1);
+  }
+
+  return (
+    <button type="button" onClick={updateCount}>
+      👍🏻 {count}
+      {children}
+    </button>
+  );
+}
+'use client';