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

feat: dynamic import support ?url and ?worker #8261

Merged
merged 6 commits into from
Sep 23, 2022
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: support ?url, ?worker
poyoho committed May 21, 2022
commit dd8712088acbd4810e42d36b0b90e89bfece589b
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
// Vitest Snapshot v1

exports[`parse positives > ? in url 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mo?ds/*.js\\", {\\"as\\":\\"raw\\",\\"import\\":\\"*\\"})), \`./mo?ds/\${base ?? foo}.js\`)"`;
exports[`parse positives > ? in url 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mo?ds/*.js\\", {\\"as\\":\\"url\\",\\"import\\":\\"*\\"})), \`./mo?ds/\${base ?? foo}.js\`)"`;
exports[`parse positives > ? in variables 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mods/*.js\\", {\\"as\\":\\"raw\\",\\"import\\":\\"*\\"})), \`./mods/\${base ?? foo}.js\`)"`;
exports[`parse positives > ? in worker 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mo?ds/*.js\\", {\\"as\\":\\"worker\\",\\"import\\":\\"*\\"})), \`./mo?ds/\${base ?? foo}.js\`)"`;
exports[`parse positives > alias path 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mods/*.js\\")), \`./mods/\${base}.js\`)"`;
exports[`parse positives > basic 1`] = `"__variableDynamicImportRuntimeHelper((import.meta.glob(\\"./mods/*.js\\")), \`./mods/\${base}.js\`)"`;
Original file line number Diff line number Diff line change
@@ -35,6 +35,10 @@ describe('parse positives', () => {
})

it('? in url', async () => {
expect(await run('`./mo?ds/${base ?? foo}.js?raw`')).toMatchSnapshot()
expect(await run('`./mo?ds/${base ?? foo}.js?url`')).toMatchSnapshot()
})

it('? in worker', async () => {
expect(await run('`./mo?ds/${base ?? foo}.js?worker`')).toMatchSnapshot()
})
})
11 changes: 10 additions & 1 deletion packages/vite/src/node/plugins/dynamicImportVars.ts
Original file line number Diff line number Diff line change
@@ -5,14 +5,15 @@ import type { ImportSpecifier } from 'es-module-lexer'
import { parse as parseJS } from 'acorn'
import { createFilter } from '@rollup/pluginutils'
import { dynamicImportToGlob } from '@rollup/plugin-dynamic-import-vars'
import type { KnownAsTypeMap } from 'types/importGlob'
import type { Plugin } from '../plugin'
import type { ResolvedConfig } from '../config'
import { normalizePath, parseRequest, requestQuerySplitRE } from '../utils'

export const dynamicImportHelperId = '/@vite/dynamic-import-helper'

interface DynamicImportRequest {
as?: 'raw'
as?: keyof KnownAsTypeMap
}

interface DynamicImportPattern {
@@ -58,6 +59,14 @@ function parseDynamicImportPattern(
globParams = { as: 'raw' }
}

if (rawQuery?.url !== undefined) {
globParams = { as: 'url' }
}

if (rawQuery?.worker !== undefined) {
globParams = { as: 'worker' }
}

return {
globParams,
userPattern,
18 changes: 17 additions & 1 deletion playground/dynamic-import/__tests__/dynamic-import.spec.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getColor, page, serverLogs, untilUpdated } from '~utils'
import { getColor, isBuild, page, serverLogs, untilUpdated } from '~utils'

test('should load literal dynamic import', async () => {
await page.click('.baz')
@@ -84,6 +84,22 @@ test('should load dynamic import with vars raw', async () => {
)
})

test('should load dynamic import with vars url', async () => {
await untilUpdated(
() => page.textContent('.dynamic-import-with-vars-url'),
isBuild ? 'data:application/javascript' : '/alias/url.js',
true
)
})

test('should load dynamic import with vars worker', async () => {
await untilUpdated(
() => page.textContent('.dynamic-import-with-vars-worker'),
'load worker',
true
)
})

test('should load dynamic import with css in package', async () => {
await page.click('.pkg-css')
await untilUpdated(() => getColor('.pkg-css'), 'blue', true)
1 change: 1 addition & 0 deletions playground/dynamic-import/alias/url.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const url = 'load url'
5 changes: 5 additions & 0 deletions playground/dynamic-import/alias/worker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
self.onmessage = (event) => {
self.postMessage({
msg: 'load worker'
})
}
6 changes: 6 additions & 0 deletions playground/dynamic-import/index.html
Original file line number Diff line number Diff line change
@@ -19,6 +19,12 @@
<p>dynamic-import-with-vars-raw</p>
<div class="dynamic-import-with-vars-raw">todo</div>

<p>dynamic-import-with-vars-url</p>
<div class="dynamic-import-with-vars-url">todo</div>

<p>dynamic-import-with-vars-worker</p>
<div class="dynamic-import-with-vars-worker">todo</div>

<div class="view"></div>

<script type="module" src="./nested/index.js"></script>
17 changes: 16 additions & 1 deletion playground/dynamic-import/nested/index.js
Original file line number Diff line number Diff line change
@@ -79,7 +79,7 @@ function text(el, text) {
document.querySelector(el).textContent = text
}

const base = 'hello'
let base = 'hello'

import(`../alias/${base}.js`).then((mod) => {
text('.dynamic-import-with-vars', mod.hello())
@@ -92,3 +92,18 @@ import(`@/${base}.js`).then((mod) => {
import(`../alias/${base}.js?raw`).then((mod) => {
text('.dynamic-import-with-vars-raw', JSON.stringify(mod))
})

base = 'url'
import(`../alias/${base}.js?url`).then((mod) => {
text('.dynamic-import-with-vars-url', JSON.stringify(mod))
})

base = 'worker'
import(`../alias/${base}.js?worker`).then((workerMod) => {
const worker = new workerMod.default()
worker.postMessage('1')
worker.addEventListener('message', (ev) => {
console.log(ev)
text('.dynamic-import-with-vars-worker', JSON.stringify(ev.data))
})
})