feat(esm): support import attributes (#30482)

Fixes #30473

packages/playwright/bundles/babel/package.json

@@ -9,30 +9,30 @@
     "generate-license": "node ../../../../utils/generate_third_party_notice.js"
   },
   "dependencies": {
-    "@babel/code-frame": "^7.23.5",
-    "@babel/core": "^7.23.7",
-    "@babel/helper-plugin-utils": "^7.22.5",
-    "@babel/parser": "^7.23.6",
-    "@babel/plugin-proposal-decorators": "^7.23.2",
-    "@babel/plugin-proposal-explicit-resource-management": "^7.23.0",
+    "@babel/code-frame": "^7.24.2",
+    "@babel/core": "^7.24.4",
+    "@babel/helper-plugin-utils": "^7.24.0",
+    "@babel/parser": "^7.24.4",
+    "@babel/plugin-proposal-decorators": "^7.24.1",
+    "@babel/plugin-proposal-explicit-resource-management": "^7.24.1",
     "@babel/plugin-syntax-async-generators": "^7.8.4",
-    "@babel/plugin-syntax-import-assertions": "^7.22.5",
+    "@babel/plugin-syntax-import-attributes": "^7.24.1",
     "@babel/plugin-syntax-json-strings": "^7.8.3",
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
     "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-    "@babel/plugin-transform-class-properties": "^7.23.3",
-    "@babel/plugin-transform-class-static-block": "^7.23.4",
-    "@babel/plugin-transform-dynamic-import": "^7.23.4",
-    "@babel/plugin-transform-export-namespace-from": "^7.23.4",
-    "@babel/plugin-transform-logical-assignment-operators": "^7.23.4",
-    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
-    "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
-    "@babel/plugin-transform-numeric-separator": "^7.23.4",
-    "@babel/plugin-transform-optional-chaining": "^7.23.4",
-    "@babel/plugin-transform-private-methods": "^7.23.3",
-    "@babel/plugin-transform-private-property-in-object": "^7.23.4",
+    "@babel/plugin-transform-class-properties": "^7.24.1",
+    "@babel/plugin-transform-class-static-block": "^7.24.4",
+    "@babel/plugin-transform-dynamic-import": "^7.24.1",
+    "@babel/plugin-transform-export-namespace-from": "^7.24.1",
+    "@babel/plugin-transform-logical-assignment-operators": "^7.24.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.24.1",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.1",
+    "@babel/plugin-transform-numeric-separator": "^7.24.1",
+    "@babel/plugin-transform-optional-chaining": "^7.24.1",
+    "@babel/plugin-transform-private-methods": "^7.24.1",
+    "@babel/plugin-transform-private-property-in-object": "^7.24.1",
     "@babel/plugin-transform-react-jsx": "^7.23.4",
-    "@babel/preset-typescript": "^7.23.3"
+    "@babel/preset-typescript": "^7.24.1"
   },
   "devDependencies": {
     "@types/babel__code-frame": "^7.0.4",

packages/playwright/bundles/babel/roll.js

@@ -0,0 +1,23 @@
+const { chromium } = require('playwright');
+
+(async () => {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+  const packageJSON = require('./package.json');
+  for (const dep of Object.keys(packageJSON.dependencies)) {
+    await page.waitForTimeout(3000);
+    console.log('Processing ', dep);
+    await page.goto(`https://www.npmjs.com/package/${dep}`);
+    const title = await page.getByText('Public').locator('..').textContent();
+    if (!title.startsWith(dep))
+      throw new Error('Malformed title: ', title);
+    const i = title.indexOf(' • Public');
+    if (i === -1)
+      throw new Error('Malformed title: ' + title);
+    const version = title.slice(dep.length, i);
+    console.log(version);
+    packageJSON.dependencies[dep] = '^' + version;
+  }
+  await browser.close();
+  console.log(JSON.stringify(packageJSON, null, 2));
+})();

packages/playwright/bundles/babel/src/babelBundleImpl.ts

@@ -87,7 +87,7 @@ function babelTransformOptions(isTypeScript: boolean, isModule: boolean, plugins
       })
     ]);
   } else {
-    plugins.push([require('@babel/plugin-syntax-import-assertions')]);
+    plugins.push([require('@babel/plugin-syntax-import-attributes'), { deprecatedAssertSyntax: true }]);
   }
 
   return {

tests/playwright-test/esm.spec.ts

@@ -55,6 +55,23 @@ test('should support import assertions', async ({ runInlineTest }) => {
   expect(result.passed).toBe(1);
 });
 
+test('should support import attributes', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': `
+      import packageJSON from './package.json' with { type: 'json' };
+      export default { };
+    `,
+    'package.json': JSON.stringify({ type: 'module' }),
+    'a.test.ts': `
+      import config from './config.json' with { type: 'json' };
+      import { test, expect } from '@playwright/test';
+      test('pass', async () => {});
+    `
+  });
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});
+
 test('should import esm from ts when package.json has type module in experimental mode', async ({ runInlineTest }) => {
   const result = await runInlineTest({
     'playwright.config.ts': `