Feat: define routes and ignore route files

examples/basic-project/ice.config.ts

@@ -1,13 +1,19 @@
 import { defineUserConfig } from '@ice/app';
-import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+// import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 
 export default defineUserConfig({
   publicPath: '/',
-  webpack: (webpackConfig) => {
-    if (process.env.NODE_ENV !== 'test') {
-      webpackConfig.plugins?.push(new BundleAnalyzerPlugin());
-    }
-    return webpackConfig;
+  // webpack: (webpackConfig) => {
+  //   if (process.env.NODE_ENV !== 'test') {
+  //     webpackConfig.plugins?.push(new BundleAnalyzerPlugin());
+  //   }
+  //   return webpackConfig;
+  // },
+  routes: {
+    ignoreFiles: ['about.tsx'],
+    defineRoutes: (route) => {
+      route('/about-me', 'about.tsx');
+    },
   },
   plugins: ['@ice/plugin-auth'],
 });

examples/basic-project/src/pages/dashboard/data.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => {
+  return (
+    <div>data</div>
+  );
+};

examples/basic-project/src/pages/dashboard/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => {
+  return (
+    <div>Dashboard</div>
+  );
+};

examples/basic-project/src/pages/dashboard/layout.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Outlet, Link } from 'ice';
+
+export default () => {
+  return (
+    <div>
+      <h1>Dashboard Layout</h1>
+      <Link to="/dashboard/data">data</Link>
+      <Outlet />
+    </div>
+  );
+};

examples/basic-project/src/pages/detail/$id.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useParams, Link } from 'ice';
+
+export default function DetailId() {
+  const params = useParams();
+
+  return (
+    <div>
+      <div>Detail Id: {params.id}</div>
+      <Link to="/detail">Back to Detail</Link>
+    </div>
+  );
+}

examples/basic-project/src/pages/detail/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link } from 'ice';
+
+export default function Detail() {
+  return (
+    <div>
+      <h2>Detail</h2>
+      <ul>
+        <li><Link to="/detail/join">join</Link></li>
+        <li><Link to="/detail/dashboard">dashboard</Link></li>
+      </ul>
+    </div>
+  );
+}

examples/basic-project/src/pages/index.tsx

@@ -11,7 +11,10 @@ export default function Home(props) {
   return (
     <>
       <h2 className={styles.title}>Home Page</h2>
-      <Link to="/about">about</Link>
+      <ul>
+        <li><Link to="/about-me">about</Link></li>
+        <li><Link to="/detail">detail</Link></li>
+      </ul>
     </>
   );
 }

packages/build-webpack-config/src/index.ts

