From ec8967b4b83457b75eee9ef14ec28f329579a641 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 15 Nov 2022 23:12:32 +0100
Subject: [PATCH 01/34] fix(nuxt): use parser for treeshake module

---
 packages/nuxt/src/components/module.ts     |  22 ++--
 packages/nuxt/src/components/tree-shake.ts | 129 ++++++++++++++-------
 2 files changed, 98 insertions(+), 53 deletions(-)

diff --git a/packages/nuxt/src/components/module.ts b/packages/nuxt/src/components/module.ts
index 6f4b9419d73..4d4167d76a5 100644
--- a/packages/nuxt/src/components/module.ts
+++ b/packages/nuxt/src/components/module.ts
@@ -188,33 +188,31 @@ export default defineNuxtModule<ComponentsOptions>({
       const mode = isClient ? 'client' : 'server'
 
       config.plugins = config.plugins || []
+      if (nuxt.options.experimental.treeshakeClientOnly && isServer) {
+        config.plugins.push(TreeShakeTemplatePlugin.vite({
+          sourcemap: nuxt.options.sourcemap[mode]
+        }))
+      }
       config.plugins.push(loaderPlugin.vite({
         sourcemap: nuxt.options.sourcemap[mode],
         getComponents,
         mode
       }))
-      if (nuxt.options.experimental.treeshakeClientOnly && isServer) {
-        config.plugins.push(TreeShakeTemplatePlugin.vite({
-          sourcemap: nuxt.options.sourcemap[mode],
-          getComponents
-        }))
-      }
     })
     nuxt.hook('webpack:config', (configs) => {
       configs.forEach((config) => {
         const mode = config.name === 'client' ? 'client' : 'server'
         config.plugins = config.plugins || []
+        if (nuxt.options.experimental.treeshakeClientOnly && mode === 'server') {
+          config.plugins.push(TreeShakeTemplatePlugin.webpack({
+            sourcemap: nuxt.options.sourcemap[mode]
+          }))
+        }
         config.plugins.push(loaderPlugin.webpack({
           sourcemap: nuxt.options.sourcemap[mode],
           getComponents,
           mode
         }))
-        if (nuxt.options.experimental.treeshakeClientOnly && mode === 'server') {
-          config.plugins.push(TreeShakeTemplatePlugin.webpack({
-            sourcemap: nuxt.options.sourcemap[mode],
-            getComponents
-          }))
-        }
       })
     })
   }
diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 8e07ad02e78..deef54b8b93 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -1,66 +1,97 @@
 import { pathToFileURL } from 'node:url'
 import { parseURL } from 'ufo'
 import MagicString from 'magic-string'
-import { parse, walk, ELEMENT_NODE, Node } from 'ultrahtml'
+import { walk } from 'estree-walker'
+import type { CallExpression, Property, Identifier, ImportDeclaration } from 'estree'
 import { createUnplugin } from 'unplugin'
-import type { Component } from '@nuxt/schema'
 
 interface TreeShakeTemplatePluginOptions {
   sourcemap?: boolean
-  getComponents (): Component[]
 }
 
