Merge branch 'main' into fix_react_refresh_plugin_slow_1008

web-infra-dev · Oct 8, 2022 · 1af4598 · 1af4598
2 parents b6d7a86 + baf7337
commit 1af4598
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 45 deletions.
diff --git a/.changeset/change-my-builder.md b/.changeset/change-my-builder.md
@@ -0,0 +1,6 @@
+---
+'@modern-js/webpack-builder': patch
+---
+
+feat: support templateParameters function
+feat: 支持 templateParameters 函数配置
diff --git a/.changeset/wet-feet-exercise.md b/.changeset/wet-feet-exercise.md
@@ -0,0 +1,6 @@
+---
+'@modern-js/prod-server': patch
+---
+
+fix: console error message if error stack not exist
+fix: 如果错误堆栈不存在，则输出错误信息
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -30,7 +30,7 @@ jobs:
           fetch-depth: 1
 
       - name: Release
-        uses: modern-js-dev/actions@feat-pnpm-7
+        uses: modern-js-dev/actions@main
         with:
           # this expects you to have a script called release which does a build for your packages and calls changeset publish
           version: ${{ github.event.inputs.version }}

diff --git a/packages/builder/builder-doc/en/config/html/templateParameters.md b/packages/builder/builder-doc/en/config/html/templateParameters.md
@@ -1,4 +1,4 @@
-- Type: `Record<string, Record<string, unknown>>`
+- Type: `Object | Function`
 - Default:
 
 ```ts
@@ -20,7 +20,35 @@ type DefaultParameters = {
 };
 ```
 
-Define the parameters in the HTML template, corresponding to the `templateParameters` config of [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin).
+Define the parameters in the HTML template, corresponding to the `templateParameters` config of [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin).You can use the config as an object or a function.
+
+If it is an object, it will be merged with the default parameters. For example:
+
+```ts
+export default {
+  html: {
+    templateParameters: {
+      title: 'My App',
+    },
+  },
+};
+```
+
+If it is a function, the default parameters will be passed in, and you can return an object to override the default parameters. For example:
+
+```ts
+export default {
+  html: {
+    templateParameters: (defaultParameters) => {
+      console.log(defaultParameters.compilation);
+      console.log(defaultParameters.title);
+      return {
+        title: 'My App',
+      };
+    },
+  },
+};
+```
 
 #### Example
 
@@ -36,9 +64,23 @@ export default {
 };
 ```
 
-In the HTML template, read the parameter via `<%= foo %>`:
+Or you can use a function to dynamically generate the parameters:
 
 ```js
+export default {
+  html: {
+    templateParameters: (defaultParameters) => {
+      return {
+        foo: 'bar',
+      };
+    },
+  },
+};
+```
+
+Then you can use the `foo` parameter in the HTML template by `<%= foo %>`:
+
+```html
 <script>window.foo = '<%= foo %>'</script>
 ```
 

diff --git a/packages/builder/builder-doc/zh/config/html/templateParameters.md b/packages/builder/builder-doc/zh/config/html/templateParameters.md
@@ -1,4 +1,4 @@
-- Type: `Record<string, Record<string, unknown>>`
+- Type: `Object | Function`
 - Default:
 
 ```ts
