alibaba · Coooder-X · Jul 18, 2023 · Aug 14, 2023 · Aug 23, 2023 · Aug 30, 2023
diff --git a/examples/basic-project/package.json b/examples/basic-project/package.json
@@ -24,5 +24,6 @@
     "@types/react-dom": "^18.0.2",
     "speed-measure-webpack-plugin": "^1.5.0",
     "webpack": "^5.86.0"
-  }
-}
+  },
+  "repository": "[email protected]:alibaba/ice.git"
+}
diff --git a/examples/rsc-project/.browserslistrc b/examples/rsc-project/.browserslistrc
@@ -0,0 +1,2 @@
+defaults
+ios_saf 9
diff --git a/examples/rsc-project/ice.config.mts b/examples/rsc-project/ice.config.mts
@@ -0,0 +1,21 @@
+import { defineConfig } from '@ice/app';
+import auth from '@ice/plugin-auth';
+import SpeedMeasurePlugin from 'speed-measure-webpack-plugin';
+
+export default defineConfig(() => ({
+  publicPath: '/',
+  webpack: (webpackConfig) => {
+    if (process.env.NODE_ENV !== 'test') {
+      webpackConfig.plugins?.push(new SpeedMeasurePlugin());
+    }
+    return webpackConfig;
+  },
+  dropLogLevel: 'warn',
+  plugins: [
+    auth(),
+  ],
+  eslint: true,
+  ssr: false,
+  ssg: false,
+  rsc: true,
+}));
diff --git a/examples/rsc-project/package.json b/examples/rsc-project/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@examples/basic-project",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build",
+    "serve": "tsx server.mts"
+  },
+  "description": "",
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/plugin-auth": "workspace:*",
+    "@ice/runtime": "workspace:*",
+    "antd-mobile": "^5.12.6",
+    "compression": "^1.7.4",
+    "react": "^18.3.0-canary-1cea38448-20230530",
+    "react-dom": "^18.3.0-canary-1cea38448-20230530",
+    "react-server-dom-webpack": "^18.3.0-canary-1cea38448-20230530",
+    "react-router-dom": "6.11.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "speed-measure-webpack-plugin": "^1.5.0",
+    "webpack": "^5.86.0",
+    "tslib": "^2.5.0",
+    "tsx": "^3.12.1"
+  }
+}
diff --git a/examples/rsc-project/src/app.tsx b/examples/rsc-project/src/app.tsx
@@ -0,0 +1,17 @@
+'use client';
+import { defineAppConfig } from 'ice';
+import { defineAuthConfig } from '@ice/plugin-auth/types';
+
+console.log('__LOG__');
+console.warn('__WARN__');
+console.error('__ERROR__');
+
+export const authConfig = defineAuthConfig(() => {
+  return {
+    initialAuth: {
+      admin: true,
+    },
+  };
+});
+
+export default defineAppConfig(() => ({}));
diff --git a/examples/rsc-project/src/components/bar.tsx b/examples/rsc-project/src/components/bar.tsx
@@ -0,0 +1,8 @@
+'use client';
+export default function Bar() {
+  return (
+    <div>
+      bar
+    </div>
+  );
+}
diff --git a/examples/rsc-project/src/document.tsx b/examples/rsc-project/src/document.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { DocumentClientBody, DocumentClientHead } from './documentClient';
+// import RscServerRouter from './rscServerRouter';
+
+// import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+function Document(props) {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="description" content="ICE Demo" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <DocumentClientHead />
+      </head>
+      <body>
+        <DocumentClientBody />
+      </body>
+    </html>
+    // <>
+    //   <DocumentClientHead />
+    //   <DocumentClientBody />
+    // </>
+  );
+}
+
+export default Document;
diff --git a/examples/rsc-project/src/documentClient.tsx b/examples/rsc-project/src/documentClient.tsx
@@ -0,0 +1,22 @@
+'use client';
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+export function DocumentClientHead() {
+  return (
+    <>
+      <Meta />
+      <Title />
+      <Links />
+    </>
+  );
+}
+
+export function DocumentClientBody() {
+  return (
+    <>
+      <Main />
+      <Scripts />
+    </>
+  );
+}
+
diff --git a/examples/rsc-project/src/pages/about.tsx b/examples/rsc-project/src/pages/about.tsx
@@ -0,0 +1,56 @@
+'use client';
+// @ts-expect-error
+import { Link, useData, useConfig, definePageConfig, defineDataLoader } from 'ice';
+import url from './ice.png';
+import Blog from './blog';
+
+interface Data {
+  name: string;
+}
+
+export default function About() {
+  const data = useData<Data>();
+  const config = useConfig();
+
+  console.log('render About', 'data', data, 'config', config);
+
+  return (
+    <>
+      <h2>About Page</h2>
+      <Link to="/">home</Link><br />
+      <Link to="/blog">blog</Link>
+      <img src={url} height="40" width="40" />
+      <span className="mark">new</span>
+    </>
+  );
+}
+
+export const pageConfig = definePageConfig(() => {
+  return {
+    title: 'About',
+    meta: [
+      {
+        name: 'theme-color',
+        content: '#eee',
+      },
+    ],
+    links: [{
+      href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
+      rel: 'stylesheet',
+    }],
+    scripts: [{
+      src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/lodash.min.js',
+    }],
+    auth: ['admin'],
+  };
+});
+
+export const dataLoader = defineDataLoader(() => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        name: 'About',
+      });
+    }, 1 * 100);
+  });
+});
diff --git a/examples/rsc-project/src/pages/blog.tsx b/examples/rsc-project/src/pages/blog.tsx
@@ -0,0 +1,27 @@
+'use client';
+import { Link, useData, useConfig, definePageConfig } from 'ice';
+
+interface Data {
+  name: string;
+}
+
+export default function Blog() {
+  const data = useData<Data>();
+  const config = useConfig();
+
+  console.log('render Blog', 'data', data, 'config', config);
+
+  return (
+    <>
+      <h2>Blog Page</h2>
+      <Link to="/">home</Link>
+    </>
+  );
+}
+
+export const pageConfig = definePageConfig(() => {
+  return {
+    title: 'Blog',
+    auth: ['guest'],
+  };
+});
diff --git a/examples/rsc-project/src/pages/ice.png b/examples/rsc-project/src/pages/ice.png
diff --git a/examples/rsc-project/src/pages/index.module.css b/examples/rsc-project/src/pages/index.module.css
@@ -0,0 +1,3 @@
+.title {
+  color: red;
+}
diff --git a/examples/rsc-project/src/pages/index.tsx b/examples/rsc-project/src/pages/index.tsx
@@ -0,0 +1,58 @@
+'use client';
+import { Suspense } from 'react';
+import { Link, useData, useConfig, definePageConfig, defineDataLoader } from 'ice';
+// Not recommended but works.
+import styles from './index.module.css';
+// import { Button } from 'antd-mobile';
+
+// const Bar = lazy(() => import('../components/bar'));
+
+export default function Home() {
+  // console.log('render Home', props);
+
+  // const appContext = useAppContext();
+  // console.log('get AppContext', appContext);
+
+  const data = useData();
+  const config = useConfig();
+
+  console.log('render Home', 'data', data, 'config', config);
+
+  return (
+    <>
+      <h2 className={styles.title}>Home Page</h2>
+      <Link to="/about">about</Link>
+      <Suspense fallback={<div>hello</div>}>
+        {/* <Bar /> */}
+        {/* <Button onClick={() => alert('Hello ICE.')}>Click Me</Button> */}
+      </Suspense>
+    </>
+  );
+}
+
+export const pageConfig = definePageConfig(() => {
+  return {
+    title: 'Home',
+    meta: [
+      {
+        name: 'theme-color',
+        content: '#000',
+      },
+      {
+        name: 'title-color',
+        content: '#f00',
+      },
+    ],
+    auth: ['admin'],
+  };
+});
+
+export const dataLoader = defineDataLoader(() => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        name: 'Home',
+      });
+    }, 1 * 100);
+  });
+});
diff --git a/examples/rsc-project/src/pages/layout.tsx b/examples/rsc-project/src/pages/layout.tsx
@@ -0,0 +1,39 @@
+'use client';
+import { Outlet, useData, useConfig, definePageConfig, defineDataLoader } from 'ice';
+
+export default () => {
+  const data = useData();
+  const config = useConfig();
+
+  console.log('render Layout', 'data', data, 'config', config);
+
+  return (
+    <div>
+      <h1>Layout</h1>
+      <Outlet />
+    </div>
+  );
+};
+
+export const pageConfig = definePageConfig(() => {
+  return {
+    title: 'Layout',
+    meta: [
+      {
+        name: 'layout-color',
+        content: '#f00',
+      },
+    ],
+    auth: ['admin'],
+  };
+});
+
+export const dataLoader = defineDataLoader(() => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        layout: true,
+      });
+    }, 1 * 100);
+  });
+});