fix: skip hydration components transformation (#164)

Author: huang-julien

src/dirs.ts

@@ -0,0 +1,4 @@
+import { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+export const distDir = dirname(fileURLToPath(import.meta.url))

src/plugins/hydration.ts

@@ -1,12 +1,15 @@
 import { genImport } from 'knitwork'
 import MagicString from 'magic-string'
+import { resolve } from 'node:path'
 import { parseSync, type ImportDeclaration } from 'oxc-parser'
 import { createUnplugin } from 'unplugin'
+import { distDir } from '../dirs'
 
 const INCLUDE_VUE_RE = /\.vue$/
 const EXCLUDE_NODE_MODULES = /node_modules/
 const DEFINE_COMPONENT_RE = /defineComponent/
 const DEFINE_NUXT_COMPONENT_RE = /defineNuxtComponent/
+const skipPath = normalizePath(resolve(distDir, 'runtime/hydration/component.ts'))
 export const InjectHydrationPlugin = createUnplugin(() => {
   return [
     {
@@ -16,11 +19,12 @@ export const InjectHydrationPlugin = createUnplugin(() => {
         filter: {
           id: {
             include: /.(vue|ts|js|tsx|jsx)$/,
-            exclude: EXCLUDE_NODE_MODULES,
+            exclude: [skipPath, EXCLUDE_NODE_MODULES],
           },
           code: /defineNuxtComponent|defineComponent/,
         },
-        handler(code, id) {
+        async handler(code, id) {
+          console.log(id)
           const m = new MagicString(code)
           const { program } = parseSync(id, code)
           const imports = program.body.filter(node => node.type === 'ImportDeclaration')
@@ -77,7 +81,7 @@ export const InjectHydrationPlugin = createUnplugin(() => {
         filter: {
           id: {
             include: INCLUDE_VUE_RE,
-            exclude: EXCLUDE_NODE_MODULES,
+            exclude: [skipPath, EXCLUDE_NODE_MODULES],
           },
           code: /(?!defineComponent|defineNuxtComponent)/,
         },
@@ -123,3 +127,7 @@ function findImportSpecifier(importDecl: ImportDeclaration[], importedName: stri
     return specifier.type === 'ImportSpecifier' && specifier.imported.type === 'Identifier' && specifier.imported.name === importedName
   })
 }
+
+function normalizePath(path: string) {
+  return path.replace(/\\/g, '/')
+}

src/runtime/hydration/component.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { defineComponent as _defineComponent, type DefineComponent } from 'vue'
-import { defineNuxtComponent as _defineNuxtComponent } from 'nuxt/app'
+import { defineNuxtComponent as _defineNuxtComponent, defineComponent as _defineComponent } from '#imports'
 import { useHydrationCheck } from './composables'
+import type { DefineComponent } from 'vue'
 
 export const defineNuxtComponent: typeof _defineComponent
   = function defineNuxtComponent(...args: any[]): any {