feat: support import assertions (#8937)

packages/vite/src/node/plugins/importAnalysis.ts

@@ -387,10 +387,12 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           s: start,
           e: end,
           ss: expStart,
+          se: expEnd,
           d: dynamicIndex,
           // #2083 User may use escape path,
           // so use imports[index].n to get the unescaped string
-          n: specifier
+          n: specifier,
+          a: assertIndex
         } = imports[index]
 
         const rawUrl = source.slice(start, end)
@@ -427,6 +429,11 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
 
         const isDynamicImport = dynamicIndex > -1
 
+        // strip import assertions as we can process them ourselves
+        if (!isDynamicImport && assertIndex > -1) {
+          str().remove(end + 1, expEnd)
+        }
+
         // static import or valid string in dynamic import
         // If resolvable, let's resolve it
         if (specifier) {

packages/vite/src/node/plugins/importAnalysisBuild.ts

@@ -225,11 +225,17 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           ss: expStart,
           se: expEnd,
           n: specifier,
-          d: dynamicIndex
+          d: dynamicIndex,
+          a: assertIndex
         } = imports[index]
 
         const isDynamicImport = dynamicIndex > -1
 
+        // strip import assertions as we can process them ourselves
+        if (!isDynamicImport && assertIndex > -1) {
+          str().remove(end + 1, expEnd)
+        }
+
         if (isDynamicImport && insertPreload) {
           needPreloadHelper = true
           str().prependLeft(expStart, `${preloadMethod}(() => `)

playground/import-assertion/__tests__/import-assertion.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from 'vitest'
+import { page } from '~utils'
+
+test('from source code', async () => {
+  expect(await page.textContent('.src'), 'bar')
+})
+
+test('from dependency', async () => {
+  expect(await page.textContent('.dep'), 'world')
+})

playground/import-assertion/data.json

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

playground/import-assertion/import-assertion-dep/data.json

@@ -0,0 +1,3 @@
+{
+  "hello": "world"
+}

playground/import-assertion/import-assertion-dep/index.js

@@ -0,0 +1,3 @@
+import json from './data.json' assert { type: 'json' }
+
+export const hello = json.hello

playground/import-assertion/import-assertion-dep/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@vitejs/import-assertion-dep",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "exports": "./index.js"
+}

playground/import-assertion/index.html

@@ -0,0 +1,19 @@
+<h1>Import assertion</h1>
+
+<h2>From source code</h2>
+<p class="src"></p>
+
+<h2>From dependency</h2>
+<p class="dep"></p>
+
+<script type="module">
+  import * as data from './data.json' assert { type: 'json' }
+  text('.src', data.foo)
+
+  import * as depData from '@vitejs/import-assertion-dep'
+  text('.dep', depData.hello)
+
+  function text(el, text) {
+    document.querySelector(el).textContent = text
+  }
+</script>

playground/import-assertion/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "test-import-assertion",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vitejs/import-assertion-dep": "file:./import-assertion-dep"
+  }
+}

pnpm-lock.yaml

@@ -511,6 +511,15 @@ importers:
   playground/html:
     specifiers: {}
 
+  playground/import-assertion:
+    specifiers:
+      '@vitejs/import-assertion-dep': file:./import-assertion-dep
+    dependencies:
+      '@vitejs/import-assertion-dep': file:playground/import-assertion/import-assertion-dep
+
+  playground/import-assertion/import-assertion-dep:
+    specifiers: {}
+
   playground/js-sourcemap:
     specifiers: {}
 
@@ -8808,6 +8817,12 @@ packages:
       vue: 3.2.37
     dev: false
 
+  file:playground/import-assertion/import-assertion-dep:
+    resolution: {directory: playground/import-assertion/import-assertion-dep, type: directory}
+    name: '@vitejs/import-assertion-dep'
+    version: 0.0.0
+    dev: false
+
   file:playground/json/json-module:
     resolution: {directory: playground/json/json-module, type: directory}
     name: json-module