feat: bundle for client chunk

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

@@ -1,7 +1,7 @@
 'use client';
 import { useState } from 'react';
 import { useAppContext } from 'ice';
-import styles from './index.module.css';
+import styles from './counter.module.css';
 
 export default function Counter() {
   const [count, setCount] = useState(0);

examples/with-rsc/src/components/counter.module.css

@@ -0,0 +1,14 @@
+.link {
+  font-size: 1.2rem;
+  color: var(--primary);
+}
+
+.button {
+  outline: none;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 35px;
+  background: var(--primary);
+  box-shadow: 0 5px 10px 0 #ddd;
+  font-size: calc(10px + 2vmin);
+}

examples/with-rsc/src/components/index.module.css → examples/with-rsc/src/pages/about.module.css

@@ -1,45 +1,30 @@
-.app {
+.about {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100vh;
 }
 
-.app > header {
+.about > header {
   display: flex;
   flex-direction: column;
   align-items: center;
 } 
 
-.app > header > img {
+.about > header > img {
   width: 120px;
 }
 
-.app > header > p {
+.about > header > p {
   margin: 20px 0;
   text-align: center;
   font-size: 2.6rem;
 }
 
-.app > main {
+.about > main {
   display: flex;
   flex-direction: column;
   margin: 20px 0 10px;
   font-size: 0.9rem;
-}
-
-.link {
-  font-size: 1.2rem;
-  color: var(--primary);
-}
-
-.button {
-  outline: none;
-  border: none;
-  border-radius: 8px;
-  padding: 10px 35px;
-  background: var(--primary);
-  box-shadow: 0 5px 10px 0 #ddd;
-  font-size: calc(10px + 2vmin);
-}
+}

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

@@ -1,5 +1,5 @@
 import { useAppContext } from 'ice';
-import styles from './index.module.css';
+import styles from './about.module.css';
 import RefreshButton from '@/components/RefreshButton.client';
 import Counter from '@/components/Counter.client';
 
@@ -14,7 +14,7 @@ export default function Home() {
   console.log(appContext);
 
   return (
-    <div className={styles.app}>
+    <div className={styles.about}>
       <h2>About Page</h2>
       <div>server request count:  { global.requestCount++ }</div>
       <Counter />

examples/with-rsc/src/pages/index.module.css

@@ -27,19 +27,4 @@
   flex-direction: column;
   margin: 20px 0 10px;
   font-size: 0.9rem;
-}
-
-.link {
-  font-size: 1.2rem;
-  color: var(--primary);
-}
-
-.button {
-  outline: none;
-  border: none;
-  border-radius: 8px;
-  padding: 10px 35px;
-  background: var(--primary);
-  box-shadow: 0 5px 10px 0 #ddd;
-  font-size: calc(10px + 2vmin);
-}
+}

packages/ice/src/bundler/webpack/getWebpackConfig.ts

@@ -1,8 +1,11 @@
+import * as path from 'path';
+import { fileURLToPath } from 'url';
 import webpack from '@ice/bundles/compiled/webpack/index.js';
 import lodash from '@ice/bundles/compiled/lodash/index.js';
 import { getWebpackConfig as getDefaultWebpackConfig } from '@ice/webpack-config';
 import type { Configuration } from 'webpack';
 import { FlightManifestPlugin } from '../../webpack/FlightManifestPlugin.js';
+import { FlightClientEntryPlugin } from '../../webpack/FlightClientEntryPlugin.js';
 import { getExpandedEnvs } from '../../utils/runtimeEnv.js';
 import { getRouteExportConfig } from '../../service/config.js';
 import { getFileHash } from '../../utils/hash.js';
@@ -14,6 +17,8 @@ import type ServerRunnerPlugin from '../../webpack/ServerRunnerPlugin.js';
 import type ServerCompilerPlugin from '../../webpack/ServerCompilerPlugin.js';
 import type { BundlerOptions, Context } from '../types.js';
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 const { debounce } = lodash;
 
 type GetWebpackConfig = (
@@ -118,6 +123,16 @@ const getWebpackConfig: GetWebpackConfig = async (context, options) => {
     // Add spinner for webpack task.
     webpackConfig.plugins.push(getSpinnerPlugin(spinner));
     if (userConfig.rsc) {
+      webpackConfig.resolveLoader = {
+        alias: {
+          'flight-client-entry-loader': path.join(__dirname, '../../webpack/FlightClientEntryLoader.js'),
+        },
+      };
+
+      webpackConfig.plugins.push(new FlightClientEntryPlugin({
+        rootDir,
+        getRoutesFile,
+      }));
       webpackConfig.plugins.push(new FlightManifestPlugin());
     }
 

packages/ice/src/plugins/web/index.ts

@@ -49,8 +49,10 @@ const plugin: Plugin = () => ({
       ...(userConfig.rsc ? {
         alias: createRSCAliases(),
         // TODO: temporary solution for rsc.
-        entry: { main: [path.join(rootDir, RUNTIME_TMP_DIR, 'rsc.client.tsx')] },
-      } : {}),
+        entry: {
+          main: [path.join(rootDir, RUNTIME_TMP_DIR, 'rsc.client.tsx')],
+          route: [path.join(rootDir, RUNTIME_TMP_DIR, 'routes.tsx')],
+      } } : {}),
     });
 
     onHook('after.start.compile', async ({ isSuccessful, isFirstCompile, urls, devUrlInfo }) => {

packages/ice/src/webpack/FlightClientEntryLoader.ts

@@ -0,0 +1,24 @@
+export type ClientComponentImports = string[];
+export type CssImports = Record<string, string[]>;
+
+export type FlightClientEntryLoaderOptions = {
+  modules: ClientComponentImports;
+};
+
+export default function transformSource() {
+  let { modules }: FlightClientEntryLoaderOptions = this.getOptions();
+
+  if (!Array.isArray(modules)) {
+    modules = modules ? [modules] : [];
+  }
+
+  const requests = modules as string[];
+  const code = requests
+    .map(
+      (request) =>
+        `import(/* webpackMode: "eager" */ ${JSON.stringify(request)})`,
+    )
+    .join(';\n');
+
+  return code;
+}