Skip to content

Commit 7be752c

Browse files
BarbapapazesBarbapapazes
authored
fix(unhead): capo inline scripts ordering (#596)
* fix: inline scripts * chore: lint * test: update snapshots
1 parent fde329c commit 7be752c

7 files changed

Lines changed: 60 additions & 53 deletions

File tree

‎packages/react/test/SimpleHead.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,15 @@ describe('simpleHead component', () => {
2525
<link rel="stylesheet" href="default-styles.css">
2626
<style>body { background-color: #f0f0f0; }</style>
2727
<link rel="preload" href="https://example.com/font.woff2" as="font" type="font/woff2">
28+
<script type="module" src="https://example.com/module.js"></script>
2829
<script defer src="https://example.com/defer-script.js"></script>
2930
<link rel="dns-prefetch" href="//example.com">
3031
<link rel="prefetch" href="https://example.com/next-page">
3132
<link rel="prerender" href="https://example.com/next-page">
3233
<meta name="description" content="Default Description">
3334
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
3435
<link rel="icon" href="favicon.ico">
35-
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"Example","url":"https://www.example.com"}</script>
36-
<script type="module" src="https://example.com/module.js"></script>"
36+
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"Example","url":"https://www.example.com"}</script>"
3737
`)
3838
})
3939
it('renders nothing if component is unmounted', async () => {

‎packages/react/test/SimpleHeadSSR.test.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,23 @@ describe('simpleHead component in ssr', () => {
1818

1919
const { headTags } = await renderSSRHead(head)
2020
expect(headTags).toMatchInlineSnapshot(`
21-
"<meta name="viewport" content="width=device-width, initial-scale=1">
22-
<title>Default Title 2</title>
23-
<script async src="https://example.com/async-script.js"></script>
24-
<script noModule src="https://example.com/nomodule.js"></script>
25-
<link rel="stylesheet" href="default-styles.css">
26-
<style>body { background-color: #f0f0f0; }</style>
27-
<link rel="preload" href="https://example.com/font.woff2" as="font" type="font/woff2">
28-
<script defer src="https://example.com/defer-script.js"></script>
29-
<link rel="dns-prefetch" href="//example.com">
30-
<link rel="prefetch" href="https://example.com/next-page">
31-
<link rel="prerender" href="https://example.com/next-page">
32-
<meta name="description" content="Default Description">
33-
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
34-
<link rel="icon" href="favicon.ico">
35-
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"Example","url":"https://www.example.com"}</script>
36-
<script type="module" src="https://example.com/module.js"></script>"
37-
`)
21+
"<meta name="viewport" content="width=device-width, initial-scale=1">
22+
<title>Default Title 2</title>
23+
<script async src="https://example.com/async-script.js"></script>
24+
<script noModule src="https://example.com/nomodule.js"></script>
25+
<link rel="stylesheet" href="default-styles.css">
26+
<style>body { background-color: #f0f0f0; }</style>
27+
<link rel="preload" href="https://example.com/font.woff2" as="font" type="font/woff2">
28+
<script type="module" src="https://example.com/module.js"></script>
29+
<script defer src="https://example.com/defer-script.js"></script>
30+
<link rel="dns-prefetch" href="https://github.com//example.com">
31+
<link rel="prefetch" href="https://example.com/next-page">
32+
<link rel="prerender" href="https://example.com/next-page">
33+
<meta name="description" content="Default Description">
34+
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
35+
<link rel="icon" href="favicon.ico">
36+
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"Example","url":"https://www.example.com"}</script>"
37+
`)
3838
})
3939
it('renders head tags correctly with SSR', async () => {
4040
const head = createHead()
@@ -60,15 +60,15 @@ describe('simpleHead component in ssr', () => {
6060
<link rel="stylesheet" href="default-styles.css">
6161
<style>body { background-color: #f0f0f0; }</style>
6262
<link rel="preload" href="https://example.com/font.woff2" as="font" type="font/woff2">
63+
<script type="module" src="https://example.com/module.js"></script>
6364
<script defer src="https://example.com/defer-script.js"></script>
6465
<link rel="dns-prefetch" href="//example.com">
6566
<link rel="prefetch" href="https://example.com/next-page">
6667
<link rel="prerender" href="https://example.com/next-page">
6768
<meta name="description" content="Default Description">
6869
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
6970
<link rel="icon" href="favicon.ico">
70-
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"Example","url":"https://www.example.com"}</script>
71-
<script type="module" src="https://example.com/module.js"></script>"
71+
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"Example","url":"https://www.example.com"}</script>"
7272
`)
7373
})
7474
})

‎packages/unhead/src/utils/sort.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,11 +86,13 @@ export function tagWeight<T extends HeadTag>(head: Unhead<any>, tag: T): number
8686
if (isTruthy(tag.props.async)) {
8787
weight = weightMap.script.async
8888
}
89-
else if (tag.props.src
89+
else if ((tag.props.src
9090
&& !isTruthy(tag.props.defer)
9191
&& !isTruthy(tag.props.async)
9292
&& tag.props.type !== 'module'
93-
&& !tag.props.type?.endsWith('json')) {
93+
&& !tag.props.type?.endsWith('json'))
94+
|| (tag.innerHTML
95+
&& !tag.props.type?.endsWith('json'))) {
9496
weight = weightMap.script.sync
9597
}
9698
else if ((isTruthy(tag.props.defer) && tag.props.src && !isTruthy(tag.props.async)) || tag.props.type === 'module') {

‎packages/unhead/test/unit/client/innerHTML.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ describe('dom innerHTML', () => {
3434
expect(await useDelayedSerializedDom()).toMatchInlineSnapshot(`
3535
"<!DOCTYPE html><html><head>
3636
37-
<script type="application/json">{"test":"test","something":{"else":123}}</script><script type="speculationrules">{"prefetch":[{"source":"list","urls":["/test"],"requires":["anonymous-client-ip-when-cross-origin"]}]}</script></head>
37+
<script type="speculationrules">{"prefetch":[{"source":"list","urls":["/test"],"requires":["anonymous-client-ip-when-cross-origin"]}]}</script><script type="application/json">{"test":"test","something":{"else":123}}</script></head>
3838
<body>
3939
4040
<div>

‎packages/unhead/test/unit/client/order.test.ts‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,12 @@ describe('dom order', () => {
2828

2929
expect(firstTagRendered).toMatchInlineSnapshot(`
3030
{
31-
"_d": "htmlAttrs",
32-
"_p": 1024,
33-
"_w": 100,
34-
"props": {
35-
"class": Set {
36-
"no-js",
37-
},
38-
},
39-
"tag": "htmlAttrs",
31+
"_d": "script:content:document.documentElement.classList.remove("no-js")",
32+
"_p": 1025,
33+
"_w": 50,
34+
"innerHTML": "document.documentElement.classList.remove("no-js")",
35+
"props": {},
36+
"tag": "script",
4037
}
4138
`)
4239
})

‎packages/unhead/test/unit/client/promises.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ describe('promises', () => {
4141
{
4242
"_d": "script:content:test",
4343
"_p": 1026,
44-
"_w": 100,
44+
"_w": 50,
4545
"innerHTML": "test",
4646
"props": {},
4747
"tag": "script",

‎packages/unhead/test/unit/plugins/capo.test.ts‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ describe('capo', () => {
2121
src: 'sync-script.js',
2222
}],
2323
})
24+
head.push({
25+
script: [{
26+
innerHTML: 'console.log("inline script")',
27+
}],
28+
})
2429
head.push({
2530
style: [
2631
'.sync-style { color: red }',
@@ -118,33 +123,36 @@ describe('capo', () => {
118123
// SYNC SCRIPT
119124
expect(resolvedTags[5].tag).toEqual('script')
120125
expect(resolvedTags[5].props.src).toEqual('sync-script.js')
126+
// INLINE SCRIPT
127+
expect(resolvedTags[6].tag).toEqual('script')
128+
expect(resolvedTags[6].innerHTML).toEqual('console.log("inline script")')
121129
// SYNC STYLE
122-
expect(resolvedTags[6].tag).toEqual('style')
123-
expect(resolvedTags[6].innerHTML).toEqual('.sync-style { color: red }')
124-
expect(resolvedTags[7].tag).toEqual('link')
125-
expect(resolvedTags[7].props.rel).toEqual('stylesheet')
126-
// PRELOAD
130+
expect(resolvedTags[7].tag).toEqual('style')
131+
expect(resolvedTags[7].innerHTML).toEqual('.sync-style { color: red }')
127132
expect(resolvedTags[8].tag).toEqual('link')
128-
expect(resolvedTags[8].props.rel).toEqual('modulepreload')
133+
expect(resolvedTags[8].props.rel).toEqual('stylesheet')
134+
// PRELOAD
129135
expect(resolvedTags[9].tag).toEqual('link')
130-
expect(resolvedTags[9].props.rel).toEqual('preload')
136+
expect(resolvedTags[9].props.rel).toEqual('modulepreload')
137+
expect(resolvedTags[10].tag).toEqual('link')
138+
expect(resolvedTags[10].props.rel).toEqual('preload')
131139
// DEFER SCRIPT
132-
expect(resolvedTags[10].tag).toEqual('script')
133-
expect(resolvedTags[10].props.defer).toEqual(true)
134-
// MODULE SCRIPT
135140
expect(resolvedTags[11].tag).toEqual('script')
136-
expect(resolvedTags[11].props.type).toEqual('module')
141+
expect(resolvedTags[11].props.defer).toEqual(true)
142+
// MODULE SCRIPT
143+
expect(resolvedTags[12].tag).toEqual('script')
144+
expect(resolvedTags[12].props.type).toEqual('module')
137145
// DNS-PREFETCH
138-
expect(resolvedTags[12].tag).toEqual('link')
139-
expect(resolvedTags[12].props.rel).toEqual('dns-prefetch')
140-
// PREFETCH
141146
expect(resolvedTags[13].tag).toEqual('link')
142-
expect(resolvedTags[13].props.rel).toEqual('prefetch')
143-
// PRERENDER
147+
expect(resolvedTags[13].props.rel).toEqual('dns-prefetch')
148+
// PREFETCH
144149
expect(resolvedTags[14].tag).toEqual('link')
145-
expect(resolvedTags[14].props.rel).toEqual('prerender')
150+
expect(resolvedTags[14].props.rel).toEqual('prefetch')
151+
// PRERENDER
152+
expect(resolvedTags[15].tag).toEqual('link')
153+
expect(resolvedTags[15].props.rel).toEqual('prerender')
146154
// META
147-
expect(resolvedTags[15].tag).toEqual('meta')
148-
expect(resolvedTags[15].props.name).toEqual('description')
155+
expect(resolvedTags[16].tag).toEqual('meta')
156+
expect(resolvedTags[16].props.name).toEqual('description')
149157
})
150158
})

0 commit comments

Comments
 (0)