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: worker support query url #7914

Merged
merged 11 commits into from
May 21, 2022
Merged
Show file tree
Hide file tree
Changes from 4 commits
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
8 changes: 7 additions & 1 deletion packages/playground/worker/__tests__/es/es-worker.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ if (isBuild) {
// assert correct files
test('inlined code generation', async () => {
const files = fs.readdirSync(assetsDir)
expect(files.length).toBe(26)
expect(files.length).toBe(28)
const index = files.find((f) => f.includes('main-module'))
const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
const worker = files.find((f) => f.includes('my-worker'))
Expand Down Expand Up @@ -114,6 +114,12 @@ test('emit chunk', async () => {
)
})

test('url query worker', async () => {
expect(await page.textContent('.simple-worker-url')).toMatch(
'Hello from simple worker!'
)
})

test('import.meta.glob in worker', async () => {
expect(await page.textContent('.importMetaGlob-worker')).toMatch('["')
})
Expand Down
8 changes: 7 additions & 1 deletion packages/playground/worker/__tests__/iife/worker.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ if (isBuild) {
// assert correct files
test('inlined code generation', async () => {
const files = fs.readdirSync(assetsDir)
expect(files.length).toBe(13)
expect(files.length).toBe(15)
const index = files.find((f) => f.includes('main-module'))
const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
const worker = files.find((f) => f.includes('my-worker'))
Expand Down Expand Up @@ -105,6 +105,12 @@ test('classic worker', async () => {
expect(await page.textContent('.classic-shared-worker')).toMatch('A classic')
})

test('url query worker', async () => {
expect(await page.textContent('.simple-worker-url')).toMatch(
'Hello from simple worker!'
)
})

test('import.meta.globEager in worker', async () => {
expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["')
})
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ if (isBuild) {
test('sourcemap generation for web workers', async () => {
const files = fs.readdirSync(assetsDir)
// should have 2 worker chunk
expect(files.length).toBe(26)
expect(files.length).toBe(30)
const index = files.find((f) => f.includes('main-module'))
const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
const indexSourcemap = getSourceMapUrl(content)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ if (isBuild) {
test('sourcemap generation for web workers', async () => {
const files = fs.readdirSync(assetsDir)
// should have 2 worker chunk
expect(files.length).toBe(13)
expect(files.length).toBe(15)
const index = files.find((f) => f.includes('main-module'))
const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
const indexSourcemap = getSourceMapUrl(content)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ if (isBuild) {
test('sourcemap generation for web workers', async () => {
const files = fs.readdirSync(assetsDir)
// should have 2 worker chunk
expect(files.length).toBe(26)
expect(files.length).toBe(30)
const index = files.find((f) => f.includes('main-module'))
const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
const indexSourcemap = getSourceMapUrl(content)
Expand Down
6 changes: 6 additions & 0 deletions packages/playground/worker/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,12 @@ <h2 class="format-iife">format iife:</h2>
</p>
<code class="classic-shared-worker"></code>

<p>
new Worker(new URL('../simple-worker.js', import.meta.url).href)
<span class="classname">.simple-worker-url</span>
</p>
<code class="simple-worker-url"></code>

<p>
use import.meta.globEager in iife worker
<span class="classname">.importMetaGlobEager-worker</span>
Expand Down
1 change: 1 addition & 0 deletions packages/playground/worker/simple-worker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
self.postMessage('Hello from simple worker!')
11 changes: 11 additions & 0 deletions packages/playground/worker/worker/main-url.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import workerUrl from '../simple-worker?worker&url'

function text(el, text) {
document.querySelector(el).textContent = text
}

const worker = new Worker(workerUrl, { type: 'classic' })

worker.addEventListener('message', (ev) => {
text('.simple-worker-url', JSON.stringify(ev.data))
})
1 change: 1 addition & 0 deletions packages/playground/worker/worker/main.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* flag: will replace in vite config import("./format-es.js") */
import('./main-module')
import('./main-classic')
import('./main-url')
48 changes: 41 additions & 7 deletions packages/vite/src/node/plugins/worker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import type { Plugin } from '../plugin'
import { fileToUrl, getAssetHash } from './asset'
import { cleanUrl, injectQuery, parseRequest } from '../utils'
import type Rollup from 'rollup'
import { ENV_PUBLIC_PATH } from '../constants'
import { ENV_ENTRY, ENV_PUBLIC_PATH } from '../constants'
import path from 'path'
import { onRollupWarning } from '../build'
import type { TransformPluginContext, EmittedFile } from 'rollup'
import type { ViteDevServer } from '../server'

interface WorkerCache {
// save worker bundle emitted files avoid overwrites the same file.
Expand All @@ -23,7 +24,9 @@ interface WorkerCache {
emitted: Map<string, string>
}

const WorkerFileId = 'worker_file'
export type WorkerType = 'classic' | 'module' | 'ignore'

export const WORKER_FILE_ID = 'worker_file'
const workerCache = new WeakMap<ResolvedConfig, WorkerCache>()

function emitWorkerFile(
Expand Down Expand Up @@ -202,10 +205,15 @@ export async function workerFileToUrl(

export function webWorkerPlugin(config: ResolvedConfig): Plugin {
const isBuild = config.command === 'build'
let server: ViteDevServer

return {
name: 'vite:worker',

configureServer(_server) {
server = _server
},

buildStart() {
workerCache.set(config, {
assets: new Map(),
Expand All @@ -227,11 +235,30 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
}
},

async transform(_, id) {
async transform(raw, id) {
const query = parseRequest(id)
if (query && query[WorkerFileId] != null) {
if (query && query[WORKER_FILE_ID] != null && query['type'] != null) {
const workerType = query['type'] as WorkerType
let injectEnv = ''

if (workerType === 'classic') {
injectEnv = `importScripts('${ENV_PUBLIC_PATH}')\n`
} else if (workerType === 'module') {
injectEnv = `import '${ENV_PUBLIC_PATH}'\n`
} else if (workerType === 'ignore') {
if (isBuild) {
injectEnv = ''
} else if (server) {
// dynamic worker type we can't know how import the env
// so we copy /@vite/env code of server transform result into file header
const { moduleGraph } = server
const module = moduleGraph.getModuleById(ENV_ENTRY)
injectEnv = module?.transformResult?.code || ''
}
}

return {
code: `import '${ENV_PUBLIC_PATH}'\n` + _
code: injectEnv + raw
}
}
if (
Expand Down Expand Up @@ -268,7 +295,14 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
}
} else {
url = await fileToUrl(cleanUrl(id), config, this)
url = injectQuery(url, WorkerFileId)
url = injectQuery(url, WORKER_FILE_ID)
}

if (query.url != null) {
return {
code: `export default ${JSON.stringify(url)}`,
map: { mappings: '' } // Empty sourcemap to suppress Rollup warning
}
}

const workerConstructor =
Expand All @@ -281,7 +315,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
url
)}, ${JSON.stringify(workerOptions, null, 2)})
}`,
map: { mappings: '' } // Empty sourcemap to supress Rolup warning
map: { mappings: '' } // Empty sourcemap to suppress Rollup warning
}
},

Expand Down
37 changes: 2 additions & 35 deletions packages/vite/src/node/plugins/workerImportMetaUrl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,15 @@ import type { Plugin } from '../plugin'
import { fileToUrl } from './asset'
import { cleanUrl, injectQuery } from '../utils'
import path from 'path'
import { workerFileToUrl } from './worker'
import type { WorkerType } from './worker'
import { workerFileToUrl, WORKER_FILE_ID } from './worker'
import { parseRequest } from '../utils'
import { ENV_ENTRY, ENV_PUBLIC_PATH } from '../constants'
import MagicString from 'magic-string'
import type { ViteDevServer } from '..'
import type { RollupError } from 'rollup'
import { emptyString } from '../cleanString'

type WorkerType = 'classic' | 'module' | 'ignore'
const ignoreFlagRE = /\/\*\s*@vite-ignore\s*\*\//

const WORKER_FILE_ID = 'worker_url_file'

function getWorkerType(raw: string, clean: string, i: number): WorkerType {
function err(e: string, pos: number) {
const error = new Error(e) as RollupError
Expand Down Expand Up @@ -69,41 +65,12 @@ function getWorkerType(raw: string, clean: string, i: number): WorkerType {

export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
const isBuild = config.command === 'build'
let server: ViteDevServer

return {
name: 'vite:worker-import-meta-url',

configureServer(_server) {
server = _server
},

async transform(code, id, options) {
const query = parseRequest(id)
if (query && query[WORKER_FILE_ID] != null && query['type'] != null) {
const workerType = query['type'] as WorkerType
let injectEnv = ''

if (workerType === 'classic') {
injectEnv = `importScripts('${ENV_PUBLIC_PATH}')\n`
} else if (workerType === 'module') {
injectEnv = `import '${ENV_PUBLIC_PATH}'\n`
} else if (workerType === 'ignore') {
if (isBuild) {
injectEnv = ''
} else if (server) {
// dynamic worker type we can't know how import the env
// so we copy /@vite/env code of server transform result into file header
const { moduleGraph } = server
const module = moduleGraph.getModuleById(ENV_ENTRY)
injectEnv = module?.transformResult?.code || ''
}
}

return {
code: injectEnv + code
}
}
let s: MagicString | undefined
if (
(code.includes('new Worker') || code.includes('new SharedWorker')) &&
Expand Down