feat: support import attributes (#65749)

Co-authored-by: C. T. Lin <[email protected]>

Author: ForsakenHarmony

packages/next/package.json

@@ -134,7 +134,7 @@
     "@babel/plugin-proposal-object-rest-spread": "7.20.7",
     "@babel/plugin-syntax-bigint": "7.8.3",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-syntax-import-assertions": "7.22.5",
+    "@babel/plugin-syntax-import-attributes": "7.22.5",
     "@babel/plugin-syntax-jsx": "7.22.5",
     "@babel/plugin-transform-modules-commonjs": "7.22.5",
     "@babel/plugin-transform-runtime": "7.22.5",

packages/next/src/build/babel/preset.ts

@@ -154,7 +154,12 @@ export default (
         },
       ],
       require('next/dist/compiled/babel/plugin-syntax-dynamic-import'),
-      require('next/dist/compiled/babel/plugin-syntax-import-assertions'),
+      [
+        require('next/dist/compiled/babel/plugin-syntax-import-attributes'),
+        {
+          deprecatedAssertSyntax: true,
+        },
+      ],
       require('./plugins/react-loadable-plugin'),
       [
         require('next/dist/compiled/babel/plugin-proposal-class-properties'),

packages/next/src/bundles/babel/bundle.js

@@ -72,8 +72,8 @@ function pluginSyntaxDynamicImport() {
   return require('next/dist/compiled/babel-packages').pluginSyntaxDynamicImport()
 }
 
-function pluginSyntaxImportAssertions() {
-  return require('next/dist/compiled/babel-packages').pluginSyntaxImportAssertions()
+function pluginSyntaxImportAttributes() {
+  return require('next/dist/compiled/babel-packages').pluginSyntaxImportAttributes()
 }
 
 function pluginSyntaxJsx() {
@@ -127,7 +127,7 @@ module.exports = {
   pluginProposalObjectRestSpread,
   pluginSyntaxBigint,
   pluginSyntaxDynamicImport,
-  pluginSyntaxImportAssertions,
+  pluginSyntaxImportAttributes,
   pluginSyntaxJsx,
   pluginTransformDefine,
   pluginTransformModulesCommonjs,

packages/next/src/bundles/babel/packages-bundle.js

@@ -28,8 +28,8 @@ function pluginSyntaxDynamicImport() {
   return require('@babel/plugin-syntax-dynamic-import')
 }
 
-function pluginSyntaxImportAssertions() {
-  return require('@babel/plugin-syntax-import-assertions')
+function pluginSyntaxImportAttributes() {
+  return require('@babel/plugin-syntax-import-attributes')
 }
 
 function pluginSyntaxJsx() {
@@ -72,7 +72,7 @@ module.exports = {
   pluginProposalObjectRestSpread,
   pluginSyntaxBigint,
   pluginSyntaxDynamicImport,
-  pluginSyntaxImportAssertions,
+  pluginSyntaxImportAttributes,
   pluginSyntaxJsx,
   pluginTransformDefine,
   pluginTransformModulesCommonjs,

packages/next/src/bundles/babel/packages/plugin-syntax-import-assertions.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').pluginSyntaxImportAttributes()

packages/next/src/bundles/babel/packages/plugin-syntax-import-attributes.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').pluginSyntaxImportAttributes()

packages/next/src/compiled/babel-packages/packages-bundle.js

@@ -7,8 +7,10 @@ function basic(context) {
   it('should handle json assertions', async () => {
     const esHtml = await renderViaHTTP(context.appPort, '/es')
     const tsHtml = await renderViaHTTP(context.appPort, '/ts')
-    expect(esHtml).toContain('foo')
-    expect(tsHtml).toContain('foo')
+    // checking json value `foo` is not suffecient, since parse error
+    // will include code stack include those values as source
+    expect(esHtml).toContain(`<div id="__next">foo</div>`)
+    expect(tsHtml).toContain(`<div id="__next">foo</div>`)
   })
 }
 

packages/next/src/compiled/babel/bundle.js

@@ -0,0 +1,3 @@
+{
+  "foo": "foo"
+}

packages/next/src/compiled/babel/plugin-syntax-import-assertions.js

@@ -0,0 +1,2 @@
+declare const data: any
+export default data

packages/next/src/compiled/babel/plugin-syntax-import-attributes.js

@@ -0,0 +1,5 @@
+import data from '../data' with { type: 'json' }
+
+export default function Es() {
+  return data.foo
+}

pnpm-lock.yaml

@@ -0,0 +1,5 @@
+import data from '../data' with { type: 'json' }
+
+export default function Ts() {
+  return data.foo
+}

test/integration/import-assertion/test/index.test.js

@@ -0,0 +1,18 @@
+import { join } from 'path'
+import { renderViaHTTP, runDevSuite, runProdSuite } from 'next-test-utils'
+
+const appDir = join(__dirname, '../')
+
+function basic(context) {
+  it('should handle json attributes', async () => {
+    const esHtml = await renderViaHTTP(context.appPort, '/es')
+    const tsHtml = await renderViaHTTP(context.appPort, '/ts')
+    // checking json value `foo` is not suffecient, since parse error
+    // will include code stack include those values as source
+    expect(esHtml).toContain(`<div id="__next">foo</div>`)
+    expect(tsHtml).toContain(`<div id="__next">foo</div>`)
+  })
+}
+
+runDevSuite('import-attributes', appDir, { runTests: basic })
+runProdSuite('import-attributes', appDir, { runTests: basic })

test/integration/import-attributes/data

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "exclude": ["node_modules"],
+  "include": ["**/*.d.ts", "**/*.ts", "**/*.tsx"]
+}

test/integration/import-attributes/data.d.ts

@@ -11339,14 +11339,25 @@
       "runtimeError": false
     },
     "test/integration/import-assertion/test/index.test.js": {
-      "passed": ["import-assertion dev should handle json assertions"],
+      "passed": [],
       "failed": [
+        "import-assertion dev should handle json assertions",
         "production mode import-assertion prod should handle json assertions"
       ],
       "pending": [],
       "flakey": [],
       "runtimeError": false
     },
+    "test/integration/import-attributes/test/index.test.js": {
+      "passed": [],
+      "failed": [
+        "import-attributes dev should handle json attributes",
+        "production mode import-attributes prod should handle json attributes"
+      ],
+      "pending": [],
+      "flakey": [],
+      "runtimeError": false
+    },
     "test/integration/index-index/test/index.test.js": {
       "passed": [
         "nested index.js production mode should 404 on /index/index/index",

test/integration/import-attributes/pages/es.js

@@ -13426,11 +13426,22 @@
     "runtimeError": false
   },
   "test/integration/import-assertion/test/index.test.js": {
-    "passed": ["import-assertion dev should handle json assertions"],
-    "failed": [],
-    "pending": [
+    "passed": [],
+    "failed": [
+      "import-assertion dev should handle json assertions",
       "production mode import-assertion prod should handle json assertions"
     ],
+    "pending": [],
+    "flakey": [],
+    "runtimeError": false
+  },
+  "test/integration/import-attributes/test/index.test.js": {
+    "passed": [],
+    "failed": [
+      "import-attributes dev should handle json attributes",
+      "production mode import-attributes prod should handle json attributes"
+    ],
+    "pending": [],
     "flakey": [],
     "runtimeError": false
   },