Skip to content

Commit cefd6f7

Browse files
harlan-zwharlan-zw
authoredFeb 2, 2025··
feat(ssr): transformHtmlTemplate (#473)
* doc: tidy up * feat(ssr): `transformHtmlTemplate` * fix: handle boolean props * chore: export `extractTagsFromHtml` * chore: snapshot * refactor: rename
·
v2.0.42.0.0-rc.6
1 parent 1328277 commit cefd6f7

File tree

5 files changed

+224
-6
lines changed

5 files changed

+224
-6
lines changed
 

‎packages/unhead/src/server/index.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
export * from './createHead'
2-
export * from './renderSSRHead'
3-
export * from './util'
1+
export { createHead } from './createHead'
2+
export { renderSSRHead } from './renderSSRHead'
3+
export { transformHtmlTemplate } from './transformHtmlTemplate'
4+
export { escapeHtml, extractUnheadInputFromHtml, propsToString, ssrRenderTags, tagToString } from './util'
45
export type { SSRHeadPayload } from '@unhead/schema'

‎packages/unhead/src/server/transformHtmlTemplate.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import type { RenderSSRHeadOptions, Unhead } from '@unhead/schema'
2+
import { renderSSRHead } from './renderSSRHead'
3+
import { extractUnheadInputFromHtml } from './util/extractUnheadInputFromHtml'
4+
5+
export async function transformHtmlTemplate(head: Unhead<any>, html: string, options?: RenderSSRHeadOptions) {
6+
const { html: parsedHtml, input } = extractUnheadInputFromHtml(html)
7+
head.push(input)
8+
const headHtml = await renderSSRHead(head, options)
9+
return parsedHtml
10+
.replace('<html>', `<html${headHtml.htmlAttrs}>`)
11+
.replace('<body>', `<body>${headHtml.bodyTagsOpen ? `\n${headHtml.bodyTagsOpen}` : ``}`)
12+
.replace('<body>', `<body${headHtml.bodyAttrs}>`)
13+
.replace('</head>', `${headHtml.headTags}</head>`)
14+
.replace('</body>', `${headHtml.bodyTags}</body>`)
15+
}

‎packages/unhead/src/server/util/extractUnheadInputFromHtml.ts

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import type { UseHeadInput } from 'unhead'
2+
3+
const Attrs = /(\w+)(?:=["']([^"']*)["'])?/g
4+
const HtmlTag = /<html[^>]*>/
5+
const BodyTag = /<body[^>]*>/
6+
const HeadContent = /<head[^>]*>(.*?)<\/head>/s
7+
const SelfClosingTags = /<(meta|link|base)[^>]*>/g
8+
const ClosingTags = /<(title|script|style)[^>]*>[\s\S]*?<\/\1>/g
9+
// eslint-disable-next-line regexp/no-misleading-capturing-group
10+
const NewLines = /(\n\s*)+/g
11+
12+
function extractAttributes(tag: string) {
13+
// inner should be between the < and > (non greedy), split on ' ' and after index 0
14+
const inner = tag.match(/<([^>]*)>/)?.[1].split(' ').slice(1).join(' ')
15+
if (!inner)
16+
return {}
17+
const attrs = inner.match(Attrs)
18+
return attrs?.reduce((acc, attr) => {
19+
const sep = attr.indexOf('=')
20+
const key = sep > 0 ? attr.slice(0, sep) : attr
21+
const val = sep > 0 ? attr.slice(sep + 1).slice(1, -1) : true
22+
return { ...acc, [key]: val, tagPriority: 'low' }
23+
}, {}) || {}
24+
}
25+
26+
export function extractUnheadInputFromHtml(html: string) {
27+
const input: UseHeadInput<any> = {}
28+
input.htmlAttrs = extractAttributes(html.match(HtmlTag)?.[0] || '')
29+
html = html.replace(HtmlTag, '<html>')
30+
31+
input.bodyAttrs = extractAttributes(html.match(BodyTag)?.[0] || '')
32+
html = html.replace(BodyTag, '<body>')
33+
34+
const innerHead = html.match(HeadContent)?.[1] || ''
35+
innerHead.match(SelfClosingTags)?.forEach((s) => {
36+
html = html.replace(s, '')
37+
const tag = s.split(' ')[0].slice(1) as 'meta'
38+
input[tag] = input[tag] || []
39+
input[tag].push(extractAttributes(s) as any)
40+
})
41+
42+
innerHead.match(ClosingTags)
43+
?.map(tag => tag.trim())
44+
.filter(Boolean)
45+
.forEach((tag) => {
46+
html = html.replace(tag, '')
47+
const type = tag.match(/<([a-z-]+)/)?.[1] as 'script' | 'title'
48+
const res = {
49+
tagPriority: 'low',
50+
...extractAttributes(tag),
51+
} as any
52+
const innerContent = tag.match(/>([\s\S]*)</)?.[1]
53+
if (innerContent) {
54+
res[type !== 'script' ? 'textContent' : 'innerHTML'] = innerContent
55+
}
56+
if (type === 'title') {
57+
input.title = res
58+
}
59+
else {
60+
input[type] = input[type] || []
61+
input[type].push(res)
62+
}
63+
})
64+
65+
html = html.replace(NewLines, '\n')
66+
return { html, input }
67+
}

‎packages/unhead/src/server/util/index.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
export * from './propsToString'
2-
export * from './ssrRenderTags'
3-
export * from './tagToString'
1+
export { extractUnheadInputFromHtml } from './extractUnheadInputFromHtml'
2+
export { propsToString } from './propsToString'
3+
export { ssrRenderTags } from './ssrRenderTags'
4+
export { escapeHtml, tagToString } from './tagToString'

‎packages/unhead/test/unit/server/ssr.test.ts

+134
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useHead, useSeoMeta } from 'unhead'
22
import { renderSSRHead } from 'unhead/server'
3+
import { transformHtmlTemplate } from 'unhead/server/transformHtmlTemplate'
34
import { describe, it } from 'vitest'
45
import { basicSchema } from '../../fixtures'
56
import { createServerHeadWithContext } from '../../util'
@@ -214,4 +215,137 @@ describe('ssr', () => {
214215
}
215216
`)
216217
})
218+
it('vite template', async () => {
219+
const html = `<!doctype html>
220+
<html lang="en">
221+
<head>
222+
<meta charset="UTF-8" />
223+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
224+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
225+
<title>Vite + Vue + TS</title>
226+
<!--app-head-->
227+
</head>
228+
<body>
229+
<div id="app"><!--app-html--></div>
230+
<script type="module" src="/src/entry-client.ts"></script>
231+
</body>
232+
</html>`
233+
const head = createServerHeadWithContext()
234+
head.push({
235+
title: 'new title',
236+
meta: [
237+
{ charset: 'utf-16' },
238+
],
239+
})
240+
expect(await transformHtmlTemplate(head, html)).toMatchInlineSnapshot(`
241+
"<!doctype html>
242+
<html lang="en">
243+
<head>
244+
<!--app-head-->
245+
<meta charset="utf-16">
246+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
247+
<title>new title</title>
248+
<link rel="icon" type="image/svg+xml" href="/vite.svg"></head>
249+
<body>
250+
<div id="app"><!--app-html--></div>
251+
<script type="module" src="/src/entry-client.ts"></script>
252+
</body>
253+
</html>"
254+
`)
255+
})
256+
it('random template', async () => {
257+
const html = `
258+
<html lang="en">
259+
<head>
260+
<meta charset="UTF-8">
261+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
262+
<title>Document</title>
263+
<link rel="stylesheet" href="style.css">
264+
<script src="script.js" async type="module"></script>
265+
</head>
266+
<body style="accent-color: red;">
267+
<div>hello</div>
268+
<script src="ssr.test.ts"></script>
269+
<script>
270+
console.log('hello')
271+
</script>
272+
</body>
273+
</html>
274+
`
275+
const head = createServerHeadWithContext()
276+
head.push({
277+
title: 'new title',
278+
bodyAttrs: {
279+
style: 'background-color: blue;',
280+
},
281+
meta: [
282+
{ charset: 'utf-16' },
283+
],
284+
})
285+
expect(await transformHtmlTemplate(head, html)).toMatchInlineSnapshot(`
286+
"
287+
<html lang="en">
288+
<head>
289+
<meta charset="utf-16">
290+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
291+
<title>new title</title>
292+
<link rel="stylesheet" href="style.css">
293+
<script src="script.js" async type="module"></script></head>
294+
<body style="background-color: blue; accent-color: red">
295+
<div>hello</div>
296+
<script src="ssr.test.ts"></script>
297+
<script>
298+
console.log('hello')
299+
</script>
300+
</body>
301+
</html>
302+
"
303+
`)
304+
})
305+
it('random template #2', async () => {
306+
const html = `
307+
<!DOCTYPE html>
308+
<html lang="en">
309+
<head>
310+
<meta charset="UTF-8">
311+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
312+
<meta name="description" content="Test description">
313+
<link rel="stylesheet" href="styles.css">
314+
<link rel="icon" href="favicon.ico">
315+
<base href="/">
316+
<title>Test Document</title>
317+
<style>body { font-family: Arial, sans-serif; }</style>
318+
<script src="script.js" async></script>
319+
<script>console.log('Inline script');</script>
320+
<!-- Resource Hints -->
321+
<link rel="preload" href="styles.css" as="style">
322+
<link rel="preload" href="script.js" as="script">
323+
<link rel="dns-prefetch" href="//example.com">
324+
<link rel="preconnect" href="//example.com">
325+
<link rel="prefetch" href="another-script.js">
326+
</head>
327+
<body style="background-color: #f0f0f0;">
328+
<div id="content">Hello, world!</div>
329+
<script src="another-script.js"></script>
330+
</body>
331+
</html>`
332+
const head = createServerHeadWithContext()
333+
const processedHtml = await transformHtmlTemplate(head, html)
334+
expect(processedHtml).toContain('<meta charset="UTF-8">')
335+
expect(processedHtml).toContain('<meta name="viewport" content="width=device-width, initial-scale=1.0">')
336+
expect(processedHtml).toContain('<meta name="description" content="Test description">')
337+
expect(processedHtml).toContain('<link rel="stylesheet" href="styles.css">')
338+
expect(processedHtml).toContain('<link rel="icon" href="favicon.ico">')
339+
expect(processedHtml).toContain('<base href="/">')
340+
expect(processedHtml).toContain('<title>Test Document</title>')
341+
expect(processedHtml).toContain('<style>body { font-family: Arial, sans-serif; }</style>')
342+
expect(processedHtml).toContain('<script src="script.js" async></script>')
343+
expect(processedHtml).toContain('<script>console.log(\'Inline script\');</script>')
344+
expect(processedHtml).toContain('<link rel="preload" href="styles.css" as="style">')
345+
expect(processedHtml).toContain('<link rel="preload" href="script.js" as="script">')
346+
expect(processedHtml).toContain('<link rel="dns-prefetch" href="//example.com">')
347+
expect(processedHtml).toContain('<link rel="preconnect" href="//example.com">')
348+
expect(processedHtml).toContain('<link rel="prefetch" href="another-script.js">')
349+
expect(processedHtml).toContain('<script src="another-script.js"></script>')
350+
})
217351
})

0 commit comments

Comments
 (0)
Please sign in to comment.