feat: support runtime next

alibaba · Feb 20, 2025 · d204b7e · d204b7e
1 parent a7a885d
commit d204b7e
Show file tree

Hide file tree

Showing 48 changed files with 1,197 additions and 379 deletions.
diff --git a/examples/runtime-next-project/ice.config.mts b/examples/runtime-next-project/ice.config.mts
@@ -0,0 +1,9 @@
+import { defineConfig } from '@ice/app';
+import runtimeNext from '@ice/plugin-runtime-next';
+
+export default defineConfig(() => ({
+  ssg: false,
+  plugins: [
+    runtimeNext(),
+  ],
+}));
diff --git a/examples/runtime-next-project/package.json b/examples/runtime-next-project/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "runtime-next-project",
+  "private": true,
+  "version": "1.0.0",
+  "description": "Example for @ice/runtime-next usage",
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "dependencies": {
+    "@ice/runtime": "workspace:*",
+    "@ice/runtime-next": "workspace:*",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/plugin-runtime-next": "workspace:*",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
+  }
+}
diff --git a/examples/runtime-next-project/src/app.tsx b/examples/runtime-next-project/src/app.tsx
@@ -0,0 +1,5 @@
+import { defineAppConfig } from 'ice';
+
+export default defineAppConfig(() => ({
+
+}));
diff --git a/examples/runtime-next-project/src/document.tsx b/examples/runtime-next-project/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 Demo" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Title />
+        <Links />
+      </head>
+      <body>
+        <Main />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/examples/runtime-next-project/src/pages/home.tsx b/examples/runtime-next-project/src/pages/home.tsx
@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div>Home</div>;
+}
diff --git a/examples/runtime-next-project/src/pages/index.tsx b/examples/runtime-next-project/src/pages/index.tsx
@@ -0,0 +1,3 @@
+export default function Index() {
+  return <div>Index</div>;
+}
diff --git a/examples/runtime-next-project/tsconfig.json b/examples/runtime-next-project/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "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"]
+}
diff --git a/packages/ice/src/createService.ts b/packages/ice/src/createService.ts
@@ -39,6 +39,7 @@ import ServerCompileTask from './utils/ServerCompileTask.js';
 import { generateRoutesInfo } from './routes.js';
 import GeneratorAPI from './service/generatorAPI.js';
 import renderTemplate from './service/renderTemplate.js';
+import createRouteConfig from './utils/createRouteConfig.js';
 
 const require = createRequire(import.meta.url);
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -209,16 +210,13 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
   // Only when code splitting use the default strategy or set to `router`, the router will be lazy loaded.
   const lazy = [true, 'chunks', 'page', 'page-vendors'].includes(userConfig.codeSplitting);
   const runtimeRouter = runtimeConfig?.router;
-  const { routeImports, routeDefinition } = runtimeRouter?.routesDefinition?.({
+  const routeDefinition = runtimeRouter?.routesDefinition?.({
     manifest: routesInfo.routes,
     lazy,
-  }) || {
-    routeImports: [],
-    routeDefinition: '',
-  };
+  });
 
   const routesFile = runtimeRouter?.source;
