fix: browserslist query and rspack target

CONTRIBUTING.md

@@ -12,4 +12,4 @@ Current unstable versions are:
 
 | Package      | Link                                                    |
 | ------------ | ------------------------------------------------------- |
-| @rspack/core | [PR](https://github.com/web-infra-dev/rspack/pull/7210) |
+| @rspack/core | [PR](https://github.com/web-infra-dev/rspack/pull/7394) |

e2e/cases/alias/__snapshots__/index.test.ts.snap

@@ -9,7 +9,6 @@ const a = 'hello world';
 
 console.info(a);
 
-export { a };
 "
 `;
 

e2e/cases/target/config/index.test.ts

@@ -0,0 +1,17 @@
+import { expect, test } from 'vitest';
+import { buildAndGetResults } from '#shared';
+
+test('target should be set to the default value in Rspack', async () => {
+  const fixturePath = __dirname;
+  const { rspackConfig: bundlerConfigs } =
+    await buildAndGetResults(fixturePath);
+
+  expect(bundlerConfigs.map((c) => c.target)).toMatchInlineSnapshot(`
+    [
+      [
+        "es5",
+        "node",
+      ],
+    ]
+  `);
+});

e2e/cases/target/config/rslib.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleCjsConfig, generateBundleEsmConfig } from '#shared';
+
+export default defineConfig({
+  lib: [
+    generateBundleEsmConfig(__dirname, {
+      output: {
+        target: 'node',
+        syntax: 'es2015',
+      },
+    }),
+    // TODO: `target` is inheriting from Rsbuild now, that supports
+    // 'web', 'node' and 'web-worker'. Option of 'neutral' is not available.
+    // generateBundleCjsConfig(__dirname, {
+    //   output: {
+    //     target: 'neutral',
+    //     syntax: ['node 20'],
+    //   },
+    // }),
+  ],
+  source: {
+    entry: {
+      main: './src/index.ts',
+    },
+  },
+});

e2e/cases/target/config/src/index.ts

@@ -0,0 +1 @@
+export const foo = 'foo';

e2e/cases/target/config/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@rslib/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@src/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

e2e/cases/target/default/index.test.ts

@@ -0,0 +1,21 @@
+import { expect, test } from 'vitest';
+import { buildAndGetResults } from '#shared';
+
+test('target should be set to the default value in Rspack', async () => {
+  const fixturePath = __dirname;
+  const { rspackConfig: bundlerConfigs } =
+    await buildAndGetResults(fixturePath);
+
+  expect(bundlerConfigs.map((c) => c.target)).toMatchInlineSnapshot(`
+    [
+      [
+        "es2022",
+        "web",
+      ],
+      [
+        "es2022",
+        "web",
+      ],
+    ]
+  `);
+});

e2e/cases/target/default/rslib.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleCjsConfig, generateBundleEsmConfig } from '#shared';
+
+export default defineConfig({
+  lib: [generateBundleEsmConfig(__dirname), generateBundleCjsConfig(__dirname)],
+  source: {
+    entry: {
+      main: './src/index.ts',
+    },
+  },
+});

e2e/cases/target/default/src/index.ts

@@ -0,0 +1 @@
+export const foo = 'foo';

e2e/cases/target/default/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@rslib/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@src/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

e2e/scripts/shared.ts

@@ -1,9 +1,16 @@
 import { join } from 'node:path';
-import { mergeRsbuildConfig as mergeConfig } from '@rsbuild/core';
+import {
+  type InspectConfigResult,
+  type Rspack,
+  mergeRsbuildConfig as mergeConfig,
+} from '@rsbuild/core';
 import type { LibConfig, RslibConfig } from '@rslib/core';
 import { globContentJSON } from '#helper';
 import { build } from '../../packages/core/src/build';
-import { loadConfig } from '../../packages/core/src/config';
+import {
+  composeCreateRsbuildConfig,
+  loadConfig,
+} from '../../packages/core/src/config';
 
 export function generateBundleEsmConfig(
   cwd: string,
@@ -103,15 +110,28 @@ export async function getResults(
 export const buildAndGetResults = async (
   fixturePath: string,
   type: 'js' | 'dts' = 'js',
-) => {
+): Promise<{
+  contents: Record<string, Record<string, string>>;
+  files: Record<string, string[]>;
+  entries: Record<string, string>;
+  entryFiles: Record<string, string>;
+  rspackConfig: InspectConfigResult['origin']['bundlerConfigs'];
+  rsbuildConfig: InspectConfigResult['origin']['rsbuildConfig'];
+}> => {
   const rslibConfig = await loadConfig(join(fixturePath, 'rslib.config.ts'));
   process.chdir(fixturePath);
-  await build(rslibConfig);
+  const rsbuildInstance = await build(rslibConfig);
+  const {
+    origin: { bundlerConfigs, rsbuildConfig },
+  } = await rsbuildInstance.inspectConfig({ verbose: true });
+
   const results = await getResults(rslibConfig, fixturePath, type);
   return {
     contents: results.contents,
     files: results.files,
     entries: results.entries,
     entryFiles: results.entryFiles,
+    rspackConfig: bundlerConfigs,
+    rsbuildConfig: rsbuildConfig,
   };
 };

package.json

@@ -50,7 +50,7 @@
   },
   "pnpm": {
     "overrides": {
-      "@rspack/core": "npm:@rspack/[email protected]d77b591-20240718094414"
+      "@rspack/core": "npm:@rspack/[email protected]338cfbe-20240731183605"
     }
   }
 }

packages/core/src/config.ts

@@ -4,6 +4,7 @@ import {
   type RsbuildConfig,
   createRsbuild,
   defineConfig as defineRsbuildConfig,
+  loadConfig as loadRsbuildConfig,
   mergeRsbuildConfig,
 } from '@rsbuild/core';
 import glob from 'fast-glob';
@@ -66,8 +67,7 @@ export async function loadConfig(
 ): Promise<RslibConfig> {
   const root = process.cwd();
   const configFilePath = resolveConfigPath(root, customConfig)!;
-  const { loadConfig } = await import('@rsbuild/core');
-  const { content } = await loadConfig({
+  const { content } = await loadRsbuildConfig({
     cwd: dirname(configFilePath),
     path: configFilePath,
     envMode,
@@ -185,26 +185,48 @@ const getDefaultAutoExtensionConfig = (
 
 const getDefaultSyntaxConfig = (syntax?: Syntax): RsbuildConfig => {
   // Defaults to ESNext, Rslib will assume all of the latest JavaScript and CSS features are supported.
-  return syntax === undefined
-    ? {
-        tools: {
-          rspack: {
-            // The highest is 2022 in Rspack
-            target: 'es2022',
-          },
-          swc(config) {
-            config.jsc ??= {};
-            config.jsc.target = 'esnext';
-            delete config.env;
-            return config;
-          },
-        },
-      }
-    : {
-        output: {
-          overrideBrowserslist: transformSyntaxToBrowserslist(syntax),
+
+  if (syntax) {
+    const browserslist =
+      syntax === undefined
+        ? ['latest 2 versions', 'not dead', 'not ie 11']
+        : transformSyntaxToBrowserslist(syntax);
+
+    return {
+      tools: {
+        rspack: (config) => {
+          // TODO: Rspack should could resolve `browserslist:{query}` like webpack.
+          // https://webpack.js.org/configuration/target/#browserslist
+          // Using 'es5' as a temporary solution for compatibility.
+          config.target = ['es5'];
+          return config;
         },
-      };
+      },
+      output: {
+        overrideBrowserslist: browserslist,
+      },
+    };
+  }
+
+  return {
+    tools: {
+      rspack: (config) => {
+        config.target = ['es2022'];
+        return config;
+      },
+    },
+    output: {
+      // If no browserslist query is provided, Rslib will assume
+      overrideBrowserslist: [
+        'last 1 Chrome versions',
+        'last 1 Firefox versions',
+        'last 1 Edge versions',
+        'last 1 Safari versions',
+        'last 1 ios_saf versions',
+        'not dead',
+      ],
+    },
+  };
 };
 
 const getDefaultEntryConfig = async (
@@ -368,9 +390,20 @@ async function postUpdateRsbuildConfig(
 const getDefaultTargetConfig = (target: string): RsbuildConfig => {
   switch (target) {
     case 'web':
-      return {};
+      return {
+        tools: {
+          rspack: {
+            target: ['web'],
+          },
+        },
+      };
     case 'node':
       return {
+        tools: {
+          rspack: {
+            target: ['node'],
+          },
+        },
         output: {
           // When output.target is 'node', Node.js's built-in will be treated as externals of type `node-commonjs`.
           // Simply override the built-in modules to make them external.
@@ -380,7 +413,13 @@ const getDefaultTargetConfig = (target: string): RsbuildConfig => {
         },
       };
     case 'neutral':
-      return {};
+      return {
+        tools: {
+          rspack: {
+            target: ['web', 'node'],
+          },
+        },
+      };
     default:
       throw new Error(`Unsupported platform: ${target}`);
   }

packages/core/src/utils/syntax.ts

@@ -122,7 +122,9 @@ const ESX_TO_BROWSERSLIST: Record<
 
 export const transformSyntaxToBrowserslist = (
   syntax: Syntax,
-): NonNullable<RsbuildConfig['output']>['overrideBrowserslist'] => {
+): NonNullable<
+  NonNullable<RsbuildConfig['output']>['overrideBrowserslist']
+> => {
   // only single esX is allowed
   if (typeof syntax === 'string' && syntax.toLowerCase().startsWith('es')) {
     if (syntax.toLowerCase() in ESX_TO_BROWSERSLIST) {
@@ -132,7 +134,7 @@ export const transformSyntaxToBrowserslist = (
             return version;
           }
 
-          return `${engine} ${version}`;
+          return `${engine} >= ${version}`;
         },
       );
     }