@modern-js/plugin-ssg 1.0.0 → 1.1.2-rc.0

package/src/index.ts

@@ -1,76 +1,36 @@
-import {
-  path,
-  INTERNAL_SRC_ALIAS,
-  logger,
-  upath,
-  PLUGIN_SCHEMAS,
-} from '@modern-js/utils';
+import path from 'path';
+import { logger, PLUGIN_SCHEMAS } from '@modern-js/utils';
 import {
   createPlugin,
   useAppContext,
   useResolvedConfigContext,
 } from '@modern-js/core';
-import { BabelChain } from '@modern-js/babel-chain';
-import { LoaderManifest } from './manifest-op';
+import { generatePath } from 'react-router-dom';
 import {
   AgreedRoute,
   AgreedRouteMap,
-  CreatePageListener,
   EntryPoint,
   ExtendOutputConfig,
-  HookContext,
+  SSG,
   SsgRoute,
 } from './types';
 import {
   formatOutput,
-  getOutput,
-  getSSGRenderLevel,
-  getUrlPrefix,
-  parsedSSGConfig,
+  isDynamicUrl,
   readJSONSpec,
-  replaceWithAlias,
+  standardOptions,
   writeJSONSpec,
 } from './libs/util';
-import { invoker } from './libs/invoker';
 import { createServer } from './server';
 import { writeHtmlFile } from './libs/output';
 import { replaceRoute } from './libs/replace';
