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(worker): import.meta.* #7706

Merged
merged 18 commits into from Apr 26, 2022
38 changes: 35 additions & 3 deletions packages/playground/worker/__tests__/es/es-worker.spec.ts
Expand Up @@ -51,16 +51,20 @@ test.concurrent.each([[true], [false]])('shared worker', async (doTick) => {
await waitSharedWorkerTick(page)
})

test('worker emitted', async () => {
await untilUpdated(() => page.textContent('.nested-worker'), 'pong')
test('worker emitted and import.meta.url in nested worker (serve)', async () => {
expect(await page.textContent('.nested-worker')).toMatch('/worker-nested')
expect(await page.textContent('.nested-worker-module')).toMatch('/sub-worker')
expect(await page.textContent('.nested-worker-constructor')).toMatch(
'"type":"constructor"'
)
})

if (isBuild) {
const assetsDir = path.resolve(testDir, 'dist/es/assets')
// assert correct files
test('inlined code generation', async () => {
const files = fs.readdirSync(assetsDir)
expect(files.length).toBe(22)
expect(files.length).toBe(27)
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 All @@ -79,6 +83,26 @@ if (isBuild) {
expect(content).toMatch(`(window.URL||window.webkitURL).createObjectURL`)
expect(content).toMatch(`window.Blob`)
})

test('worker emitted and import.meta.url in nested worker (build)', async () => {
// import.meta.url will minify in esbuild in build mode so can't use runtime result.
const files = fs.readdirSync(assetsDir)
const nestedWorkerFile = files.find((f) =>
f.includes('worker-nested-worker')
)
const content = fs.readFileSync(
path.resolve(assetsDir, nestedWorkerFile),
'utf-8'
)
expect(content).toMatch('self.location.href')

expect(await page.textContent('.nested-worker-module')).toMatch(
'"type":"module"'
)
expect(await page.textContent('.nested-worker-constructor')).toMatch(
'"type":"constructor"'
)
})
}

test('module worker', async () => {
Expand All @@ -100,3 +124,11 @@ test('emit chunk', async () => {
'"A string/es/"'
)
})

test('import.meta.glob in worker', async () => {
expect(await page.textContent('.importMetaGlob-worker')).toMatch('["')
})

test('import.meta.globEager in worker', async () => {
expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["')
})
35 changes: 30 additions & 5 deletions packages/playground/worker/__tests__/iife/worker.spec.ts
Expand Up @@ -51,10 +51,11 @@ test.concurrent.each([[true], [false]])('shared worker', async (doTick) => {
await waitSharedWorkerTick(page)
})

test('worker emitted and import.meta.url in nested worker', async () => {
await untilUpdated(
() => page.textContent('.nested-worker'),
'pong http://localhost:3000/iife/sub-worker.js?worker_file'
test('worker emitted and import.meta.url in nested worker (serve)', async () => {
expect(await page.textContent('.nested-worker')).toMatch('/worker-nested')
expect(await page.textContent('.nested-worker-module')).toMatch('/sub-worker')
expect(await page.textContent('.nested-worker-constructor')).toMatch(
'"type":"constructor"'
)
})

Expand All @@ -63,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(14)
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 All @@ -82,6 +83,26 @@ if (isBuild) {
expect(content).toMatch(`(window.URL||window.webkitURL).createObjectURL`)
expect(content).toMatch(`window.Blob`)
})

test('worker emitted and import.meta.url in nested worker (build)', async () => {
// import.meta.url will minify in esbuild in build mode so can't use runtime result.
const files = fs.readdirSync(assetsDir)
const nestedWorkerFile = files.find((f) =>
f.includes('worker-nested-worker')
)
const content = fs.readFileSync(
path.resolve(assetsDir, nestedWorkerFile),
'utf-8'
)
expect(content).toMatch('self.location.href')

expect(await page.textContent('.nested-worker-module')).toMatch(
'"type":"module"'
)
expect(await page.textContent('.nested-worker-constructor')).toMatch(
'"type":"constructor"'
)
})
}

test('module worker', async () => {
Expand All @@ -94,3 +115,7 @@ test('classic worker', async () => {
expect(await page.textContent('.classic-worker')).toMatch('A classic')
expect(await page.textContent('.classic-shared-worker')).toMatch('A classic')
})

test('import.meta.globEager in worker', async () => {
expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["')
})
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(25)
expect(files.length).toBe(27)
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
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(14)
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
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(25)
expect(files.length).toBe(27)
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
3 changes: 3 additions & 0 deletions packages/playground/worker/classic-shared-worker.js
Expand Up @@ -4,3 +4,6 @@ self.onconnect = (event) => {
const port = event.ports[0]
port.postMessage(self.constant)
}

// for sourcemap
console.log('classic-shared-worker.js')
3 changes: 3 additions & 0 deletions packages/playground/worker/classic-worker.js
Expand Up @@ -3,3 +3,6 @@ importScripts(`/${self.location.pathname.split("/")[1]}/classic.js`)
self.addEventListener('message', () => {
self.postMessage(self.constant)
})

// for sourcemap
console.log("classic-worker.js")
@@ -1,3 +1,6 @@
import('./modules/module').then((module) => {
import('./modules/module0').then((module) => {
self.postMessage(module.default + import.meta.env.BASE_URL)
})

// for sourcemap
console.log('emit-chunk-dynamic-import-worker.js')
3 changes: 3 additions & 0 deletions packages/playground/worker/emit-chunk-nested-worker.js
Expand Up @@ -26,3 +26,6 @@ import('./module-and-worker').then((res) => {
data: res.module
})
})

// for sourcemap
console.log('emit-chunk-nested-worker.js')
3 changes: 3 additions & 0 deletions packages/playground/worker/emit-chunk-sub-worker.js
Expand Up @@ -6,3 +6,6 @@ Promise.all([
const _data = { ...data[0], ...data[1], ...data[2] }
self.postMessage(_data)
})

// for sourcemap
console.log('emit-chunk-sub-worker.js')
8 changes: 8 additions & 0 deletions packages/playground/worker/importMetaGlob.worker.js
@@ -0,0 +1,8 @@
const modules = import.meta.glob('./modules/*js')

self.onmessage = function (e) {
self.postMessage(Object.keys(modules))
}

// for sourcemap
console.log('importMetaGlob.worker.js')
8 changes: 8 additions & 0 deletions packages/playground/worker/importMetaGlobEager.worker.js
@@ -0,0 +1,8 @@
const modules = import.meta.globEager('./modules/*js')

self.onmessage = function (e) {
self.postMessage(Object.keys(modules))
}

// for sourcemap
console.log('importMetaGlobEager.worker.js')
29 changes: 28 additions & 1 deletion packages/playground/worker/index.html
Expand Up @@ -40,11 +40,25 @@ <h2 class="format-iife">format iife:</h2>
<code class="shared-worker-import-meta-url"></code>

<p>
import NestedWorker from './worker-nested-worker?worker' - nested worker
import NestedWorker from './worker-nested-worker?worker' - import.meta.url
<span class="classname">.nested-worker</span>
</p>
<code class="nested-worker"></code>

<p>
import NestedWorker from './worker-nested-worker?worker' - nested module
worker
<span class="classname">.nested-worker-module</span>
</p>
<code class="nested-worker-module"></code>

<p>
import NestedWorker from './worker-nested-worker?worker' - nested worker
constructor
<span class="classname">.nested-worker-constructor</span>
</p>
<code class="nested-worker-constructor"></code>

<p>
new Worker(new URL('./classic-worker.js', import.meta.url))
<span class="classname">.classic-worker</span>
Expand All @@ -58,9 +72,22 @@ <h2 class="format-iife">format iife:</h2>
</p>
<code class="classic-shared-worker"></code>

<p>
use import.meta.globEager in iife worker
<span class="classname">.importMetaGlobEager-worker</span>
</p>
<code class="importMetaGlobEager-worker"></code>

<hr />

<h2 class="format-es"></h2>

<p>
use import.meta.glob in es worker
<span class="classname">.importMetaGlob-worker</span>
</p>
<code class="importMetaGlob-worker"></code>

<p>
worker emit chunk <br />
module and worker:worker in worker file <br />
Expand Down
5 changes: 4 additions & 1 deletion packages/playground/worker/module-and-worker.js
@@ -1,5 +1,8 @@
import constant from './modules/module'
import constant from './modules/module0'

self.postMessage(constant)

export const module = 'module and worker'

// for sourcemap
console.log('module-and-worker.js')
2 changes: 1 addition & 1 deletion packages/playground/worker/modules/module2.js
@@ -1,3 +1,3 @@
export * from './module'
export * from './module0'
export * from './module1'
export const msg2 = 'module2'
2 changes: 1 addition & 1 deletion packages/playground/worker/modules/module3.js
@@ -1,2 +1,2 @@
export * from './module'
export * from './module0'
export const msg3 = 'module3'
3 changes: 3 additions & 0 deletions packages/playground/worker/my-shared-worker.ts
Expand Up @@ -14,3 +14,6 @@ onconnect = (event) => {
}
}
}

// for sourcemap
console.log('my-shared-worker.js')
3 changes: 3 additions & 0 deletions packages/playground/worker/my-worker.ts
Expand Up @@ -6,3 +6,6 @@ self.onmessage = (e) => {
self.postMessage({ msg, mode, bundleWithPlugin })
}
}

// for sourcemap
console.log('my-worker.js')
3 changes: 3 additions & 0 deletions packages/playground/worker/possible-ts-output-worker.mjs
Expand Up @@ -5,3 +5,6 @@ self.onmessage = (e) => {
self.postMessage({ msg, mode })
}
}

// for sourcemap
console.log('possible-ts-output-worker.mjs')
3 changes: 3 additions & 0 deletions packages/playground/worker/sub-worker.js
Expand Up @@ -3,3 +3,6 @@ self.onmessage = (event) => {
self.postMessage(`pong ${import.meta.url}`)
}
}

// for sourcemap
console.log('sub-worker.js')
5 changes: 4 additions & 1 deletion packages/playground/worker/url-shared-worker.js
@@ -1,6 +1,9 @@
import constant from './modules/module'
import constant from './modules/module0'

self.onconnect = (event) => {
const port = event.ports[0]
port.postMessage(constant)
}

// for sourcemap
console.log('url-shared-worker.js')
3 changes: 3 additions & 0 deletions packages/playground/worker/url-worker.js
@@ -1 +1,4 @@
self.postMessage('A string' + import.meta.env.BASE_URL + import.meta.url)

// for sourcemap
console.log('url-worker.js')
22 changes: 20 additions & 2 deletions packages/playground/worker/worker-nested-worker.js
Expand Up @@ -8,6 +8,24 @@ self.onmessage = (event) => {
}
}

subWorker.onmessage = (event) => {
self.postMessage(event.data)
self.postMessage(import.meta.url)

subWorker.onmessage = (ev) => {
self.postMessage({
type: 'module',
data: ev.data
})
}

const classicWorker = new Worker(new URL('./url-worker.js', import.meta.url), {
type: 'module'
})
classicWorker.addEventListener('message', (ev) => {
self.postMessage({
type: 'constructor',
data: ev.data
})
})

// for sourcemap
console.log('worker-nested-worker.js')
9 changes: 9 additions & 0 deletions packages/playground/worker/worker/main-format-es.js
@@ -1,5 +1,6 @@
// run when format es
import NestedWorker from '../emit-chunk-nested-worker?worker'
import ImportMetaGlobWorker from '../importMetaGlob.worker?worker'

function text(el, text) {
document.querySelector(el).textContent = text
Expand Down Expand Up @@ -39,3 +40,11 @@ const moduleWorker = new Worker(
moduleWorker.addEventListener('message', (ev) => {
text('.module-and-worker-worker', JSON.stringify(ev.data))
})

const importMetaGlobWorker = new ImportMetaGlobWorker()

importMetaGlobWorker.postMessage('1')

importMetaGlobWorker.addEventListener('message', (e) => {
text('.importMetaGlob-worker', JSON.stringify(e.data))
})
16 changes: 16 additions & 0 deletions packages/playground/worker/worker/main-module.js
Expand Up @@ -3,6 +3,7 @@ import InlineWorker from '../my-worker?worker&inline'
import mySharedWorker from '../my-shared-worker?sharedworker&name=shared'
import TSOutputWorker from '../possible-ts-output-worker?worker'
import NestedWorker from '../worker-nested-worker?worker'
import ImportMetaGlobEagerWorker from '../importMetaGlobEager.worker?worker'
import { mode } from '../modules/workerImport'

function text(el, text) {
Expand Down Expand Up @@ -56,6 +57,13 @@ const nestedWorker = new NestedWorker()
nestedWorker.addEventListener('message', (ev) => {
if (typeof ev.data === 'string') {
text('.nested-worker', JSON.stringify(ev.data))
} else if (typeof ev.data === 'object') {
const data = ev.data
if (data.type === 'module') {
text('.nested-worker-module', JSON.stringify(ev.data))
} else if (data.type === 'constructor') {
text('.nested-worker-constructor', JSON.stringify(ev.data))
}
}
})
nestedWorker.postMessage('ping')
Expand Down Expand Up @@ -83,3 +91,11 @@ w2.port.addEventListener('message', (ev) => {
text('.shared-worker-import-meta-url', JSON.stringify(ev.data))
})
w2.port.start()

const importMetaGlobEagerWorker = new ImportMetaGlobEagerWorker()

importMetaGlobEagerWorker.postMessage('1')

importMetaGlobEagerWorker.addEventListener('message', (e) => {
text('.importMetaGlobEager-worker', JSON.stringify(e.data))
})