From bff0671afecf39ef7e66ed58d329e4af73756309 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 14 Sep 2022 23:29:51 +0100
Subject: [PATCH 1/7] feat(nuxt): parse html to treeshake client-only
 components

---
 packages/nuxt/package.json                 |  1 +
 packages/nuxt/src/components/tree-shake.ts | 42 +++++++++++++++-------
 yarn.lock                                  | 17 +++++++++
 3 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index 062dd960976..c58b5502c57 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -62,6 +62,7 @@
     "nuxi": "3.0.0-rc.10",
     "ohash": "^0.1.5",
     "ohmyfetch": "^0.4.18",
+    "parse5": "^7.1.1",
     "pathe": "^0.3.7",
     "perfect-debounce": "^0.1.3",
     "scule": "^0.3.2",
diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 1cb14dde5c4..097127b0834 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -1,6 +1,8 @@
 import { pathToFileURL } from 'node:url'
 import { parseURL } from 'ufo'
 import MagicString from 'magic-string'
+import { parseFragment } from 'parse5'
+import type { DocumentFragment, ChildNode } from 'parse5/dist/tree-adapters/default'
 import { createUnplugin } from 'unplugin'
 import type { Component } from '@nuxt/schema'
 
@@ -10,7 +12,6 @@ interface TreeShakeTemplatePluginOptions {
 }
 
 export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplatePluginOptions) => {
-  const regexpMap = new WeakMap<Component[], RegExp>()
   return {
     name: 'nuxt:tree-shake-template',
     enforce: 'pre',
@@ -19,23 +20,28 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
       return pathname.endsWith('.vue')
     },
     transform (code, id) {
-      const components = options.getComponents()
+      const template = code.match(/<template>([\s\S]*)<\/template>/)
+      if (!template) { return }
 
-      if (!regexpMap.has(components)) {
-        const clientOnlyComponents = components
-          .filter(c => c.mode === 'client' && !components.some(other => other.mode !== 'client' && other.pascalName === c.pascalName))
-          .map(c => `${c.pascalName}|${c.kebabName}`)
-          .concat('ClientOnly|client-only')
-          .map(component => `<(${component})[^>]*>[\\s\\S]*?<\\/(${component})>`)
+      const components = options.getComponents()
 
-        regexpMap.set(components, new RegExp(`(${clientOnlyComponents.join('|')})`, 'g'))
-      }
+      const clientOnlyComponents = components
+        .filter(c => c.mode === 'client' && !components.some(other => other.mode !== 'client' && other.pascalName === c.pascalName))
+        .flatMap(c => [c.pascalName.toLowerCase(), c.kebabName])
+        .concat(['clientonly', 'client-only'])
 
-      const COMPONENTS_RE = regexpMap.get(components)!
       const s = new MagicString(code)
 
-      // Do not render client-only slots on SSR, but preserve attributes
-      s.replace(COMPONENTS_RE, r => r.replace(/<([^>]*[^/])\/?>[\s\S]*$/, '<$1 />'))
+      const ast = parseFragment(code, { sourceCodeLocationInfo: true })
+      walkFragment(ast, (node) => {
+        if (node && 'tagName' in node && clientOnlyComponents.includes(node.tagName)) {
+          const fallback = node.childNodes?.find(n => n.nodeName === 'template' && n.attrs?.find(a => a.name.includes('fallback')))
+          const text = fallback ? code.slice(fallback.sourceCodeLocation!.startOffset, fallback.sourceCodeLocation!.endOffset) : ''
+          // Replace node content
+          s.overwrite(node.childNodes[0].sourceCodeLocation!.startOffset, node.childNodes[node.childNodes.length - 1].sourceCodeLocation!.endOffset, text)
+          return false
+        }
+      })
 
       if (s.hasChanged()) {
         return {
@@ -48,3 +54,13 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
     }
   }
 })
