fix: syntax could handle combined pattern (#163)

Author: fi3ework

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

@@ -34,3 +34,14 @@ function bar() {} /*#__PURE__*/
 export { Foo };
 "
 `;
+
+exports[`should downgrade class private method with output.syntax config 2`] = `
+"class Foo {
+    constructor(){
+        this.#bar();
+    }
+    #bar() {}
+}
+export { Foo };
+"
+`;

e2e/cases/syntax/config/rslib.config.ts

@@ -5,14 +5,28 @@ export default defineConfig({
   lib: [
     generateBundleEsmConfig({
       output: {
+        distPath: { root: 'dist/esm/0' },
         syntax: 'es2015',
       },
     }),
+    generateBundleEsmConfig({
+      output: {
+        distPath: { root: 'dist/esm/1' },
+        syntax: ['es2022'],
+      },
+    }),
     generateBundleCjsConfig({
       output: {
+        distPath: { root: 'dist/cjs/0' },
         syntax: ['node 20'],
       },
     }),
+    generateBundleCjsConfig({
+      output: {
+        distPath: { root: 'dist/cjs/1' },
+        syntax: ['node 20', 'es5'],
+      },
+    }),
   ],
   source: {
     entry: {

e2e/cases/syntax/index.test.ts

@@ -16,8 +16,12 @@ test('should downgrade class private method with output.syntax config', async ()
   const fixturePath = join(__dirname, 'config');
   const { entries } = await buildAndGetResults(fixturePath);
 
-  expect(entries.esm).toMatchSnapshot();
-  expect(entries.esm).not.toContain('#bar');
+  expect(entries.esm0).toMatchSnapshot();
+  expect(entries.esm0).not.toContain('#bar');
 
-  expect(entries.cjs).toContain('#bar');
+  expect(entries.esm1).toMatchSnapshot();
+  expect(entries.esm1).toContain('#bar');
+
+  expect(entries.cjs0).toContain('#bar');
+  expect(entries.cjs1).not.toContain('#bar');
 });

packages/core/src/config.ts

@@ -439,6 +439,7 @@ const composeSyntaxConfig = (
   target?: string,
 ): RsbuildConfig => {
   // Defaults to ESNext, Rslib will assume all of the latest JavaScript and CSS features are supported.
+
   if (syntax) {
     return {
       tools: {

packages/core/src/utils/syntax.ts

@@ -125,27 +125,34 @@ export const transformSyntaxToBrowserslist = (
 ): 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) {
-      return Object.entries(ESX_TO_BROWSERSLIST[syntax]).flatMap(
-        ([engine, version]) => {
+  const handleSyntaxItem = (
+    syntaxItem: EcmaScriptVersion | string,
+  ): string[] => {
+    if (
+      typeof syntaxItem === 'string' &&
+      syntaxItem.toLowerCase().startsWith('es')
+    ) {
+      if (syntaxItem.toLowerCase() in ESX_TO_BROWSERSLIST) {
+        return Object.entries(
+          ESX_TO_BROWSERSLIST[syntaxItem as EcmaScriptVersion],
+        ).flatMap(([engine, version]) => {
           if (Array.isArray(version)) {
             return version;
           }
 
           return `${engine} >= ${version}`;
-        },
-      );
+        });
+      }
+
+      throw new Error(`Unsupported ES version: ${syntaxItem}`);
     }
 
-    throw new Error(`Unsupported ES version: ${syntax}`);
-  }
+    return [syntaxItem];
+  };
 
-  // inline browserslist query
   if (Array.isArray(syntax)) {
-    return syntax;
+    return syntax.flatMap(handleSyntaxItem);
   }
 
-  throw new Error(`Unsupported syntax: ${syntax}`);
+  return handleSyntaxItem(syntax);
 };

packages/core/tests/syntax.test.ts

@@ -49,4 +49,26 @@ describe('Correctly resolve syntax', () => {
       ]
     `);
   });
+
+  test('combined', async () => {
+    expect(
+      transformSyntaxToBrowserslist(['Chrome 123', 'es5']),
+    ).toMatchInlineSnapshot(`
+      [
+        "Chrome 123",
+        "Chrome >= 5.0.0",
+        "Edge >= 12.0.0",
+        "Firefox >= 2.0.0",
+        "ie >= 9.0.0",
+        "iOS >= 6.0.0",
+        "Node >= 0.4.0",
+        "Opera >= 10.10.0",
+        "Safari >= 3.1.0",
+      ]
+    `);
+
+    expect(transformSyntaxToBrowserslist(['es5'])).toEqual(
+      transformSyntaxToBrowserslist('es5'),
+    );
+  });
 });