@@ -20,11 +20,39 @@ type DefaultParameters = {
 };
 ```
 
-定义 HTML 模板中的参数，对应 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 的 `templateParameters` 配置项。
+定义 HTML 模板中的参数，对应 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 的 `templateParameters` 配置项。你可以使用配置为对象或者函数。
+
+如果是对象，会和默认参数合并。比如：
+
+```ts
+export default {
+  html: {
+    templateParameters: {
+      title: 'My App',
+    },
+  },
+};
+```
+
+如果是函数，会传入默认参数，你可以返回一个对象，用于覆盖默认参数。比如：
+
+```ts
+export default {
+  html: {
+    templateParameters: (defaultParameters) => {
+      console.log(defaultParameters.compilation);
+      console.log(defaultParameters.title);
+      return {
+        title: 'My App',
+      };
+    },
+  },
+};
+```
 
 #### 示例
 
-需要在 HTML 模板中使用 `foo` 参数，可以添加如下设置：
+如果需要在 HTML 模板中使用 `foo` 参数，可以添加如下设置：
 
 ```js
 export default {
@@ -36,7 +64,21 @@ export default {
 };
 ```
 
-在 HTML 模板中，通过 `<%= foo %>` 来读取参数：
+或者使用函数配置：
+
+```js
+export default {
+  html: {
+    templateParameters: (defaultParameters) => {
+      return {
+        foo: 'bar',
+      };
+    },
+  },
+};
+```
+
+接下来，你可以在 HTML 模板中，通过 `<%= foo %>` 来读取参数：
 
 ```js
 <script>window.foo = '<%= foo %>'</script>

diff --git a/packages/builder/webpack-builder/src/plugins/html.ts b/packages/builder/webpack-builder/src/plugins/html.ts
@@ -71,32 +71,35 @@ async function getTemplateParameters(
   config: BuilderConfig,
   assetPrefix: string,
 ): Promise<HTMLPluginOptions['templateParameters']> {
+  const { applyOptionsChain } = await import('@modern-js/utils');
   const { mountId, templateParameters, templateParametersByEntries } =
     config.html || {};
 
   const meta = await getMetaTags(entryName, config);
   const title = getTitle(entryName, config);
-
+  const templateParams =
+    templateParametersByEntries?.[entryName] || templateParameters;
   const baseParameters = {
     meta,
     title,
     mountId: mountId || DEFAULT_MOUNT_ID,
     entryName,
     assetPrefix,
-    ...(templateParametersByEntries?.[entryName] || templateParameters),
   };
 
-  // refer to: https://github.com/jantimon/html-webpack-plugin/blob/main/examples/template-parameters/webpack.config.js
-  return (compilation, assets, assetTags, pluginOptions) => ({
-    compilation,
-    webpackConfig: compilation.options,
-    htmlWebpackPlugin: {
-      tags: assetTags,
-      files: assets,
-      options: pluginOptions,
-    },
-    ...baseParameters,
-  });
+  return (compilation, assets, assetTags, pluginOptions) => {
+    const defaultOptions = {
+      compilation,
+      webpackConfig: compilation.options,
+      htmlWebpackPlugin: {
+        tags: assetTags,
+        files: assets,
+        options: pluginOptions,
+      },
+      ...baseParameters,
+    };
+    return applyOptionsChain(defaultOptions, templateParams);
+  };
 }
 
 export function getTemplatePath(entryName: string, config: BuilderConfig) {

diff --git a/packages/builder/webpack-builder/src/shared/utils.ts b/packages/builder/webpack-builder/src/shared/utils.ts
@@ -198,8 +198,8 @@ export function getPackageNameFromModulePath(modulePath: string) {
   return packageName;
 }
 
-export const mergeBuilderConfig = <T>(config: T, ...sources: T[]): T =>
-  _.mergeWith(config, ...sources, (target: unknown, source: unknown) => {
+export const mergeBuilderConfig = <T>(...configs: T[]): T =>
+  _.mergeWith({}, ...configs, (target: unknown, source: unknown) => {
     const pair = [target, source];
     if (pair.some(_.isUndefined)) {
       // fallback to lodash default merge behavior

diff --git a/packages/builder/webpack-builder/src/types/config/html.ts b/packages/builder/webpack-builder/src/types/config/html.ts
@@ -1,5 +1,6 @@
 import type { MetaOptions } from '@modern-js/utils';
 import type { HTMLPluginOptions } from '../thirdParty';
+import type { ChainedConfig } from '../utils';
 
 export type CrossOrigin = 'anonymous' | 'use-credentials';
 
@@ -18,8 +19,13 @@ export interface HtmlConfig {
   disableHtmlFolder?: boolean;
   template?: string;
   templateByEntries?: Partial<Record<string, string>>;
-  templateParameters?: Record<string, unknown>;
-  templateParametersByEntries?: Partial<
-    Record<string, Record<string, unknown>>
+  templateParameters?:
+    | Record<string, unknown>
+    | ChainedConfig<Record<string, unknown>>;
+  templateParametersByEntries?: Record<
+    string,
+    | Record<string, unknown>
+    | ChainedConfig<Record<string, unknown>>
+    | HTMLPluginOptions['templateParameters']
   >;
 }
diff --git a/packages/builder/webpack-builder/tests/mergeConfig.test.ts b/packages/builder/webpack-builder/tests/mergeConfig.test.ts
@@ -138,7 +138,7 @@ describe('mergeBuilderConfig', () => {
     const other = { a: [3], b: [4], c: { test: [2] }, d: { test: [1] } };
     const other1 = { a: [4], b: [5], c: { test: [3] }, d: { test: [2] } };
 
-    const res = mergeBuilderConfig<Record<string, any>>({}, obj, other, other1);
+    const res = mergeBuilderConfig<Record<string, any>>(obj, other, other1);
 
     expect(res).toEqual({
       a: [1, 3, 4],
@@ -159,22 +159,5 @@ describe('mergeBuilderConfig', () => {
       c: { test: [3] },
       d: { test: [2] },
     });
-
-    const res1 = mergeBuilderConfig<Record<string, any>>(obj, other, other1);
-
-    expect(res1).toEqual(res);
-    expect(obj).toEqual(res);
-    expect(other).toEqual({
-      a: [3],
-      b: [4],
-      c: { test: [2] },
-      d: { test: [1] },
-    });
-    expect(other1).toEqual({
-      a: [4],
-      b: [5],
-      c: { test: [3] },
-      d: { test: [2] },
-    });
   });
 });
diff --git a/packages/server/prod-server/src/libs/render/index.ts b/packages/server/prod-server/src/libs/render/index.ts
@@ -61,7 +61,10 @@ export const createRenderHandler = ({
         );
         return result;
       } catch (err) {
-        ctx.error(ERROR_DIGEST.ERENDER, (err as Error).stack);
+        ctx.error(
+          ERROR_DIGEST.ERENDER,
+          (err as Error).stack || (err as Error).message,
+        );
         ctx.res.setHeader('x-modern-ssr-fallback', '1');
       }
     }