lazy-hydration-plugin.test.ts

/* eslint-disable @typescript-eslint/no-explicit-any */
import { describe, it, expect, vi } from 'vitest'
import type { Plugin } from 'vite'
import type { HookFnMap, ObjectHook, UnpluginBuildContext, UnpluginContext } from 'unplugin'
import { LazyLoadHintPlugin } from '../../../src/plugins/lazy-load'
import { useNuxt } from '@nuxt/kit'

vi.mock('@nuxt/kit', () => ({
  useNuxt: vi.fn(() => ({
    apps: {
      default: {
        components: [],
      },
    },
    hook: vi.fn(),
  })),
}))

const plugin = LazyLoadHintPlugin.vite() as Plugin
const transform = (plugin.transform as ObjectHook<any, any>).handler
const unpluginCtx: UnpluginBuildContext & UnpluginContext = {
  addWatchFile: vi.fn(),
  emitFile: vi.fn(),
  getWatchFiles: vi.fn(),
  parse: vi.fn(),
  getNativeBuildContext: vi.fn(),
  error: vi.fn(),
  warn: vi.fn(),
}
describe('LazyLoadHintPlugin', () => {
  describe('default imports', () => {
    it('should wrap a default import from a .vue file', async () => {
      const code = `import MyComp from './MyComp.vue'\nexport default { components: { MyComp } }`
      const result = await transform(code, '/src/Parent.vue')
      expect(result.code).toContain('import __original_MyComp from \'./MyComp.vue\'')
      expect(result.code).toContain(
        `const MyComp = __wrapImportedComponent(__original_MyComp, 'MyComp', './MyComp.vue'`,
      )
    })

    it('should handle multiple default imports from different .vue files', async () => {
      const code = [
        `import CompA from './CompA.vue'`,
        `import CompB from './CompB.vue'`,
        `export default { components: { CompA, CompB } }`,
      ].join('\n')
      const result = await transform(code, '/src/Parent.vue')
      expect(result.code).toContain('import __original_CompA from \'./CompA.vue\'')
      expect(result.code).toContain('import __original_CompB from \'./CompB.vue\'')
      expect(result.code).toContain(`__wrapImportedComponent(__original_CompA, 'CompA'`)
      expect(result.code).toContain(`__wrapImportedComponent(__original_CompB, 'CompB'`)
    })
  })

  describe('named imports', () => {
    it('should wrap a named import from a .vue file', async () => {
      const code = `import { MyComp } from './MyComp.vue'\nexport default { components: { MyComp } }`
      const result = await transform(code, '/src/Parent.vue')
      expect(result.code).toContain('import { MyComp as __original_MyComp } from \'./MyComp.vue\'')
      expect(result.code).toContain(
        `const MyComp = __wrapImportedComponent(__original_MyComp, 'MyComp', './MyComp.vue'`,
      )
    })

    it('should wrap an aliased named import from a .vue file', async () => {
      const code = `import { default as AliasComp } from './MyComp.vue'\nexport default { components: { AliasComp } }`
      const result = await transform(code, '/src/Parent.vue')
      expect(result.code).toContain('__original_AliasComp')
      expect(result.code).toContain(
        `__wrapImportedComponent(__original_AliasComp, 'AliasComp', './MyComp.vue'`,
      )
    })
  })

  describe('_sfc_main wrapping', () => {
    it('should wrap _sfc_main with __wrapMainComponent when present', async () => {
      const code = [
        `import ChildComp from './ChildComp.vue'`,
        `const _sfc_main = {}`,
        `export default _sfc_main`,
      ].join('\n')
      const result = await transform(code, '/src/Parent.vue')
      expect(result.code).toContain('const _sfc_main_wrapped = __wrapMainComponent(_sfc_main,')
      expect(result.code).toContain('export default _sfc_main_wrapped')
      expect(result.code).toContain(`componentName: 'ChildComp'`)
      expect(result.code).toContain(`importSource: './ChildComp.vue'`)
    })
  })

  describe('skipped imports', () => {
    it('should not transform type-only imports', async () => {
      const code = `import type MyComp from './MyComp.vue'\nexport default {}`
      const result = await transform(code, '/src/Parent.vue')
      expect(result).toBeUndefined()
    })

    it('should return undefined when there are no .vue imports at all', async () => {
      const code = `const x = 1\nexport default { x }`
      const result = await transform(code, '/src/Parent.vue')
      expect(result).toBeUndefined()
    })
  })

  describe('nuxt auto-imported components (__nuxt prefix)', () => {
    it('should use file basename as componentName for __nuxt prefixed imports in _sfc_main', async () => {
      const code = [
        `import __nuxt_component_0 from './ChildComp.vue'`,
        `const _sfc_main = {}`,
        `export default _sfc_main`,
      ].join('\n')
      const result = await transform(code, '/src/Parent.vue')
      expect(result.code).toContain(`componentName: 'ChildComp'`)
      expect(result.code).toContain(`importSource: './ChildComp.vue'`)
    })

    it('should use file basename as componentName for __nuxt prefixed imports in defineComponent setup', async () => {
      const code = [
        `import { defineComponent } from 'vue'`,
        `import __nuxt_component_0 from './SomeWidget.vue'`,
        `export default defineComponent({`,
        `  setup() {`,
        `    return {}`,
        `  }`,
        `})`,
      ].join('\n')
      const result = await transform(code, '/src/Parent.ts')
      expect(result.code).toContain(`componentName: 'SomeWidget'`)
      expect(result.code).toContain('useLazyComponentTracking(')
    })
  })

  describe('nuxtComponents matching (pascalName)', () => {
    it('should use pascalName from nuxtComponents when component filePath matches', async () => {
      vi.mocked(useNuxt).mockReturnValueOnce({
        apps: {
          // @ts-expect-error partial mock
          default: {
            components: [
              {
                filePath: './MyWidget.vue',
                pascalName: 'MyWidgetPascal',
                kebabName: '',
                export: '',
                shortPath: '',
                chunkName: '',
                prefetch: false,
                preload: false,
              },
            ],
          },
        },
        hook: vi.fn(),
      })

      const { LazyLoadHintPlugin: PluginWithComponents } = await import('../../../src/plugins/lazy-load')
      const p = PluginWithComponents.vite() as Plugin
      const t = (p.transform as ObjectHook<HookFnMap['transform'], 'code' | 'id'>).handler

      const code = `import MyWidget from './MyWidget.vue'\nexport default { components: { MyWidget } }`
      const result = await t.call(unpluginCtx, code, '/src/Parent.vue') as unknown as { code: string }
      expect(result.code).toContain(
        `__wrapImportedComponent(__original_MyWidget, 'MyWidgetPascal', './MyWidget.vue'`,
      )
    })
  })

  describe('defineComponent setup injection', () => {
    it('should inject useLazyComponentTracking in defineComponent setup', async () => {
      const code = [
        `import { defineComponent } from 'vue'`,
        `import ChildComp from './ChildComp.vue'`,
        `export default defineComponent({`,
        `  setup() {`,
        `    return {}`,
        `  }`,
        `})`,
      ].join('\n')
      const result = await transform(code, '/src/Parent.ts')
      expect(result.code).toContain('useLazyComponentTracking(')
      expect(result.code).toContain(`componentName: 'ChildComp'`)
      expect(result.code).toMatchInlineSnapshot(`
        "import { __wrapImportedComponent, __wrapMainComponent } from "@nuxt/hints/runtime/lazy-load/composables";
        import { useLazyComponentTracking } from "@nuxt/hints/runtime/lazy-load/composables";
        import { defineComponent } from 'vue'
        import __original_ChildComp from './ChildComp.vue'
        const ChildComp = __wrapImportedComponent(__original_ChildComp, 'ChildComp', './ChildComp.vue', '/src/Parent.ts')
        export default defineComponent({
          setup() {
        const lazyHydrationState = useLazyComponentTracking([{ componentName: 'ChildComp', importSource: './ChildComp.vue', importedBy: '/src/Parent.ts', rendered: false }]);

            return {}
          }
        })"
      `)
    })

    it('should inject useLazyComponentTracking in arrow function setup', async () => {
      const code = [
        `import { defineComponent } from 'vue'`,
        `import ChildComp from './ChildComp.vue'`,
        `export default defineComponent({`,
        `  setup: () => {`,
        `    return {}`,
        `  }`,
        `})`,
      ].join('\n')
      const result = await transform(code, '/src/Parent.ts')
      expect(result.code).toContain('useLazyComponentTracking(')
      expect(result.code).toMatchInlineSnapshot(`
        "import { __wrapImportedComponent, __wrapMainComponent } from "@nuxt/hints/runtime/lazy-load/composables";
        import { useLazyComponentTracking } from "@nuxt/hints/runtime/lazy-load/composables";
        import { defineComponent } from 'vue'
        import __original_ChildComp from './ChildComp.vue'
        const ChildComp = __wrapImportedComponent(__original_ChildComp, 'ChildComp', './ChildComp.vue', '/src/Parent.ts')
        export default defineComponent({
          setup: () => {
        const lazyHydrationState = useLazyComponentTracking([{ componentName: 'ChildComp', importSource: './ChildComp.vue', importedBy: '/src/Parent.ts', rendered: false }]);

            return {}
          }
        })"
      `)
    })
  })
})