From 634a4328041434434260844cf8fa95d0c3340f85 Mon Sep 17 00:00:00 2001 From: Evan You Date: Sun, 3 May 2020 13:38:50 -0400 Subject: [PATCH] feat: support json hmr --- src/node/index.ts | 2 +- src/node/serverPluginJson.ts | 8 +++++++- src/node/serverPluginModuleRewrite.ts | 18 +++++++----------- src/node/utils.ts | 9 +++++++-- 4 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/node/index.ts b/src/node/index.ts index a83877687b6130..129bb3b37006aa 100644 --- a/src/node/index.ts +++ b/src/node/index.ts @@ -1,3 +1,3 @@ export * from './server' export * from './build' -export * from './utils' +export { readBody, cachedRead, isStaticAsset, isImportRequest } from './utils' diff --git a/src/node/serverPluginJson.ts b/src/node/serverPluginJson.ts index 99f907d2feab76..48ff4e0d104276 100644 --- a/src/node/serverPluginJson.ts +++ b/src/node/serverPluginJson.ts @@ -1,7 +1,7 @@ import { Plugin } from './server' import { readBody, isImportRequest } from './utils' -export const jsonPlugin: Plugin = ({ app }) => { +export const jsonPlugin: Plugin = ({ app, watcher }) => { app.use(async (ctx, next) => { await next() // handle .json imports @@ -11,4 +11,10 @@ export const jsonPlugin: Plugin = ({ app }) => { ctx.body = `export default ${await readBody(ctx.body)}` } }) + + watcher.on('change', (file) => { + if (file.endsWith('.json')) { + watcher.handleJSReload(file) + } + }) } diff --git a/src/node/serverPluginModuleRewrite.ts b/src/node/serverPluginModuleRewrite.ts index 31678efd42768e..740779faa5ecde 100644 --- a/src/node/serverPluginModuleRewrite.ts +++ b/src/node/serverPluginModuleRewrite.ts @@ -13,7 +13,7 @@ import { rewriteFileWithHMR, hmrClientPublicPath } from './serverPluginHmr' -import { readBody } from './utils' +import { readBody, cleanUrl, queryRE } from './utils' const debug = require('debug')('vite:rewrite') @@ -87,17 +87,12 @@ export const moduleRewritePlugin: Plugin = ({ app, watcher, resolver }) => { !((ctx.path.endsWith('.vue') || ctx.vue) && ctx.query.type != null) ) { const content = await readBody(ctx.body) - if (rewriteCache.has(content)) { + if (!ctx.query.t && rewriteCache.has(content)) { debug(`${ctx.url}: serving from cache`) ctx.body = rewriteCache.get(content) } else { await initLexer - ctx.body = rewriteImports( - content!, - ctx.url.replace(/(&|\?)t=\d+/, ''), - resolver, - ctx.query.t - ) + ctx.body = rewriteImports(content!, ctx.path, resolver, ctx.query.t) rewriteCache.set(content, ctx.body) } } else { @@ -152,8 +147,7 @@ function rewriteImports( hasReplaced = true } } else { - const queryRE = /\?.*$/ - let pathname = id.replace(queryRE, '') + let pathname = cleanUrl(id) const queryMatch = id.match(queryRE) let query = queryMatch ? queryMatch[0] : '' // append .js for extension-less imports @@ -180,7 +174,9 @@ function rewriteImports( } // save the import chain for hmr analysis - const importee = slash(path.resolve(path.dirname(importer), resolved)) + const importee = cleanUrl( + slash(path.resolve(path.dirname(importer), resolved)) + ) currentImportees.add(importee) debugHmr(` ${importer} imports ${importee}`) ensureMapEntry(importerMap, importee).add(importer) diff --git a/src/node/utils.ts b/src/node/utils.ts index ea3f374faa0552..a84e33e44727d7 100644 --- a/src/node/utils.ts +++ b/src/node/utils.ts @@ -3,7 +3,6 @@ import { promises as fs } from 'fs' import LRUCache from 'lru-cache' import { Context } from 'koa' import { Readable } from 'stream' -import { URL } from 'url' const getETag = require('etag') const imageRE = /\.(png|jpe?g|gif|svg)(\?.*)?$/ @@ -24,10 +23,16 @@ export const isStaticAsset = (file: string) => { * as well. */ export const isImportRequest = (ctx: Context) => { - const referer = new URL(ctx.get('referer')).pathname + const referer = cleanUrl(ctx.get('referer')) return /\.\w+$/.test(referer) && !referer.endsWith('.html') } +export const queryRE = /\?.*$/ +export const hashRE = /\#.*$/ + +export const cleanUrl = (url: string) => + url.replace(hashRE, '').replace(queryRE, '') + interface CacheEntry { lastModified: number etag: string