From 26ecd5a7179cef6e132e73a77939ac14fd926b49 Mon Sep 17 00:00:00 2001 From: yoho Date: Tue, 14 Jun 2022 01:34:46 +0800 Subject: [PATCH] fix: objurl for type module, and concurrent tests (#8541) --- packages/vite/src/node/plugins/worker.ts | 2 +- .../relative-base-assets.spec.ts | 6 +- .../assets/vite.config-relative-base.js | 8 +- playground/assets/vite.config.js | 3 +- playground/test-utils.ts | 6 +- playground/vitestGlobalSetup.ts | 4 +- playground/vitestSetup.ts | 41 ++++-- .../worker/__tests__/es/es-worker.spec.ts | 119 +++++++++-------- .../{worker.spec.ts => iife-worker.spec.ts} | 68 ++++------ .../relative-base-worker.spec.ts | 122 ++++++++++-------- .../sourcemap-worker.spec.ts.snap | 2 +- playground/worker/index.html | 44 ++++--- playground/worker/my-shared-worker.ts | 18 +-- playground/worker/my-worker.ts | 5 +- .../worker/possible-ts-output-worker.mjs | 8 +- playground/worker/vite.config-es.js | 3 +- .../worker/vite.config-relative-base.js | 11 +- playground/worker/vite.config-sourcemap.js | 21 ++- playground/worker/vite.config.js | 21 ++- playground/worker/worker/main-module.js | 21 +-- 20 files changed, 301 insertions(+), 232 deletions(-) rename playground/worker/__tests__/iife/{worker.spec.ts => iife-worker.spec.ts} (54%) diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts index 2f50acfcdfa0fe..848d118ba0eb64 100644 --- a/packages/vite/src/node/plugins/worker.ts +++ b/packages/vite/src/node/plugins/worker.ts @@ -281,7 +281,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin { export default function WorkerWrapper() { const objURL = blob && (window.URL || window.webkitURL).createObjectURL(blob); try { - return objURL ? new ${workerConstructor}(objURL${workerOptions}) : new ${workerConstructor}("data:application/javascript;base64," + encodedJs${workerOptions}); + return objURL ? new ${workerConstructor}(objURL) : new ${workerConstructor}("data:application/javascript;base64," + encodedJs${workerOptions}); } finally { objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL); } diff --git a/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts b/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts index a09116c88a7ea6..828ece5ea27c5f 100644 --- a/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts +++ b/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts @@ -5,7 +5,8 @@ import { getBg, getColor, isBuild, - page + page, + viteConfig } from '~utils' const absoluteAssetMatch = isBuild @@ -137,7 +138,8 @@ describe('css url() references', () => { describe.runIf(isBuild)('index.css URLs', () => { let css: string beforeAll(() => { - css = findAssetFile(/index.*\.css$/, '', 'other-assets') + const base = viteConfig ? viteConfig?.testConfig?.baseRoute : '' + css = findAssetFile(/index.*\.css$/, base, 'other-assets') }) test('relative asset URL', () => { diff --git a/playground/assets/vite.config-relative-base.js b/playground/assets/vite.config-relative-base.js index ba624964d3e0e3..12c3132f79a9b0 100644 --- a/playground/assets/vite.config-relative-base.js +++ b/playground/assets/vite.config-relative-base.js @@ -8,7 +8,7 @@ module.exports = { base: './', // relative base to make dist portable build: { ...baseConfig.build, - outDir: 'dist', + outDir: 'dist/relative-base', watch: false, minify: false, assetsInlineLimit: 0, @@ -19,5 +19,9 @@ module.exports = { assetFileNames: 'other-assets/[name].[hash][extname]' } } - } + }, + testConfig: { + baseRoute: '/relative-base/' + }, + cacheDir: 'node_modules/.vite/relative-base' } diff --git a/playground/assets/vite.config.js b/playground/assets/vite.config.js index c9d821ae3d73ee..23bd11908130cd 100644 --- a/playground/assets/vite.config.js +++ b/playground/assets/vite.config.js @@ -17,5 +17,6 @@ module.exports = { assetsInlineLimit: 8192, // 8kb manifest: true, watch: {} - } + }, + cacheDir: 'node_modules/.vite/foo' } diff --git a/playground/test-utils.ts b/playground/test-utils.ts index 2e0eafeda4191e..28534a78655127 100644 --- a/playground/test-utils.ts +++ b/playground/test-utils.ts @@ -150,7 +150,7 @@ export async function untilUpdated( runInBuild = false ): Promise { if (isBuild && !runInBuild) return - const maxTries = process.env.CI ? 100 : 50 + const maxTries = process.env.CI ? 200 : 50 for (let tries = 0; tries < maxTries; tries++) { const actual = (await poll()) ?? '' if (actual.indexOf(expected) > -1 || tries === maxTries - 1) { @@ -162,12 +162,12 @@ export async function untilUpdated( } } -export const extractSourcemap = (content: string) => { +export const extractSourcemap = (content: string): any => { const lines = content.trim().split('\n') return fromComment(lines[lines.length - 1]).toObject() } -export const formatSourcemapForSnapshot = (map: any) => { +export const formatSourcemapForSnapshot = (map: any): any => { const root = normalizePath(testDir) const m = { ...map } delete m.file diff --git a/playground/vitestGlobalSetup.ts b/playground/vitestGlobalSetup.ts index 52b49d01f38fda..ec598ce6b8d6a3 100644 --- a/playground/vitestGlobalSetup.ts +++ b/playground/vitestGlobalSetup.ts @@ -8,7 +8,7 @@ const DIR = path.join(os.tmpdir(), 'vitest_playwright_global_setup') let browserServer: BrowserServer | undefined -export async function setup() { +export async function setup(): Promise { browserServer = await chromium.launchServer({ headless: !process.env.VITE_DEBUG_SERVE, args: process.env.CI @@ -41,7 +41,7 @@ export async function setup() { }) } -export async function teardown() { +export async function teardown(): Promise { browserServer?.close() if (!process.env.VITE_PRESERVE_BUILD_ARTIFACTS) { fs.removeSync(path.resolve(__dirname, '../playground-temp')) diff --git a/playground/vitestSetup.ts b/playground/vitestSetup.ts index 13e7592ad380f2..39533fc8b099b7 100644 --- a/playground/vitestSetup.ts +++ b/playground/vitestSetup.ts @@ -1,7 +1,6 @@ import * as http from 'http' -import { dirname, resolve } from 'path' +import path, { dirname, resolve } from 'path' import os from 'os' -import path from 'path' import sirv from 'sirv' import fs from 'fs-extra' import { chromium } from 'playwright-chromium' @@ -25,7 +24,10 @@ export const workspaceRoot = path.resolve(__dirname, '../') export const isBuild = !!process.env.VITE_TEST_BUILD export const isServe = !isBuild export const isWindows = process.platform === 'win32' -export const viteBinPath = path.join(workspaceRoot, 'packages/vite/bin/vite.js') +export const viteBinPath = path.posix.join( + workspaceRoot, + 'packages/vite/bin/vite.js' +) // #endregion @@ -49,6 +51,11 @@ export let testDir: string * Test folder name */ export let testName: string +/** + * current test using vite inline config + * when using server.js is not possible to get the config + */ +export let viteConfig: InlineConfig | undefined export const serverLogs: string[] = [] export const browserLogs: string[] = [] @@ -61,7 +68,17 @@ export let browser: Browser = undefined! export let viteTestUrl: string = '' export let watcher: RollupWatcher | undefined = undefined -export function setViteUrl(url: string) { +declare module 'vite' { + interface InlineConfig { + testConfig?: { + // relative base output use relative path + // rewrite the url to truth file path + baseRoute: string + } + } +} + +export function setViteUrl(url: string): void { viteTestUrl = url } @@ -156,7 +173,7 @@ beforeAll(async (s) => { } }) -export async function startDefaultServe() { +export async function startDefaultServe(): Promise { const testCustomConfig = resolve(dirname(testPath), 'vite.config.js') let config: InlineConfig | undefined if (fs.existsSync(testCustomConfig)) { @@ -193,9 +210,9 @@ export async function startDefaultServe() { if (!isBuild) { process.env.VITE_INLINE = 'inline-serve' - server = await ( - await createServer(mergeConfig(options, config || {})) - ).listen() + const testConfig = mergeConfig(options, config || {}) + viteConfig = testConfig + server = await (await createServer(testConfig)).listen() // use resolved port/base from server const base = server.config.base === '/' ? '' : server.config.base viteTestUrl = `http://localhost:${server.config.server.port}${base}` @@ -210,7 +227,9 @@ export async function startDefaultServe() { } }) options.plugins = [resolvedPlugin()] - const rollupOutput = await build(mergeConfig(options, config || {})) + const testConfig = mergeConfig(options, config || {}) + viteConfig = testConfig + const rollupOutput = await build(testConfig) const isWatch = !!resolvedConfig!.build.watch // in build watch,call startStaticServer after the build is complete if (isWatch) { @@ -245,11 +264,15 @@ function startStaticServer(config?: InlineConfig): Promise { // start static file server const serve = sirv(resolve(rootDir, 'dist'), { dev: !!config?.build?.watch }) + const baseDir = config?.testConfig?.baseRoute const httpServer = (server = http.createServer((req, res) => { if (req.url === '/ping') { res.statusCode = 200 res.end('pong') } else { + if (baseDir) { + req.url = path.posix.join(baseDir, req.url) + } serve(req, res) } })) diff --git a/playground/worker/__tests__/es/es-worker.spec.ts b/playground/worker/__tests__/es/es-worker.spec.ts index 9959cc29aef0bd..1520670e2b602f 100644 --- a/playground/worker/__tests__/es/es-worker.spec.ts +++ b/playground/worker/__tests__/es/es-worker.spec.ts @@ -1,63 +1,48 @@ import fs from 'fs' import path from 'path' -import type { Page } from 'playwright-chromium' import { isBuild, page, testDir, untilUpdated } from '~utils' test('normal', async () => { - await page.click('.ping') - await untilUpdated(() => page.textContent('.pong'), 'pong') + await untilUpdated(() => page.textContent('.pong'), 'pong', true) await untilUpdated( () => page.textContent('.mode'), - process.env.NODE_ENV // match workerImport.js + process.env.NODE_ENV, + true ) await untilUpdated( () => page.textContent('.bundle-with-plugin'), - 'worker bundle with plugin success!' + 'worker bundle with plugin success!', + true ) }) test('TS output', async () => { - await page.click('.ping-ts-output') - await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong') + await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong', true) }) test('inlined', async () => { - await page.click('.ping-inline') - await untilUpdated(() => page.textContent('.pong-inline'), 'pong') + await untilUpdated(() => page.textContent('.pong-inline'), 'pong', true) }) -const waitSharedWorkerTick = ( - (resolvedSharedWorkerCount: number) => async (page: Page) => { - await untilUpdated(async () => { - const count = await page.textContent('.tick-count') - // ignore the initial 0 - return count === '1' ? 'page loaded' : '' - }, 'page loaded') - // test.concurrent sequential is not guaranteed - // force page to wait to ensure two pages overlap in time - resolvedSharedWorkerCount++ - if (resolvedSharedWorkerCount < 2) return - - await untilUpdated(() => { - return resolvedSharedWorkerCount === 2 ? 'all pages loaded' : '' - }, 'all pages loaded') - } -)(0) - -test.each([[true], [false]])('shared worker', async (doTick) => { - if (doTick) { - await page.click('.tick-shared') - } - await waitSharedWorkerTick(page) +test('shared worker', async () => { + await untilUpdated(() => page.textContent('.tick-count'), 'pong', true) }) test('worker emitted and import.meta.url in nested worker (serve)', async () => { - expect(await page.textContent('.nested-worker')).toMatch( - 'worker-nested-worker' + await untilUpdated( + () => page.textContent('.nested-worker'), + 'worker-nested-worker', + true ) - expect(await page.textContent('.nested-worker-module')).toMatch('sub-worker') - expect(await page.textContent('.nested-worker-constructor')).toMatch( - '"type":"constructor"' + await untilUpdated( + () => page.textContent('.nested-worker-module'), + 'sub-worker', + true + ) + await untilUpdated( + () => page.textContent('.nested-worker-constructor'), + '"type":"constructor"', + true ) }) @@ -87,45 +72,73 @@ describe.runIf(isBuild)('build', () => { }) test('worker emitted and import.meta.url in nested worker (build)', async () => { - expect(await page.textContent('.nested-worker-module')).toMatch( - '"type":"module"' + await untilUpdated( + () => page.textContent('.nested-worker-module'), + '"type":"module"', + true ) - expect(await page.textContent('.nested-worker-constructor')).toMatch( - '"type":"constructor"' + await untilUpdated( + () => page.textContent('.nested-worker-constructor'), + '"type":"constructor"', + true ) }) }) test('module worker', async () => { - expect(await page.textContent('.shared-worker-import-meta-url')).toMatch( - 'A string' + await untilUpdated( + () => page.textContent('.shared-worker-import-meta-url'), + 'A string', + true ) }) test('classic worker', async () => { - expect(await page.textContent('.classic-worker')).toMatch('A classic') - expect(await page.textContent('.classic-shared-worker')).toMatch('A classic') + await untilUpdated( + () => page.textContent('.classic-worker'), + 'A classic', + true + ) + await untilUpdated( + () => page.textContent('.classic-shared-worker'), + 'A classic', + true + ) }) test('emit chunk', async () => { - expect(await page.textContent('.emit-chunk-worker')).toMatch( - '["A string",{"type":"emit-chunk-sub-worker","data":"A string"},{"type":"module-and-worker:worker","data":"A string"},{"type":"module-and-worker:module","data":"module and worker"},{"type":"emit-chunk-sub-worker","data":{"module":"module and worker","msg1":"module1","msg2":"module2","msg3":"module3"}}]' + await untilUpdated( + () => page.textContent('.emit-chunk-worker'), + '["A string",{"type":"emit-chunk-sub-worker","data":"A string"},{"type":"module-and-worker:worker","data":"A string"},{"type":"module-and-worker:module","data":"module and worker"},{"type":"emit-chunk-sub-worker","data":{"module":"module and worker","msg1":"module1","msg2":"module2","msg3":"module3"}}]', + true ) - expect(await page.textContent('.emit-chunk-dynamic-import-worker')).toMatch( - '"A string/es/"' + await untilUpdated( + () => page.textContent('.emit-chunk-dynamic-import-worker'), + '"A string/es/"', + true ) }) test('url query worker', async () => { - expect(await page.textContent('.simple-worker-url')).toMatch( - 'Hello from simple worker!' + await untilUpdated( + () => page.textContent('.simple-worker-url'), + 'Hello from simple worker!', + true ) }) test('import.meta.glob in worker', async () => { - expect(await page.textContent('.importMetaGlob-worker')).toMatch('["') + await untilUpdated( + () => page.textContent('.importMetaGlob-worker'), + '["', + true + ) }) test('import.meta.glob with eager in worker', async () => { - expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["') + await untilUpdated( + () => page.textContent('.importMetaGlobEager-worker'), + '["', + true + ) }) diff --git a/playground/worker/__tests__/iife/worker.spec.ts b/playground/worker/__tests__/iife/iife-worker.spec.ts similarity index 54% rename from playground/worker/__tests__/iife/worker.spec.ts rename to playground/worker/__tests__/iife/iife-worker.spec.ts index d7b437c8a3272d..8483a206036bf0 100644 --- a/playground/worker/__tests__/iife/worker.spec.ts +++ b/playground/worker/__tests__/iife/iife-worker.spec.ts @@ -1,16 +1,11 @@ import fs from 'fs' import path from 'path' -import type { Page } from 'playwright-chromium' import { test } from 'vitest' import { isBuild, page, testDir, untilUpdated } from '~utils' test('normal', async () => { - await page.click('.ping') await untilUpdated(() => page.textContent('.pong'), 'pong') - await untilUpdated( - () => page.textContent('.mode'), - process.env.NODE_ENV // match workerImport.js - ) + await untilUpdated(() => page.textContent('.mode'), process.env.NODE_ENV) await untilUpdated( () => page.textContent('.bundle-with-plugin'), 'worker bundle with plugin success!' @@ -18,44 +13,25 @@ test('normal', async () => { }) test('TS output', async () => { - await page.click('.ping-ts-output') await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong') }) test('inlined', async () => { - await page.click('.ping-inline') await untilUpdated(() => page.textContent('.pong-inline'), 'pong') }) -const waitSharedWorkerTick = ( - (resolvedSharedWorkerCount: number) => async (page: Page) => { - await untilUpdated(async () => { - const count = await page.textContent('.tick-count') - // ignore the initial 0 - return count === '1' ? 'page loaded' : '' - }, 'page loaded') - // test.concurrent sequential is not guaranteed - // force page to wait to ensure two pages overlap in time - resolvedSharedWorkerCount++ - if (resolvedSharedWorkerCount < 2) return - - await untilUpdated(() => { - return resolvedSharedWorkerCount === 2 ? 'all pages loaded' : '' - }, 'all pages loaded') - } -)(0) - -test.each([[true], [false]])('shared worker', async (doTick) => { - if (doTick) { - await page.click('.tick-shared') - } - await waitSharedWorkerTick(page) +test('shared worker', async () => { + await untilUpdated(() => page.textContent('.tick-count'), '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( + await untilUpdated(() => page.textContent('.nested-worker'), '/worker-nested') + await untilUpdated( + () => page.textContent('.nested-worker-module'), + '/sub-worker' + ) + await untilUpdated( + () => page.textContent('.nested-worker-constructor'), '"type":"constructor"' ) }) @@ -86,32 +62,42 @@ describe.runIf(isBuild)('build', () => { }) test('worker emitted and import.meta.url in nested worker (build)', async () => { - expect(await page.textContent('.nested-worker-module')).toMatch( + await untilUpdated( + () => page.textContent('.nested-worker-module'), '"type":"module"' ) - expect(await page.textContent('.nested-worker-constructor')).toMatch( + await untilUpdated( + () => page.textContent('.nested-worker-constructor'), '"type":"constructor"' ) }) }) test('module worker', async () => { - expect(await page.textContent('.shared-worker-import-meta-url')).toMatch( + await untilUpdated( + () => page.textContent('.shared-worker-import-meta-url'), 'A string' ) }) test('classic worker', async () => { - expect(await page.textContent('.classic-worker')).toMatch('A classic') - expect(await page.textContent('.classic-shared-worker')).toMatch('A classic') + await untilUpdated(() => page.textContent('.classic-worker'), 'A classic') + await untilUpdated( + () => page.textContent('.classic-shared-worker'), + 'A classic' + ) }) test('url query worker', async () => { - expect(await page.textContent('.simple-worker-url')).toMatch( + await untilUpdated( + () => page.textContent('.simple-worker-url'), 'Hello from simple worker!' ) }) test('import.meta.glob eager in worker', async () => { - expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["') + await untilUpdated( + () => page.textContent('.importMetaGlobEager-worker'), + '["' + ) }) diff --git a/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts b/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts index 2b146075f38146..b93513264b126e 100644 --- a/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts +++ b/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts @@ -1,74 +1,62 @@ import fs from 'fs' import path from 'path' -import type { Page } from 'playwright-chromium' import { isBuild, page, testDir, untilUpdated } from '~utils' test('normal', async () => { - await page.click('.ping') - await untilUpdated(() => page.textContent('.pong'), 'pong') + await untilUpdated(() => page.textContent('.pong'), 'pong', true) await untilUpdated( () => page.textContent('.mode'), - process.env.NODE_ENV // match workerImport.js + process.env.NODE_ENV, + true ) await untilUpdated( () => page.textContent('.bundle-with-plugin'), - 'worker bundle with plugin success!' + 'worker bundle with plugin success!', + true ) }) test('TS output', async () => { - await page.click('.ping-ts-output') - await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong') + await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong', true) }) test('inlined', async () => { - await page.click('.ping-inline') - await untilUpdated(() => page.textContent('.pong-inline'), 'pong') + await untilUpdated(() => page.textContent('.pong-inline'), 'pong', true) }) -const waitSharedWorkerTick = ( - (resolvedSharedWorkerCount: number) => async (page: Page) => { - await untilUpdated(async () => { - const count = await page.textContent('.tick-count') - // ignore the initial 0 - return count === '1' ? 'page loaded' : '' - }, 'page loaded') - // test.concurrent sequential is not guaranteed - // force page to wait to ensure two pages overlap in time - resolvedSharedWorkerCount++ - if (resolvedSharedWorkerCount < 2) return - - await untilUpdated(() => { - return resolvedSharedWorkerCount === 2 ? 'all pages loaded' : '' - }, 'all pages loaded') - } -)(0) - -test.each([[true], [false]])('shared worker', async (doTick) => { - if (doTick) { - await page.click('.tick-shared') - } - await waitSharedWorkerTick(page) +test('shared worker', async () => { + await untilUpdated(() => page.textContent('.tick-count'), 'pong', true) }) test('worker emitted and import.meta.url in nested worker (serve)', async () => { - expect(await page.textContent('.nested-worker')).toMatch( - 'worker-nested-worker' + await untilUpdated( + () => page.textContent('.nested-worker'), + 'worker-nested-worker', + true ) - expect(await page.textContent('.nested-worker-module')).toMatch('sub-worker') - expect(await page.textContent('.nested-worker-constructor')).toMatch( - '"type":"constructor"' + await untilUpdated( + () => page.textContent('.nested-worker-module'), + 'sub-worker', + true + ) + await untilUpdated( + () => page.textContent('.nested-worker-constructor'), + '"type":"constructor"', + true ) }) describe.runIf(isBuild)('build', () => { // assert correct files - test('inlined code generation', async () => { - const chunksDir = path.resolve(testDir, 'dist/chunks') + test('inlined code generation', () => { + const chunksDir = path.resolve(testDir, 'dist/relative-base/chunks') const files = fs.readdirSync(chunksDir) const index = files.find((f) => f.includes('main-module')) const content = fs.readFileSync(path.resolve(chunksDir, index), 'utf-8') - const workerEntriesDir = path.resolve(testDir, 'dist/worker-entries') + const workerEntriesDir = path.resolve( + testDir, + 'dist/relative-base/worker-entries' + ) const workerFiles = fs.readdirSync(workerEntriesDir) const worker = workerFiles.find((f) => f.includes('worker_entry.my-worker')) const workerContent = fs.readFileSync( @@ -88,39 +76,65 @@ describe.runIf(isBuild)('build', () => { }) test('worker emitted and import.meta.url in nested worker (build)', async () => { - expect(await page.textContent('.nested-worker-module')).toMatch( - '"type":"module"' + await untilUpdated( + () => page.textContent('.nested-worker-module'), + '"type":"module"', + true ) - expect(await page.textContent('.nested-worker-constructor')).toMatch( - '"type":"constructor"' + await untilUpdated( + () => page.textContent('.nested-worker-constructor'), + '"type":"constructor"', + true ) }) }) test('module worker', async () => { - expect(await page.textContent('.shared-worker-import-meta-url')).toMatch( - 'A string' + await untilUpdated( + () => page.textContent('.shared-worker-import-meta-url'), + 'A string', + true ) }) test.runIf(isBuild)('classic worker', async () => { - expect(await page.textContent('.classic-worker')).toMatch('A classic') - expect(await page.textContent('.classic-shared-worker')).toMatch('A classic') + await untilUpdated( + () => page.textContent('.classic-worker'), + 'A classic', + true + ) + await untilUpdated( + () => page.textContent('.classic-shared-worker'), + 'A classic', + true + ) }) test.runIf(isBuild)('emit chunk', async () => { - expect(await page.textContent('.emit-chunk-worker')).toMatch( - '["A string",{"type":"emit-chunk-sub-worker","data":"A string"},{"type":"module-and-worker:worker","data":"A string"},{"type":"module-and-worker:module","data":"module and worker"},{"type":"emit-chunk-sub-worker","data":{"module":"module and worker","msg1":"module1","msg2":"module2","msg3":"module3"}}]' + await untilUpdated( + () => page.textContent('.emit-chunk-worker'), + '["A string",{"type":"emit-chunk-sub-worker","data":"A string"},{"type":"module-and-worker:worker","data":"A string"},{"type":"module-and-worker:module","data":"module and worker"},{"type":"emit-chunk-sub-worker","data":{"module":"module and worker","msg1":"module1","msg2":"module2","msg3":"module3"}}]', + true ) - expect(await page.textContent('.emit-chunk-dynamic-import-worker')).toMatch( - '"A string./"' + await untilUpdated( + () => page.textContent('.emit-chunk-dynamic-import-worker'), + '"A string./"', + true ) }) test('import.meta.glob in worker', async () => { - expect(await page.textContent('.importMetaGlob-worker')).toMatch('["') + await untilUpdated( + () => page.textContent('.importMetaGlob-worker'), + '["', + true + ) }) test('import.meta.glob with eager in worker', async () => { - expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["') + await untilUpdated( + () => page.textContent('.importMetaGlobEager-worker'), + '["', + true + ) }) diff --git a/playground/worker/__tests__/sourcemap/__snapshots__/sourcemap-worker.spec.ts.snap b/playground/worker/__tests__/sourcemap/__snapshots__/sourcemap-worker.spec.ts.snap index 71ea7527a69d51..3895aae40ad402 100644 --- a/playground/worker/__tests__/sourcemap/__snapshots__/sourcemap-worker.spec.ts.snap +++ b/playground/worker/__tests__/sourcemap/__snapshots__/sourcemap-worker.spec.ts.snap @@ -2,7 +2,7 @@ exports[`serve:worker-sourcemap > nested worker 1`] = ` { - "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,uCAAsB,CAAC;AAClD;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACnC,CAAC,CAAC,CAAC;AACH,CAAC;AACD;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAChB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;", + "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,uCAAsB,CAAC;AAClD;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjC,CAAC;AACD;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/B;AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAChB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;", "sources": [ "/root/possible-ts-output-worker.mjs?worker_file", ], diff --git a/playground/worker/index.html b/playground/worker/index.html index 1fd387d5a9c08b..d444f2ab878b98 100644 --- a/playground/worker/index.html +++ b/playground/worker/index.html @@ -1,30 +1,40 @@ +

format iife:

+
Expected values:
+

worker template error match:

const worker = new Worker(new URL('./worker.js', import.meta.url)) -

format iife:

-
Expected values:
- +

+ import myWorker from '../my-worker?worker' + .pong + .mode + .bundle-with-plugin +

- Response from worker: +
Response from worker:
+
mode:
+
bundle-with-plugin:
-
bundle-with-plugin:
- -
Response from inline worker:
+

+ import InlineWorker from '../my-worker?worker&inline' + .pong-inline +

+ - -
- Response from worker imported from code that might be compiled TS: - -
+

+ import TSOutputWorker from '../possible-ts-output-worker?worker' + .pong-ts-output +

+ - -
- Tick from shared worker, it syncs between pages: - 0 -
+

+ import mySharedWorker from '../my-shared-worker?sharedworker&name=shared' + .tick-count +

+

new Worker(new URL('./url-worker.js', import.meta.url), { type: 'module' }) diff --git a/playground/worker/my-shared-worker.ts b/playground/worker/my-shared-worker.ts index 8d2099a7636459..2c77f0fd56c701 100644 --- a/playground/worker/my-shared-worker.ts +++ b/playground/worker/my-shared-worker.ts @@ -1,22 +1,16 @@ -let count = 0 const ports = new Set() // @ts-expect-error -onconnect = (event) => { +self.onconnect = (event) => { const port = event.ports[0] ports.add(port) - port.postMessage(count) - port.onmessage = (message) => { - if (message.data === 'tick') { - count++ - ports.forEach((p: any) => { - p.postMessage(count) - }) - } + port.postMessage('pong') + port.onmessage = () => { + ports.forEach((p: any) => { + p.postMessage('pong') + }) } } // for sourcemap console.log('my-shared-worker.js') - -export {} diff --git a/playground/worker/my-worker.ts b/playground/worker/my-worker.ts index 7207a0ea5a077e..8c91d49d70ba5c 100644 --- a/playground/worker/my-worker.ts +++ b/playground/worker/my-worker.ts @@ -1,12 +1,13 @@ import { mode, msg } from './modules/workerImport' import { bundleWithPlugin } from './modules/test-plugin' -// import { msg as msgFromDep } from 'dep-to-optimize' +import { msg as msgFromDep } from 'dep-to-optimize' self.onmessage = (e) => { if (e.data === 'ping') { - self.postMessage({ msg, mode, bundleWithPlugin }) // TODO: fix darwin, and add back: msgFromDep }) + self.postMessage({ msg, mode, bundleWithPlugin }) } } +self.postMessage({ msg, mode, bundleWithPlugin, msgFromDep }) // for sourcemap console.log('my-worker.js') diff --git a/playground/worker/possible-ts-output-worker.mjs b/playground/worker/possible-ts-output-worker.mjs index db76614bc78267..e51c26e76c09b2 100644 --- a/playground/worker/possible-ts-output-worker.mjs +++ b/playground/worker/possible-ts-output-worker.mjs @@ -1,10 +1,10 @@ -import { msg, mode } from './modules/workerImport' +import { mode, msg } from './modules/workerImport' self.onmessage = (e) => { - if (e.data === 'ping') { - self.postMessage({ msg, mode }) - } + self.postMessage({ msg, mode }) } +self.postMessage({ msg, mode }) + // for sourcemap console.log('possible-ts-output-worker.mjs') diff --git a/playground/worker/vite.config-es.js b/playground/worker/vite.config-es.js index 6d6704de0bc213..0d28d241ca8d42 100644 --- a/playground/worker/vite.config-es.js +++ b/playground/worker/vite.config-es.js @@ -38,5 +38,6 @@ module.exports = vite.defineConfig({ } } } - ] + ], + cacheDir: 'node_modules/.vite/es' }) diff --git a/playground/worker/vite.config-relative-base.js b/playground/worker/vite.config-relative-base.js index dd10caa205f60b..64c2b7983fb527 100644 --- a/playground/worker/vite.config-relative-base.js +++ b/playground/worker/vite.config-relative-base.js @@ -1,10 +1,9 @@ +const path = require('path') const vueJsx = require('@vitejs/plugin-vue-jsx') const vite = require('vite') -const path = require('path') module.exports = vite.defineConfig({ base: './', - enforce: 'pre', worker: { format: 'es', plugins: [vueJsx()], @@ -17,7 +16,7 @@ module.exports = vite.defineConfig({ } }, build: { - outDir: 'dist', + outDir: 'dist/relative-base', rollupOptions: { output: { assetFileNames: 'other-assets/[name]-[hash].[ext]', @@ -26,6 +25,9 @@ module.exports = vite.defineConfig({ } } }, + testConfig: { + baseRoute: '/relative-base/' + }, plugins: [ { name: 'resolve-format-es', @@ -38,5 +40,6 @@ module.exports = vite.defineConfig({ } } } - ] + ], + cacheDir: 'node_modules/.vite/relative-base' }) diff --git a/playground/worker/vite.config-sourcemap.js b/playground/worker/vite.config-sourcemap.js index ea1c66a33a44d7..a84d8e6699af14 100644 --- a/playground/worker/vite.config-sourcemap.js +++ b/playground/worker/vite.config-sourcemap.js @@ -12,13 +12,30 @@ module.exports = vite.defineConfig((sourcemap) => { }/`, worker: { format: 'iife', - plugins: [vueJsx()] + plugins: [vueJsx()], + rollupOptions: { + output: { + assetFileNames: 'assets/[name].worker_asset[hash].[ext]', + chunkFileNames: 'assets/[name].worker_chunk[hash].js', + entryFileNames: 'assets/[name].worker_entry[hash].js' + } + } }, + cacheDir: `node_modules/.vite/iife-${ + typeof sourcemap === 'boolean' ? 'sourcemap' : 'sourcemap-' + sourcemap + }`, build: { outDir: `dist/iife-${ typeof sourcemap === 'boolean' ? 'sourcemap' : 'sourcemap-' + sourcemap }/`, - sourcemap: sourcemap + sourcemap: sourcemap, + rollupOptions: { + output: { + assetFileNames: 'assets/[name].[hash].[ext]', + chunkFileNames: 'assets/[name].[hash].js', + entryFileNames: 'assets/[name].[hash].js' + } + } } } }) diff --git a/playground/worker/vite.config.js b/playground/worker/vite.config.js index b7760bc4d7a240..f937372c6e0012 100644 --- a/playground/worker/vite.config.js +++ b/playground/worker/vite.config.js @@ -5,9 +5,24 @@ module.exports = vite.defineConfig({ base: '/iife/', worker: { format: 'iife', - plugins: [vueJsx()] + plugins: [vueJsx()], + rollupOptions: { + output: { + assetFileNames: 'assets/worker_asset.[name].[ext]', + chunkFileNames: 'assets/worker_chunk.[name].js', + entryFileNames: 'assets/worker_entry.[name].js' + } + } }, build: { - outDir: 'dist/iife' - } + outDir: 'dist/iife', + rollupOptions: { + output: { + assetFileNames: 'assets/[name].[ext]', + chunkFileNames: 'assets/[name].js', + entryFileNames: 'assets/[name].js' + } + } + }, + cacheDir: 'node_modules/.vite/iife' }) diff --git a/playground/worker/worker/main-module.js b/playground/worker/worker/main-module.js index 81e639341d9d5b..4f6fa8dd7b6334 100644 --- a/playground/worker/worker/main-module.js +++ b/playground/worker/worker/main-module.js @@ -12,46 +12,31 @@ function text(el, text) { document.querySelector('.mode-true').textContent = mode const worker = new myWorker() +worker.postMessage('ping') worker.addEventListener('message', (e) => { text('.pong', e.data.msg) text('.mode', e.data.mode) text('.bundle-with-plugin', e.data.bundleWithPlugin) }) -document.querySelector('.ping').addEventListener('click', () => { - worker.postMessage('ping') -}) - const inlineWorker = new InlineWorker() +inlineWorker.postMessage('ping') inlineWorker.addEventListener('message', (e) => { text('.pong-inline', e.data.msg) }) -document.querySelector('.ping-inline').addEventListener('click', () => { - console.log('111') - inlineWorker.postMessage('ping') -}) - const sharedWorker = new mySharedWorker() -document.querySelector('.tick-shared').addEventListener('click', () => { - sharedWorker.port.postMessage('tick') -}) - sharedWorker.port.addEventListener('message', (event) => { text('.tick-count', event.data) }) - sharedWorker.port.start() const tsOutputWorker = new TSOutputWorker() +tsOutputWorker.postMessage('ping') tsOutputWorker.addEventListener('message', (e) => { text('.pong-ts-output', e.data.msg) }) -document.querySelector('.ping-ts-output').addEventListener('click', () => { - tsOutputWorker.postMessage('ping') -}) - const nestedWorker = new NestedWorker() nestedWorker.addEventListener('message', (ev) => { if (typeof ev.data === 'string') {