@@ -41,7 +41,7 @@ function getEntry(rootDir: string) {
   }
   return {
     runtime: ['react', 'react-dom', '@ice/runtime'],
-    index: {
+    main: {
       import: [entryFile],
       dependOn: 'runtime',
     },

packages/ice/src/createService.ts

@@ -31,31 +31,16 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
   const templateDir = path.join(__dirname, '../template/');
   const configFile = 'ice.config.(mts|mjs|ts|js|cjs|json)';
   const dataCache = new Map<string, string>();
-
-  const routesRenderData = generateRoutesInfo(rootDir);
-  dataCache.set('routes', JSON.stringify(routesRenderData));
-
   const generator = new Generator({
     rootDir,
     targetDir,
-    defaultRenderData: {
-      ...routesRenderData,
-    },
     // add default template of ice
     templates: [templateDir],
   });
 
   const { addWatchEvent, removeWatchEvent } = createWatch({
     watchDir: rootDir,
     command,
-    watchEvents: getWatchEvents({
-      generator,
-      rootDir,
-      targetDir,
-      templateDir,
-      configFile,
-      cache: dataCache,
-    }),
   });
 
   const generatorAPI = {
@@ -71,6 +56,7 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
     addRenderFile: generator.addRenderFile,
     addRenderTemplate: generator.addTemplateFiles,
   };
+
   const ctx = new Context<any, ExtendsPluginAPI>({
     rootDir,
     command,
@@ -89,14 +75,31 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
     },
   });
   await ctx.resolveConfig();
+  const { userConfig: { routes: routesConfig } } = ctx;
+  const routesRenderData = generateRoutesInfo(rootDir, routesConfig);
+  generator.modifyRenderData((renderData) => ({
+    ...renderData,
+    ...routesRenderData,
+  }));
+  dataCache.set('routes', JSON.stringify(routesRenderData));
+
   generator.setPlugins(ctx.getAllPlugin());
   await ctx.setup();
+
   // render template before webpack compile
   const renderStart = new Date().getTime();
+
   generator.render();
+
+  addWatchEvent(
+    ...getWatchEvents({ generator, targetDir, templateDir, cache: dataCache, ctx }),
+  );
+
   consola.debug('template render cost:', new Date().getTime() - renderStart);
+
   // define runtime env before get webpack config
   defineRuntimeEnv();
+
   const contextConfig = getContextConfig(ctx);
   const webTask = contextConfig.find(({ name }) => name === 'web');
   const esbuildCompile = createEsbuildCompiler({

packages/ice/src/getWatchEvents.ts

@@ -1,32 +1,34 @@
 import * as path from 'path';
 import consola from 'consola';
 import type { WatchEvent } from '@ice/types/esm/plugin.js';
+import type { Context } from 'build-scripts';
+import type { Config } from '@ice/types';
 import { generateRoutesInfo } from './routes.js';
 import type Generator from './service/runtimeGenerator';
 
 interface Options {
-  rootDir: string;
   targetDir: string;
   templateDir: string;
-  configFile: string;
   generator: Generator;
   cache: Map<string, string>;
+  ctx: Context<Config>;
 }
 
 const getWatchEvents = (options: Options): WatchEvent[] => {
-  const { rootDir, generator, targetDir, templateDir, configFile, cache } = options;
+  const { generator, targetDir, templateDir, cache, ctx } = options;
+  const { userConfig: { routes: routesConfig }, configFile, rootDir } = ctx;
   const watchRoutes: WatchEvent = [
     /src\/pages\/?[\w*-:.$]+$/,
     (eventName: string) => {
       if (eventName === 'add' || eventName === 'unlink') {
-        const routesRenderData = generateRoutesInfo(rootDir);
+        const routesRenderData = generateRoutesInfo(rootDir, routesConfig);
         const stringifiedData = JSON.stringify(routesRenderData);
         if (cache.get('routes') !== stringifiedData) {
           cache.set('routes', stringifiedData);
           consola.debug('[event]', `routes data regenerated: ${stringifiedData}`);
           generator.renderFile(
             path.join(templateDir, 'routes.ts.ejs'),
-            path.join(rootDir, targetDir, 'route.ts'),
+            path.join(rootDir, targetDir, 'routes.ts'),
             routesRenderData,
           );
           generator.renderFile(
@@ -38,6 +40,7 @@ const getWatchEvents = (options: Options): WatchEvent[] => {
       }
     },
   ];
+
   const watchGlobalStyle: WatchEvent = [
     /src\/global.(scss|less|css)/,
     (event: string, filePath: string) => {
@@ -49,7 +52,7 @@ const getWatchEvents = (options: Options): WatchEvent[] => {
   ];
 
   const watchConfigFile: WatchEvent = [
-    new RegExp(configFile),
+    new RegExp(configFile as string),
     (event: string, filePath: string) => {
       if (event === 'change') {
         consola.warn(`Found a change in ${path.basename(filePath)}. Restart the dev server to see the changes in effect.`);

packages/ice/src/plugins/config.ts

@@ -104,6 +104,10 @@ const userConfig = [
       }
     },
   },
+  {
+    name: 'routes',
+    validation: 'object',
+  },
 ];
 
 const cliOptions = [

packages/ice/src/plugins/web/ssr/generateHtml.ts

@@ -1,5 +1,5 @@
-import * as fs from 'fs';
 import * as path from 'path';
+import fse from 'fs-extra';
 import type { RouteItem } from '@ice/runtime';
 
 interface Options {
@@ -16,7 +16,7 @@ export default async function generateHTML(options: Options) {
   } = options;
 
   const serverEntry = await import(entry);
-  const routes = JSON.parse(fs.readFileSync(routeManifest, 'utf8'));
+  const routes = JSON.parse(fse.readFileSync(routeManifest, 'utf8'));
   const paths = getPaths(routes);
 
   for (let i = 0, n = paths.length; i < n; i++) {
@@ -29,7 +29,9 @@ export default async function generateHTML(options: Options) {
     });
 
     const fileName = routePath === '/' ? 'index.html' : `${routePath}.html`;
-    fs.writeFileSync(path.join(outDir, fileName), htmlContent);
+    const contentPath = path.join(outDir, fileName);
+    await fse.ensureFile(contentPath);
+    await fse.writeFile(contentPath, htmlContent);
   }
 }
 
@@ -38,14 +40,14 @@ export default async function generateHTML(options: Options) {
  * @param routes
  * @returns
  */
-function getPaths(routes: RouteItem[]): string[] {
+function getPaths(routes: RouteItem[], parentPath = ''): string[] {
   let pathList = [];
 
   routes.forEach(route => {
     if (route.children) {
-      pathList = pathList.concat(getPaths(route.children));
+      pathList = pathList.concat(getPaths(route.children, route.path));
     } else {
-      pathList.push(route.path || '/');
+      pathList.push(path.join('/', parentPath, route.path || ''));
     }
   });
 

packages/ice/src/routes.ts

@@ -1,9 +1,10 @@
 import * as path from 'path';
 import { formatNestedRouteManifest, generateRouteManifest } from '@ice/route-manifest';
 import type { NestedRouteManifest } from '@ice/route-manifest';
+import type { UserConfig } from '@ice/types';
 
-export function generateRoutesInfo(rootDir: string) {
-  const routeManifest = generateRouteManifest(rootDir);
+export function generateRoutesInfo(rootDir: string, routesConfig?: UserConfig['routes']) {
+  const routeManifest = generateRouteManifest(rootDir, routesConfig.ignoreFiles, routesConfig.defineRoutes);
   const routes = formatNestedRouteManifest(routeManifest);
   const str = generateNestRoutesStr(routes);
 
@@ -23,7 +24,7 @@ function generateNestRoutesStr(nestRouteManifest: NestedRouteManifest[]) {
 
     let str = `{
       path: '${routePath || ''}',
-      load: () => import(/* webpackChunkName: "${componentName}" */ '@/${componentFile}'),
+      load: () => import(/* webpackChunkName: "${componentName}" */ '@/pages/${componentFile}'),
       componentName: '${componentName}',
       index: ${index},
       id: '${id}',

packages/ice/src/service/runtimeGenerator.ts

@@ -35,7 +35,7 @@ const RENDER_WAIT = 150;
 interface Options {
   rootDir: string;
   targetDir: string;
-  defaultRenderData: RenderData;
+  defaultRenderData?: RenderData;
   templates?: (string | TemplateOptions)[];
 }
 
@@ -113,7 +113,7 @@ export default class Generator {
   private plugins: any[];
 
   public constructor(options: Options) {
-    const { rootDir, targetDir, defaultRenderData, templates } = options;
+    const { rootDir, targetDir, defaultRenderData = {}, templates } = options;
     this.rootDir = rootDir;
     this.targetDir = targetDir;
     this.renderData = defaultRenderData;

packages/ice/src/service/watchSource.ts

@@ -29,8 +29,8 @@ function createWatch(options: {
 
   return {
     watcher,
-    addWatchEvent: ([pattern, action, name]: WatchEvent) => {
-      watchEvents.push([pattern, action, name]);
+    addWatchEvent: (...args: WatchEvent[]) => {
+      watchEvents.push(...args);
     },
     removeWatchEvent: (name: string) => {
       const eventIndex = watchEvents.findIndex(([,,watchName]) => watchName === name);

packages/ice/template/index.ts.ejs

@@ -3,6 +3,8 @@ import {
   useAppContext,
   Link,
   Outlet,
+  useParams,
+  useSearchParams,
   Meta,
   Title,
   Links,
@@ -16,6 +18,8 @@ export {
   useAppContext,
   Link,
   Outlet,
+  useParams,
+  useSearchParams,
   Meta,
   Title,
   Links,