feat: moduleType support in dev (#172)

Author: sapphi-red

packages/vite/src/node/__tests__/plugins/json.spec.ts

@@ -37,7 +37,8 @@ describe('transform', () => {
   ) => {
     const plugin = jsonPlugin(opts, isBuild)
     // @ts-expect-error transform.handler should exist
-    return plugin.transform.handler(input, 'test.json').code
+    return plugin.transform.handler(input, 'test.json', { moduleType: 'json' })
+      .code
   }
 
   test("namedExports: true, stringify: 'auto' should not transformed an array input", () => {

packages/vite/src/node/__tests__/plugins/pluginFilter.spec.ts

@@ -1,7 +1,9 @@
 import util from 'node:util'
 import path from 'node:path'
 import { describe, expect, test } from 'vitest'
+import type { ModuleTypeFilter } from 'rolldown'
 import {
+  type StringFilter,
   createCodeFilter,
   createFilterForTransform,
   createIdFilter,
@@ -226,7 +228,22 @@ describe('createCodeFilter', () => {
 })
 
 describe('createFilterForTransform', () => {
-  const filters = [
+  type Filters = {
+    inputFilter: [
+      idFilter: StringFilter | undefined,
+      codeFilter: StringFilter | undefined,
+      moduleTypeFilter?: ModuleTypeFilter | undefined,
+    ]
+    cases:
+      | {
+          id: string
+          code: string
+          moduleType?: string
+          expected: boolean
+        }[]
+      | undefined
+  }[]
+  const filters: Filters = [
     { inputFilter: [undefined, undefined], cases: undefined },
     {
       inputFilter: ['*.js', undefined],
@@ -283,14 +300,29 @@ describe('createFilterForTransform', () => {
         { id: 'a', code: 'a', expected: true },
       ],
     },
+    {
+      inputFilter: [undefined, undefined, ['js']],
+      cases: [
+        { id: 'foo.js', code: 'foo', moduleType: 'js', expected: true },
+        { id: 'foo.ts', code: 'foo', moduleType: 'ts', expected: false },
+      ],
+    },
+    {
+      inputFilter: [undefined, undefined, { include: ['js'] }],
+      cases: [
+        { id: 'foo.js', code: 'foo', moduleType: 'js', expected: true },
+        { id: 'foo.ts', code: 'foo', moduleType: 'ts', expected: false },
+      ],
+    },
   ]
 
   for (const filter of filters) {
     test(`${util.inspect(filter.inputFilter)}`, () => {
-      const [idFilter, codeFilter] = filter.inputFilter
+      const [idFilter, codeFilter, moduleTypeFilter] = filter.inputFilter
       const filterForTransform = createFilterForTransform(
         idFilter,
         codeFilter,
+        moduleTypeFilter,
         '',
       )
       if (!filter.cases) {
@@ -300,10 +332,11 @@ describe('createFilterForTransform', () => {
       expect(filterForTransform).not.toBeUndefined()
 
       for (const testCase of filter.cases) {
-        const { id, code, expected } = testCase
-        expect(filterForTransform!(id, code), util.inspect({ id, code })).toBe(
-          expected,
-        )
+        const { id, code, moduleType, expected } = testCase
+        expect(
+          filterForTransform!(id, code, moduleType ?? 'js'),
+          util.inspect({ id, code, moduleType }),
+        ).toBe(expected)
       }
     })
   }

packages/vite/src/node/plugin.ts

@@ -2,6 +2,7 @@ import type {
   CustomPluginOptions,
   LoadResult,
   ModuleType,
+  ModuleTypeFilter,
   ObjectHook,
   PluginContext,
   ResolveIdResult,
@@ -151,7 +152,13 @@ export interface Plugin<A = any> extends RolldownPlugin<A> {
         ssr?: boolean
       },
     ) => Promise<TransformResult> | TransformResult,
-    { filter?: { id?: StringFilter; code?: StringFilter } }
+    {
+      filter?: {
+        id?: StringFilter
+        code?: StringFilter
+        moduleType?: ModuleTypeFilter
+      }
+    }
   >
   /**
    * Opt-in this plugin into the shared plugins pipeline.

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

@@ -303,6 +303,7 @@ export function getCachedFilterForPlugin<
       filters.transform = createFilterForTransform(
         rawFilters?.id,
         rawFilters?.code,
+        rawFilters?.moduleType,
       )
       filter = filters.transform
       break

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

@@ -47,6 +47,8 @@ export function jsonPlugin(
     transform: {
       filter: {
         id: { include: jsonExtRE, exclude: SPECIAL_QUERY_RE },
+        // don't transform if the file is already transformed to a different format
+        moduleType: ['json'],
       },
       handler(json, id) {
         // for backward compat this if statement is needed

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

@@ -1,10 +1,15 @@
 import path from 'node:path'
 import picomatch from 'picomatch'
+import type { ModuleTypeFilter } from 'rolldown'
 import { arraify } from '../utils'
 import { slash } from '../../shared/utils'
 
 export type PluginFilter = (input: string) => boolean
-export type TransformHookFilter = (id: string, code: string) => boolean
+export type TransformHookFilter = (
+  id: string,
+  code: string,
+  moduleType: string,
+) => boolean
 
 export type StringFilter<Value = string | RegExp> =
   | Value
@@ -117,16 +122,30 @@ export function createCodeFilter(
   return createFilter(excludeFilter, includeFilter)
 }
 
+function createModuleTypeFilter(
+  filter: ModuleTypeFilter | undefined,
+): PluginFilter | undefined {
+  if (!filter) return
+  const include = Array.isArray(filter) ? filter : (filter.include ?? [])
+  return (moduleType: string) => include.includes(moduleType)
+}
+
 export function createFilterForTransform(
   idFilter: StringFilter | undefined,
   codeFilter: StringFilter | undefined,
+  moduleTypeFilter: ModuleTypeFilter | undefined,
   cwd?: string,
 ): TransformHookFilter | undefined {
-  if (!idFilter && !codeFilter) return
+  if (!idFilter && !codeFilter && !moduleTypeFilter) return
   const idFilterFn = createIdFilter(idFilter, cwd)
   const codeFilterFn = createCodeFilter(codeFilter)
-  return (id, code) => {
-    let fallback = true
+  const moduleTypeFilterFn = createModuleTypeFilter(moduleTypeFilter)
+  return (id, code, moduleType) => {
+    let fallback = moduleTypeFilterFn?.(moduleType) ?? true
+    if (!fallback) {
+      return false
+    }
+
     if (idFilterFn) {
       fallback &&= idFilterFn(id)
     }

packages/vite/src/node/server/__tests__/transformRequest.spec.ts

@@ -0,0 +1,18 @@
+import { describe, expect, test } from 'vitest'
+import { getModuleTypeFromId } from '../transformRequest'
+
+describe('getModuleTypeFromId', () => {
+  const testCases = [
+    { id: 'foo.js', expected: 'js' },
+    { id: 'foo.ts', expected: 'ts' },
+    { id: 'foo.a.js', expected: 'js' },
+    { id: '', expected: undefined },
+  ]
+
+  for (const { id, expected } of testCases) {
+    test(`should return ${expected} for id: ${id}`, () => {
+      const result = getModuleTypeFromId(id)
+      expect(result).toBe(expected)
+    })
+  }
+})

packages/vite/src/node/server/pluginContainer.ts

@@ -43,6 +43,7 @@ import type {
   LoadResult,
   ModuleInfo,
   ModuleOptions,
+  ModuleType,
   NormalizedInputOptions,
   OutputOptions,
   ParallelPluginHooks,
@@ -473,11 +474,16 @@ class EnvironmentPluginContainer {
     id: string,
     options?: {
       inMap?: SourceDescription['map']
+      moduleType?: string
     },
-  ): Promise<{ code: string; map: SourceMap | { mappings: '' } | null }> {
+  ): Promise<{
+    code: string
+    map: SourceMap | { mappings: '' } | null
+    moduleType?: ModuleType
+  }> {
     const ssr = this.environment.config.consumer === 'server'
     const optionsWithSSR = options
-      ? { ...options, ssr, moduleType: 'js' }
+      ? { ...options, ssr, moduleType: options.moduleType ?? 'js' }
       : { ssr, moduleType: 'js' }
     const inMap = options?.inMap
 
@@ -489,7 +495,7 @@ class EnvironmentPluginContainer {
         throwClosedServerError()
 
       const filter = getCachedFilterForPlugin(plugin, 'transform')
-      if (filter && !filter(id, code)) continue
+      if (filter && !filter(id, code, optionsWithSSR.moduleType)) continue
 
       ctx._updateActiveInfo(plugin, id, code)
       const start = debugPluginTransform ? performance.now() : 0
@@ -519,6 +525,9 @@ class EnvironmentPluginContainer {
             ctx.sourcemapChain.push(result.map)
           }
         }
+        if (result.moduleType !== undefined) {
+          optionsWithSSR.moduleType = result.moduleType
+        }
         ctx._updateModuleInfo(id, result)
       } else {
         code = result
@@ -527,6 +536,7 @@ class EnvironmentPluginContainer {
     return {
       code,
       map: ctx._getCombinedSourcemap(),
+      moduleType: optionsWithSSR.moduleType,
     }
   }
 

packages/vite/src/node/server/transformRequest.ts

@@ -4,7 +4,12 @@ import { performance } from 'node:perf_hooks'
 import getEtag from 'etag'
 import MagicString from 'magic-string'
 import { init, parse as parseImports } from 'es-module-lexer'
-import type { PartialResolvedId, SourceDescription, SourceMap } from 'rolldown'
+import type {
+  ModuleType,
+  PartialResolvedId,
+  SourceDescription,
+  SourceMap,
+} from 'rolldown'
 import colors from 'picocolors'
 import type { EnvironmentModuleNode } from '../server/moduleGraph'
 import {
@@ -261,6 +266,7 @@ async function loadAndTransform(
 
   let code: string | null = null
   let map: SourceDescription['map'] = null
+  let moduleType: ModuleType | undefined
 
   // load
   const loadStart = debugLoad ? performance.now() : 0
@@ -314,12 +320,18 @@ async function loadAndTransform(
           timestamp: true,
         })
       }
+
+      const guessedModuleType = getModuleTypeFromId(id)
+      if (guessedModuleType && guessedModuleType !== 'js') {
+        moduleType = guessedModuleType
+      }
     }
   } else {
     debugLoad?.(`${timeFrom(loadStart)} [plugin] ${prettyUrl}`)
     if (isObject(loadResult)) {
       code = loadResult.code
       map = loadResult.map
+      moduleType = loadResult.moduleType
     } else {
       code = loadResult
     }
@@ -356,6 +368,7 @@ async function loadAndTransform(
   const transformStart = debugTransform ? performance.now() : 0
   const transformResult = await pluginContainer.transform(code, id, {
     inMap: map,
+    moduleType,
   })
   const originalCode = code
   if (transformResult.code === originalCode) {
@@ -534,3 +547,30 @@ async function handleModuleSoftInvalidation(
 
   return result
 }
+
+// https://github.com/rolldown/rolldown/blob/cc66f4b7189dfb3a248608d02f5962edb09b11f8/crates/rolldown/src/utils/normalize_options.rs#L95-L111
+const defaultModuleTypes: Record<string, ModuleType | undefined> = {
+  js: 'js',
+  mjs: 'js',
+  cjs: 'js',
+  jsx: 'jsx',
+  ts: 'ts',
+  mts: 'ts',
+  cts: 'ts',
+  tsx: 'tsx',
+  json: 'json',
+  txt: 'text',
+  css: 'css',
+}
+
+// https://github.com/rolldown/rolldown/blob/bf53a100edf1780d5a5aa41f0bc0459c5696543e/crates/rolldown/src/utils/load_source.rs#L53-L89
+export function getModuleTypeFromId(id: string): ModuleType | undefined {
+  let pos = -1
+  while ((pos = id.indexOf('.', pos + 1)) >= 0) {
+    const ext = id.slice(pos + 1)
+    const moduleType = defaultModuleTypes[ext]
+    if (moduleType) {
+      return moduleType
+    }
+  }
+}

playground/transform-plugin/__tests__/transform-plugin.spec.ts

@@ -1,3 +1,10 @@
+import { expect, test } from 'vitest'
 import { tests } from './tests'
+import { page } from '~utils'
+
+test('module type should be supported', async () => {
+  expect(await page.textContent('#module-type-json-pre')).toBe('json')
+  expect(await page.textContent('#module-type-json-post')).toBe('js')
+})
 
 tests()