[WIP] Support React Server Component

.changeset/chilled-jars-pump.md

@@ -0,0 +1,10 @@
+---
+'@ice/webpack-config': minor
+'@ice/shared-config': minor
+'@ice/runtime': minor
+'@ice/app': minor
+'@ice/bundles': patch
+'@ice/route-manifest': patch
+---
+
+feat: support react server component

examples/with-rsc/ice.config.mts

@@ -0,0 +1,11 @@
+import { defineConfig } from '@ice/app';
+
+export default defineConfig({
+  ssr: true,
+  // TODO: support esm format and resolve runtime dependencies to compiled dependencies.
+  server: {
+    bundle: true,
+    format: 'cjs',
+  },
+  rsc: true,
+});

examples/with-rsc/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@examples/with-server-component",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "description": "ICE example with server-component",
+  "author": "ICE Team",
+  "license": "MIT",
+  "dependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/runtime": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6"
+  }
+}

examples/with-rsc/src/app.tsx

@@ -0,0 +1,7 @@
+import { defineAppConfig } from 'ice';
+
+export default defineAppConfig({
+  app: {
+    rootId: 'app',
+  },
+});

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

@@ -0,0 +1,33 @@
+async function Comments() {
+  const comments = await getData();
+
+  console.log('Render: Comments');
+
+  return (
+    <div>
+      {comments.map((comment, i) => (
+        <p className="comment" key={i}>
+          {comment}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+export default Comments;
+
+const fakeData = [
+  "Wait, it doesn't wait for React to load?",
+  'How does this even work?',
+  'I like marshmallows',
+];
+
+async function getData() {
+  console.log('load comments');
+
+  await new Promise<any>((resolve) => {
+    setTimeout(() => resolve(null), 3000);
+  });
+
+  return fakeData;
+}

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

@@ -0,0 +1,21 @@
+'use client';
+import { useState } from 'react';
+import { useAppContext } from 'ice';
+import styles from './counter.module.css';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+
+  function updateCount() {
+    setCount(count + 1);
+  }
+
+  const appContext = useAppContext();
+  console.log(appContext);
+
+  return (
+    <button className={styles.button} type="button" onClick={updateCount}>
+      👍🏻 {count}
+    </button>
+  );
+}

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

@@ -0,0 +1,24 @@
+'use client';
+import { useTransition } from 'react';
+
+export default function EditButton({ noteId, children }) {
+  const [isPending, startTransition] = useTransition();
+  const isDraft = noteId == null;
+  return (
+    <button
+      className={[
+        'edit-button',
+        isDraft ? 'edit-button--solid' : 'edit-button--outline',
+      ].join(' ')}
+      disabled={isPending}
+      onClick={() => {
+        startTransition(() => {
+          console.log('onClick');
+        });
+      }}
+      role="menuitem"
+    >
+      {children}
+    </button>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { useSuspenseData, withSuspense } from 'ice';
+
+function Footer() {
+  const data = useSuspenseData(getData);
+
+  console.log('Render: Footer');
+
+  return (
+    <div>
+      <h2>{data.title}</h2>
+    </div>
+  );
+}
+
+export default withSuspense(Footer);
+
+const fakeData = {
+  title: 'Thanks for reading!',
+};
+
+async function getData() {
+  console.log('load footer');
+
+  await new Promise<any>((resolve) => {
+    setTimeout(() => resolve(null), 2000);
+  });
+
+  return fakeData;
+}

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/document.tsx

@@ -0,0 +1,22 @@
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="description" content="ICE 3.0 Demo" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Title />
+        <Links />
+      </head>
+      <body>
+        <Main />
+        <Scripts async />
+      </body>
+    </html>
+  );
+}
+
+export default Document;

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

@@ -0,0 +1,30 @@
+.about {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.about > header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+} 
+
+.about > header > img {
+  width: 120px;
+}
+
+.about > header > p {
+  margin: 20px 0;
+  text-align: center;
+  font-size: 2.6rem;
+}
+
+.about > main {
+  display: flex;
+  flex-direction: column;
+  margin: 20px 0 10px;
+  font-size: 0.9rem;
+}

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

@@ -0,0 +1,22 @@
+import { useAppContext } from 'ice';
+import styles from './about.module.css';
+import Counter from '@/components/Counter.client';
+
+if (!global.requestCount) {
+  global.requestCount = 0;
+}
+
+export default function Home() {
+  console.log('Render: Index');
+
+  const appContext = useAppContext();
+  console.log(appContext);
+
+  return (
+    <div className={styles.about}>
+      <h2>About Page</h2>
+      <div>server request count:  { global.requestCount++ }</div>
+      <Counter />
+    </div>
+  );
+}

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

@@ -0,0 +1,30 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.app > header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+} 
+
+.app > header > img {
+  width: 120px;
+}
+
+.app > header > p {
+  margin: 20px 0;
+  text-align: center;
+  font-size: 2.6rem;
+}
+
+.app > main {
+  display: flex;
+  flex-direction: column;
+  margin: 20px 0 10px;
+  font-size: 0.9rem;
+}

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

@@ -0,0 +1,27 @@
+import { Suspense } from 'react';
+import { useAppContext } from 'ice';
+import styles from './index.module.css';
+import EditButton from '@/components/EditButton.client';
+import Counter from '@/components/Counter.client';
+import Comments from '@/components/Comments';
+
+export default function Home() {
+  console.log('Render: Index');
+
+  const appContext = useAppContext();
+  console.log(appContext);
+
+  return (
+    <div className={styles.app}>
+      <h2>Home Page</h2>
+      <Counter />
+      <Suspense fallback={<>loading</>}>
+        {/* @ts-ignore */}
+        <Comments />
+      </Suspense>
+      <EditButton noteId="editButton">
+        hello world
+      </EditButton>
+    </div>
+  );
+}

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

@@ -0,0 +1,10 @@
+export default function Layout(props) {
+  console.log('Render: Layout');
+
+  return (
+    <div>
+      <h1>Suspense App</h1>
+      {props.children}
+    </div>
+  );
+}

examples/with-rsc/src/typings.d.ts

@@ -0,0 +1 @@
+/// <reference types="@ice/app/types" />

examples/with-rsc/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "esnext",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "ice": [".ice"]
+    }
+  },
+  "include": ["src", ".ice", "ice.config.*"],
+  "exclude": ["build", "public"]
+}