+
+function walkFragment (node: ChildNode | DocumentFragment, callback: (node?: ChildNode | DocumentFragment) => false | void) {
+  if (callback(node) === false || !('childNodes' in node)) {
+    return false
+  }
+
+  for (const child of [...node.childNodes || [], ...'content' in node ? node.content.childNodes : []]) {
+    walkFragment(child, callback)
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index b9decfcf222..1913761e15f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5728,6 +5728,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "entities@npm:4.4.0"
+  checksum: 84d250329f4b56b40fa93ed067b194db21e8815e4eb9b59f43a086f0ecd342814f6bc483de8a77da5d64e0f626033192b1b4f1792232a7ea6b970ebe0f3187c2
+  languageName: node
+  linkType: hard
+
 "entities@npm:~3.0.1":
   version: 3.0.1
   resolution: "entities@npm:3.0.1"
@@ -10522,6 +10529,7 @@ __metadata:
     nuxi: 3.0.0-rc.10
     ohash: ^0.1.5
     ohmyfetch: ^0.4.18
+    parse5: ^7.1.1
     pathe: ^0.3.7
     perfect-debounce: ^0.1.3
     scule: ^0.3.2
@@ -11028,6 +11036,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse5@npm:^7.1.1":
+  version: 7.1.1
+  resolution: "parse5@npm:7.1.1"
+  dependencies:
+    entities: ^4.4.0
+  checksum: 8f72fbfa6df83a3f29f58e1818f7bd46b47ff3e26d79c74e10b8fc7ef7ee76163f205113f1b2f6a5b8dc4e31e726f490444f04890cead6e974dbcbe8172b1321
+  languageName: node
+  linkType: hard
+
 "parseurl@npm:~1.3.3":
   version: 1.3.3
   resolution: "parseurl@npm:1.3.3"

From 8d593f7b31bca7dcb14ea568e1df742d2b4ba719 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 14 Sep 2022 23:33:04 +0100
Subject: [PATCH 2/7] fix: preserve placeholder slots too

---
 packages/nuxt/src/components/tree-shake.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 097127b0834..55d07c1282d 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -8,7 +8,7 @@ import type { Component } from '@nuxt/schema'
 
 interface TreeShakeTemplatePluginOptions {
   sourcemap?: boolean
-  getComponents(): Component[]
+  getComponents (): Component[]
 }
 
 export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplatePluginOptions) => {
@@ -35,7 +35,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
       const ast = parseFragment(code, { sourceCodeLocationInfo: true })
       walkFragment(ast, (node) => {
         if (node && 'tagName' in node && clientOnlyComponents.includes(node.tagName)) {
-          const fallback = node.childNodes?.find(n => n.nodeName === 'template' && n.attrs?.find(a => a.name.includes('fallback')))
+          const fallback = node.childNodes?.find(n => n.nodeName === 'template' && n.attrs?.find(a => a.name.includes('fallback') || a.name.includes('placeholder')))
           const text = fallback ? code.slice(fallback.sourceCodeLocation!.startOffset, fallback.sourceCodeLocation!.endOffset) : ''
           // Replace node content
           s.overwrite(node.childNodes[0].sourceCodeLocation!.startOffset, node.childNodes[node.childNodes.length - 1].sourceCodeLocation!.endOffset, text)

From 2cea48c36c7e82955785c2616d2bd71a3c118707 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 20 Sep 2022 09:36:34 +0100
Subject: [PATCH 3/7] perf: early return if there are no client-only components
 in template

---
 packages/nuxt/src/components/tree-shake.ts | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 55d07c1282d..17c15624192 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -12,6 +12,7 @@ interface TreeShakeTemplatePluginOptions {
 }
 
 export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplatePluginOptions) => {
+  const regexpMap = new WeakMap<Component[], [RegExp, string[]]>()
   return {
     name: 'nuxt:tree-shake-template',
     enforce: 'pre',
@@ -25,10 +26,19 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
 
       const components = options.getComponents()
 
-      const clientOnlyComponents = components
-        .filter(c => c.mode === 'client' && !components.some(other => other.mode !== 'client' && other.pascalName === c.pascalName))
-        .flatMap(c => [c.pascalName.toLowerCase(), c.kebabName])
-        .concat(['clientonly', 'client-only'])
+      if (!regexpMap.has(components)) {
+        const clientOnlyComponents = components
+          .filter(c => c.mode === 'client' && !components.some(other => other.mode !== 'client' && other.pascalName === c.pascalName))
+          .flatMap(c => [c.pascalName.toLowerCase(), c.kebabName])
+          .concat(['clientonly', 'client-only'])
+        const tags = clientOnlyComponents
+          .map(component => `<(${component})[^>]*>[\\s\\S]*?<\\/(${component})>`)
+
+        regexpMap.set(components, [new RegExp(`(${tags.join('|')})`, 'gi'), clientOnlyComponents])
+      }
+
+      const [COMPONENTS_RE, clientOnlyComponents] = regexpMap.get(components)!
+      if (!COMPONENTS_RE.test(code)) { return }
 
       const s = new MagicString(code)
 

From 810d005cafc875dae689d91fac8d21cbf5e7d976 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 25 Sep 2022 13:46:50 +0100
Subject: [PATCH 4/7] refactor: switch to `ultrahtml`

---
 packages/nuxt/package.json                 |  2 +-
 packages/nuxt/src/components/tree-shake.ts | 47 +++++++++++-----------
 yarn.lock                                  | 25 ++++--------
 3 files changed, 32 insertions(+), 42 deletions(-)

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index 531689a47d0..1246ede9874 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -62,12 +62,12 @@
     "nuxi": "3.0.0-rc.11",
     "ohash": "^0.1.5",
     "ohmyfetch": "^0.4.19",
-    "parse5": "^7.1.1",
     "pathe": "^0.3.8",
     "perfect-debounce": "^0.1.3",
     "scule": "^0.3.2",
     "strip-literal": "^0.4.2",
     "ufo": "^0.8.5",
+    "ultrahtml": "^0.1.1",
     "unctx": "^2.0.2",
     "unenv": "^0.6.2",
     "unimport": "^0.6.7",
diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 17c15624192..160350f2128 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -1,8 +1,7 @@
 import { pathToFileURL } from 'node:url'
 import { parseURL } from 'ufo'
 import MagicString from 'magic-string'
-import { parseFragment } from 'parse5'
-import type { DocumentFragment, ChildNode } from 'parse5/dist/tree-adapters/default'
+import { parse, walk, ELEMENT_NODE, Node } from 'ultrahtml'
 import { createUnplugin } from 'unplugin'
 import type { Component } from '@nuxt/schema'
 
@@ -20,7 +19,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
       const { pathname } = parseURL(decodeURIComponent(pathToFileURL(id).href))
       return pathname.endsWith('.vue')
     },
-    transform (code, id) {
+    async transform (code, id) {
       const template = code.match(/<template>([\s\S]*)<\/template>/)
       if (!template) { return }
 
@@ -29,12 +28,12 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
       if (!regexpMap.has(components)) {
         const clientOnlyComponents = components
           .filter(c => c.mode === 'client' && !components.some(other => other.mode !== 'client' && other.pascalName === c.pascalName))
-          .flatMap(c => [c.pascalName.toLowerCase(), c.kebabName])
-          .concat(['clientonly', 'client-only'])
+          .flatMap(c => [c.pascalName, c.kebabName])
+          .concat(['ClientOnly', 'client-only'])
         const tags = clientOnlyComponents
           .map(component => `<(${component})[^>]*>[\\s\\S]*?<\\/(${component})>`)
 
-        regexpMap.set(components, [new RegExp(`(${tags.join('|')})`, 'gi'), clientOnlyComponents])
+        regexpMap.set(components, [new RegExp(`(${tags.join('|')})`, 'g'), clientOnlyComponents])
       }
 
       const [COMPONENTS_RE, clientOnlyComponents] = regexpMap.get(components)!
@@ -42,14 +41,24 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
 
       const s = new MagicString(code)
 
-      const ast = parseFragment(code, { sourceCodeLocationInfo: true })
-      walkFragment(ast, (node) => {
-        if (node && 'tagName' in node && clientOnlyComponents.includes(node.tagName)) {
-          const fallback = node.childNodes?.find(n => n.nodeName === 'template' && n.attrs?.find(a => a.name.includes('fallback') || a.name.includes('placeholder')))
-          const text = fallback ? code.slice(fallback.sourceCodeLocation!.startOffset, fallback.sourceCodeLocation!.endOffset) : ''
-          // Replace node content
-          s.overwrite(node.childNodes[0].sourceCodeLocation!.startOffset, node.childNodes[node.childNodes.length - 1].sourceCodeLocation!.endOffset, text)
-          return false
+      const ast = parse(template[0])
+      await walk(ast, (node) => {
+        if (node.type === ELEMENT_NODE && clientOnlyComponents.includes(node.name)) {
+          if (!node.children?.length) { return }
+
+          const fallback = node.children.find(
+            (n: Node) => n.name === 'template' &&
+              Object.entries(n.attributes as Record<string, string>)?.flat()
+                .some(attr => attr.includes('fallback') || attr.includes('placeholder'))
+          )
+          try {
+            // Replace node content
+            const text = fallback ? code.slice(fallback.loc[0].start, fallback.loc[fallback.loc.length - 1].end) : ''
+            s.overwrite(template.index + node.loc[0].end, template.index + node.loc[node.loc.length - 1].start, text)
+          } catch (err) {
+            // This may fail if we have a nested client-only component and are trying
+            // to replace some text that has already been replaced
+          }
         }
       })
 
@@ -64,13 +73,3 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
     }
   }
 })
-
-function walkFragment (node: ChildNode | DocumentFragment, callback: (node?: ChildNode | DocumentFragment) => false | void) {
-  if (callback(node) === false || !('childNodes' in node)) {
-    return false
-  }
-
-  for (const child of [...node.childNodes || [], ...'content' in node ? node.content.childNodes : []]) {
-    walkFragment(child, callback)
-  }
-}
diff --git a/yarn.lock b/yarn.lock
index 04a6483bd41..0935191fda1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5741,13 +5741,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:^4.4.0":
-  version: 4.4.0
-  resolution: "entities@npm:4.4.0"
-  checksum: 84d250329f4b56b40fa93ed067b194db21e8815e4eb9b59f43a086f0ecd342814f6bc483de8a77da5d64e0f626033192b1b4f1792232a7ea6b970ebe0f3187c2
-  languageName: node
-  linkType: hard
-
 "entities@npm:~3.0.1":
   version: 3.0.1
   resolution: "entities@npm:3.0.1"
@@ -10562,12 +10555,12 @@ __metadata:
     nuxi: 3.0.0-rc.11
     ohash: ^0.1.5
     ohmyfetch: ^0.4.19
-    parse5: ^7.1.1
     pathe: ^0.3.8
     perfect-debounce: ^0.1.3
     scule: ^0.3.2
     strip-literal: ^0.4.2
     ufo: ^0.8.5
+    ultrahtml: ^0.1.1
     unbuild: latest
     unctx: ^2.0.2
     unenv: ^0.6.2
@@ -11048,15 +11041,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse5@npm:^7.1.1":
-  version: 7.1.1
-  resolution: "parse5@npm:7.1.1"
-  dependencies:
-    entities: ^4.4.0
-  checksum: 8f72fbfa6df83a3f29f58e1818f7bd46b47ff3e26d79c74e10b8fc7ef7ee76163f205113f1b2f6a5b8dc4e31e726f490444f04890cead6e974dbcbe8172b1321
-  languageName: node
-  linkType: hard
-
 "parseurl@npm:~1.3.3":
   version: 1.3.3
   resolution: "parseurl@npm:1.3.3"
@@ -13553,6 +13537,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ultrahtml@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "ultrahtml@npm:0.1.1"
+  checksum: a074b6d41e942b0ae3a4ea7372043bee32f5bad08009278adff04a96d784b316e68085d5f44b52c5c03ac0bf1d2a142090e58e555f953d9c69eb9639fd2f70d5
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"

From 103e09d79473ef9ab00f910c4071fd0d355ca22a Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 25 Sep 2022 13:52:08 +0100
Subject: [PATCH 5/7] perf: simplify placeholder slot test

---
 packages/nuxt/src/components/tree-shake.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 160350f2128..eef181118a0 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -10,6 +10,8 @@ interface TreeShakeTemplatePluginOptions {
   getComponents (): Component[]
 }
 
+const PLACEHOLDER_RE = /^(v-slot|#)(fallback|placeholder)/
+
 export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplatePluginOptions) => {
   const regexpMap = new WeakMap<Component[], [RegExp, string[]]>()
   return {
@@ -48,8 +50,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
 
           const fallback = node.children.find(
             (n: Node) => n.name === 'template' &&
-              Object.entries(n.attributes as Record<string, string>)?.flat()
-                .some(attr => attr.includes('fallback') || attr.includes('placeholder'))
+              Object.entries(n.attributes as Record<string, string>)?.flat().some(attr => PLACEHOLDER_RE.test(attr))
           )
           try {
             // Replace node content

From 0af845c13fedf095ba6a269782a34d2ecc91538a Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 25 Sep 2022 14:02:12 +0100
Subject: [PATCH 6/7] refactor: early return

---
 packages/nuxt/src/components/tree-shake.ts | 29 +++++++++++-----------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index eef181118a0..875b681a232 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -45,21 +45,22 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
 
       const ast = parse(template[0])
       await walk(ast, (node) => {
-        if (node.type === ELEMENT_NODE && clientOnlyComponents.includes(node.name)) {
-          if (!node.children?.length) { return }
+        if (node.type !== ELEMENT_NODE || !clientOnlyComponents.includes(node.name) || !node.children?.length) {
+          return
+        }
+
+        const fallback = node.children.find(
+          (n: Node) => n.name === 'template' &&
+            Object.entries(n.attributes as Record<string, string>)?.flat().some(attr => PLACEHOLDER_RE.test(attr))
+        )
 
-          const fallback = node.children.find(
-            (n: Node) => n.name === 'template' &&
-              Object.entries(n.attributes as Record<string, string>)?.flat().some(attr => PLACEHOLDER_RE.test(attr))
-          )
-          try {
-            // Replace node content
-            const text = fallback ? code.slice(fallback.loc[0].start, fallback.loc[fallback.loc.length - 1].end) : ''
-            s.overwrite(template.index + node.loc[0].end, template.index + node.loc[node.loc.length - 1].start, text)
-          } catch (err) {
-            // This may fail if we have a nested client-only component and are trying
-            // to replace some text that has already been replaced
-          }
+        try {
+          // Replace node content
+          const text = fallback ? code.slice(fallback.loc[0].start, fallback.loc[fallback.loc.length - 1].end) : ''
+          s.overwrite(template.index + node.loc[0].end, template.index + node.loc[node.loc.length - 1].start, text)
+        } catch (err) {
+          // This may fail if we have a nested client-only component and are trying
+          // to replace some text that has already been replaced
         }
       })
 

From 83bf655840c63bd7a93f1f697244831d843013d7 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 25 Sep 2022 14:03:27 +0100
Subject: [PATCH 7/7] fix: add offset

---
 packages/nuxt/src/components/tree-shake.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 875b681a232..263fb489750 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -56,7 +56,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
 
         try {
           // Replace node content
-          const text = fallback ? code.slice(fallback.loc[0].start, fallback.loc[fallback.loc.length - 1].end) : ''
+          const text = fallback ? code.slice(template.index + fallback.loc[0].start, template.index + fallback.loc[fallback.loc.length - 1].end) : ''
           s.overwrite(template.index + node.loc[0].end, template.index + node.loc[node.loc.length - 1].start, text)
         } catch (err) {
           // This may fail if we have a nested client-only component and are trying