-
-const listStaticFiles = (
-  pwd: string,
-  entriesDir: string,
-  useSSG: string | boolean,
-) => {
-  const absEntriesDir = path.join(pwd, entriesDir);
-
-  const staticRenderLevel = getSSGRenderLevel(useSSG);
-
-  const staticFiles = new LoaderManifest().get(
-    absEntriesDir,
-    staticRenderLevel,
-  );
-
-  // 将绝对路径转换成 alias，因为获取到的约定路由也是使用别名的
-  const staticAlias = staticFiles.map(filepath =>
-    replaceWithAlias(path.join(pwd, 'src'), filepath, INTERNAL_SRC_ALIAS),
-  );
-  return staticAlias;
-};
+import { makeRoute } from './libs/make';
 
 export default createPlugin(
   (() => {
     const agreedRouteMap: AgreedRouteMap = {};
 
     return {
-      config() {
-        return {
-          tools: {
-            babel(config: any, { chain }: { chain: BabelChain }) {
-              chain.plugin('./loader').use(upath.normalizeSafe(require.resolve('./loader')));
-            },
-          },
-        };
-      },
       validateSchema() {
         return PLUGIN_SCHEMAS['@modern-js/plugin-ssg'];
       },
@@ -93,25 +53,19 @@ export default createPlugin(
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const appContext = useAppContext();
 
-        const { appDirectory } = appContext;
-        const {
-          output,
-          server: { baseUrl },
-          source: { entriesDir },
-        } = resolvedConfig;
+        const { appDirectory, entrypoints } = appContext;
+        const { output } = resolvedConfig;
         const { ssg, path: outputPath } = output as typeof output &
           ExtendOutputConfig;
 
-        const ssgOptions = Array.isArray(ssg) ? ssg.pop() : ssg;
+        const ssgOptions: SSG = Array.isArray(ssg) ? ssg.pop() : ssg;
         // no ssg configuration, skip ssg render.
         if (!ssgOptions) {
           return;
         }
 
-        const { useSSG, userHook } = parsedSSGConfig(ssgOptions);
         const buildDir = path.join(appDirectory, outputPath as string);
         const routes = readJSONSpec(buildDir);
-        const staticAlias = listStaticFiles(appDirectory, entriesDir!, useSSG);
 
         // filter all routes not web
         const pageRoutes = routes.filter(route => !route.isApi);
@@ -122,42 +76,83 @@ export default createPlugin(
           return;
         }
 
+        const intermediateOptions = standardOptions(ssgOptions, entrypoints);
+
+        if (!intermediateOptions) {
+          return;
+        }
+
         const ssgRoutes: SsgRoute[] = [];
+        // each route will try to match the configuration
+        pageRoutes.forEach(pageRoute => {
+          const { entryName, entryPath } = pageRoute;
+          const agreedRoutes = agreedRouteMap[entryName];
+          let entryOptions = intermediateOptions[entryName];
+
+          if (!agreedRoutes) {
+            // default behavior for non-agreed route
+            if (!entryOptions) {
+              return;
+            }
 
-        // callback of context.createPage, to format output, collect page route
-        const listener: CreatePageListener = (
-          route: SsgRoute,
-          agreed?: boolean,
-        ) => {
-          const urlPrefix = getUrlPrefix(route, baseUrl!);
-          const ssgOutput = getOutput(route, urlPrefix, agreed);
-          route.output = formatOutput(route.entryPath, ssgOutput);
-          ssgRoutes.push(route);
-        };
-
-        // check if every allowed agreed route was collected
-        const autoAddAgreed = (
-          context: HookContext & {
-            component: string;
-          },
-        ) => {
-          // if not exist in allowed list, return false
-          if (!staticAlias.includes(context.component)) {
-            return false;
+            // only add entry route if entryOptions is true
+            if (entryOptions === true) {
+              ssgRoutes.push({ ...pageRoute, output: entryPath });
+            } else if (entryOptions.routes?.length > 0) {
+              // if entryOptions is object and has routes options
+              // add every route in options
+              const { routes: enrtyRoutes, headers } = entryOptions;
+              enrtyRoutes.forEach(route => {
+                ssgRoutes.push(makeRoute(pageRoute, route, headers));
+              });
+            }
+          } else {
+            // Unless entryOptions is set to false
+            // the default behavior is to add all file-based routes
+            if (entryOptions === false) {
+              return;
+            }
+
+            if (!entryOptions || entryOptions === true) {
+              entryOptions = { preventDefault: [], routes: [], headers: {} };
+            }
+
+            const {
+              preventDefault = [],
+              routes: userRoutes = [],
+              headers,
+            } = entryOptions;
+            // if the user sets the routes, then only add them
+            if (userRoutes.length > 0) {
+              userRoutes.forEach(route => {
+                if (typeof route === 'string') {
+                  ssgRoutes.push(makeRoute(pageRoute, route, headers));
+                } else if (Array.isArray(route.params)) {
+                  route.params.forEach(param => {
+                    ssgRoutes.push(
+                      makeRoute(
+                        pageRoute,
+                        { ...route, url: generatePath(route.url, param) },
+                        headers,
+                      ),
+                    );
+                  });
+                } else {
+                  ssgRoutes.push(makeRoute(pageRoute, route, headers));
+                }
+              });
+            } else {
+              // otherwith add all except dynamic routes
+              agreedRoutes
+                .filter(route => !preventDefault.includes(route.path))
+                .forEach(route => {
+                  if (!isDynamicUrl(route.path)) {
+                    ssgRoutes.push(makeRoute(pageRoute, route.path, headers));
+                  }
+                });
+            }
           }
-          // if allowed, return collection state
-          return !ssgRoutes.some(
-            ssgRoute => ssgRoute.urlPath === context.route.path,
-          );
-        };
-
-        await invoker(
-          pageRoutes,
-          agreedRouteMap,
-          userHook,
-          autoAddAgreed,
-          listener,
-        );
+        });
 
         if (ssgRoutes.length === 0) {
           return;
@@ -183,6 +178,7 @@ export default createPlugin(
             );
           }
           ssgRoute.isSSR = false;
+          ssgRoute.output = formatOutput(ssgRoute.output);
         });
 
         const htmlAry = await createServer(

package/src/libs/make.ts

@@ -0,0 +1,45 @@
+import path from 'path';
+import { ModernRoute } from '@modern-js/server';
+import normalize from 'normalize-path';
+import { compile } from '../server/prerender';
+import { RouteOptions, SsgRoute } from '../types';
+
+export function makeRender(
+  ssgRoutes: SsgRoute[],
+  render: ReturnType<typeof compile>,
+  port: number,
+): Promise<string>[] {
+  return ssgRoutes.map((ssgRoute: SsgRoute) =>
+    render({
+      url: ssgRoute.urlPath,
+      headers: { host: `localhost:${port}`, ...ssgRoute.headers },
+      connection: {},
+    }),
+  );
+}
+
+export function makeRoute(
+  baseRoute: ModernRoute,
+  route: string | RouteOptions,
+  headers: Record<string, any> = {},
+): SsgRoute {
+  const { urlPath, entryPath } = baseRoute;
+
+  if (typeof route === 'string') {
+    return {
+      ...baseRoute,
+      urlPath: normalize(`${urlPath}${route}`) || '/',
+      headers,
+      output: path.join(entryPath, `..${route}`),
+    };
+  } else {
+    return {
+      ...baseRoute,
+      urlPath: normalize(`${urlPath}${route.url}`) || '/',
+      headers: { ...headers, ...route.headers },
+      output: route.output
+        ? path.normalize(route.output)
+        : path.join(entryPath, `..${route.url}`),
+    };
+  }
+}

package/src/libs/output.ts

@@ -1,4 +1,5 @@
-import { path, fs } from '@modern-js/utils';
+import path from 'path';
+import { fs } from '@modern-js/utils';
 import { SsgRoute } from '../types';
 
 export function writeHtmlFile(
@@ -8,7 +9,7 @@ export function writeHtmlFile(
 ) {
   htmlAry.forEach((html: any, index: number) => {
     const ssgRoute = ssgRoutes[index];
-    const filepath = path.join(baseDir, ssgRoute.output!);
+    const filepath = path.join(baseDir, ssgRoute.output);
     if (!fs.existsSync(path.dirname(filepath))) {
       fs.ensureDirSync(path.dirname(filepath));
     }

package/src/libs/replace.ts

@@ -2,7 +2,7 @@ import normalize from 'normalize-path';
 import { ModernRoute } from '@modern-js/server';
 import { SsgRoute } from '../types';
 
-export function exist(route: SsgRoute, pageRoutes: ModernRoute[]): number {
+export function exist(route: ModernRoute, pageRoutes: ModernRoute[]): number {
   return pageRoutes.slice().findIndex(pageRoute => {
     const urlEqual = normalize(pageRoute.urlPath) === normalize(route.urlPath);
     const entryEqual = pageRoute.entryName === route.entryName;
@@ -16,12 +16,15 @@ export function exist(route: SsgRoute, pageRoutes: ModernRoute[]): number {
 export function replaceRoute(ssgRoutes: SsgRoute[], pageRoutes: ModernRoute[]) {
   // remove redundant fields and replace rendered entryPath
   const cleanSsgRoutes = ssgRoutes.map(ssgRoute => {
-    const { output, ...cleanSsgRoute } = ssgRoute;
-    return Object.assign(cleanSsgRoute, output ? { entryPath: output } : {});
+    const { output, headers, ...cleanSsgRoute } = ssgRoute;
+    return Object.assign(
+      cleanSsgRoute,
+      output ? { entryPath: output } : {},
+    ) as ModernRoute;
   });
 
   // all routes that need to be added and replaced
-  const freshRoutes: SsgRoute[] = [];
+  const freshRoutes: ModernRoute[] = [];
   cleanSsgRoutes.forEach(ssgRoute => {
     const index = exist(ssgRoute, pageRoutes);
 

package/src/libs/util.ts

@@ -1,12 +1,13 @@
-import { path, ROUTE_SPEC_FILE, fs } from '@modern-js/utils';
+import path from 'path';
+import { ROUTE_SPEC_FILE, fs, isSingleEntry } from '@modern-js/utils';
 import { ModernRoute } from '@modern-js/server';
-import { SSGConfig, SsgRoute } from '../types';
-import { MODE } from '@/manifest-op';
+import { EntryPoint, MultiEntryOptions, SSG, SsgRoute } from '../types';
 
-export function formatOutput(base: string, filename: string) {
-  const file = path.extname(filename) ? filename : `${filename}/index.html`;
-  const dirname = path.dirname(base);
-  return path.join(dirname, file);
+export function formatOutput(filename: string) {
+  const outputPath = path.extname(filename)
+    ? filename
+    : `${filename}/index.html`;
+  return outputPath;
 }
 
 export function formatPath(str: string) {
@@ -88,27 +89,39 @@ export const writeJSONSpec = (dir: string, routes: ModernRoute[]) => {
   fs.writeJSONSync(routeJSONPath, { routes }, { spaces: 2 });
 };
 
-export const getSSGRenderLevel = (key: boolean | string) => {
-  const level = typeof key === 'boolean' ? MODE.LOOSE : MODE[key.toUpperCase()];
-  // currently only MODE.STRICT and MODE.LOOSE are supported
-  if (!level || level > 2 || level < 1) {
-    throw new Error(
-      `[SSG Render Fail] SSG 不支持当前 Mode，useSSG: ${key.toString()}, Level: ${level}`,
-    );
-  }
-
-  return level;
-};
-
-export const parsedSSGConfig = (ssg: SSGConfig) => {
-  const useSSG = Boolean(ssg);
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  const userHook = typeof ssg === 'function' ? ssg : () => {};
-  return { useSSG, userHook };
-};
-
 export const replaceWithAlias = (
   base: string,
   filePath: string,
   alias: string,
-) => path.join(alias, path.relative(base, filePath));
+) => path.posix.join(alias, path.posix.relative(base, filePath));
+
+export const standardOptions = (ssgOptions: SSG, entrypoints: EntryPoint[]) => {
+  if (ssgOptions === false) {
+    return false;
+  }
+
+  if (ssgOptions === true) {
+    return entrypoints.reduce((opt, entry) => {
+      opt[entry.entryName] = ssgOptions;
+      return opt;
+    }, {} as MultiEntryOptions);
+  } else if (typeof ssgOptions === 'object') {
+    const isSingle = isSingleEntry(entrypoints);
+
+    if (isSingle && typeof (ssgOptions as any).main === 'undefined') {
+      return { main: ssgOptions } as MultiEntryOptions;
+    } else {
+      return ssgOptions as MultiEntryOptions;
+    }
+  } else if (typeof ssgOptions === 'function') {
+    const intermediateOptions: MultiEntryOptions = {};
+    for (const entrypoint of entrypoints) {
+      const { entryName } = entrypoint;
+      // Todo may be async function
+      intermediateOptions[entryName] = ssgOptions(entryName);
+    }
+    return intermediateOptions;
+  }
+
+  return false;
+};

package/src/server/index.ts

@@ -1,5 +1,6 @@
 import childProcess from 'child_process';
-import { path, logger, SERVER_BUNDLE_DIRECTORY } from '@modern-js/utils';
+import path from 'path';
+import { logger, SERVER_BUNDLE_DIRECTORY } from '@modern-js/utils';
 import { NormalizedConfig, useAppContext } from '@modern-js/core';
 import { ModernRoute } from '@modern-js/server';
 import { SsgRoute } from '../types';
@@ -14,7 +15,7 @@ export const createServer = (
   new Promise((resolve, reject) => {
     // this side of the shallow copy of a route for subsequent render processing, to prevent the modification of the current field
     // manually enable the server-side rendering configuration for all routes that require SSG
-    const backup = ssgRoutes.map(ssgRoute => ({
+    const backup: ModernRoute[] = ssgRoutes.map(ssgRoute => ({
       ...ssgRoute,
       isSSR: true,
       bundle: `${SERVER_BUNDLE_DIRECTORY}/${ssgRoute.entryName}.js`,

package/src/server/process.ts

@@ -1,10 +1,11 @@
 import Server, { ModernRoute } from '@modern-js/server';
 import portfinder from 'portfinder';
 import { NormalizedConfig } from '@modern-js/core';
-import { compatRequire, upath } from '@modern-js/utils';
-import { makeRender } from '../libs/render';
+import { compatRequire } from '@modern-js/utils';
+import { makeRender } from '../libs/make';
 import { compile as createRender } from './prerender';
 import { CLOSE_SIGN } from './consts';
+import { SsgRoute } from '@/types';
 
 type Then<T> = T extends PromiseLike<infer U> ? U : T;
 
@@ -13,10 +14,10 @@ type ModernServer = Then<ReturnType<typeof Server>>;
 const safetyRequire = (filename: string, base: string) => {
   try {
     return compatRequire(
-      upath.normalizeSafe(require.resolve(`${filename}/server`, { paths: [base] })),
+      require.resolve(`${filename}/server`, { paths: [base] }),
     );
   } catch (e) {
-    return compatRequire(upath.normalizeSafe(require.resolve(filename, { paths: [base] })));
+    return compatRequire(require.resolve(filename, { paths: [base] }));
   }
 };
 
@@ -67,11 +68,12 @@ process.on('message', async (chunk: string) => {
       // get server handler, render to ssr
       const render = createRender(modernServer!.getRequestHandler());
       const renderPromiseAry = makeRender(
-        routes.filter(route => !route.isApi),
+        routes.filter(route => !route.isApi) as SsgRoute[],
         render,
         port,
       );
 
+      // eslint-disable-next-line promise/no-promise-in-callback
       const htmlAry = await Promise.all(renderPromiseAry);
       htmlAry.forEach((html: string) => {
         process.send!(html);

package/src/types.ts

@@ -16,30 +16,36 @@ export type AgreedRouteMap = {
   [propNames: string]: AgreedRoute[];
 };
 
-export type FreshPageConfig = {
-  url?: string;
-  output?: string;
-  params?: Record<string, string | number>;
+export type SsgRoute = ModernRoute & {
+  output: string;
   headers?: Record<string, string>;
 };
-export type UserInterfaceRoute = ModernRoute & {
-  path: string;
-  agreed?: boolean;
-};
 
-export type CreatePageParam = FreshPageConfig | FreshPageConfig[];
-export type CreatePageListener = (route: SsgRoute, agreed?: boolean) => void;
+export type RouteOptions =
+  | string
+  | {
+      url: string;
+      output?: string;
+      params?: Record<string, any>[];
+      headers?: Record<string, any>;
+    };
 
-export type SsgRoute = ModernRoute & {
-  output?: string;
-  headers?: Record<string, string>;
-};
-export type HookContext = {
-  createPage: (config?: CreatePageParam) => any;
-  route: UserInterfaceRoute;
-};
+export type SingleEntryOptions =
+  | boolean
+  | {
+      preventDefault?: string[];
+      headers?: Record<string, any>;
+      routes: RouteOptions[];
+    };
+
+export type MultiEntryOptions = Record<string, SingleEntryOptions>;
+
+export type SSG =
+  | boolean
+  | SingleEntryOptions
+  | MultiEntryOptions
+  | ((entryName: string) => SingleEntryOptions);
 
-export type SSGConfig = boolean | ((context: any) => void);
 export type ExtendOutputConfig = {
-  ssg: SSGConfig;
+  ssg: SSG;
 };

package/tests/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['@modern-js'],
+  parserOptions: {
+    project: require.resolve('./tsconfig.json'),
+  },
+};