Skip to content

Commit 889e61a

Browse files
harlan-zwharlan-zw
authoredJan 7, 2025··
feat(core)!: default capo sorting (#440)
* feat!: default capo sorting * chore: fixing tests * chore: fixing tests * chore: simplify
·
v2.0.42.0.0-rc.6
1 parent 838a713 commit 889e61a

File tree

18 files changed

+119
-258
lines changed

18 files changed

+119
-258
lines changed
 

‎docs/content/1.usage/2.guides/2.sorting.md

+7-5
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ title: Tag Sorting
33
description: How tags are sorted and how to configure them.
44
---
55

6-
Once tags are [deduped](/usage/guides/handling-duplicates), they will be sorted. Sorting the tags is important
7-
to ensure critical tags are rendered first, as well as allowing you to have tags in a specific order that you need them in.
6+
## Introduction
87

9-
For example, if you need to preload an asset, you'll need this to come before the asset itself. Which is a bit of a challenge
10-
when the tags are nested.
8+
Sorting the tags is important to ensure critical tags are rendered first, as well as allowing you to have tags in a specific order that you need them in.
119

12-
## Sorting Logic
10+
## Tag Sorting Logic
11+
12+
Sorting is first done using the [Capo.js](https://rviscomi.github.io/capo.js/) weights, making sure tags are rendered in
13+
a specific way to avoid [Critical Request Chains](https://web.dev/critical-request-chains/) issues as well
14+
as rendering bugs.
1315

1416
Sorting is done in multiple steps:
1517
- order critical tags first

‎docs/content/3.plugins/plugins/capo.md

-45
This file was deleted.

‎packages/schema/src/head.ts

+6
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,12 @@ export interface CreateHeadOptions {
8181
document?: Document
8282
plugins?: HeadPluginInput[]
8383
hooks?: NestedHooks<HeadHooks>
84+
/**
85+
* Disable the Capo.js tag sorting algorithm.
86+
*
87+
* This is added to make the v1 -> v2 migration easier allowing users to opt-out of the new sorting algorithm.
88+
*/
89+
disableCapoSorting?: boolean
8490
}
8591

8692
export interface HeadEntryOptions extends TagPosition, TagPriority, ProcessesTemplateParams, ResolvesDuplicates {

‎packages/shared/src/sort.ts

+44-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { HeadTag } from '@unhead/schema'
1+
import type { HeadTag, Unhead } from '@unhead/schema'
22

33
export const TAG_WEIGHTS = {
44
// tags
@@ -13,10 +13,18 @@ export const TAG_ALIASES = {
1313
low: 20,
1414
} as const
1515

16-
export function tagWeight<T extends HeadTag>(tag: T) {
16+
export const SortModifiers = [{ prefix: 'before:', offset: -1 }, { prefix: 'after:', offset: 1 }]
17+
18+
const importRe = /@import/
19+
const isTruthy = (val?: string | boolean) => val === '' || val === true
20+
21+
export function tagWeight<T extends HeadTag>(head: Unhead<any>, tag: T) {
1722
const priority = tag.tagPriority
1823
if (typeof priority === 'number')
1924
return priority
25+
const isScript = tag.tag === 'script'
26+
const isLink = tag.tag === 'link'
27+
const isStyle = tag.tag === 'style'
2028
let weight = 100
2129
if (tag.tag === 'meta') {
2230
// CSP needs to be as it effects the loading of assets
@@ -28,7 +36,7 @@ export function tagWeight<T extends HeadTag>(tag: T) {
2836
else if (tag.props.name === 'viewport')
2937
weight = -15
3038
}
31-
else if (tag.tag === 'link' && tag.props.rel === 'preconnect') {
39+
else if (isLink && tag.props.rel === 'preconnect') {
3240
// preconnects should almost always come first
3341
weight = 20
3442
}
@@ -39,6 +47,38 @@ export function tagWeight<T extends HeadTag>(tag: T) {
3947
// @ts-expect-e+rror untyped
4048
return weight + TAG_ALIASES[priority as keyof typeof TAG_ALIASES]
4149
}
50+
if (tag.tagPosition && tag.tagPosition !== 'head') {
51+
return weight
52+
}
53+
if (!head.ssr || head.resolvedOptions.disableCapoSorting) {
54+
return weight
55+
}
56+
if (isScript && isTruthy(tag.props.async)) {
57+
// ASYNC_SCRIPT
58+
weight = 30
59+
// SYNC_SCRIPT
60+
}
61+
else if (isStyle && tag.innerHTML && importRe.test(tag.innerHTML)) {
62+
// IMPORTED_STYLES
63+
weight = 40
64+
}
65+
else if (isScript && tag.props.src && !isTruthy(tag.props.defer) && !isTruthy(tag.props.async) && tag.props.type !== 'module' && !tag.props.type?.endsWith('json')) {
66+
weight = 50
67+
}
68+
else if ((isLink && tag.props.rel === 'stylesheet') || tag.tag === 'style') {
69+
// SYNC_STYLES
70+
weight = 60
71+
}
72+
else if (isLink && (tag.props.rel === 'preload' || tag.props.rel === 'modulepreload')) {
73+
// PRELOAD
74+
weight = 70
75+
}
76+
else if (isScript && isTruthy(tag.props.defer) && tag.props.src && !isTruthy(tag.props.async)) {
77+
// DEFER_SCRIPT
78+
weight = 80
79+
}
80+
else if (isLink && (tag.props.rel === 'prefetch' || tag.props.rel === 'dns-prefetch' || tag.props.rel === 'prerender')) {
81+
weight = 90
82+
}
4283
return weight
4384
}
44-
export const SortModifiers = [{ prefix: 'before:', offset: -1 }, { prefix: 'after:', offset: 1 }]

‎packages/unhead/export-size-report.json

-7
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,6 @@
4141
"minzipped": 2151,
4242
"bundled": 11435
4343
},
44-
{
45-
"name": "CapoPlugin",
46-
"path": "dist/index.mjs",
47-
"minified": 5113,
48-
"minzipped": 1891,
49-
"bundled": 10303
50-
},
5144
{
5245
"name": "useServerSeoMeta",
5346
"path": "dist/index.mjs",

‎packages/unhead/src/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,3 @@ export * from './composables/useServerHead'
1919
export * from './composables/useServerHeadSafe'
2020
export * from './composables/useServerSeoMeta'
2121
export * from './context'
22-
export * from './optionalPlugins/capoPlugin'

‎packages/unhead/src/optionalPlugins/capoPlugin.ts

-59
This file was deleted.

‎packages/unhead/src/plugins/dedupe.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { defineHeadPlugin, HasElementTags, hashTag, tagDedupeKey, tagWeight } fr
33

44
const UsesMergeStrategy = new Set(['templateParams', 'htmlAttrs', 'bodyAttrs'])
55

6-
export default defineHeadPlugin({
6+
export default defineHeadPlugin(head => ({
77
hooks: {
88
'tag:normalise': ({ tag }) => {
99
// support for third-party dedupe keys
@@ -74,7 +74,7 @@ export default defineHeadPlugin({
7474
dupedTag._duped.push(tag)
7575
continue
7676
}
77-
else if (tagWeight(tag) > tagWeight(dupedTag)) {
77+
else if ((!tag.key || !dupedTag.key) && tagWeight(head, tag) > tagWeight(head, dupedTag)) {
7878
// check tag weights
7979
continue
8080
}
@@ -110,4 +110,4 @@ export default defineHeadPlugin({
110110
.filter(t => !(t.tag === 'meta' && (t.props.name || t.props.property) && !t.props.content))
111111
},
112112
},
113-
})
113+
}))

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

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { defineHeadPlugin, SortModifiers, tagWeight } from '@unhead/shared'
22

3-
export default defineHeadPlugin({
3+
4+
export default defineHeadPlugin((head => ({
45
hooks: {
56
'tags:resolve': (ctx) => {
67
// 2a. Sort based on priority
@@ -17,18 +18,20 @@ export default defineHeadPlugin({
1718

1819
const key = (tag.tagPriority as string).substring(prefix.length)
1920

20-
const position = ctx.tags.find(tag => tag._d === key)?._p
21-
22-
if (position !== undefined) {
23-
tag._p = position + offset
21+
const linkedTag = ctx.tags.find(tag => tag._d === key)
22+
if (linkedTag) {
23+
if (typeof linkedTag?.tagPriority === 'number') {
24+
tag.tagPriority = linkedTag.tagPriority
25+
}
26+
tag._p = linkedTag._p! + offset
2427
break
2528
}
2629
}
2730
}
2831

2932
ctx.tags.sort((a, b) => {
30-
const aWeight = tagWeight(a)
31-
const bWeight = tagWeight(b)
33+
const aWeight = tagWeight(head, a)
34+
const bWeight = tagWeight(head, b)
3235

3336
// 2c. sort based on critical tags
3437
if (aWeight < bWeight) {
@@ -43,4 +46,4 @@ export default defineHeadPlugin({
4346
})
4447
},
4548
},
46-
})
49+
})))

‎packages/vue/export-size-report.json

-7
Original file line numberDiff line numberDiff line change
@@ -112,13 +112,6 @@
112112
"minzipped": 356,
113113
"bundled": 1618
114114
},
115-
{
116-
"name": "CapoPlugin",
117-
"path": "dist/index.mjs",
118-
"minified": 179,
119-
"minzipped": 132,
120-
"bundled": 460
121-
},
122115
{
123116
"name": "createHeadCore",
124117
"path": "dist/index.mjs",

‎packages/vue/src/index.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CapoPlugin, createHeadCore, unheadCtx } from 'unhead'
1+
import { createHeadCore, unheadCtx } from 'unhead'
22
import { createHead, createServerHead } from './createHead'
33
import { resolveUnrefHeadInput } from './utils'
44

@@ -10,11 +10,6 @@ export {
1010
unheadCtx,
1111
}
1212

13-
// extra plugins
14-
export {
15-
CapoPlugin,
16-
}
17-
1813
// utils
1914
export {
2015
resolveUnrefHeadInput,

‎packages/vue/test/e2e/basic.test.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -90,13 +90,13 @@ describe('vue e2e', () => {
9090
"headTags": "<meta charset="utf-8">
9191
<title>Home</title>
9292
<script src="https://analytics.example.com/script.js" defer async></script>
93+
<script src="https://my-app.com/home.js"></script>
9394
<meta property="og:title" content="My amazing site">
9495
<meta property="og:description" content="This is my amazing site">
9596
<meta property="og:locale" content="en_US">
9697
<meta property="og:locale" content="en_AU">
9798
<meta property="og:image" content="https://cdn.example.com/image.jpg">
9899
<meta property="og:image" content="https://cdn.example.com/image2.jpg">
99-
<script src="https://my-app.com/home.js"></script>
100100
<meta name="description" content="This is the home page">
101101
<script id="unhead:payload" type="application/json">{"title":"My amazing site"}</script>",
102102
"htmlAttrs": " lang="en"",
@@ -131,13 +131,13 @@ describe('vue e2e', () => {
131131
<meta charset="utf-8">
132132
<title>Home</title>
133133
<script src="https://analytics.example.com/script.js" defer="" async=""></script>
134+
<script src="https://my-app.com/home.js"></script>
134135
<meta property="og:title" content="Home">
135136
<meta property="og:description" content="This is my amazing site">
136137
<meta property="og:locale" content="en_US">
137138
<meta property="og:locale" content="en_AU">
138139
<meta property="og:image" content="https://cdn.example.com/image.jpg">
139140
<meta property="og:image" content="https://cdn.example.com/image2.jpg">
140-
<script src="https://my-app.com/home.js"></script>
141141
<meta name="description" content="This is the home page">
142142
<script id="unhead:payload" type="application/json">{"title":"My amazing site"}</script>
143143
</head>

‎packages/vue/test/ssr/examples.test.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,13 @@ describe('vue ssr examples', () => {
6464
})
6565
})
6666

67-
expect(headResult.headTags).toMatchInlineSnapshot(
68-
`
67+
expect(headResult.headTags).toMatchInlineSnapshot(`
6968
"<title>hello</title>
69+
<script src="foo.js"></script>
7070
<meta property="og:locale:alternate" content="fr">
7171
<meta property="og:locale:alternate" content="zh">
72-
<script src="foo.js"></script>
7372
<meta name="description" content="desc 2">"
74-
`,
75-
)
73+
`)
7674
expect(headResult.htmlAttrs).toEqual(' lang="zh"')
7775
})
7876

‎packages/vue/test/ssr/optionsApi.test.ts

+4-6
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,13 @@ describe('vue ssr options api', () => {
2424
],
2525
})
2626

27-
expect(headResult.headTags).toMatchInlineSnapshot(
28-
`
27+
expect(headResult.headTags).toMatchInlineSnapshot(`
2928
"<title>hello</title>
29+
<script src="foo.js"></script>
3030
<meta name="description" content="desc">
3131
<meta property="og:locale:alternate" content="fr">
32-
<meta property="og:locale:alternate" content="zh">
33-
<script src="foo.js"></script>"
34-
`,
35-
)
32+
<meta property="og:locale:alternate" content="zh">"
33+
`)
3634
expect(headResult.htmlAttrs).toEqual(' lang="zh"')
3735
})
3836
})

‎test/bench/ssr-harlanzw-com-e2e.bench.ts

+2-6
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,15 @@ import type { Head } from '@unhead/schema'
22
import { InferSeoMetaPlugin } from '@unhead/addons'
33
import { definePerson, defineWebPage, defineWebSite, UnheadSchemaOrg, useSchemaOrg } from '@unhead/schema-org'
44
import { renderSSRHead } from '@unhead/ssr'
5-
import { CapoPlugin, createServerHead, useHead, useSeoMeta, useServerHead } from 'unhead'
5+
import { createServerHead, useHead, useSeoMeta, useServerHead } from 'unhead'
66
import { bench, describe } from 'vitest'
77

88
describe('ssr e2e bench', () => {
99
bench('e2e', async () => {
1010
// we're going to replicate the logic needed to render the tags for a harlanzw.com page
1111

1212
// 1. Add nuxt.config meta tags
13-
const head = createServerHead({
14-
plugins: [
15-
CapoPlugin({ track: false }),
16-
],
17-
})
13+
const head = createServerHead()
1814
// nuxt.config app.head
1915
head.push({
2016
title: 'Harlan Wilton',

‎test/unhead/e2e/e2e.test.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,11 @@ describe('unhead e2e', () => {
8080
"headTags": "<meta charset="utf-8">
8181
<title>Home</title>
8282
<script src="https://analytics.example.com/script.js" defer async></script>
83+
<script src="https://my-app.com/home.js"></script>
8384
<meta property="og:title" content="My amazing site">
8485
<meta property="og:description" content="This is my amazing site">
8586
<meta property="og:image" content="https://cdn.example.com/image.jpg">
8687
<meta property="og:image" content="https://cdn.example.com/image2.jpg">
87-
<script src="https://my-app.com/home.js"></script>
8888
<script type="application/json">{"val":"\\u003C/script>"}</script>
8989
<meta name="description" content="This is the home page">
9090
<script id="unhead:payload" type="application/json">{"title":"My amazing site"}</script>",
@@ -125,11 +125,11 @@ describe('unhead e2e', () => {
125125
<meta charset="utf-8">
126126
<title>Home</title>
127127
<script src="https://analytics.example.com/script.js" defer="" async=""></script>
128+
<script src="https://my-app.com/home.js"></script>
128129
<meta property="og:title" content="Home">
129130
<meta property="og:description" content="This is my amazing site">
130131
<meta property="og:image" content="https://cdn.example.com/image.jpg">
131132
<meta property="og:image" content="https://cdn.example.com/image2.jpg">
132-
<script src="https://my-app.com/home.js"></script>
133133
<script type="application/json">{"val":"\\u003C/script>"}</script>
134134
<meta name="description" content="This is the home page">
135135
<script id="unhead:payload" type="application/json">{"title":"My amazing site"}</script>

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

+25-33
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,97 @@
1-
import { CapoPlugin } from 'unhead'
21
import { describe, it } from 'vitest'
32
import { createHeadWithContext } from '../../util'
43

54
describe('capo', () => {
65
it('basic', async () => {
7-
const head = createHeadWithContext({
8-
plugins: [
9-
CapoPlugin({
10-
track: true,
11-
}),
12-
],
13-
})
14-
// add each type of capo tag in a random order
6+
const head = createHeadWithContext()
157
head.push({
16-
script: {
8+
script: [{
179
defer: true,
1810
src: 'defer-script.js',
19-
},
11+
}],
2012
})
2113
head.push({
22-
script: {
14+
script: [{
2315
src: 'sync-script.js',
24-
},
16+
}],
2517
})
2618
head.push({
2719
style: [
2820
'.sync-style { color: red }',
2921
],
3022
})
3123
head.push({
32-
link: {
24+
link: [{
3325
rel: 'modulepreload',
3426
href: 'modulepreload.js',
35-
},
27+
}],
3628
})
3729
head.push({
38-
script: {
30+
script: [{
3931
src: 'async-script.js',
4032
async: true,
41-
},
33+
}],
4234
})
4335
head.push({
44-
link: {
36+
link: [{
4537
rel: 'preload',
4638
href: 'preload.js',
47-
},
39+
}],
4840
})
4941
head.push({
5042
style: [
5143
'@import "imported.css"',
5244
],
5345
})
5446
head.push({
55-
link: {
47+
link: [{
5648
rel: 'stylesheet',
5749
href: 'sync-styles.css',
58-
},
50+
}],
5951
})
6052
head.push({
6153
title: 'title',
6254
})
6355
// preconnect
6456
head.push({
65-
link: {
57+
link: [{
6658
rel: 'preconnect',
6759
href: 'https://example.com',
68-
},
60+
}],
6961
})
7062
// dns-prefetch
7163
head.push({
72-
link: {
64+
link: [{
7365
rel: 'dns-prefetch',
7466
href: 'https://example.com',
75-
},
67+
}],
7668
})
7769
// prefetch
7870
head.push({
79-
link: {
71+
link: [{
8072
rel: 'prefetch',
8173
href: 'https://example.com',
82-
},
74+
}],
8375
})
8476
// prerender
8577
head.push({
86-
link: {
78+
link: [{
8779
rel: 'prerender',
8880
href: 'https://example.com',
89-
},
81+
}],
9082
})
9183
// meta
9284
head.push({
93-
meta: {
85+
meta: [{
9486
name: 'description',
9587
content: 'description',
96-
},
88+
}],
9789
})
9890
head.push({
99-
meta: {
91+
meta: [{
10092
name: 'viewport',
10193
content: 'width=device-width, initial-scale=1.0',
102-
},
94+
}],
10395
})
10496

10597
const resolvedTags = await head.resolveTags()

‎test/unhead/resolveTags.test.ts

+9-59
Original file line numberDiff line numberDiff line change
@@ -57,25 +57,6 @@ describe('resolveTags', () => {
5757
},
5858
"tag": "meta",
5959
},
60-
{
61-
"_d": "htmlAttrs",
62-
"_e": 0,
63-
"_p": 0,
64-
"props": {
65-
"dir": "ltr",
66-
"lang": "en",
67-
},
68-
"tag": "htmlAttrs",
69-
},
70-
{
71-
"_d": "bodyAttrs",
72-
"_e": 0,
73-
"_p": 1,
74-
"props": {
75-
"class": "dark",
76-
},
77-
"tag": "bodyAttrs",
78-
},
7960
{
8061
"_e": 0,
8162
"_p": 2,
@@ -84,29 +65,6 @@ describe('resolveTags', () => {
8465
},
8566
"tag": "script",
8667
},
87-
{
88-
"_e": 0,
89-
"_p": 4,
90-
"props": {
91-
"href": "https://cdn.example.com/favicon.ico",
92-
"rel": "icon",
93-
"type": "image/x-icon",
94-
},
95-
"tag": "link",
96-
},
97-
]
98-
`)
99-
expect(tags).toMatchInlineSnapshot(`
100-
[
101-
{
102-
"_d": "charset",
103-
"_e": 0,
104-
"_p": 3,
105-
"props": {
106-
"charset": "utf-8",
107-
},
108-
"tag": "meta",
109-
},
11068
{
11169
"_d": "htmlAttrs",
11270
"_e": 0,
@@ -126,14 +84,6 @@ describe('resolveTags', () => {
12684
},
12785
"tag": "bodyAttrs",
12886
},
129-
{
130-
"_e": 0,
131-
"_p": 2,
132-
"props": {
133-
"src": "https://cdn.example.com/script.js",
134-
},
135-
"tag": "script",
136-
},
13787
{
13888
"_e": 0,
13989
"_p": 4,
@@ -145,7 +95,7 @@ describe('resolveTags', () => {
14595
"tag": "link",
14696
},
14797
]
148-
`, 'old')
98+
`)
14999
})
150100

151101
it('basic /w removal', async () => {
@@ -206,6 +156,14 @@ describe('resolveTags', () => {
206156
},
207157
"tag": "meta",
208158
},
159+
{
160+
"_e": 0,
161+
"_p": 2,
162+
"props": {
163+
"src": "https://cdn.example.com/script2.js",
164+
},
165+
"tag": "script",
166+
},
209167
{
210168
"_d": "htmlAttrs",
211169
"_e": 0,
@@ -225,14 +183,6 @@ describe('resolveTags', () => {
225183
},
226184
"tag": "bodyAttrs",
227185
},
228-
{
229-
"_e": 0,
230-
"_p": 2,
231-
"props": {
232-
"src": "https://cdn.example.com/script2.js",
233-
},
234-
"tag": "script",
235-
},
236186
{
237187
"_e": 0,
238188
"_p": 4,

0 commit comments

Comments
 (0)
Please sign in to comment.