fix(nuxt): use parser to treeshake <ClientOnly>

packages/nuxt/package.json

@@ -70,7 +70,6 @@
  "scule": "^1.0.0",
  "strip-literal": "^1.0.1",
  "ufo": "^1.0.1",
- "ultrahtml": "^1.2.0",
  "unctx": "^2.1.1",
  "unenv": "^1.1.0",
  "unhead": "^1.0.21",

packages/nuxt/src/components/module.ts

@@ -192,35 +192,35 @@ export default defineNuxtModule<ComponentsOptions>({
  const mode = isClient ? 'client' : 'server'
 
  config.plugins = config.plugins || []
- config.plugins.push(loaderPlugin.vite({
- sourcemap: nuxt.options.sourcemap[mode],
- getComponents,
- mode,
- experimentalComponentIslands: nuxt.options.experimental.componentIslands
- }))
  if (nuxt.options.experimental.treeshakeClientOnly && isServer) {
  config.plugins.push(TreeShakeTemplatePlugin.vite({
  sourcemap: nuxt.options.sourcemap[mode],
  getComponents
  }))
  }
+ config.plugins.push(loaderPlugin.vite({
+ sourcemap: nuxt.options.sourcemap[mode],
+ getComponents,
+ mode,
+ experimentalComponentIslands: nuxt.options.experimental.componentIslands
+ }))
  })
  nuxt.hook('webpack:config', (configs) => {
  configs.forEach((config) => {
  const mode = config.name === 'client' ? 'client' : 'server'
  config.plugins = config.plugins || []
- config.plugins.push(loaderPlugin.webpack({
- sourcemap: nuxt.options.sourcemap[mode],
- getComponents,
- mode,
- experimentalComponentIslands: nuxt.options.experimental.componentIslands
- }))
  if (nuxt.options.experimental.treeshakeClientOnly && mode === 'server') {
  config.plugins.push(TreeShakeTemplatePlugin.webpack({
  sourcemap: nuxt.options.sourcemap[mode],
  getComponents
  }))
  }
+ config.plugins.push(loaderPlugin.webpack({
+ sourcemap: nuxt.options.sourcemap[mode],
+ getComponents,
+ mode,
+ experimentalComponentIslands: nuxt.options.experimental.componentIslands
+ }))
  })
  })
  }

packages/nuxt/src/components/tree-shake.ts

@@ -1,9 +1,10 @@
 import { pathToFileURL } from 'node:url'
 import { parseURL } from 'ufo'
 import MagicString from 'magic-string'
-import type { Node } from 'ultrahtml'
-import { parse, walk, ELEMENT_NODE } from 'ultrahtml'
+import { walk } from 'estree-walker'
+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'
 import { resolve } from 'pathe'
 import { distDir } from '../dirs'
@@ -13,57 +14,115 @@ interface TreeShakeTemplatePluginOptions {
  getComponents (): Component[]
 }
 
-const PLACEHOLDER_RE = /^(v-slot|#)(fallback|placeholder)/
+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) => {
- const regexpMap = new WeakMap<Component[], [RegExp, string[]]>()
+ const regexpMap = new WeakMap<Component[], [RegExp, 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 }
-
+ transform (code, id) {
  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 && other.filePath !== resolve(distDir, 'app/components/server-placeholder')))
- .flatMap(c => [c.pascalName, c.kebabName])
- .concat(['ClientOnly', 'client-only'])
- const tags = clientOnlyComponents
- .map(component => `<(${component})[^>]*>[\\s\\S]*?<\\/(${component})>`)
+ .flatMap(c => [c.pascalName, c.kebabName.replaceAll('-', '_')])
+ .concat(['ClientOnly', 'client_only'])
 
- regexpMap.set(components, [new RegExp(`(${tags.join('|')})`, 'g'), clientOnlyComponents])
+ regexpMap.set(components, [new RegExp(`(${clientOnlyComponents.join('|')})`), new RegExp(`^(${clientOnlyComponents.map(c => `(?:(?:_unref\\()?(?:_component_)?(?:Lazy|lazy_)?${c}\\)?)`).join('|')})$`), clientOnlyComponents])
  }
 
- const [COMPONENTS_RE, clientOnlyComponents] = regexpMap.get(components)!
+ const s = new MagicString(code)
+ const importDeclarations: AcornNode<ImportDeclaration>[] = []
+
+ const [COMPONENTS_RE, COMPONENTS_IDENTIFIERS_RE] = regexpMap.get(components)!
  if (!COMPONENTS_RE.test(code)) { return }
 
- const s = new MagicString(code)
+ walk(this.parse(code, { sourceType: 'module', ecmaVersion: 'latest' }) as Node, {
+ 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 [componentCall, _, children] = node.arguments
+ if (componentCall.type === 'Identifier' || componentCall.type === 'MemberExpression' || componentCall.type === 'CallExpression') {
+ const componentName = getComponentName(node)
+ const isClientComponent = COMPONENTS_IDENTIFIERS_RE.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>[]
 
- const ast = parse(template[0])
- await walk(ast, (node) => {
- if (node.type !== ELEMENT_NODE || !clientOnlyComponents.includes(node.name) || !node.children?.length) {
- return
- }
+ 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 currentCode = s.toString()
+ 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)) {
+ const componentNode = node.arguments[0]
+
+ if (componentNode.type === 'CallExpression') {
+ const identifier = componentNode.arguments[0] as Identifier
+ 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') {
+ // expect componentNode to be a memberExpression (mostly used in dev with $setup[])
+ const { start, end } = componentNode as AcornNode<MemberExpression>
+ 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' }) as Node, {
+ enter: (node) => {
+ removeFromSetupReturnStatement(s, node as Property, ((componentNode as MemberExpression).property as Literal).value as string)
+ }
+ })
+ }
+ }
+ }
+ }
+ })
+ const componentsToRemove = [...componentsSet]
+ for (const componentName of componentsToRemove) {
+ let removed = false
+ // remove const _component_ = resolveComponent...
+ const VAR_RE = new RegExp(`(?:const|let|var) ${componentName} = ([^;\\n]*);?`)
+ 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
 
- const fallback = node.children.find(
- (n: Node) => n.name === 'template' &&
- Object.entries(n.attributes as Record<string, string>)?.flat().some(attr => PLACEHOLDER_RE.test(attr))
- )
-
- try {
- // Replace node content
- const text = fallback ? code.slice(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 + 1) }
+ } else {
+ s.remove(declaration.start, declaration.end)
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
  }
  })
 
@@ -78,3 +137,63 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
  }
  }
 })
+
+/**
+ * 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
+ */
+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
+ })
+
+ 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\\(${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
+}
+
+/**
+ * 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) }
+ }
+ }
+}

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>

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',