feat(core)!: default capo sorting (#440)

* feat!: default capo sorting

* chore: fixing tests

* chore: fixing tests

* chore: simplify

Author: harlan-zw

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

@@ -3,13 +3,15 @@ title: Tag Sorting
 description: How tags are sorted and how to configure them.
 ---
 
-Once tags are [deduped](/usage/guides/handling-duplicates), they will be sorted. 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.
+## Introduction
 
-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
-when the tags are nested.
+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.
 
-## Sorting Logic
+## Tag Sorting Logic
+
+Sorting is first done using the [Capo.js](https://rviscomi.github.io/capo.js/) weights, making sure tags are rendered in
+a specific way to avoid [Critical Request Chains](https://web.dev/critical-request-chains/) issues as well
+as rendering bugs.
 
 Sorting is done in multiple steps:
 - order critical tags first

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

@@ -81,6 +81,12 @@ export interface CreateHeadOptions {
   document?: Document
   plugins?: HeadPluginInput[]
   hooks?: NestedHooks<HeadHooks>
+  /**
+   * Disable the Capo.js tag sorting algorithm.
+   *
+   * This is added to make the v1 -> v2 migration easier allowing users to opt-out of the new sorting algorithm.
+   */
+  disableCapoSorting?: boolean
 }
 
 export interface HeadEntryOptions extends TagPosition, TagPriority, ProcessesTemplateParams, ResolvesDuplicates {

packages/schema/src/head.ts

@@ -1,4 +1,4 @@
-import type { HeadTag } from '@unhead/schema'
+import type { HeadTag, Unhead } from '@unhead/schema'
 
 export const TAG_WEIGHTS = {
   // tags
@@ -13,10 +13,18 @@ export const TAG_ALIASES = {
   low: 20,
 } as const
 
-export function tagWeight<T extends HeadTag>(tag: T) {
+export const SortModifiers = [{ prefix: 'before:', offset: -1 }, { prefix: 'after:', offset: 1 }]
+
+const importRe = /@import/
+const isTruthy = (val?: string | boolean) => val === '' || val === true
+
+export function tagWeight<T extends HeadTag>(head: Unhead<any>, tag: T) {
   const priority = tag.tagPriority
   if (typeof priority === 'number')
     return priority
+  const isScript = tag.tag === 'script'
+  const isLink = tag.tag === 'link'
+  const isStyle = tag.tag === 'style'
   let weight = 100
   if (tag.tag === 'meta') {
     // CSP needs to be as it effects the loading of assets
@@ -28,7 +36,7 @@ export function tagWeight<T extends HeadTag>(tag: T) {
     else if (tag.props.name === 'viewport')
       weight = -15
   }
-  else if (tag.tag === 'link' && tag.props.rel === 'preconnect') {
+  else if (isLink && tag.props.rel === 'preconnect') {
     // preconnects should almost always come first
     weight = 20
   }
@@ -39,6 +47,38 @@ export function tagWeight<T extends HeadTag>(tag: T) {
     // @ts-expect-e+rror untyped
     return weight + TAG_ALIASES[priority as keyof typeof TAG_ALIASES]
   }
+  if (tag.tagPosition && tag.tagPosition !== 'head') {
+    return weight
+  }
+  if (!head.ssr || head.resolvedOptions.disableCapoSorting) {
+    return weight
+  }
+  if (isScript && isTruthy(tag.props.async)) {
+    // ASYNC_SCRIPT
+    weight = 30
+    // SYNC_SCRIPT
+  }
+  else if (isStyle && tag.innerHTML && importRe.test(tag.innerHTML)) {
+    // IMPORTED_STYLES
+    weight = 40
+  }
+  else if (isScript && tag.props.src && !isTruthy(tag.props.defer) && !isTruthy(tag.props.async) && tag.props.type !== 'module' && !tag.props.type?.endsWith('json')) {
+    weight = 50
+  }
+  else if ((isLink && tag.props.rel === 'stylesheet') || tag.tag === 'style') {
+    // SYNC_STYLES
+    weight = 60
+  }
+  else if (isLink && (tag.props.rel === 'preload' || tag.props.rel === 'modulepreload')) {
+    // PRELOAD
+    weight = 70
+  }
+  else if (isScript && isTruthy(tag.props.defer) && tag.props.src && !isTruthy(tag.props.async)) {
+    // DEFER_SCRIPT
+    weight = 80
+  }
+  else if (isLink && (tag.props.rel === 'prefetch' || tag.props.rel === 'dns-prefetch' || tag.props.rel === 'prerender')) {
+    weight = 90
+  }
   return weight
 }
-export const SortModifiers = [{ prefix: 'before:', offset: -1 }, { prefix: 'after:', offset: 1 }]

packages/shared/src/sort.ts

@@ -41,13 +41,6 @@
       "minzipped": 2151,
       "bundled": 11435
     },
-    {
-      "name": "CapoPlugin",
-      "path": "dist/index.mjs",
-      "minified": 5113,
-      "minzipped": 1891,
-      "bundled": 10303
-    },
     {
       "name": "useServerSeoMeta",
       "path": "dist/index.mjs",

packages/unhead/export-size-report.json

@@ -19,4 +19,3 @@ export * from './composables/useServerHead'
 export * from './composables/useServerHeadSafe'
 export * from './composables/useServerSeoMeta'
 export * from './context'
-export * from './optionalPlugins/capoPlugin'

packages/unhead/src/index.ts

@@ -3,7 +3,7 @@ import { defineHeadPlugin, HasElementTags, hashTag, tagDedupeKey, tagWeight } fr
 
 const UsesMergeStrategy = new Set(['templateParams', 'htmlAttrs', 'bodyAttrs'])
 
-export default defineHeadPlugin({
+export default defineHeadPlugin(head => ({
   hooks: {
     'tag:normalise': ({ tag }) => {
       // support for third-party dedupe keys
@@ -74,7 +74,7 @@ export default defineHeadPlugin({
             dupedTag._duped.push(tag)
             continue
           }
-          else if (tagWeight(tag) > tagWeight(dupedTag)) {
+          else if ((!tag.key || !dupedTag.key) && tagWeight(head, tag) > tagWeight(head, dupedTag)) {
             // check tag weights
             continue
           }
@@ -110,4 +110,4 @@ export default defineHeadPlugin({
         .filter(t => !(t.tag === 'meta' && (t.props.name || t.props.property) && !t.props.content))
     },
   },
-})
+}))

packages/unhead/src/optionalPlugins/capoPlugin.ts

@@ -1,6 +1,7 @@
 import { defineHeadPlugin, SortModifiers, tagWeight } from '@unhead/shared'
 
-export default defineHeadPlugin({
+
+export default defineHeadPlugin((head => ({
   hooks: {
     'tags:resolve': (ctx) => {
       // 2a. Sort based on priority
@@ -17,18 +18,20 @@ export default defineHeadPlugin({
 
           const key = (tag.tagPriority as string).substring(prefix.length)
 
-          const position = ctx.tags.find(tag => tag._d === key)?._p
-
-          if (position !== undefined) {
-            tag._p = position + offset
+          const linkedTag = ctx.tags.find(tag => tag._d === key)
+          if (linkedTag) {
+            if (typeof linkedTag?.tagPriority === 'number') {
+              tag.tagPriority = linkedTag.tagPriority
+            }
+            tag._p = linkedTag._p! + offset
             break
           }
         }
       }
 
       ctx.tags.sort((a, b) => {
-        const aWeight = tagWeight(a)
-        const bWeight = tagWeight(b)
+        const aWeight = tagWeight(head, a)
+        const bWeight = tagWeight(head, b)
 
         // 2c. sort based on critical tags
         if (aWeight < bWeight) {
@@ -43,4 +46,4 @@ export default defineHeadPlugin({
       })
     },
   },
-})
+})))

packages/unhead/src/plugins/dedupe.ts

@@ -112,13 +112,6 @@
       "minzipped": 356,
       "bundled": 1618
     },
-    {
-      "name": "CapoPlugin",
-      "path": "dist/index.mjs",
-      "minified": 179,
-      "minzipped": 132,
-      "bundled": 460
-    },
     {
       "name": "createHeadCore",
       "path": "dist/index.mjs",