-
+  console.log('routesFile', routesFile);
   const loaderExports = hasExportAppData || Boolean(routesInfo.loaders);
   const hasDataLoader = Boolean(userConfig.dataLoader) && loaderExports;
   const renderData = {
@@ -237,7 +235,6 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
     hasDocument: hasDocument(rootDir),
     dataLoader: userConfig.dataLoader,
     hasDataLoader,
-    routeImports,
     routeDefinition,
     routesFile: routesFile?.replace(/\.[^.]+$/, ''),
     lazy,

diff --git a/packages/ice/src/getWatchEvents.ts b/packages/ice/src/getWatchEvents.ts
@@ -35,10 +35,10 @@ const getWatchEvents = (options: Options): WatchEvent[] => {
     async (eventName: string) => {
       if (eventName === 'add' || eventName === 'unlink' || eventName === 'change') {
         const routesRenderData = await generateRoutesInfo(rootDir, routesConfig);
-        const { routeImports, routeDefinition } = router?.routesDefinition?.({
+        const routeDefinition = router?.routesDefinition?.({
           manifest: routesRenderData.routes,
           lazy: lazyRoutes,
-        }) || {};
+        }) || '';
         const stringifiedData = JSON.stringify(routesRenderData);
         if (cache.get('routes') !== stringifiedData) {
           cache.set('routes', stringifiedData);
@@ -49,7 +49,7 @@ const getWatchEvents = (options: Options): WatchEvent[] => {
               generator.renderFile(
                 router.template,
                 router.source,
-                { routeImports, routeDefinition },
+                { routeDefinition },
               );
             }
             // Keep generate route manifest for avoid breaking change.

diff --git a/packages/ice/src/plugins/task.ts b/packages/ice/src/plugins/task.ts
@@ -3,6 +3,7 @@ import { createRequire } from 'module';
 import type { Config } from '@ice/shared-config/types';
 import { CACHE_DIR, RUNTIME_TMP_DIR, RUNTIME_EXPORTS } from '../constant.js';
 import { getRoutesDefinition } from '../routes.js';
+import createRouteConfig from '../utils/createRouteConfig.js';
 
 const require = createRequire(import.meta.url);
 const getDefaultTaskConfig = ({ rootDir, command }): Config => {
@@ -39,7 +40,10 @@ const getDefaultTaskConfig = ({ rootDir, command }): Config => {
       source: '@ice/runtime',
       server: '@ice/runtime/server',
       router: {
-        routesDefinition: getRoutesDefinition,
+        routesDefinition: (args) => {
+          const { routeImports, routeDefinition } = getRoutesDefinition(args);
+          return createRouteConfig(routeImports, routeDefinition);
+        },
         source: './routes.tsx',
         template: 'core/routes.tsx.ejs',
       },

diff --git a/packages/ice/src/utils/createRouteConfig.ts b/packages/ice/src/utils/createRouteConfig.ts
@@ -0,0 +1,16 @@
+const createRouteConfig = (routeImports: string[], routeDefinition: string) => {
+  return `
+import { createRouteLoader, WrapRouteComponent, RouteErrorComponent } from '@ice/runtime';
+import type { CreateRoutes } from '@ice/runtime';
+${routeImports.length ? `${routeImports.join('\n')}\n\n` : ''}
+const createRoutes: CreateRoutes = ({
+  requestContext,
+  renderMode,
+}) => ([
+  ${routeDefinition}
+]);
+export default createRoutes;
+  `;
+};
+
+export default createRouteConfig;
diff --git a/packages/ice/src/utils/multipleEntry.ts b/packages/ice/src/utils/multipleEntry.ts
@@ -41,15 +41,14 @@ export function renderMultiEntry(options: Options) {
     );
     // Generate route file for each route.
     const matches = matchRoutes(routesManifest, route);
-    const { routeImports, routeDefinition } = routesDefinition?.({
+    const routeDefinition = routesDefinition?.({
       manifest: routesManifest,
       lazy,
       matchRoute: (routeItem) => {
         return matches.some((match) => match.route.id === routeItem.id);
       },
-    }) || {};
+    }) || '';
     generator.addRenderFile('core/routes.tsx.ejs', `routes.${routeId}.tsx`, {
-      routeImports,
       routeDefinition,
     });
   });

diff --git a/packages/ice/templates/core/routes.tsx.ejs b/packages/ice/templates/core/routes.tsx.ejs
@@ -1,10 +1 @@
-import { createRouteLoader, WrapRouteComponent, RouteErrorComponent } from '@ice/runtime';
-import type { CreateRoutes } from '@ice/runtime';
-<%- routeImports.length ? routeImports.join('\n') + '\n\n' : ''; -%>
-const createRoutes: CreateRoutes = ({
-  requestContext,
-  renderMode,
-}) => ([
-  <%- routeDefinition %>
-]);
-export default createRoutes;
+<%- routeDefinition -%>
diff --git a/packages/plugin-runtime-next/package.json b/packages/plugin-runtime-next/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@ice/plugin-runtime-next",
+  "version": "1.0.0",
+  "description": "runtime next plugin for ice.js.",
+  "files": [
+    "esm",
+    "!esm/**/*.map",
+    "*.d.ts",
+    "templates"
+  ],
+  "type": "module",
+  "main": "esm/index.js",
+  "module": "esm/index.js",
+  "types": "esm/index.d.ts",
+  "exports": {
+    ".": "./esm/index.js"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "watch": "tsc -w --sourceMap",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@tanstack/router-generator": "^1.106.0"
+  },
+  "devDependencies": {
+    "@ice/app": "workspace:*",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
+  },
+  "repository": {
+    "type": "http",
+    "url": "https://github.com/alibaba/ice/tree/master/packages/plugin-runtime-next"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/plugin-runtime-next/src/index.ts b/packages/plugin-runtime-next/src/index.ts
@@ -0,0 +1,46 @@
+import type { Plugin } from '@ice/app/types';
+
+const plugin: Plugin = () => ({
+  name: 'plugin-runtime-next',
+  setup: ({ onGetConfig }) => {
+    console.log('plugin-runtime-next');
+    // Customize the runtime
+    onGetConfig((config) => {
+      config.swcOptions.compilationConfig = {
+        jsc: {
+          transform: {
+            react: {
+              // TODO: suport custom jsx runtime in react 19.
+              importSource: 'react',
+            },
+          },
+        },
+      };
+      // Override the runtime config
+      config.runtime = {
+        exports: [
+          {
+            specifier: ['Meta', 'Title', 'Links', 'Main', 'Scripts'],
+            source: '@ice/runtime-next/document',
+          },
+          {
+            specifier: ['defineAppConfig'],
+            source: '@ice/runtime-next',
+          },
+        ],
+        server: '@ice/runtime-next/server',
+        source: '@ice/runtime-next',
+        router: {
+          routesDefinition: (args) => {
+            console.log('args', args);
+            return 'export default function createRoutes() { return []; }';
+          },
+          source: './routes.tsx',
+          template: 'core/routes.tsx.ejs',
+        },
+      };
+    });
+  },
+});
+
+export default plugin;
diff --git a/packages/plugin-runtime-next/tsconfig.json b/packages/plugin-runtime-next/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "rootDir": "src",
+    "outDir": "esm",
+    "module": "ES2020",
+    "moduleResolution": "NodeNext",
+  },
+  "include": ["src"]
+}
diff --git a/packages/runtime-kit/document.d.ts b/packages/runtime-kit/document.d.ts
@@ -0,0 +1 @@
+export * from './esm/document';
diff --git a/packages/runtime/src/AppContext.tsx → packages/runtime-kit/src/AppContext.ts b/packages/runtime/src/AppContext.tsx → packages/runtime-kit/src/AppContext.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { AppContext } from '@ice/runtime-kit';
+import type { AppContext } from './types.js';
 
 const Context = React.createContext<AppContext | undefined>(undefined);