fix(lazy-load): fix potential TMZ violation (#243)

Author: huang-julien

src/plugins/lazy-load.ts

@@ -140,7 +140,14 @@ export const LazyLoadHintPlugin = createUnplugin(() => {
           }
         }
 
-        m.prepend(wrapperStatements + '\n')
+        const lastImport = imports[imports.length - 1]
+        // See https://github.com/nuxt/hints/issues/241
+        if (lastImport) {
+          m.appendRight(lastImport.end, '\n' + wrapperStatements)
+        }
+        else {
+          m.prepend(wrapperStatements + '\n')
+        }
 
         if (m.hasChanged()) {
           return {

test/unit/hydration/lazy-hydration-plugin.test.ts

@@ -179,11 +179,11 @@ describe('LazyLoadHintPlugin', () => {
       expect(result.code).toContain('useLazyComponentTracking(')
       expect(result.code).toContain(`componentName: 'ChildComp'`)
       expect(result.code).toMatchInlineSnapshot(`
-        "const ChildComp = __wrapImportedComponent(__original_ChildComp, 'ChildComp', './ChildComp.vue', '/src/Parent.ts')
-        import { __wrapImportedComponent, __wrapMainComponent } from "@nuxt/hints/runtime/lazy-load/composables";
+        "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 }]);
@@ -207,11 +207,11 @@ describe('LazyLoadHintPlugin', () => {
       const result = await transform(code, '/src/Parent.ts')
       expect(result.code).toContain('useLazyComponentTracking(')
       expect(result.code).toMatchInlineSnapshot(`
-        "const ChildComp = __wrapImportedComponent(__original_ChildComp, 'ChildComp', './ChildComp.vue', '/src/Parent.ts')
-        import { __wrapImportedComponent, __wrapMainComponent } from "@nuxt/hints/runtime/lazy-load/composables";
+        "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 }]);