Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: always inline assets and modules with special queries #2617

Merged
merged 4 commits into from Jan 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 39 additions & 0 deletions packages/vite-node/src/externalize.ts
Expand Up @@ -3,12 +3,51 @@ import { isNodeBuiltin, isValidNodeImport } from 'mlly'
import type { DepsHandlingOptions } from './types'
import { slash } from './utils'

const KNOWN_ASSET_TYPES = [
// images
'png',
'jpe?g',
'jfif',
'pjpeg',
'pjp',
'gif',
'svg',
'ico',
'webp',
'avif',

// media
'mp4',
'webm',
'ogg',
'mp3',
'wav',
'flac',
'aac',

// fonts
'woff2?',
'eot',
'ttf',
'otf',

// other
'webmanifest',
'pdf',
'txt',
]

const ESM_EXT_RE = /\.(es|esm|esm-browser|esm-bundler|es6|module)\.js$/
const ESM_FOLDER_RE = /\/(es|esm)\/(.*\.js)$/

const defaultInline = [
/virtual:/,
/\.[mc]?ts$/,

// special Vite query strings
/[?&](init|raw|url|inline)\b/,
// Vite returns a string for assets imports, even if it's inside "node_modules"
new RegExp(`\\.(${KNOWN_ASSET_TYPES.join('|')})$`),
]

const depsExternal = [
Expand Down
4 changes: 0 additions & 4 deletions packages/vite-node/src/utils.ts
Expand Up @@ -9,10 +9,6 @@ export function slash(str: string) {
return str.replace(/\\/g, '/')
}

export function mergeSlashes(str: string) {
return str.replace(/\/\//g, '/')
}

export const VALID_ID_PREFIX = '/@id/'

export function normalizeRequestId(id: string, base?: string): string {
Expand Down
2 changes: 1 addition & 1 deletion packages/vitest/src/node/plugins/cssEnabler.ts
Expand Up @@ -70,7 +70,7 @@ export function CSSEnablerPlugin(ctx: Vitest): VitePlugin[] {
return { code }
}

return { code: '' }
return { code: 'export default ""' }
},
},
]
Expand Down
43 changes: 42 additions & 1 deletion test/core/test/imports.test.ts
@@ -1,4 +1,6 @@
import { expect, test } from 'vitest'
import { mkdir, writeFile } from 'node:fs/promises'
import { resolve } from 'pathe'
import { describe, expect, test } from 'vitest'
import { dynamicRelativeImport } from '../src/relative-import'

test('dynamic relative import works', async () => {
Expand Down Expand Up @@ -67,3 +69,42 @@ test('can import @vite/client', async () => {
await expect(import(name)).resolves.not.toThrow()
await expect(import(`/${name}`)).resolves.not.toThrow()
})

describe('importing special files from node_modules', async () => {
const dir = resolve(__dirname, '../src/node_modules')
const wasm = resolve(dir, 'file.wasm')
const css = resolve(dir, 'file.css')
const mp3 = resolve(dir, 'file.mp3')
await mkdir(dir, { recursive: true })
await Promise.all([
writeFile(wasm, '(module)'),
writeFile(css, '.foo { color: red; }'),
writeFile(mp3, ''),
])
const importModule = (path: string) => import(path)

test('importing wasm with ?url query', async () => {
const mod = await importModule('../src/node_modules/file.wasm?url')
expect(mod.default).toBe('/src/node_modules/file.wasm')
})

test('importing wasm with ?raw query', async () => {
const mod = await importModule('../src/node_modules/file.wasm?raw')
expect(mod.default).toBe('(module)')
})

test('importing wasm with ?init query', async () => {
const mod = await importModule('../src/node_modules/file.wasm?init')
expect(mod.default).toBeTypeOf('function')
})

test('importing css with ?inline query', async () => {
const mod = await importModule('../src/node_modules/file.css?inline')
expect(mod.default).toBeTypeOf('string')
})

test('importing asset returns a string', async () => {
const mod = await importModule('../src/node_modules/file.mp3')
expect(mod.default).toBe('/src/node_modules/file.mp3')
})
})