fix(builder): failed to disable html via htmlPlugin: false (#3727)

* fix(builder): failed to disable html via htmlPlugin: false

* chore: add test

* chore: update implementation

Author: chenjiahan

.changeset/sour-eels-nail.md

@@ -0,0 +1,9 @@
+---
+'@modern-js/builder-rspack-provider': patch
+'@modern-js/builder-shared': patch
+'@modern-js/app-tools': patch
+---
+
+fix(builder): failed to disable html via htmlPlugin: false
+
+fix(builder): 修复通过 htmlPlugin: false 无法禁用 html 的问题

packages/builder/builder-shared/src/apply/html.ts

@@ -16,8 +16,14 @@ export function getTemplatePath(
 export const isHtmlDisabled = (
   config: SharedNormalizedConfig,
   target: BuilderTarget,
-) =>
-  (config.tools as { htmlPlugin: boolean }).htmlPlugin === false ||
-  target === 'node' ||
-  target === 'web-worker' ||
-  target === 'service-worker';
+) => {
+  const { htmlPlugin } = config.tools as {
+    htmlPlugin: boolean | Array<unknown>;
+  };
+  return (
+    htmlPlugin === false ||
+    target === 'node' ||
+    target === 'web-worker' ||
+    target === 'service-worker'
+  );
+};

packages/builder/builder-shared/src/mergeBuilderConfig.ts

@@ -16,6 +16,11 @@ export const mergeBuilderConfig = <T>(...configs: T[]): T =>
         return source ?? target;
       }
 
+      // allow using `htmlPlugin: false` to disable HTML
+      if (key === 'htmlPlugin' && source === false) {
+        return false;
+      }
+
       if (pair.some(_.isArray)) {
         return [..._.castArray(target), ..._.castArray(source)];
       }

packages/builder/builder-shared/tests/mergeConfig.test.ts

@@ -159,4 +159,72 @@ describe('mergeBuilderConfig', () => {
       d: { test: [2] },
     });
   });
+
+  test('should merge tools.htmlPlugin correctly', async () => {
+    expect(
+      mergeBuilderConfig(
+        {
+          tools: {
+            htmlPlugin: {},
+          },
+        },
+        {
+          tools: {
+            htmlPlugin: false,
+          },
+        },
+      ),
+    ).toEqual({
+      tools: {
+        htmlPlugin: false,
+      },
+    });
+
+    expect(
+      mergeBuilderConfig(
+        {
+          tools: {
+            htmlPlugin: false,
+          },
+        },
+        {
+          tools: {
+            htmlPlugin: {},
+          },
+        },
+      ),
+    ).toEqual({
+      tools: {
+        htmlPlugin: {},
+      },
+    });
+  });
+
+  const noop = () => {
+    //
+  };
+
+  expect(
+    mergeBuilderConfig(
+      {
+        tools: {
+          htmlPlugin: false,
+        },
+      },
+      {
+        tools: {
+          htmlPlugin: {},
+        },
+      },
+      {
+        tools: {
+          htmlPlugin: noop,
+        },
+      },
+    ),
+  ).toEqual({
+    tools: {
+      htmlPlugin: [{}, noop],
+    },
+  });
 });

packages/solutions/app-tools/src/builder/shared/builderPlugins/adapterHtml.ts

@@ -1,6 +1,6 @@
 import {
+  isHtmlDisabled,
   BuilderPlugin,
-  BuilderTarget,
   BundlerChain,
   createVirtualModule,
 } from '@modern-js/builder-shared';
@@ -12,23 +12,7 @@ import {
 import { template as lodashTemplate } from '@modern-js/utils/lodash';
 import { Bundler } from '../../../types';
 import { BottomTemplatePlugin } from '../bundlerPlugins';
-import type {
-  BuilderNormalizedConfig,
-  BuilderOptions,
-  BuilderPluginAPI,
-} from '../types';
-
-export function isHtmlEnabled(
-  config: BuilderNormalizedConfig,
-  target: BuilderTarget,
-) {
-  return (
-    config.tools?.htmlPlugin !== false &&
-    target !== 'node' &&
-    target !== 'service-worker' &&
-    target !== 'web-worker'
-  );
-}
+import type { BuilderOptions, BuilderPluginAPI } from '../types';
 
 export const builderPluginAdapterHtml = <B extends Bundler>(
   options: BuilderOptions<B>,
@@ -39,7 +23,7 @@ export const builderPluginAdapterHtml = <B extends Bundler>(
       async (chain, { CHAIN_ID, target, HtmlPlugin: HtmlBundlerPlugin }) => {
         const builderConfig = api.getNormalizedConfig();
 
-        if (isHtmlEnabled(builderConfig, target)) {
+        if (!isHtmlDisabled(builderConfig, target)) {
           applyBottomHtmlPlugin({
             api,
             options,

packages/solutions/app-tools/src/builder/shared/builderPlugins/adapterSSR.ts

@@ -1,5 +1,6 @@
 import * as path from 'path';
 import {
+  isHtmlDisabled,
   BuilderPlugin,
   BundlerChain,
   mergeBuilderConfig,
@@ -15,7 +16,6 @@ import type {
 import { HtmlAsyncChunkPlugin, RouterPlugin } from '../bundlerPlugins';
 import type { BuilderOptions, BuilderPluginAPI } from '../types';
 import { getServerCombinedModueFile } from '../../../analyze/utils';
-import { isHtmlEnabled } from './adapterHtml';
 
 export const builderPluginAdapterSSR = <B extends Bundler>(
   options: BuilderOptions<B>,
@@ -57,7 +57,7 @@ export const builderPluginAdapterSSR = <B extends Bundler>(
           });
         }
 
-        if (isHtmlEnabled(builderConfig, target)) {
+        if (!isHtmlDisabled(builderConfig, target)) {
           applyAsyncChunkHtmlPlugin({
             chain,
             modernConfig: options.normalizedConfig,

tests/integration/mwa-app/.browserslistrc

@@ -0,0 +1,5 @@
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10