-const PLACEHOLDER_RE = /^(v-slot|#)(fallback|placeholder)/
+type AcornNode<N> = N & { start: number, end: number }
 
 export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplatePluginOptions) => {
-  const regexpMap = new WeakMap<Component[], [RegExp, string[]]>()
   return {
     name: 'nuxt:tree-shake-template',
-    enforce: 'pre',
+    enforce: 'post',
     transformInclude (id) {
       const { pathname } = parseURL(decodeURIComponent(pathToFileURL(id).href))
       return pathname.endsWith('.vue')
     },
-    async transform (code, id) {
-      const template = code.match(/<template>([\s\S]*)<\/template>/)
-      if (!template) { return }
-
-      const components = options.getComponents()
-
-      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, c.kebabName])
-          .concat(['ClientOnly', 'client-only'])
-        const tags = clientOnlyComponents
-          .map(component => `<(${component})[^>]*>[\\s\\S]*?<\\/(${component})>`)
-
-        regexpMap.set(components, [new RegExp(`(${tags.join('|')})`, 'g'), clientOnlyComponents])
-      }
-
-      const [COMPONENTS_RE, clientOnlyComponents] = regexpMap.get(components)!
-      if (!COMPONENTS_RE.test(code)) { return }
+    transform (code, id) {
+      const CLIENTONLY_RE = /[c|C]lient[_|-]?[O|o]nly/
+      const hasClientOnly = CLIENTONLY_RE.test(code)
+      if (!hasClientOnly) { return }
 
       const s = new MagicString(code)
+      const SSR_RENDER_RE = /ssrRender/
+      const parse = this.parse
+      const importDeclarations: AcornNode<ImportDeclaration>[] = []
 
-      const ast = parse(template[0])
-      await walk(ast, (node) => {
-        if (node.type !== ELEMENT_NODE || !clientOnlyComponents.includes(node.name) || !node.children?.length) {
-          return
-        }
+      walk(parse(code, { sourceType: 'module', ecmaVersion: 'latest' }), {
+        enter (_node) {
+          const node = _node as AcornNode<CallExpression | ImportDeclaration>
+          if (node.type === 'ImportDeclaration') {
+            importDeclarations.push(node)
+          } else if (node.type === 'CallExpression' &&
+            node.callee.type === 'Identifier' &&
+            SSR_RENDER_RE.test(node.callee.name)) {
+            const [identifier, _, children] = node.arguments
+            if (identifier.type === 'Identifier' && CLIENTONLY_RE.test(identifier.name)) {
+              if (children?.type === 'ObjectExpression') {
+                const defaultSlot = children.properties.find(prop => prop.type === 'Property' && prop.key.type === 'Identifier' && prop.key.name === 'default') as AcornNode<Property>
 
-        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))
-        )
+                if (defaultSlot) {
+                  s.remove(defaultSlot.start, defaultSlot.end + 1)
+                  const removedCode = code.slice(defaultSlot.start, defaultSlot.end + 1)
+                  const componentsSet = new Set<string>()
+                  const currentCode = s.toString()
+                  walk(parse('({' + removedCode + '})', { sourceType: 'module', ecmaVersion: 'latest' }), {
+                    enter (_node) {
+                      const node = _node as AcornNode<CallExpression>
+                      if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && SSR_RENDER_RE.test(node.callee.name)) {
+                        const componentNode = node.arguments[0]
+                        if (componentNode.type === 'CallExpression') {
+                          // expect componentNode to be an unref()
+                          const identifier = componentNode.arguments[0] as Identifier
+                          const isUsedOutsideClientOnly = new RegExp(`ssrRenderComponent\\((${(componentNode.callee as Identifier).name}\\()?${identifier.name}`).test(currentCode)
+                          if (!isUsedOutsideClientOnly) { componentsSet.add(identifier.name) }
+                        } else {
+                          // expect componentNode to be an identifier
+                          const isUsedOutsideClientOnly = new RegExp(`ssrRenderComponent\\(${(componentNode as Identifier).name}`).test(currentCode)
+                          if (!isUsedOutsideClientOnly) { componentsSet.add((componentNode as Identifier).name) }
+                        }
+                      }
+                    }
+                  })
+                  const component = [...componentsSet]
+                  for (const componentName of component) {
+                    let removed = false
+                    // remove const _component_ = resolveComponent...
+                    const VAR_RE = new RegExp(`(?:const|let|var) ${componentName} = ([^;]*);`)
+                    s.replace(VAR_RE, () => {
+                      removed = true
+                      return ''
+                    })
+                    if (!removed) {
+                      // remove direct import
+                      const declaration = findImportDeclaration(importDeclarations, componentName)
+                      if (declaration) {
+                        if (declaration.specifiers.length > 1) {
+                          const componentSpecifier = declaration.specifiers.find(s => s.local.name === componentName) as AcornNode<Identifier> | undefined
 
-        try {
-          // Replace node content
-          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
-          // to replace some text that has already been replaced
+                          if (componentSpecifier) { s.remove(componentSpecifier.start, componentSpecifier.end) }
+                        } else {
+                          s.remove(declaration.start, declaration.end)
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
         }
       })
 
@@ -75,3 +106,19 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
     }
   }
 })
+
+/**
+ * find and return the import that contain the import specifier
+ *
+ * @param {AcornNode<ImportDeclaration>[]} declarations - list of import declarations
+ * @param {string} importName - name of the import
+ */
+function findImportDeclaration (declarations: AcornNode<ImportDeclaration>[], importName: string): AcornNode<ImportDeclaration> | undefined {
+  const declaration = declarations.find((d) => {
+    const specifier = d.specifiers.find(s => s.local.name === importName)
+    if (specifier) { return true }
+    return false
+  })
+
+  if (declaration) { return declaration }
+}

From a62d6887edc22bdd7233c3ada1fb8df9d08af984 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 15 Nov 2022 23:12:32 +0100
Subject: [PATCH 02/34] test(nuxt): ensure scoped style does not break

---
 test/basic.test.ts                   |  6 ++++++
 test/fixtures/basic/pages/client.vue | 26 ++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/test/basic.test.ts b/test/basic.test.ts
index f43b7305383..86c7986178e 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -417,6 +417,12 @@ describe('server tree shaking', () => {
     const html = await $fetch('/client')
 
     expect(html).toContain('This page should not crash when rendered')
+    const page = await createPage('/client')
+
+    await page.waitForLoadState('networkidle')
+    // ensure scoped classes are correctly assigned between client and server
+    expect(await page.$eval('.red', e => getComputedStyle(e).color)).toBe('rgb(255, 0, 0)')
+    expect(await page.$eval('.blue', e => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)')
   })
 })
 
diff --git a/test/fixtures/basic/pages/client.vue b/test/fixtures/basic/pages/client.vue
index 682d0272d28..f1fba3c7d8f 100644
--- a/test/fixtures/basic/pages/client.vue
+++ b/test/fixtures/basic/pages/client.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 // explicit import to bypass client import protection
 import BreaksServer from '../components/BreaksServer.client'
+// ensure treeshake-client-only module remove theses imports without breaking
+import TestGlobal from '../components/global/TestGlobal.vue'
+import { FunctionalComponent } from '#components'
 
 onMounted(() => import('~/components/BreaksServer.client'))
 onBeforeMount(() => import('~/components/BreaksServer.client'))
@@ -27,5 +30,28 @@ onBeforeUnmount(() => import('~/components/BreaksServer.client'))
         <BreaksServer />
       </ClientOnly>
     </div>
+    <div>
+      <ClientOnly>
+        <div class="red">
+          i'm red
+        </div>
+        <div>
+          <FunctionalComponent />
+          <TestGlobal />
+        </div>
+      </ClientOnly>
+      <div class="blue">
+        i'm blue
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.red {
+  color: rgb(255, 0, 0);
+}
+.blue {
+  color: rgb(0, 0, 255);
+}
+</style>
\ No newline at end of file

From ee02bed3c9d9e639c4c2d2f6d8aed6b6b4da094e Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 15 Nov 2022 23:12:34 +0100
Subject: [PATCH 03/34] style: lint

---
 test/fixtures/basic/pages/client.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/fixtures/basic/pages/client.vue b/test/fixtures/basic/pages/client.vue
index f1fba3c7d8f..539c07b7f12 100644
--- a/test/fixtures/basic/pages/client.vue
+++ b/test/fixtures/basic/pages/client.vue
@@ -54,4 +54,4 @@ onBeforeUnmount(() => import('~/components/BreaksServer.client'))
 .blue {
   color: rgb(0, 0, 255);
 }
-</style>
\ No newline at end of file
+</style>

From 27c92058153d61d04e2a5003a5ba85ffe752dfac Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 15 Nov 2022 23:12:34 +0100
Subject: [PATCH 04/34] refactor(nuxt): improve regex and change jsdoc

---
 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 deef54b8b93..5266de54b06 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -25,7 +25,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
       if (!hasClientOnly) { return }
 
       const s = new MagicString(code)
-      const SSR_RENDER_RE = /ssrRender/
+      const SSR_RENDER_RE = /ssrRenderComponent/
       const parse = this.parse
       const importDeclarations: AcornNode<ImportDeclaration>[] = []
 
@@ -108,7 +108,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
 })
 
 /**
- * find and return the import that contain the import specifier
+ * find and return the importDeclaration that contain the import specifier
  *
  * @param {AcornNode<ImportDeclaration>[]} declarations - list of import declarations
  * @param {string} importName - name of the import

From fecea00ac5b298e7ee7163c58037e15522022610 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 15 Nov 2022 23:12:34 +0100
Subject: [PATCH 05/34] fix(nuxt): treeshake client only components in setup

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

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 5266de54b06..2401a7858cf 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -2,7 +2,7 @@ import { pathToFileURL } from 'node:url'
 import { parseURL } from 'ufo'
 import MagicString from 'magic-string'
 import { walk } from 'estree-walker'
-import type { CallExpression, Property, Identifier, ImportDeclaration } from 'estree'
+import type { CallExpression, Property, Identifier, ImportDeclaration, MemberExpression, Literal, ReturnStatement, VariableDeclaration, ObjectExpression } from 'estree'
 import { createUnplugin } from 'unplugin'
 
 interface TreeShakeTemplatePluginOptions {
@@ -52,15 +52,34 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
                       const node = _node as AcornNode<CallExpression>
                       if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && SSR_RENDER_RE.test(node.callee.name)) {
                         const componentNode = node.arguments[0]
-                        if (componentNode.type === 'CallExpression') {
-                          // expect componentNode to be an unref()
-                          const identifier = componentNode.arguments[0] as Identifier
-                          const isUsedOutsideClientOnly = new RegExp(`ssrRenderComponent\\((${(componentNode.callee as Identifier).name}\\()?${identifier.name}`).test(currentCode)
-                          if (!isUsedOutsideClientOnly) { componentsSet.add(identifier.name) }
-                        } else {
-                          // expect componentNode to be an identifier
-                          const isUsedOutsideClientOnly = new RegExp(`ssrRenderComponent\\(${(componentNode as Identifier).name}`).test(currentCode)
-                          if (!isUsedOutsideClientOnly) { componentsSet.add((componentNode as Identifier).name) }
+                        if (componentNode.type === 'CallExpression' && !isRenderedInCode(currentCode, identifier.name)) {
+                          componentsSet.add(identifier.name)
+                        } else if (componentNode.type === 'Identifier' && !isRenderedInCode(currentCode, componentNode.name)) {
+                          componentsSet.add(componentNode.name)
+                        } else if (componentNode.type === 'MemberExpression') {
+                          // expect componentNode to be a memberExpression (mostly used in dev with $setup[])
+                          const { start, end } = componentNode as AcornNode<MemberExpression>
+                          if (!isRenderedInCode(currentCode, code.slice(start, end))) {
+                            componentsSet.add(((componentNode as MemberExpression).property as Literal).value as string)
+                            // remove the component from the return statement of `setup()`
+                            walk(parse(code, { sourceType: 'module', ecmaVersion: 'latest' }), {
+                              enter (_node) {
+                                const node = _node as Property
+                                if (node.type === 'Property' && node.key.type === 'Identifier' && node.key.name === 'setup' && node.value.type === 'FunctionExpression') {
+                                  const returnStatement = node.value.body.body.find(n => n.type === 'ReturnStatement') as ReturnStatement|undefined
+                                  if (returnStatement?.argument?.type === 'Identifier') {
+                                    const returnIdentifier = returnStatement.argument.name
+                                    const returnedDeclaration = node.value.body.body.find(n => n.type === 'VariableDeclaration' && (n.declarations[0].id as Identifier).name === returnIdentifier) as AcornNode<VariableDeclaration>
+                                    const componentProperty = (returnedDeclaration?.declarations[0].init as ObjectExpression)?.properties.find(p => ((p as Property).key as Identifier).name === ((componentNode as MemberExpression).property as Literal).value) as AcornNode<Property>
+                                    if (componentProperty) { s.remove(componentProperty.start, componentProperty.end + 1) }
+                                  } else if (returnStatement?.argument?.type === 'ObjectExpression') {
+                                    const componentProperty = returnStatement.argument?.properties.find(p => ((p as Property).key as Identifier).name === ((componentNode as MemberExpression).property as Literal).value) as AcornNode<Property>
+                                    if (componentProperty) { s.remove(componentProperty.start, componentProperty.end + 1) }
+                                  }
+                                }
+                              }
+                            })
+                          }
                         }
                       }
                     }
@@ -122,3 +141,17 @@ function findImportDeclaration (declarations: AcornNode<ImportDeclaration>[], im
 
   if (declaration) { return declaration }
 }
+
+/**
+ * test if the name argument is used to render a component in the code
+ *
+ * @param code code to test
+ * @param name component name
+ */
+function isRenderedInCode (code: string, name: string) {
+  return new RegExp(`ssrRenderComponent\\(${escapeRegExp(name)}`).test(code)
+}
+
+function escapeRegExp (string: string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}

From 6357b28ccbdee03b4de55086bf7a615290c7b33d Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 15 Nov 2022 23:12:35 +0100
Subject: [PATCH 06/34] fix(nuxt): fix refactor + change component to
 components

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

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 2401a7858cf..f1ead88e0fa 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -52,8 +52,9 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
                       const node = _node as AcornNode<CallExpression>
                       if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && SSR_RENDER_RE.test(node.callee.name)) {
                         const componentNode = node.arguments[0]
-                        if (componentNode.type === 'CallExpression' && !isRenderedInCode(currentCode, identifier.name)) {
-                          componentsSet.add(identifier.name)
+                        if (componentNode.type === 'CallExpression') {
+                          const identifier = componentNode.arguments[0] as Identifier
+                          if (!isRenderedInCode(currentCode, identifier.name)) { componentsSet.add(identifier.name) }
                         } else if (componentNode.type === 'Identifier' && !isRenderedInCode(currentCode, componentNode.name)) {
                           componentsSet.add(componentNode.name)
                         } else if (componentNode.type === 'MemberExpression') {
@@ -66,7 +67,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
                               enter (_node) {
                                 const node = _node as Property
                                 if (node.type === 'Property' && node.key.type === 'Identifier' && node.key.name === 'setup' && node.value.type === 'FunctionExpression') {
-                                  const returnStatement = node.value.body.body.find(n => n.type === 'ReturnStatement') as ReturnStatement|undefined
+                                  const returnStatement = node.value.body.body.find(n => n.type === 'ReturnStatement') as ReturnStatement | undefined
                                   if (returnStatement?.argument?.type === 'Identifier') {
                                     const returnIdentifier = returnStatement.argument.name
                                     const returnedDeclaration = node.value.body.body.find(n => n.type === 'VariableDeclaration' && (n.declarations[0].id as Identifier).name === returnIdentifier) as AcornNode<VariableDeclaration>
@@ -84,8 +85,8 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
                       }
                     }
                   })
-                  const component = [...componentsSet]
-                  for (const componentName of component) {
+                  const components = [...componentsSet]
+                  for (const componentName of components) {
                     let removed = false
                     // remove const _component_ = resolveComponent...
                     const VAR_RE = new RegExp(`(?:const|let|var) ${componentName} = ([^;]*);`)

From d8397c11a4e5650a1e97fee710cca8d8d8656067 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 6 Nov 2022 08:20:00 +0000
Subject: [PATCH 07/34] chore: remove `ultrahtml` dependency

---
 packages/nuxt/package.json | 1 -
 pnpm-lock.yaml             | 8 +-------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index bf45f20c390..a771c3a831d 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -70,7 +70,6 @@
     "scule": "^1.0.0",
     "strip-literal": "^1.0.0",
     "ufo": "^1.0.0",
-    "ultrahtml": "^1.0.0",
     "unctx": "^2.1.0",
     "unenv": "^1.0.0",
     "unimport": "^1.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2b78345ea2a..31121ff5cd6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -444,7 +444,6 @@ importers:
       scule: ^1.0.0
       strip-literal: ^1.0.0
       ufo: ^1.0.0
-      ultrahtml: ^1.0.0
       unbuild: ^0.9.4
       unctx: ^2.1.0
       unenv: ^1.0.0
@@ -491,7 +490,6 @@ importers:
       scule: 1.0.0
       strip-literal: 1.0.0
       ufo: 1.0.0
-      ultrahtml: 1.0.0
       unctx: 2.1.0
       unenv: 1.0.0
       unhead: 0.6.7
@@ -2603,7 +2601,7 @@ packages:
       '@vueuse/core': 9.3.0
       '@vueuse/metadata': 9.3.0
       local-pkg: 0.4.2
-      nuxt: link:packages/nuxt
+      nuxt: link:packages\nuxt
       vue-demi: 0.13.11
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -8351,10 +8349,6 @@ packages:
   /ufo/1.0.0:
     resolution: {integrity: sha512-DRty0ZBNlJ2R59y4mEupJRKLbkLQsc4qtxjpQv78AwEDuBkaUogMc2LkeqW3HddFlw6NwnXYfdThEZOiNgkmmQ==}
 
-  /ultrahtml/1.0.0:
-    resolution: {integrity: sha512-BOtReLegZ/OlSTVOSt4aH+wrUPwxoXvapUHXjwhDE4k4kMISWdfUR4PH5wvt/vgKjFcAcEUPFEZQiPiB87XO3Q==}
-    dev: false
-
   /unbox-primitive/1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
     dependencies:

From 13aa7f81f2a9febba3667d4311cb523912cc15fe Mon Sep 17 00:00:00 2001
From: Julien Huang <63512348+huang-julien@users.noreply.github.com>
Date: Sun, 6 Nov 2022 16:05:50 +0100
Subject: [PATCH 08/34] Update packages/nuxt/src/components/tree-shake.ts

Co-authored-by: Daniel Roe <daniel@roe.dev>
---
 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 f1ead88e0fa..1c83059e284 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -140,7 +140,7 @@ function findImportDeclaration (declarations: AcornNode<ImportDeclaration>[], im
     return false
   })
 
-  if (declaration) { return declaration }
+  return declaration
 }
 
 /**

From 3bb188bde707d3be08c7be685dc6fb6d6d5c8c76 Mon Sep 17 00:00:00 2001
From: Julien Huang <63512348+huang-julien@users.noreply.github.com>
Date: Sun, 6 Nov 2022 16:06:14 +0100
Subject: [PATCH 09/34] Update packages/nuxt/src/components/tree-shake.ts

Co-authored-by: Daniel Roe <daniel@roe.dev>
---
 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 1c83059e284..84f8cb991ac 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -20,7 +20,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
       return pathname.endsWith('.vue')
     },
     transform (code, id) {
-      const CLIENTONLY_RE = /[c|C]lient[_|-]?[O|o]nly/
+      const CLIENTONLY_RE = /(ClientOnly|client-only)/
       const hasClientOnly = CLIENTONLY_RE.test(code)
       if (!hasClientOnly) { return }
 

From 34107a23458c63b7180c21ad846649a2796d7e4d Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sun, 6 Nov 2022 16:15:51 +0100
Subject: [PATCH 10/34] refactor(nuxt): use escapeStringRegexp()

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

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 84f8cb991ac..509add14826 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -4,6 +4,7 @@ import MagicString from 'magic-string'
 import { walk } from 'estree-walker'
 import type { CallExpression, Property, Identifier, ImportDeclaration, MemberExpression, Literal, ReturnStatement, VariableDeclaration, ObjectExpression } from 'estree'
 import { createUnplugin } from 'unplugin'
+import escapeStringRegexp from 'escape-string-regexp'
 
 interface TreeShakeTemplatePluginOptions {
   sourcemap?: boolean
@@ -150,9 +151,5 @@ function findImportDeclaration (declarations: AcornNode<ImportDeclaration>[], im
  * @param name component name
  */
 function isRenderedInCode (code: string, name: string) {
-  return new RegExp(`ssrRenderComponent\\(${escapeRegExp(name)}`).test(code)
-}
-
-function escapeRegExp (string: string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  return new RegExp(`ssrRenderComponent\\(${escapeStringRegexp(name)}`).test(code)
 }

From 3cb007aa47726bc8c0e939c9e4eac7c59f7aa4ed Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sun, 6 Nov 2022 23:59:21 +0100
Subject: [PATCH 11/34] fix(nuxt): set back treeshake for all clientonly
 components

---
 packages/nuxt/src/components/module.ts     |  6 ++--
 packages/nuxt/src/components/tree-shake.ts | 39 +++++++++++++++-------
 test/basic.test.ts                         |  5 +++
 test/fixtures/basic/pages/client.vue       | 16 +++++++--
 4 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/packages/nuxt/src/components/module.ts b/packages/nuxt/src/components/module.ts
index 4d4167d76a5..eebe5e1a0cb 100644
--- a/packages/nuxt/src/components/module.ts
+++ b/packages/nuxt/src/components/module.ts
@@ -190,7 +190,8 @@ export default defineNuxtModule<ComponentsOptions>({
       config.plugins = config.plugins || []
       if (nuxt.options.experimental.treeshakeClientOnly && isServer) {
         config.plugins.push(TreeShakeTemplatePlugin.vite({
-          sourcemap: nuxt.options.sourcemap[mode]
+          sourcemap: nuxt.options.sourcemap[mode],
+          getComponents
         }))
       }
       config.plugins.push(loaderPlugin.vite({
@@ -205,7 +206,8 @@ export default defineNuxtModule<ComponentsOptions>({
         config.plugins = config.plugins || []
         if (nuxt.options.experimental.treeshakeClientOnly && mode === 'server') {
           config.plugins.push(TreeShakeTemplatePlugin.webpack({
-            sourcemap: nuxt.options.sourcemap[mode]
+            sourcemap: nuxt.options.sourcemap[mode],
+            getComponents
           }))
         }
         config.plugins.push(loaderPlugin.webpack({
diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 509add14826..2288a812910 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -5,13 +5,17 @@ import { walk } from 'estree-walker'
 import type { CallExpression, Property, Identifier, ImportDeclaration, MemberExpression, Literal, ReturnStatement, VariableDeclaration, ObjectExpression } from 'estree'
 import { createUnplugin } from 'unplugin'
 import escapeStringRegexp from 'escape-string-regexp'
+import type { Component } from '@nuxt/schema'
 
 interface TreeShakeTemplatePluginOptions {
-  sourcemap?: boolean
+  sourcemap?: boolean,
+  getComponents (): Component[]
 }
 
 type AcornNode<N> = N & { start: number, end: number }
 
+const SSR_RENDER_RE = /ssrRenderComponent/
+
 export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplatePluginOptions) => {
   return {
     name: 'nuxt:tree-shake-template',
@@ -21,15 +25,26 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
       return pathname.endsWith('.vue')
     },
     transform (code, id) {
-      const CLIENTONLY_RE = /(ClientOnly|client-only)/
-      const hasClientOnly = CLIENTONLY_RE.test(code)
-      if (!hasClientOnly) { return }
+      const regexpMap = new WeakMap<Component[], [RegExp, string[]]>()
+
+      const components = options.getComponents()
+
+      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, c.kebabName])
+          .concat(['ClientOnly', 'client-only'])
+
+        regexpMap.set(components, [new RegExp(`(${clientOnlyComponents.join('|')})`), clientOnlyComponents])
+      }
 
       const s = new MagicString(code)
-      const SSR_RENDER_RE = /ssrRenderComponent/
       const parse = this.parse
       const importDeclarations: AcornNode<ImportDeclaration>[] = []
 
+      const [COMPONENTS_RE] = regexpMap.get(components)!
+      if (!COMPONENTS_RE.test(code)) { return }
+
       walk(parse(code, { sourceType: 'module', ecmaVersion: 'latest' }), {
         enter (_node) {
           const node = _node as AcornNode<CallExpression | ImportDeclaration>
@@ -39,13 +54,13 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
             node.callee.type === 'Identifier' &&
             SSR_RENDER_RE.test(node.callee.name)) {
             const [identifier, _, children] = node.arguments
-            if (identifier.type === 'Identifier' && CLIENTONLY_RE.test(identifier.name)) {
+            if (identifier.type === 'Identifier' && COMPONENTS_RE.test(identifier.name)) {
               if (children?.type === 'ObjectExpression') {
-                const defaultSlot = children.properties.find(prop => prop.type === 'Property' && prop.key.type === 'Identifier' && prop.key.name === 'default') as AcornNode<Property>
+                const nonFallbackSlots = children.properties.filter(prop => prop.type === 'Property' && prop.key.type === 'Identifier' && prop.key.name !== 'fallback') as AcornNode<Property>[]
 
-                if (defaultSlot) {
-                  s.remove(defaultSlot.start, defaultSlot.end + 1)
-                  const removedCode = code.slice(defaultSlot.start, defaultSlot.end + 1)
+                for (const slot of nonFallbackSlots) {
+                  s.remove(slot.start, slot.end + 1)
+                  const removedCode = code.slice(slot.start, slot.end + 1)
                   const componentsSet = new Set<string>()
                   const currentCode = s.toString()
                   walk(parse('({' + removedCode + '})', { sourceType: 'module', ecmaVersion: 'latest' }), {
@@ -86,8 +101,8 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
                       }
                     }
                   })
-                  const components = [...componentsSet]
-                  for (const componentName of components) {
+                  const componentsToRemove = [...componentsSet]
+                  for (const componentName of componentsToRemove) {
                     let removed = false
                     // remove const _component_ = resolveComponent...
                     const VAR_RE = new RegExp(`(?:const|let|var) ${componentName} = ([^;]*);`)
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 86c7986178e..e221fe45d75 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -417,12 +417,17 @@ describe('server tree shaking', () => {
     const html = await $fetch('/client')
 
     expect(html).toContain('This page should not crash when rendered')
+    expect(html).toContain('fallback for ClientOnly')
+    expect(html).not.toContain('This should not be rendered')
+    expect(html).not.toContain('rendered client-side')
+    expect(html).not.toContain('id="client-side"')
     const page = await createPage('/client')
 
     await page.waitForLoadState('networkidle')
     // ensure scoped classes are correctly assigned between client and server
     expect(await page.$eval('.red', e => getComputedStyle(e).color)).toBe('rgb(255, 0, 0)')
     expect(await page.$eval('.blue', e => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)')
+    expect(await page.locator('#client-side').textContent()).toContain('This should be rendered client-side')
   })
 })
 
diff --git a/test/fixtures/basic/pages/client.vue b/test/fixtures/basic/pages/client.vue
index 539c07b7f12..4aa9bb5447d 100644
--- a/test/fixtures/basic/pages/client.vue
+++ b/test/fixtures/basic/pages/client.vue
@@ -19,15 +19,21 @@ onBeforeUnmount(() => import('~/components/BreaksServer.client'))
   <div>
     This page should not crash when rendered.
     <ClientOnly class="something">
-      test
+      <span>rendered client-side</span>
       <BreaksServer />
       <BreaksServer>Some slot content</BreaksServer>
     </ClientOnly>
     This should render.
     <div>
       <ClientOnly class="another">
-        test
+        <span>rendered client-side</span>
         <BreaksServer />
+        <template #fallback>
+          <div>fallback for ClientOnly</div>
+        </template>
+        <template #test>
+          <div>This should not be rendered</div>
+        </template>
       </ClientOnly>
     </div>
     <div>
@@ -40,6 +46,12 @@ onBeforeUnmount(() => import('~/components/BreaksServer.client'))
           <TestGlobal />
         </div>
       </ClientOnly>
+      <ClientOnlyScript>
+        <template #test>
+          <BreaksServer />
+          <div id="client-side">This should be rendered client-side</div>
+        </template>
+      </ClientOnlyScript>
       <div class="blue">
         i'm blue
       </div>

From 4ec2fa94a512cca9b274aece411a0b36646c9e16 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Mon, 7 Nov 2022 00:25:05 +0100
Subject: [PATCH 12/34] fix(nuxt): avoid removing placeholder slot

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

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 2288a812910..d035955c5a3 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -15,6 +15,7 @@ interface TreeShakeTemplatePluginOptions {
 type AcornNode<N> = N & { start: number, end: number }
 
 const SSR_RENDER_RE = /ssrRenderComponent/
+const PLACEHOLDER_EXACT_RE = /^(fallback|placeholder)$/
 
 export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplatePluginOptions) => {
   return {
@@ -56,7 +57,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
             const [identifier, _, children] = node.arguments
             if (identifier.type === 'Identifier' && COMPONENTS_RE.test(identifier.name)) {
               if (children?.type === 'ObjectExpression') {
-                const nonFallbackSlots = children.properties.filter(prop => prop.type === 'Property' && prop.key.type === 'Identifier' && prop.key.name !== 'fallback') as AcornNode<Property>[]
+                const nonFallbackSlots = children.properties.filter(prop => prop.type === 'Property' && prop.key.type === 'Identifier' && !PLACEHOLDER_EXACT_RE.test(prop.key.name)) as AcornNode<Property>[]
 
                 for (const slot of nonFallbackSlots) {
                   s.remove(slot.start, slot.end + 1)

From 334d68f7532c1eb0e5995bdc0686ffd67ffbb9d9 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 8 Nov 2022 00:04:58 +0100
Subject: [PATCH 13/34] fix(nuxt): fix regexpMap

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

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index d035955c5a3..1bf0168a3ed 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -6,6 +6,8 @@ import type { CallExpression, Property, Identifier, ImportDeclaration, MemberExp
 import { createUnplugin } from 'unplugin'
 import escapeStringRegexp from 'escape-string-regexp'
 import type { Component } from '@nuxt/schema'
+import { resolve } from 'pathe'
+import { distDir } from '../dirs'
 
 interface TreeShakeTemplatePluginOptions {
   sourcemap?: boolean,
@@ -32,9 +34,9 @@ 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, c.kebabName])
-          .concat(['ClientOnly', 'client-only'])
+          .filter(c => c.mode === 'client' && !components.some(other => other.mode !== 'client' && other.pascalName === c.pascalName && other.filePath !== resolve(distDir, 'app/components/server-placeholder')))
+          .flatMap(c => [c.pascalName, c.kebabName.replaceAll('-', '_')])
+          .concat(['ClientOnly', 'client_only'])
 
         regexpMap.set(components, [new RegExp(`(${clientOnlyComponents.join('|')})`), clientOnlyComponents])
       }

From 210da4145f33d509ea083ecd99808f303c5f506b Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 8 Nov 2022 00:47:28 +0100
Subject: [PATCH 14/34] test(nuxt): ensure .client components are treeshaken

---
 test/fixtures/basic/pages/client-only-components.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/test/fixtures/basic/pages/client-only-components.vue b/test/fixtures/basic/pages/client-only-components.vue
index ca18e6ef848..386dcb06914 100644
--- a/test/fixtures/basic/pages/client-only-components.vue
+++ b/test/fixtures/basic/pages/client-only-components.vue
@@ -9,6 +9,7 @@
       <template #test>
         <div class="slot-test">
           Hello
+          <BreaksServer />
         </div>
       </template>
     </ClientSetupScript>
@@ -59,6 +60,8 @@
 
 <script setup lang="ts">
 import { Ref } from 'vue'
+// bypass client import protection to ensure this is treeshaken from .client components
+import BreaksServer from '~~/components/BreaksServer.client'
 type Comp = Ref<{ add: () => void }>
 
 const stringStatefulComp = ref(null) as any as Comp

From 9dd27d54c47d5abbc949726f71c49b0ccda50ac8 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 8 Nov 2022 01:02:34 +0100
Subject: [PATCH 15/34] style: lint

---
 test/fixtures/basic/pages/client-only-components.vue | 1 +
 test/fixtures/basic/pages/client.vue                 | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/test/fixtures/basic/pages/client-only-components.vue b/test/fixtures/basic/pages/client-only-components.vue
index 386dcb06914..76ec85b1e50 100644
--- a/test/fixtures/basic/pages/client-only-components.vue
+++ b/test/fixtures/basic/pages/client-only-components.vue
@@ -62,6 +62,7 @@
 import { Ref } from 'vue'
 // bypass client import protection to ensure this is treeshaken from .client components
 import BreaksServer from '~~/components/BreaksServer.client'
+
 type Comp = Ref<{ add: () => void }>
 
 const stringStatefulComp = ref(null) as any as Comp
diff --git a/test/fixtures/basic/pages/client.vue b/test/fixtures/basic/pages/client.vue
index 4aa9bb5447d..4dac4386182 100644
--- a/test/fixtures/basic/pages/client.vue
+++ b/test/fixtures/basic/pages/client.vue
@@ -49,7 +49,9 @@ onBeforeUnmount(() => import('~/components/BreaksServer.client'))
       <ClientOnlyScript>
         <template #test>
           <BreaksServer />
-          <div id="client-side">This should be rendered client-side</div>
+          <div id="client-side">
+            This should be rendered client-side
+          </div>
         </template>
       </ClientOnlyScript>
       <div class="blue">

From 24f85fe77127fe2cca14d75feeb98afc2328fe59 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Wed, 9 Nov 2022 00:25:27 +0100
Subject: [PATCH 16/34] fix(nuxt): add new regex to match component exact var
 name using ^$

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

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 1bf0168a3ed..5b06f1db0e2 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -28,7 +28,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
       return pathname.endsWith('.vue')
     },
     transform (code, id) {
-      const regexpMap = new WeakMap<Component[], [RegExp, string[]]>()
+      const regexpMap = new WeakMap<Component[], [RegExp, RegExp, string[]]>()
 
       const components = options.getComponents()
 
@@ -38,14 +38,14 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
           .flatMap(c => [c.pascalName, c.kebabName.replaceAll('-', '_')])
           .concat(['ClientOnly', 'client_only'])
 
-        regexpMap.set(components, [new RegExp(`(${clientOnlyComponents.join('|')})`), clientOnlyComponents])
+        regexpMap.set(components, [new RegExp(`(${clientOnlyComponents.join('|')})`), new RegExp(`^(${clientOnlyComponents.map(c => `_component_${c}`).join('|')})$`), clientOnlyComponents])
       }
 
       const s = new MagicString(code)
       const parse = this.parse
       const importDeclarations: AcornNode<ImportDeclaration>[] = []
 
-      const [COMPONENTS_RE] = regexpMap.get(components)!
+      const [COMPONENTS_RE, COMPONENTS_IDENTIFIERS_RE] = regexpMap.get(components)!
       if (!COMPONENTS_RE.test(code)) { return }
 
       walk(parse(code, { sourceType: 'module', ecmaVersion: 'latest' }), {
@@ -57,7 +57,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
             node.callee.type === 'Identifier' &&
             SSR_RENDER_RE.test(node.callee.name)) {
             const [identifier, _, children] = node.arguments
-            if (identifier.type === 'Identifier' && COMPONENTS_RE.test(identifier.name)) {
+            if (identifier.type === 'Identifier' && COMPONENTS_IDENTIFIERS_RE.test(identifier.name)) {
               if (children?.type === 'ObjectExpression') {
                 const nonFallbackSlots = children.properties.filter(prop => prop.type === 'Property' && prop.key.type === 'Identifier' && !PLACEHOLDER_EXACT_RE.test(prop.key.name)) as AcornNode<Property>[]
 

From ddc0e70ad79308b503947c088ce355b5d183fe2c Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Wed, 9 Nov 2022 23:51:52 +0100
Subject: [PATCH 17/34] fix: treeshake direct import of .client components

---
 packages/nuxt/src/components/tree-shake.ts | 16 ++++++++++------
 test/basic.test.ts                         |  3 +--
 test/fixtures/basic/pages/client.vue       | 21 ++++++++++-----------
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 5b06f1db0e2..63c69907e8b 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -38,7 +38,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
           .flatMap(c => [c.pascalName, c.kebabName.replaceAll('-', '_')])
           .concat(['ClientOnly', 'client_only'])
 
-        regexpMap.set(components, [new RegExp(`(${clientOnlyComponents.join('|')})`), new RegExp(`^(${clientOnlyComponents.map(c => `_component_${c}`).join('|')})$`), clientOnlyComponents])
+        regexpMap.set(components, [new RegExp(`(${clientOnlyComponents.join('|')})`), new RegExp(`^(${clientOnlyComponents.map(c => `^(?:_component_)?${c}`).join('|')})$`), clientOnlyComponents])
       }
 
       const s = new MagicString(code)
@@ -53,12 +53,16 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
           const node = _node as AcornNode<CallExpression | ImportDeclaration>
           if (node.type === 'ImportDeclaration') {
             importDeclarations.push(node)
-          } else if (node.type === 'CallExpression' &&
+          } else if (
+            node.type === 'CallExpression' &&
             node.callee.type === 'Identifier' &&
-            SSR_RENDER_RE.test(node.callee.name)) {
-            const [identifier, _, children] = node.arguments
-            if (identifier.type === 'Identifier' && COMPONENTS_IDENTIFIERS_RE.test(identifier.name)) {
-              if (children?.type === 'ObjectExpression') {
+            SSR_RENDER_RE.test(node.callee.name)
+          ) {
+            const [componentCall, _, children] = node.arguments
+            if (componentCall.type === 'Identifier' || componentCall.type === 'MemberExpression') {
+              const isClientComponent = COMPONENTS_IDENTIFIERS_RE.test(componentCall.type === 'Identifier' ? componentCall.name : (componentCall.property as Literal).value as string)
+
+              if (isClientComponent && children?.type === 'ObjectExpression') {
                 const nonFallbackSlots = children.properties.filter(prop => prop.type === 'Property' && prop.key.type === 'Identifier' && !PLACEHOLDER_EXACT_RE.test(prop.key.name)) as AcornNode<Property>[]
 
                 for (const slot of nonFallbackSlots) {
diff --git a/test/basic.test.ts b/test/basic.test.ts
index e221fe45d75..9ec18a42000 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -418,11 +418,10 @@ describe('server tree shaking', () => {
 
     expect(html).toContain('This page should not crash when rendered')
     expect(html).toContain('fallback for ClientOnly')
-    expect(html).not.toContain('This should not be rendered')
     expect(html).not.toContain('rendered client-side')
     expect(html).not.toContain('id="client-side"')
-    const page = await createPage('/client')
 
+    const page = await createPage('/client')
     await page.waitForLoadState('networkidle')
     // ensure scoped classes are correctly assigned between client and server
     expect(await page.$eval('.red', e => getComputedStyle(e).color)).toBe('rgb(255, 0, 0)')
diff --git a/test/fixtures/basic/pages/client.vue b/test/fixtures/basic/pages/client.vue
index 4dac4386182..4121f237be7 100644
--- a/test/fixtures/basic/pages/client.vue
+++ b/test/fixtures/basic/pages/client.vue
@@ -3,7 +3,8 @@
 import BreaksServer from '../components/BreaksServer.client'
 // ensure treeshake-client-only module remove theses imports without breaking
 import TestGlobal from '../components/global/TestGlobal.vue'
-import { FunctionalComponent } from '#components'
+// direct import of .client components should be treeshaken
+import { FunctionalComponent, LazyClientOnlyScript } from '#components'
 
 onMounted(() => import('~/components/BreaksServer.client'))
 onBeforeMount(() => import('~/components/BreaksServer.client'))
@@ -28,32 +29,30 @@ onBeforeUnmount(() => import('~/components/BreaksServer.client'))
       <ClientOnly class="another">
         <span>rendered client-side</span>
         <BreaksServer />
-        <template #fallback>
-          <div>fallback for ClientOnly</div>
-        </template>
-        <template #test>
-          <div>This should not be rendered</div>
-        </template>
       </ClientOnly>
     </div>
     <div>
-      <ClientOnly>
+      <LazyClientOnly>
         <div class="red">
           i'm red
         </div>
         <div>
+          <BreaksServer />
           <FunctionalComponent />
           <TestGlobal />
         </div>
-      </ClientOnly>
-      <ClientOnlyScript>
+        <template #fallback>
+          <div>fallback for ClientOnly</div>
+        </template>
+      </LazyClientOnly>
+      <LazyClientOnlyScript>
         <template #test>
           <BreaksServer />
           <div id="client-side">
             This should be rendered client-side
           </div>
         </template>
-      </ClientOnlyScript>
+      </LazyClientOnlyScript>
       <div class="blue">
         i'm blue
       </div>

From ac4cdb2958634ff16191d7049b62f6a2ed6486b9 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Fri, 11 Nov 2022 17:10:52 +0100
Subject: [PATCH 18/34] fix: treeshake lazy client

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

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 63c69907e8b..2b72dedeb3f 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -38,7 +38,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
           .flatMap(c => [c.pascalName, c.kebabName.replaceAll('-', '_')])
           .concat(['ClientOnly', 'client_only'])
 
-        regexpMap.set(components, [new RegExp(`(${clientOnlyComponents.join('|')})`), new RegExp(`^(${clientOnlyComponents.map(c => `^(?:_component_)?${c}`).join('|')})$`), clientOnlyComponents])
+        regexpMap.set(components, [new RegExp(`(${clientOnlyComponents.join('|')})`), new RegExp(`^(${clientOnlyComponents.map(c => `^(?:_component_)?(?:Lazy|lazy_ )?${c}`).join('|')})$`), clientOnlyComponents])
       }
 
       const s = new MagicString(code)
@@ -67,14 +67,15 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
 
                 for (const slot of nonFallbackSlots) {
                   s.remove(slot.start, slot.end + 1)
-                  const removedCode = code.slice(slot.start, slot.end + 1)
+                  const removedCode = `({${code.slice(slot.start, slot.end + 1)}})`
                   const componentsSet = new Set<string>()
                   const currentCode = s.toString()
-                  walk(parse('({' + removedCode + '})', { sourceType: 'module', ecmaVersion: 'latest' }), {
+                  walk(parse(removedCode, { sourceType: 'module', ecmaVersion: 'latest' }), {
                     enter (_node) {
                       const node = _node as AcornNode<CallExpression>
                       if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && SSR_RENDER_RE.test(node.callee.name)) {
                         const componentNode = node.arguments[0]
+
                         if (componentNode.type === 'CallExpression') {
                           const identifier = componentNode.arguments[0] as Identifier
                           if (!isRenderedInCode(currentCode, identifier.name)) { componentsSet.add(identifier.name) }
@@ -83,7 +84,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
                         } else if (componentNode.type === 'MemberExpression') {
                           // expect componentNode to be a memberExpression (mostly used in dev with $setup[])
                           const { start, end } = componentNode as AcornNode<MemberExpression>
-                          if (!isRenderedInCode(currentCode, code.slice(start, end))) {
+                          if (!isRenderedInCode(currentCode, removedCode.slice(start, end))) {
                             componentsSet.add(((componentNode as MemberExpression).property as Literal).value as string)
                             // remove the component from the return statement of `setup()`
                             walk(parse(code, { sourceType: 'module', ecmaVersion: 'latest' }), {
@@ -124,7 +125,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
                         if (declaration.specifiers.length > 1) {
                           const componentSpecifier = declaration.specifiers.find(s => s.local.name === componentName) as AcornNode<Identifier> | undefined
 
-                          if (componentSpecifier) { s.remove(componentSpecifier.start, componentSpecifier.end) }
+                          if (componentSpecifier) { s.remove(componentSpecifier.start, componentSpecifier.end + 1) }
                         } else {
                           s.remove(declaration.start, declaration.end)
                         }

From f27f94d203a368a5d621b30439445b3935c3177c Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 15 Nov 2022 23:02:39 +0100
Subject: [PATCH 19/34] fix(nuxt): treeshake all slots on .client components

---
 packages/nuxt/src/components/tree-shake.ts | 24 +++++++++++-----------
 test/fixtures/basic/pages/client.vue       |  5 +++++
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 2b72dedeb3f..a52f28dd6d3 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -42,14 +42,13 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
       }
 
       const s = new MagicString(code)
-      const parse = this.parse
       const importDeclarations: AcornNode<ImportDeclaration>[] = []
 
       const [COMPONENTS_RE, COMPONENTS_IDENTIFIERS_RE] = regexpMap.get(components)!
       if (!COMPONENTS_RE.test(code)) { return }
 
-      walk(parse(code, { sourceType: 'module', ecmaVersion: 'latest' }), {
-        enter (_node) {
+      walk(this.parse(code, { sourceType: 'module', ecmaVersion: 'latest' }), {
+        enter: (_node) => {
           const node = _node as AcornNode<CallExpression | ImportDeclaration>
           if (node.type === 'ImportDeclaration') {
             importDeclarations.push(node)
@@ -60,18 +59,19 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
           ) {
             const [componentCall, _, children] = node.arguments
             if (componentCall.type === 'Identifier' || componentCall.type === 'MemberExpression') {
-              const isClientComponent = COMPONENTS_IDENTIFIERS_RE.test(componentCall.type === 'Identifier' ? componentCall.name : (componentCall.property as Literal).value as string)
-
+              const componentName = componentCall.type === 'Identifier' ? componentCall.name : (componentCall.property as Literal).value as string
+              const isClientComponent = COMPONENTS_IDENTIFIERS_RE.test(componentName)
+              const isClientOnlyComponent = /^(?:_component_)?(?:Lazy|lazy_)?(?:client_only|ClientOnly)$/.test(componentName)
               if (isClientComponent && children?.type === 'ObjectExpression') {
-                const nonFallbackSlots = children.properties.filter(prop => prop.type === 'Property' && prop.key.type === 'Identifier' && !PLACEHOLDER_EXACT_RE.test(prop.key.name)) as AcornNode<Property>[]
+                const slotsToRemove = isClientOnlyComponent ? children.properties.filter(prop => prop.type === 'Property' && prop.key.type === 'Identifier' && !PLACEHOLDER_EXACT_RE.test(prop.key.name)) as AcornNode<Property>[] : children.properties as AcornNode<Property>[]
 
-                for (const slot of nonFallbackSlots) {
+                for (const slot of slotsToRemove) {
+                  const componentsSet = new Set<string>()
                   s.remove(slot.start, slot.end + 1)
                   const removedCode = `({${code.slice(slot.start, slot.end + 1)}})`
-                  const componentsSet = new Set<string>()
                   const currentCode = s.toString()
-                  walk(parse(removedCode, { sourceType: 'module', ecmaVersion: 'latest' }), {
-                    enter (_node) {
+                  walk(this.parse(removedCode, { sourceType: 'module', ecmaVersion: 'latest' }), {
+                    enter: (_node) => {
                       const node = _node as AcornNode<CallExpression>
                       if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && SSR_RENDER_RE.test(node.callee.name)) {
                         const componentNode = node.arguments[0]
@@ -87,8 +87,8 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
                           if (!isRenderedInCode(currentCode, removedCode.slice(start, end))) {
                             componentsSet.add(((componentNode as MemberExpression).property as Literal).value as string)
                             // remove the component from the return statement of `setup()`
-                            walk(parse(code, { sourceType: 'module', ecmaVersion: 'latest' }), {
-                              enter (_node) {
+                            walk(this.parse(code, { sourceType: 'module', ecmaVersion: 'latest' }), {
+                              enter: (_node) => {
                                 const node = _node as Property
                                 if (node.type === 'Property' && node.key.type === 'Identifier' && node.key.name === 'setup' && node.value.type === 'FunctionExpression') {
                                   const returnStatement = node.value.body.body.find(n => n.type === 'ReturnStatement') as ReturnStatement | undefined
diff --git a/test/fixtures/basic/pages/client.vue b/test/fixtures/basic/pages/client.vue
index 4121f237be7..0928603e7db 100644
--- a/test/fixtures/basic/pages/client.vue
+++ b/test/fixtures/basic/pages/client.vue
@@ -52,6 +52,11 @@ onBeforeUnmount(() => import('~/components/BreaksServer.client'))
             This should be rendered client-side
           </div>
         </template>
+        <template #fallback>
+          <FunctionalComponent />
+          <!-- this should be treeshaken on .client -->
+          <BreaksServer />
+        </template>
       </LazyClientOnlyScript>
       <div class="blue">
         i'm blue

From 9ee2e49e9d9701cd70514963e1505458b886d8d6 Mon Sep 17 00:00:00 2001
From: Julien Huang <63512348+huang-julien@users.noreply.github.com>
Date: Tue, 15 Nov 2022 23:26:07 +0100
Subject: [PATCH 20/34] Apply suggestions from code review

Co-authored-by: Daniel Roe <daniel@roe.dev>
---
 packages/nuxt/src/components/tree-shake.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index a52f28dd6d3..8f9b312e648 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -10,7 +10,7 @@ import { resolve } from 'pathe'
 import { distDir } from '../dirs'
 
 interface TreeShakeTemplatePluginOptions {
-  sourcemap?: boolean,
+  sourcemap?: boolean
   getComponents (): Component[]
 }
 
@@ -20,6 +20,7 @@ const SSR_RENDER_RE = /ssrRenderComponent/
 const PLACEHOLDER_EXACT_RE = /^(fallback|placeholder)$/
 
 export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplatePluginOptions) => {
+  const regexpMap = new WeakMap<Component[], [RegExp, RegExp, string[]]>()
   return {
     name: 'nuxt:tree-shake-template',
     enforce: 'post',
@@ -28,8 +29,6 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
       return pathname.endsWith('.vue')
     },
     transform (code, id) {
-      const regexpMap = new WeakMap<Component[], [RegExp, RegExp, string[]]>()
-
       const components = options.getComponents()
 
       if (!regexpMap.has(components)) {

From 1a86be5fbcf9eed7d9184b19b1832ce89334b371 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Wed, 16 Nov 2022 21:41:35 +0100
Subject: [PATCH 21/34] fix(nuxt): treeshake call expressions with
 ssrRenderComponent

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

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index a52f28dd6d3..ff295506d48 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -38,7 +38,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
           .flatMap(c => [c.pascalName, c.kebabName.replaceAll('-', '_')])
           .concat(['ClientOnly', 'client_only'])
 
-        regexpMap.set(components, [new RegExp(`(${clientOnlyComponents.join('|')})`), new RegExp(`^(${clientOnlyComponents.map(c => `^(?:_component_)?(?:Lazy|lazy_ )?${c}`).join('|')})$`), clientOnlyComponents])
+        regexpMap.set(components, [new RegExp(`(${clientOnlyComponents.join('|')})`), new RegExp(`^(${clientOnlyComponents.map(c => `(?:(?:_unref\\()?(?:_component_)?(?:Lazy|lazy_)?${c}\\)?)`).join('|')})$`), clientOnlyComponents])
       }
 
       const s = new MagicString(code)
@@ -58,10 +58,10 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
             SSR_RENDER_RE.test(node.callee.name)
           ) {
             const [componentCall, _, children] = node.arguments
-            if (componentCall.type === 'Identifier' || componentCall.type === 'MemberExpression') {
-              const componentName = componentCall.type === 'Identifier' ? componentCall.name : (componentCall.property as Literal).value as string
+            if (componentCall.type === 'Identifier' || componentCall.type === 'MemberExpression' || componentCall.type === 'CallExpression') {
+              const componentName = getComponentName(node)
               const isClientComponent = COMPONENTS_IDENTIFIERS_RE.test(componentName)
-              const isClientOnlyComponent = /^(?:_component_)?(?:Lazy|lazy_)?(?:client_only|ClientOnly)$/.test(componentName)
+              const isClientOnlyComponent = /^(?:_unref\()?(?:_component_)?(?:Lazy|lazy_)?(?:client_only|ClientOnly\)?)$/.test(componentName)
               if (isClientComponent && children?.type === 'ObjectExpression') {
                 const slotsToRemove = isClientOnlyComponent ? children.properties.filter(prop => prop.type === 'Property' && prop.key.type === 'Identifier' && !PLACEHOLDER_EXACT_RE.test(prop.key.name)) as AcornNode<Property>[] : children.properties as AcornNode<Property>[]
 
@@ -78,7 +78,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
 
                         if (componentNode.type === 'CallExpression') {
                           const identifier = componentNode.arguments[0] as Identifier
-                          if (!isRenderedInCode(currentCode, identifier.name)) { componentsSet.add(identifier.name) }
+                          if (!isRenderedInCode(currentCode, removedCode.slice((componentNode as AcornNode<CallExpression>).start, (componentNode as AcornNode<CallExpression>).end))) { componentsSet.add(identifier.name) }
                         } else if (componentNode.type === 'Identifier' && !isRenderedInCode(currentCode, componentNode.name)) {
                           componentsSet.add(componentNode.name)
                         } else if (componentNode.type === 'MemberExpression') {
@@ -176,3 +176,19 @@ function findImportDeclaration (declarations: AcornNode<ImportDeclaration>[], im
 function isRenderedInCode (code: string, name: string) {
   return new RegExp(`ssrRenderComponent\\(${escapeStringRegexp(name)}`).test(code)
 }
+
+/**
+ * retrieve the component identifier being used on ssrRender callExpression
+ *
+ * @param {CallExpression} ssrRenderNode - ssrRender callExpression
+ */
+function getComponentName (ssrRenderNode: AcornNode<CallExpression>): string {
+  const componentCall = ssrRenderNode.arguments[0] as Identifier | MemberExpression | CallExpression
+
+  if (componentCall.type === 'Identifier') {
+    return componentCall.name
+  } else if (componentCall.type === 'MemberExpression') {
+    return (componentCall.property as Literal).value as string
+  }
+  return (componentCall.arguments[0] as Identifier).name
+}

From cac7cc27b7ce9da96867e7675686f27395cead7f Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Wed, 16 Nov 2022 22:01:20 +0100
Subject: [PATCH 22/34] chore: fix lock

---
 pnpm-lock.yaml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b58508f7fa..0a50045a026 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -444,7 +444,6 @@ importers:
       scule: ^1.0.0
       strip-literal: ^1.0.0
       ufo: ^1.0.0
-      ultrahtml: ^1.0.0
       unbuild: ^1.0.0
       unctx: ^2.1.0
       unenv: ^1.0.0

From b08125f5e569930f2d721ffa8fb28b581da310ce Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sun, 22 Jan 2023 16:53:17 +0100
Subject: [PATCH 23/34] test(nuxt): unit test treeshake client plugin

---
 .../components/client/WithClientOnlySetup.vue |  38 ++++++
 packages/nuxt/test/scan-components.test.ts    |  12 ++
 packages/nuxt/test/treeshake-client.test.ts   | 118 ++++++++++++++++++
 packages/nuxt/test/utils.ts                   |   3 +
 4 files changed, 171 insertions(+)
 create mode 100644 packages/nuxt/test/fixture/components/client/WithClientOnlySetup.vue
 create mode 100644 packages/nuxt/test/treeshake-client.test.ts
 create mode 100644 packages/nuxt/test/utils.ts

diff --git a/packages/nuxt/test/fixture/components/client/WithClientOnlySetup.vue b/packages/nuxt/test/fixture/components/client/WithClientOnlySetup.vue
new file mode 100644
index 00000000000..497fa4ad2e1
--- /dev/null
+++ b/packages/nuxt/test/fixture/components/client/WithClientOnlySetup.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <div>
+      <Glob />
+    </div>
+    {{ hello }}
+    <div class="not-client">
+      Hello
+    </div>
+    <ClientOnly>
+      <HelloWorld />
+      <Glob />
+      <SomeGlob />
+    </ClientOnly>
+    <ClientOnly>
+      <div class="should-be-treeshaken">
+        this should not be visible
+      </div>
+      <ClientImport />
+      <Treeshaken />
+      <ResolvedImport />
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup>
+import { Treeshaken } from 'somepath'
+import HelloWorld from '../HelloWorld.vue'
+import { Glob, ClientImport } from '#components'
+
+const hello = 'world'
+</script>
+
+<style scoped>
+    .not-client {
+        color: "red";
+    }
+</style>
diff --git a/packages/nuxt/test/scan-components.test.ts b/packages/nuxt/test/scan-components.test.ts
index 99ce7447b6e..d9fa5fbdf6f 100644
--- a/packages/nuxt/test/scan-components.test.ts
+++ b/packages/nuxt/test/scan-components.test.ts
@@ -147,6 +147,18 @@ const expectedComponents = [
     prefetch: false,
     preload: false
   },
+  {
+    chunkName: 'components/client-with-client-only-setup',
+    export: 'default',
+    global: undefined,
+    island: undefined,
+    kebabName: 'client-with-client-only-setup',
+    mode: 'all',
+    pascalName: 'ClientWithClientOnlySetup',
+    prefetch: false,
+    preload: false,
+    shortPath: 'components/client/WithClientOnlySetup.vue'
+  },
   {
     mode: 'server',
     pascalName: 'ParentFolder',
diff --git a/packages/nuxt/test/treeshake-client.test.ts b/packages/nuxt/test/treeshake-client.test.ts
new file mode 100644
index 00000000000..0ed73eec1fe
--- /dev/null
+++ b/packages/nuxt/test/treeshake-client.test.ts
@@ -0,0 +1,118 @@
+import { resolve } from 'node:path'
+import { readFileSync } from 'node:fs'
+import { describe, it, expect } from 'vitest'
+import * as VueCompilerSFC from 'vue/compiler-sfc'
+import type { Plugin } from 'vite'
+import { Parser } from 'acorn'
+import type { Options } from '@vitejs/plugin-vue'
+import _vuePlugin from '@vitejs/plugin-vue'
+import { TreeShakeTemplatePlugin } from '../src/components/tree-shake'
+import { fixtureDir } from './utils'
+
+function vuePlugin (options: Options) {
+  return {
+    ..._vuePlugin(options),
+    handleHotUpdate () {},
+    configureDevServer () {}
+  }
+}
+
+const WithClientOnly = readFileSync(resolve(fixtureDir, './components/client/WithClientOnlySetup.vue')).toString()
+
+const treeshakeTemplatePlugin = TreeShakeTemplatePlugin.raw({ sourcemap: false, getComponents () { return [] } }, { framework: 'rollup' }) as Plugin
+
+const treeshake = async (source: string): Promise<string> => {
+  const result = await (treeshakeTemplatePlugin.transform! as Function).call({
+    parse: (code: string, opts: any = {}) => Parser.parse(code, {
+      sourceType: 'module',
+      ecmaVersion: 'latest',
+      locations: true,
+      ...opts
+    })
+  }, source)
+  return typeof result === 'string' ? result : result?.code
+}
+
+async function SFCCompile (name: string, source: string, options: Options, ssr = false): Promise<string> {
+  const result = await (vuePlugin({
+    compiler: VueCompilerSFC,
+    ...options
+  }).transform! as Function).call({
+    parse: (code: string, opts: any = {}) => Parser.parse(code, {
+      sourceType: 'module',
+      ecmaVersion: 'latest',
+      locations: true,
+      ...opts
+    })
+  }, source, name, {
+    ssr
+  })
+
+  return typeof result === 'string' ? result : result?.code
+}
+
+const stateToTest: {name: string, options: Partial<Options & {devServer: {config: {server: any}}}> }[] = [
+  {
+    name: 'prod',
+    options: {
+      isProduction: true
+    }
+  },
+  {
+    name: 'dev not inlined',
+    options: {
+      isProduction: false,
+      devServer: {
+        config: {
+          // trigger dev behavior
+          server: false
+        }
+      }
+    }
+  }
+]
+
+describe('treeshake client only in ssr', () => {
+  for (const [index, state] of stateToTest.entries()) {
+    it(`should treeshake ClientOnly correctly in ${state.name}`, async () => {
+      // add index to avoid using vite vue plugin cache
+      const clientResult = await SFCCompile(`SomeComponent${index}.vue`, WithClientOnly, state.options)
+      const ssrResult = await SFCCompile(`SomeComponent${index}.vue`, WithClientOnly, state.options, true)
+
+      const treeshaked = await treeshake(ssrResult)
+      const [_, scopeId] = clientResult.match(/_pushScopeId\("(.*)"\)/)!
+
+      // ensure the id is correctly passed between server and client
+      // const id = result.find()
+      expect(clientResult).toContain(`pushScopeId("${scopeId}")`)
+      expect(treeshaked).toContain(`<div ${scopeId}>`)
+
+      expect(clientResult).toContain('should-be-treeshaken')
+      expect(treeshaked).not.toContain('should-be-treeshaken')
+
+      expect(treeshaked).not.toContain("import HelloWorld from '../HelloWorld.vue'")
+      expect(clientResult).toContain("import HelloWorld from '../HelloWorld.vue'")
+
+      expect(treeshaked).not.toContain("import { Treeshaken } from 'somepath'")
+      expect(clientResult).toContain("import { Treeshaken } from 'somepath'")
+
+      // remove resolved import
+      expect(treeshaked).not.toContain('const _component_ResolvedImport =')
+      expect(clientResult).toContain('const _component_ResolvedImport =')
+
+      // expect import of ClientImport to be treeshaken but not Glob since it is also used outside <ClientOnly>
+      expect(treeshaked).not.toContain('ClientImport')
+      expect(treeshaked).toContain('import { Glob, } from \'#components\'')
+
+      if (state.options.isProduction === false) {
+        // treeshake at inlined
+        expect(treeshaked).not.toContain('ssrRenderComponent($setup["HelloWorld"]')
+        expect(treeshaked).toContain('ssrRenderComponent($setup["Glob"]')
+      } else {
+        // treeshake unref
+        expect(treeshaked).not.toContain('ssrRenderComponent(_unref(HelloWorld')
+        expect(treeshaked).toContain('ssrRenderComponent(_unref(Glob')
+      }
+    })
+  }
+})
diff --git a/packages/nuxt/test/utils.ts b/packages/nuxt/test/utils.ts
new file mode 100644
index 00000000000..8d791a8b513
--- /dev/null
+++ b/packages/nuxt/test/utils.ts
@@ -0,0 +1,3 @@
+import { resolve } from 'node:path'
+
+export const fixtureDir = resolve(__dirname, 'fixture')

From 0fe07f60f44a7e0bcc9931c73062a73923e2a1e4 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sun, 22 Jan 2023 16:55:41 +0100
Subject: [PATCH 24/34] fix(nuxt): remove whole line of component declaration
 instead of removing to ';'

---
 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 029ed34f9b2..9797ac26dd0 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -112,7 +112,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
                   for (const componentName of componentsToRemove) {
                     let removed = false
                     // remove const _component_ = resolveComponent...
-                    const VAR_RE = new RegExp(`(?:const|let|var) ${componentName} = ([^;]*);`)
+                    const VAR_RE = new RegExp(`(?:const|let|var) ${componentName} = ([^;\\n]*);?`)
                     s.replace(VAR_RE, () => {
                       removed = true
                       return ''

From 521f883b38d25a49c01bd2799896e21fb48376e7 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sun, 22 Jan 2023 17:29:04 +0100
Subject: [PATCH 25/34] refactor(nuxt): move some logic into a function

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

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 9797ac26dd0..874003d87d8 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -2,7 +2,7 @@ import { pathToFileURL } from 'node:url'
 import { parseURL } from 'ufo'
 import MagicString from 'magic-string'
 import { walk } from 'estree-walker'
-import type { CallExpression, Property, Identifier, ImportDeclaration, MemberExpression, Literal, ReturnStatement, VariableDeclaration, ObjectExpression } from 'estree'
+import type { CallExpression, Property, Identifier, ImportDeclaration, MemberExpression, Literal, ReturnStatement, VariableDeclaration, ObjectExpression, Node } from 'estree'
 import { createUnplugin } from 'unplugin'
 import escapeStringRegexp from 'escape-string-regexp'
 import type { Component } from '@nuxt/schema'
@@ -46,7 +46,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
       const [COMPONENTS_RE, COMPONENTS_IDENTIFIERS_RE] = regexpMap.get(components)!
       if (!COMPONENTS_RE.test(code)) { return }
 
-      walk(this.parse(code, { sourceType: 'module', ecmaVersion: 'latest' }), {
+      walk(this.parse(code, { sourceType: 'module', ecmaVersion: 'latest' }) as Node, {
         enter: (_node) => {
           const node = _node as AcornNode<CallExpression | ImportDeclaration>
           if (node.type === 'ImportDeclaration') {
@@ -69,7 +69,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
                   s.remove(slot.start, slot.end + 1)
                   const removedCode = `({${code.slice(slot.start, slot.end + 1)}})`
                   const currentCode = s.toString()
-                  walk(this.parse(removedCode, { sourceType: 'module', ecmaVersion: 'latest' }), {
+                  walk(this.parse(removedCode, { sourceType: 'module', ecmaVersion: 'latest' }) as Node, {
                     enter: (_node) => {
                       const node = _node as AcornNode<CallExpression>
                       if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && SSR_RENDER_RE.test(node.callee.name)) {
@@ -86,21 +86,9 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
                           if (!isRenderedInCode(currentCode, removedCode.slice(start, end))) {
                             componentsSet.add(((componentNode as MemberExpression).property as Literal).value as string)
                             // remove the component from the return statement of `setup()`
-                            walk(this.parse(code, { sourceType: 'module', ecmaVersion: 'latest' }), {
-                              enter: (_node) => {
-                                const node = _node as Property
-                                if (node.type === 'Property' && node.key.type === 'Identifier' && node.key.name === 'setup' && node.value.type === 'FunctionExpression') {
-                                  const returnStatement = node.value.body.body.find(n => n.type === 'ReturnStatement') as ReturnStatement | undefined
-                                  if (returnStatement?.argument?.type === 'Identifier') {
-                                    const returnIdentifier = returnStatement.argument.name
-                                    const returnedDeclaration = node.value.body.body.find(n => n.type === 'VariableDeclaration' && (n.declarations[0].id as Identifier).name === returnIdentifier) as AcornNode<VariableDeclaration>
-                                    const componentProperty = (returnedDeclaration?.declarations[0].init as ObjectExpression)?.properties.find(p => ((p as Property).key as Identifier).name === ((componentNode as MemberExpression).property as Literal).value) as AcornNode<Property>
-                                    if (componentProperty) { s.remove(componentProperty.start, componentProperty.end + 1) }
-                                  } else if (returnStatement?.argument?.type === 'ObjectExpression') {
-                                    const componentProperty = returnStatement.argument?.properties.find(p => ((p as Property).key as Identifier).name === ((componentNode as MemberExpression).property as Literal).value) as AcornNode<Property>
-                                    if (componentProperty) { s.remove(componentProperty.start, componentProperty.end + 1) }
-                                  }
-                                }
+                            walk(this.parse(code, { sourceType: 'module', ecmaVersion: 'latest' }) as Node, {
+                              enter: (node) => {
+                                removeFromSetupReturnStatement(s, node as Property, ((componentNode as MemberExpression).property as Literal).value as string)
                               }
                             })
                           }
@@ -191,3 +179,21 @@ function getComponentName (ssrRenderNode: AcornNode<CallExpression>): string {
   }
   return (componentCall.arguments[0] as Identifier).name
 }
+
+/**
+ * remove a key from the return statement of the setup function
+ */
+function removeFromSetupReturnStatement (s: MagicString, node: Property, name: string) {
+  if (node.type === 'Property' && node.key.type === 'Identifier' && node.key.name === 'setup' && node.value.type === 'FunctionExpression') {
+    const returnStatement = node.value.body.body.find(n => n.type === 'ReturnStatement') as ReturnStatement | undefined
+    if (returnStatement?.argument?.type === 'Identifier') {
+      const returnIdentifier = returnStatement.argument.name
+      const returnedDeclaration = node.value.body.body.find(n => n.type === 'VariableDeclaration' && (n.declarations[0].id as Identifier).name === returnIdentifier) as AcornNode<VariableDeclaration>
+      const componentProperty = (returnedDeclaration?.declarations[0].init as ObjectExpression)?.properties.find(p => ((p as Property).key as Identifier).name === name) as AcornNode<Property>
+      if (componentProperty) { s.remove(componentProperty.start, componentProperty.end + 1) }
+    } else if (returnStatement?.argument?.type === 'ObjectExpression') {
+      const componentProperty = returnStatement.argument?.properties.find(p => ((p as Property).key as Identifier).name === name) as AcornNode<Property>
+      if (componentProperty) { s.remove(componentProperty.start, componentProperty.end + 1) }
+    }
+  }
+}

From c40c6492041d5459eeca9214e5e4396251832325 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sun, 22 Jan 2023 17:30:50 +0100
Subject: [PATCH 26/34] chore: remove unecessary comment

---
 packages/nuxt/test/treeshake-client.test.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nuxt/test/treeshake-client.test.ts b/packages/nuxt/test/treeshake-client.test.ts
index 0ed73eec1fe..fa2955a11c8 100644
--- a/packages/nuxt/test/treeshake-client.test.ts
+++ b/packages/nuxt/test/treeshake-client.test.ts
@@ -83,7 +83,6 @@ describe('treeshake client only in ssr', () => {
       const [_, scopeId] = clientResult.match(/_pushScopeId\("(.*)"\)/)!
 
       // ensure the id is correctly passed between server and client
-      // const id = result.find()
       expect(clientResult).toContain(`pushScopeId("${scopeId}")`)
       expect(treeshaked).toContain(`<div ${scopeId}>`)
 
@@ -105,7 +104,7 @@ describe('treeshake client only in ssr', () => {
       expect(treeshaked).toContain('import { Glob, } from \'#components\'')
 
       if (state.options.isProduction === false) {
-        // treeshake at inlined
+        // treeshake at inlined template
         expect(treeshaked).not.toContain('ssrRenderComponent($setup["HelloWorld"]')
         expect(treeshaked).toContain('ssrRenderComponent($setup["Glob"]')
       } else {

From 646e69fdd47471cdb59d467fea6576b3ce52abcc Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sun, 22 Jan 2023 17:54:04 +0100
Subject: [PATCH 27/34] test(nuxt): add snapshots for treeshake client only

---
 .../__snapshots__/treeshake-client.test.ts.snap  | Bin 0 -> 3709 bytes
 packages/nuxt/test/treeshake-client.test.ts      |   1 +
 2 files changed, 1 insertion(+)
 create mode 100644 packages/nuxt/test/__snapshots__/treeshake-client.test.ts.snap

diff --git a/packages/nuxt/test/__snapshots__/treeshake-client.test.ts.snap b/packages/nuxt/test/__snapshots__/treeshake-client.test.ts.snap
new file mode 100644
index 0000000000000000000000000000000000000000..221fdbacb4772c8adaa07992db88097cd9b819a6
GIT binary patch
literal 3709
zcmeHKZExE)5Z-6~ibEPiQXt!L2Xt*Zr|5!W3sAI0y!DH1(27LI+GtWBDaAqR|K201
zH@~3ifPC2t;8^DIbobox?jB|^fX|txO2e4PxmpSh<<Rr!Iu}x_$y`fH)iVBzLc%i2
zH3-h`A>*KwgbTnI3YJ2vb!oLe8l^-?NfYhVQ(6K?;~8ferzs5QGZ?|#JMz42WqiQ{
z{K~{l1RGdLu>${DB5;GFPvv`_mk5p^iCQFN6{G(VJa_<v@OVYf!5@niy{umt`VsCa
zs*5}zB$pyr5!yFFDGHm=zUo#%_`0^eq>Kr)>)#2<QuJB5BoYlt1WkzX3RW)yfLp39
z<^T<XQ?hH=U=-fRn?Eu7eo7Y@@F&DTrM^cvt+fbzLNYZ@WR~l(LF-$XyjW2g-!P18
z5i><2C}UROO3T8)_bOjqTi(XQPm@YXm0)F?5r`F_=WSsGcbQ&Z>b2dien*f<8f*Ib
zgGi~}=&q~7nNE+&g5r1U5$oZa@|4Qv6zt3U;>eVaQ+=zoRNHD+WL2)XrZN`{vD7ME
z(H4?{qOzp2CoKXh4Ki<0@I+^VyP|2F1|-qz2uNP2rFq2olExpg0TaP-RW8T2d~lt{
zI>v{{jV<MBr>cymLP@9WNBfBm5KpUtixA7xd`tx!9Km${bDEXY;|J2<w3!GTtZ)Mc
zMz8EWAHEvCc=;;1F#3DK>D*X$CR<C*i3BdF2_i7PhL2eUykM;UuCfufRuI?#JzYSB
zt#bsGwZ82KL}(EuELLiSma*A;Ze-wM4=DU*o6XsN3^h5F=Nht^0ydcdgHss){`Qym
z@8EQRQtZP0cn)RdDec$!GBIIGRt<?M*d9=QY@avyccSleI#T+c(UT0jXFWPQQ3=k9
zbX1@835)q{KT!&eGzK4_P;@-Lz7*IcYi%2ZlsL%Aw!9vu=*q9>nHizBxN({_^R#az
z-p(2|f~p^|X+juX*wN|AA1k$XkA@C-4@?=o4qCnbN~8s&3ch@SL*fx|dIvZOgD?#H
zahjUO*-sn_jpcd@w(-2FTHOx*F79(EFu7(Br|py^j^s?p73KVpv*I@6J<Qg*+w5U+
z<KXryLIgAt7ffTRJtO4PAJ^{)IURHi1x*4Ym`wbpnf=IaH0xP3!P#$5`YQD!jA*C7
zQQ~wK8KYL=U>;_(@W`7Zg*muSNZ6RZ4of%0QgBHZw%qKm2v1>~RP5fa@L$d}owj_k
zJItBA!(fdld1dcRjxyaPVDEZkXsPONJC3{8n5s{{$$LAkeQ+Y0aj|=_PsnU9ld~Ux
zN?zP-F<T>ilp}081}6PsO%0CO_Bo)Q(T6zgZ;)Ao?LR_h_J-M%`tD>t`wmL0Gxk5F
Zb^ckgiTmeJ+CkQ;5B3q(sza?=>nmFr`A7f&

literal 0
HcmV?d00001

diff --git a/packages/nuxt/test/treeshake-client.test.ts b/packages/nuxt/test/treeshake-client.test.ts
index fa2955a11c8..76f2aca6029 100644
--- a/packages/nuxt/test/treeshake-client.test.ts
+++ b/packages/nuxt/test/treeshake-client.test.ts
@@ -112,6 +112,7 @@ describe('treeshake client only in ssr', () => {
         expect(treeshaked).not.toContain('ssrRenderComponent(_unref(HelloWorld')
         expect(treeshaked).toContain('ssrRenderComponent(_unref(Glob')
       }
+      expect(treeshaked).toMatchSnapshot()
     })
   }
 })

From 939bc3d765a7faee0db7d227c3e599c1f0072cc4 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sun, 22 Jan 2023 20:37:13 +0100
Subject: [PATCH 28/34] test: fix snapshot

---
 packages/nuxt/test/treeshake-client.test.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/nuxt/test/treeshake-client.test.ts b/packages/nuxt/test/treeshake-client.test.ts
index 76f2aca6029..634f5ad11dd 100644
--- a/packages/nuxt/test/treeshake-client.test.ts
+++ b/packages/nuxt/test/treeshake-client.test.ts
@@ -1,6 +1,7 @@
-import { resolve } from 'node:path'
+
 import { readFileSync } from 'node:fs'
-import { describe, it, expect } from 'vitest'
+import path from 'node:path'
+import { describe, it, expect, vi } from 'vitest'
 import * as VueCompilerSFC from 'vue/compiler-sfc'
 import type { Plugin } from 'vite'
 import { Parser } from 'acorn'
@@ -17,7 +18,7 @@ function vuePlugin (options: Options) {
   }
 }
 
-const WithClientOnly = readFileSync(resolve(fixtureDir, './components/client/WithClientOnlySetup.vue')).toString()
+const WithClientOnly = readFileSync(path.resolve(fixtureDir, './components/client/WithClientOnlySetup.vue')).toString()
 
 const treeshakeTemplatePlugin = TreeShakeTemplatePlugin.raw({ sourcemap: false, getComponents () { return [] } }, { framework: 'rollup' }) as Plugin
 
@@ -73,10 +74,12 @@ const stateToTest: {name: string, options: Partial<Options & {devServer: {config
 ]
 
 describe('treeshake client only in ssr', () => {
+  vi.spyOn(process, 'cwd').mockImplementation(() => '')
   for (const [index, state] of stateToTest.entries()) {
     it(`should treeshake ClientOnly correctly in ${state.name}`, async () => {
       // add index to avoid using vite vue plugin cache
       const clientResult = await SFCCompile(`SomeComponent${index}.vue`, WithClientOnly, state.options)
+
       const ssrResult = await SFCCompile(`SomeComponent${index}.vue`, WithClientOnly, state.options, true)
 
       const treeshaked = await treeshake(ssrResult)

From 139c615f57ef7a966c4e6891b199021236ab4fe3 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sun, 22 Jan 2023 23:57:59 +0100
Subject: [PATCH 29/34] fix: update snapshot

---
 .../treeshake-client.test.ts.snap             | Bin 3709 -> 3707 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/packages/nuxt/test/__snapshots__/treeshake-client.test.ts.snap b/packages/nuxt/test/__snapshots__/treeshake-client.test.ts.snap
index 221fdbacb4772c8adaa07992db88097cd9b819a6..9c65912c5ecf162e2a15d8df9ac5442998c20824 100644
GIT binary patch
delta 182
zcmew>^IK-a24>kLOUq<aqm&doo0QBlg_OjSMBOr7nBe39ZpF#(m>W1?0-MWNR2bpB
z#icxqlNYnSg$qpf<CCAfo{eMke)cm=GUi5>#)+0mC?;D#1%W0jO+Lw0%nsw1vAme9
d&Ew1l;cqVCVPu?~$R{$ni+3+nY_cz(0RR?8IG_Lk

delta 191
zcmew@^H*lW24-0!LrX(53(I6Xo0QBlg_OjSMBOr7nBZi8ZpF#(m>W1?0-MWNR2bpB
z#U(t9e8Ks-sm}Si1^IcYc_oIE8+q4Fj%7E3tC{S>C%<_c`xPdcWCLUKWV0j`i!7jm
mK#P<npWrHHgYY*ya_ca{*u^}IjEupPOL#9rMJ9Xm82|vt063Na


From 392b4014684509f6095978f48968139b502374f1 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Mon, 23 Jan 2023 00:47:16 +0100
Subject: [PATCH 30/34] test: directly mock node:crypto

---
 .../treeshake-client.test.ts.snap             | Bin 3707 -> 3709 bytes
 packages/nuxt/test/treeshake-client.test.ts   |   6 ++++++
 vitest.config.ts                              |   5 ++++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/nuxt/test/__snapshots__/treeshake-client.test.ts.snap b/packages/nuxt/test/__snapshots__/treeshake-client.test.ts.snap
index 9c65912c5ecf162e2a15d8df9ac5442998c20824..2a2a5d47d022365a6608b2c8869a46eef21a1107 100644
GIT binary patch
delta 200
zcmew@^H*lW24>m(yj0zc#NrG)o0QBlg_OjSMBOr7nBZi8ZpF#(m>W1?0-MWNR2bpB
z#U(t9e8Ks-sm}Si1wbWvC5Dq5dDl&jWjBJWne4+Szj+(`WhR0)DNR1XRfN!2#`0pa
W7LOBL0Av|s@Z=KS3veNz+4=xn;70!d

delta 187
zcmew>^IK-a24>kLOUq<aqm&doo0QBlg_OjSMBOr7nBe39ZpF#(m>W1?0-MWNR2bpB
z#icxqlNYnSg$qpf<CCAfo{eMke)iK$vKHn>md1&eNhn6c1c62?O+Lw0!~qv5V|g)I
Xo5u+*05(05Ph@fz?;f}y&<1?~F}pf8

diff --git a/packages/nuxt/test/treeshake-client.test.ts b/packages/nuxt/test/treeshake-client.test.ts
index 634f5ad11dd..ec1416323a2 100644
--- a/packages/nuxt/test/treeshake-client.test.ts
+++ b/packages/nuxt/test/treeshake-client.test.ts
@@ -10,6 +10,12 @@ import _vuePlugin from '@vitejs/plugin-vue'
 import { TreeShakeTemplatePlugin } from '../src/components/tree-shake'
 import { fixtureDir } from './utils'
 
+vi.mock('node:crypto', () => ({
+  update: vi.fn().mockReturnThis(),
+  digest: vi.fn().mockReturnValue('one-hash-to-rule-them-all'),
+  createHash: vi.fn().mockReturnThis()
+}))
+
 function vuePlugin (options: Options) {
   return {
     ..._vuePlugin(options),
diff --git a/vitest.config.ts b/vitest.config.ts
index 88f9411f64f..2dd58a54516 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -13,6 +13,9 @@ export default defineConfig({
     tsconfigRaw: '{}'
   },
   test: {
-    testTimeout: isWindows ? 60000 : 10000
+    testTimeout: isWindows ? 60000 : 10000,
+    deps: {
+      inline: ['@vitejs/plugin-vue']
+    }
   }
 })

From 73da1fe6c96c6112396d9a620602f47dcabf1171 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Wed, 8 Feb 2023 00:41:38 +0100
Subject: [PATCH 31/34] test(nuxt): mock path relative due to os differences

---
 packages/nuxt/test/treeshake-client.test.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/nuxt/test/treeshake-client.test.ts b/packages/nuxt/test/treeshake-client.test.ts
index ec1416323a2..4dc7b73914c 100644
--- a/packages/nuxt/test/treeshake-client.test.ts
+++ b/packages/nuxt/test/treeshake-client.test.ts
@@ -1,4 +1,3 @@
-
 import { readFileSync } from 'node:fs'
 import path from 'node:path'
 import { describe, it, expect, vi } from 'vitest'
@@ -16,6 +15,14 @@ vi.mock('node:crypto', () => ({
   createHash: vi.fn().mockReturnThis()
 }))
 
+// mock due to differences of results between windows and linux
+vi.spyOn(path, 'relative').mockImplementation((from: string, to: string) => {
+  if(to.includes('SomeComponent')) {
+    return to
+  }
+  return path.resolve(from, to)
+})
+
 function vuePlugin (options: Options) {
   return {
     ..._vuePlugin(options),

From cbfe602731b51c412f91fa45809b584d0c44043d Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Wed, 8 Feb 2023 00:42:30 +0100
Subject: [PATCH 32/34] test: set correct mock

---
 packages/nuxt/test/treeshake-client.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt/test/treeshake-client.test.ts b/packages/nuxt/test/treeshake-client.test.ts
index 4dc7b73914c..b2a791f187a 100644
--- a/packages/nuxt/test/treeshake-client.test.ts
+++ b/packages/nuxt/test/treeshake-client.test.ts
@@ -20,7 +20,7 @@ vi.spyOn(path, 'relative').mockImplementation((from: string, to: string) => {
   if(to.includes('SomeComponent')) {
     return to
   }
-  return path.resolve(from, to)
+  return path.relative(from, to)
 })
 
 function vuePlugin (options: Options) {

From 7fc868187a085b500fd071a0c6acff9d0e9a7736 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Wed, 8 Feb 2023 00:47:14 +0100
Subject: [PATCH 33/34] test: fix max callstack

---
 packages/nuxt/test/treeshake-client.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt/test/treeshake-client.test.ts b/packages/nuxt/test/treeshake-client.test.ts
index b2a791f187a..25b6b9ea499 100644
--- a/packages/nuxt/test/treeshake-client.test.ts
+++ b/packages/nuxt/test/treeshake-client.test.ts
@@ -1,5 +1,5 @@
 import { readFileSync } from 'node:fs'
-import path from 'node:path'
+import path from 'pathe'
 import { describe, it, expect, vi } from 'vitest'
 import * as VueCompilerSFC from 'vue/compiler-sfc'
 import type { Plugin } from 'vite'

From e5271a79affaed4ef6d4f375ef4e42b2cd555164 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Wed, 8 Feb 2023 00:51:38 +0100
Subject: [PATCH 34/34] lint + fix

---
 packages/nuxt/test/treeshake-client.test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nuxt/test/treeshake-client.test.ts b/packages/nuxt/test/treeshake-client.test.ts
index 25b6b9ea499..e2e903e62cb 100644
--- a/packages/nuxt/test/treeshake-client.test.ts
+++ b/packages/nuxt/test/treeshake-client.test.ts
@@ -1,5 +1,5 @@
 import { readFileSync } from 'node:fs'
-import path from 'pathe'
+import path from 'node:path'
 import { describe, it, expect, vi } from 'vitest'
 import * as VueCompilerSFC from 'vue/compiler-sfc'
 import type { Plugin } from 'vite'
@@ -17,10 +17,10 @@ vi.mock('node:crypto', () => ({
 
 // mock due to differences of results between windows and linux
 vi.spyOn(path, 'relative').mockImplementation((from: string, to: string) => {
-  if(to.includes('SomeComponent')) {
+  if (to.includes('SomeComponent')) {
     return to
   }
-  return path.relative(from, to)
+  return path.resolve(from, to)
 })
 
 function vuePlugin (options: Options) {