Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(hmr): hmr style tag no support in html (#7262)
  • Loading branch information
poyoho committed Mar 14, 2022
1 parent 522faf8 commit fae120a
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 32 deletions.
17 changes: 15 additions & 2 deletions packages/playground/assets/__tests__/assets.spec.ts
Expand Up @@ -8,7 +8,8 @@ import {
readManifest,
readFile,
editFile,
notifyRebuildComplete
notifyRebuildComplete,
untilUpdated
} from '../../testUtils'

const assetMatch = isBuild
Expand Down Expand Up @@ -37,7 +38,7 @@ describe('injected scripts', () => {

test('html-proxy', async () => {
const hasHtmlProxy = await page.$(
'script[type="module"][src="/foo/index.html?html-proxy&index=0.js"]'
'script[type="module"][src^="/foo/index.html?html-proxy"]'
)
if (isBuild) {
expect(hasHtmlProxy).toBeFalsy()
Expand Down Expand Up @@ -264,3 +265,15 @@ describe('css and assets in css in build watch', () => {
})
}
})

if (!isBuild) {
test('@import in html style tag hmr', async () => {
await untilUpdated(() => getColor('.import-css'), 'rgb(0, 136, 255)')
editFile(
'./css/import.css',
(code) => code.replace('#0088ff', '#00ff88'),
true
)
await untilUpdated(() => getColor('.import-css'), 'rgb(0, 255, 136)')
})
}
67 changes: 37 additions & 30 deletions packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -1,7 +1,7 @@
import fs from 'fs'
import path from 'path'
import MagicString from 'magic-string'
import type { AttributeNode } from '@vue/compiler-dom'
import type { AttributeNode, ElementNode } from '@vue/compiler-dom'
import { NodeTypes } from '@vue/compiler-dom'
import type { Connect } from 'types/connect'
import type { IndexHtmlTransformHook } from '../../plugins/html'
Expand Down Expand Up @@ -94,9 +94,39 @@ const devHtmlHook: IndexHtmlTransformHook = async (
const base = config.base || '/'

const s = new MagicString(html)
let scriptModuleIndex = -1
let inlineModuleIndex = -1
const filePath = cleanUrl(htmlPath)

const addInlineModule = (node: ElementNode, ext: 'js' | 'css') => {
inlineModuleIndex++

const url = filePath.replace(normalizePath(config.root), '')

const contents = node.children
.map((child: any) => child.content || '')
.join('')

// add HTML Proxy to Map
addToHTMLProxyCache(config, url, inlineModuleIndex, contents)

// inline js module. convert to src="proxy"
const modulePath = `${
config.base + htmlPath.slice(1)
}?html-proxy&index=${inlineModuleIndex}.${ext}`

// invalidate the module so the newly cached contents will be served
const module = server?.moduleGraph.getModuleById(modulePath)
if (module) {
server?.moduleGraph.invalidateModule(module)
}

s.overwrite(
node.loc.start.offset,
node.loc.end.offset,
`<script type="module" src="${modulePath}"></script>`
)
}

await traverseHtml(html, htmlPath, (node) => {
if (node.type !== NodeTypes.ELEMENT) {
return
Expand All @@ -105,41 +135,18 @@ const devHtmlHook: IndexHtmlTransformHook = async (
// script tags
if (node.tag === 'script') {
const { src, isModule } = getScriptInfo(node)
if (isModule) {
scriptModuleIndex++
}

if (src) {
processNodeUrl(src, s, config, htmlPath, originalUrl, moduleGraph)
} else if (isModule) {
const url = filePath.replace(normalizePath(config.root), '')

const contents = node.children
.map((child: any) => child.content || '')
.join('')

// add HTML Proxy to Map
addToHTMLProxyCache(config, url, scriptModuleIndex, contents)

// inline js module. convert to src="proxy"
const modulePath = `${
config.base + htmlPath.slice(1)
}?html-proxy&index=${scriptModuleIndex}.js`

// invalidate the module so the newly cached contents will be served
const module = server?.moduleGraph.getModuleById(modulePath)
if (module) {
server?.moduleGraph.invalidateModule(module)
}

s.overwrite(
node.loc.start.offset,
node.loc.end.offset,
`<script type="module" src="${modulePath}"></script>`
)
addInlineModule(node, 'js')
}
}

if (node.tag === 'style' && node.children.length) {
addInlineModule(node, 'css')
}

// elements with [href/src] attrs
const assetAttrs = assetAttrsConfig[node.tag]
if (assetAttrs) {
Expand Down

0 comments on commit fae120a

Please sign in to comment.