From 11df9a40eb8b2e5f46153f76af0b5f90dd32d168 Mon Sep 17 00:00:00 2001 From: zhangyu96 Date: Tue, 1 Mar 2022 20:36:42 +0800 Subject: [PATCH 1/3] fix: update watch mode --- .../assets/__tests__/assets.spec.ts | 22 ++++++++++++++++++- packages/playground/assets/css/foo.module.css | 3 +++ packages/playground/assets/index.html | 10 +++++++++ packages/playground/assets/static/foo.txt | 1 + packages/vite/src/node/build.ts | 2 ++ packages/vite/src/node/plugins/ensureWatch.ts | 17 ++++++++++++++ packages/vite/src/node/plugins/index.ts | 3 +++ scripts/jestPerTestSetup.ts | 7 +++--- 8 files changed, 61 insertions(+), 4 deletions(-) create mode 100644 packages/playground/assets/css/foo.module.css create mode 100644 packages/playground/assets/static/foo.txt create mode 100644 packages/vite/src/node/plugins/ensureWatch.ts diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts index c51bb4094b7b8c..58c7f9ffd9e93a 100644 --- a/packages/playground/assets/__tests__/assets.spec.ts +++ b/packages/playground/assets/__tests__/assets.spec.ts @@ -242,6 +242,7 @@ if (isBuild) { } }) } + describe('css and assets in css in build watch', () => { if (isBuild) { test('css will not be lost and css does not contain undefined', async () => { @@ -250,7 +251,26 @@ describe('css and assets in css in build watch', () => { const cssFile = findAssetFile(/index\.\w+\.css$/, 'foo') expect(cssFile).not.toBe('') expect(cssFile).not.toMatch(/undefined/) - watcher?.close() + }) + + test('import module.css', async () => { + expect(await getColor('#foo')).toBe('red') + editFile( + 'css/foo.module.css', + (code) => code.replace('red', 'blue'), + true + ) + await notifyRebuildComplete(watcher) + await page.reload() + expect(await getColor('#foo')).toBe('blue') + }) + + test('import with raw query', async () => { + expect(await page.textContent('.raw-query')).toBe('foo') + editFile('static/foo.txt', (code) => code.replace('foo', 'zoo'), true) + await notifyRebuildComplete(watcher) + await page.reload() + expect(await page.textContent('.raw-query')).toBe('zoo') }) } }) diff --git a/packages/playground/assets/css/foo.module.css b/packages/playground/assets/css/foo.module.css new file mode 100644 index 00000000000000..196612f252d254 --- /dev/null +++ b/packages/playground/assets/css/foo.module.css @@ -0,0 +1,3 @@ +.foo-module { + color: red; +} diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html index 8c5b201f6881a4..9df120374f56b0 100644 --- a/packages/playground/assets/index.html +++ b/packages/playground/assets/index.html @@ -203,6 +203,10 @@

@import

@import CSS from publicDir should load (this should be red)

+

import module css

+ +

+ @@ -256,6 +260,12 @@

document.querySelector('.import-meta-url-img-comma-nl').src = metaUrlWithCommaNL + import classNames from './css/foo.module.css' + document.querySelector('#foo').className = classNames['foo-module'] + + import someString from './static/foo.txt?raw' + document.querySelector('.raw-query').textContent = someString + /** * don't process the code in the comment * const url = new URL('non_existent_file.png', import.meta.url) diff --git a/packages/playground/assets/static/foo.txt b/packages/playground/assets/static/foo.txt new file mode 100644 index 00000000000000..19102815663d23 --- /dev/null +++ b/packages/playground/assets/static/foo.txt @@ -0,0 +1 @@ +foo \ No newline at end of file diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts index c8a1a0f17fa4a4..01290575382d08 100644 --- a/packages/vite/src/node/build.ts +++ b/packages/vite/src/node/build.ts @@ -43,6 +43,7 @@ import { scanImports } from './optimizer/scan' import { assetImportMetaUrlPlugin } from './plugins/assetImportMetaUrl' import { loadFallbackPlugin } from './plugins/loadFallback' import { watchPackageDataPlugin } from './packages' +import { ensureWatchPlugin } from './plugins/ensureWatch' export interface BuildOptions { /** @@ -311,6 +312,7 @@ export function resolveBuildPlugins(config: ResolvedConfig): { const options = config.build return { pre: [ + ...(options.watch ? [ensureWatchPlugin()] : []), watchPackageDataPlugin(config), buildHtmlPlugin(config), commonjsPlugin(options.commonjsOptions), diff --git a/packages/vite/src/node/plugins/ensureWatch.ts b/packages/vite/src/node/plugins/ensureWatch.ts new file mode 100644 index 00000000000000..d9266952490a58 --- /dev/null +++ b/packages/vite/src/node/plugins/ensureWatch.ts @@ -0,0 +1,17 @@ +import type { Plugin } from '..' +import { cleanUrl, queryRE } from '../utils' + +/** + * plugin to ensure rollup can watch correctly. + */ +export function ensureWatchPlugin(): Plugin { + return { + name: 'vite:ensure-watch', + load(id) { + if (queryRE.test(id)) { + this.addWatchFile(cleanUrl(id)) + } + return null + } + } +} diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts index e4f3d453527af3..7dbe400728e323 100644 --- a/packages/vite/src/node/plugins/index.ts +++ b/packages/vite/src/node/plugins/index.ts @@ -16,6 +16,7 @@ import { preAliasPlugin } from './preAlias' import { definePlugin } from './define' import { ssrRequireHookPlugin } from './ssrRequireHook' import { workerImportMetaUrlPlugin } from './workerImportMetaUrl' +import { ensureWatchPlugin } from './ensureWatch' export async function resolvePlugins( config: ResolvedConfig, @@ -24,12 +25,14 @@ export async function resolvePlugins( postPlugins: Plugin[] ): Promise { const isBuild = config.command === 'build' + const isWatch = isBuild && !!config.build.watch const buildPlugins = isBuild ? (await import('../build')).resolveBuildPlugins(config) : { pre: [], post: [] } return [ + isWatch ? ensureWatchPlugin() : null, isBuild ? null : preAliasPlugin(), aliasPlugin({ entries: config.resolve.alias }), ...prePlugins, diff --git a/scripts/jestPerTestSetup.ts b/scripts/jestPerTestSetup.ts index 9c15edf9f059bf..3ce21fca8db8e6 100644 --- a/scripts/jestPerTestSetup.ts +++ b/scripts/jestPerTestSetup.ts @@ -142,7 +142,7 @@ beforeAll(async () => { global.watcher = rollupOutput as RollupWatcher await notifyRebuildComplete(global.watcher) } - const url = (global.viteTestUrl = await startStaticServer()) + const url = (global.viteTestUrl = await startStaticServer(isWatch)) await page.goto(url) } } @@ -164,13 +164,14 @@ afterAll(async () => { global.serverLogs = [] await global.page?.close() await server?.close() + watcher?.close() const beforeAllErr = getBeforeAllError() if (beforeAllErr) { throw beforeAllErr } }) -function startStaticServer(): Promise { +function startStaticServer(isWatch: boolean): Promise { // check if the test project has base config const configFile = resolve(rootDir, 'vite.config.js') let config: UserConfig | undefined @@ -187,7 +188,7 @@ function startStaticServer(): Promise { } // start static file server - const serve = sirv(resolve(rootDir, 'dist')) + const serve = sirv(resolve(rootDir, 'dist'), { dev: isWatch }) const httpServer = (server = http.createServer((req, res) => { if (req.url === '/ping') { res.statusCode = 200 From aa7a17479d3eb931cd9193078488f264da024e0d Mon Sep 17 00:00:00 2001 From: zhangyu96 Date: Wed, 2 Mar 2022 16:08:41 +0800 Subject: [PATCH 2/3] fix: update --- scripts/jestPerTestSetup.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/jestPerTestSetup.ts b/scripts/jestPerTestSetup.ts index 3ce21fca8db8e6..973018eb5fd800 100644 --- a/scripts/jestPerTestSetup.ts +++ b/scripts/jestPerTestSetup.ts @@ -164,7 +164,7 @@ afterAll(async () => { global.serverLogs = [] await global.page?.close() await server?.close() - watcher?.close() + global.watcher?.close() const beforeAllErr = getBeforeAllError() if (beforeAllErr) { throw beforeAllErr From eb9b407dcfc477c4c12b7e5e8d5fc552b5c15801 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Fri, 4 Mar 2022 11:47:20 +0800 Subject: [PATCH 3/3] chore: update import path --- packages/vite/src/node/plugins/ensureWatch.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/ensureWatch.ts b/packages/vite/src/node/plugins/ensureWatch.ts index d9266952490a58..30a6fb3d6df819 100644 --- a/packages/vite/src/node/plugins/ensureWatch.ts +++ b/packages/vite/src/node/plugins/ensureWatch.ts @@ -1,4 +1,4 @@ -import type { Plugin } from '..' +import type { Plugin } from '../plugin' import { cleanUrl, queryRE } from '../utils' /**