fix(nuxt): get fallback for <DevOnly> from parsed html

docs/2.guide/2.directory-structure/1.components.md

@@ -338,6 +338,7 @@ The content will not be included in production builds and tree-shaken.
       <LazyDebugBar />
 
       <!-- if you ever require to have a replacement during production -->
+      <!-- be sure to test these using `nuxt preview` -->
       <template #fallback>
         <div><!-- empty div for flex.justify-between --></div>
       </template>

packages/nuxt/package.json

@@ -90,6 +90,7 @@
     "scule": "^1.0.0",
     "strip-literal": "^1.0.1",
     "ufo": "^1.1.2",
+    "ultrahtml": "^1.2.0",
     "unctx": "^2.3.0",
     "unenv": "^1.4.1",
     "unimport": "^3.0.6",

packages/nuxt/src/core/plugins/dev-only.ts

@@ -3,13 +3,14 @@ import { stripLiteral } from 'strip-literal'
 import { parseQuery, parseURL } from 'ufo'
 import MagicString from 'magic-string'
 import { createUnplugin } from 'unplugin'
+import { type Node, parse } from 'ultrahtml'
 
 interface DevOnlyPluginOptions {
   sourcemap?: boolean
 }
 
 export const DevOnlyPlugin = createUnplugin((options: DevOnlyPluginOptions) => {
-  const DEVONLY_COMP_RE = /<(?:dev-only|DevOnly)>[^<]*(?:<template\s+#fallback>(?<fallback>[\s\S]*?)<\/template>)?[\s\S]*?<\/(?:dev-only|DevOnly)>/g
+  const DEVONLY_COMP_RE = /<(?:dev-only|DevOnly)>[\s\S]*?<\/(?:dev-only|DevOnly)>/g
 
   return {
     name: 'nuxt:server-devonly:transform',
@@ -29,7 +30,11 @@ export const DevOnlyPlugin = createUnplugin((options: DevOnlyPluginOptions) => {
       const s = new MagicString(code)
       const strippedCode = stripLiteral(code)
       for (const match of strippedCode.matchAll(DEVONLY_COMP_RE) || []) {
-        s.overwrite(match.index!, match.index! + match[0].length, match.groups?.fallback || '')
+        const ast: Node = parse(match[0]).children[0]
+        const fallback: Node | undefined = ast.children?.find((n: Node) => n.name === 'template' && Object.values(n.attributes).includes('#fallback'))
+        const replacement = fallback ? match[0].slice(fallback.loc[0].end, fallback.loc[fallback.loc.length - 1].start) : ''
+
+        s.overwrite(match.index!, match.index! + match[0].length, replacement)
       }
 
       if (s.hasChanged()) {