fix: root node injection w/ attrs

Author: justin-schroeder

src/index.ts

@@ -109,13 +109,11 @@ function injectProviderComponent(
     )
     return { code, map: null }
   }
-  const before = code.substring(0, template.loc.start.offset + 10)
-  const content = code.substring(
-    template.loc.start.offset + 10,
-    template.loc.end.offset - 11,
-  )
+  const startInsertAt = template.children[0].loc.start.offset
+  const before = code.substring(0, startInsertAt)
+  const content = code.substring(startInsertAt, template.loc.end.offset - 11)
   const after = code.substring(template.loc.end.offset - 11)
-  code = `${before}\n${open}${content}${close}\n${after}`
+  code = `${before}\n${open}\n${content}\n${close}\n${after}`
 
   return { code, map: null }
 }

test/__snapshots__/index.test.ts.snap

@@ -7,22 +7,26 @@ import { FormKit } from '@formkit/vue'
 </script>
 
 <template>
+  
 <FormKitLazyProvider>
-  <FormKit
+<FormKit
     type=\\"text\\"
     label=\\"Your name\\"
     help=\\"Enter your name\\"
   />
+
 </FormKitLazyProvider>
 </template>"
 `;
 
 exports[`index > injects inside root node if there is one 1`] = `
 "<script setup>import { FormKitLazyProvider } from '@formkit/vue'</script>
 <template>
-    <div>
-    
-<FormKitLazyProvider>  <FormKit /></FormKitLazyProvider>
+    <div class=\\"fizzbuzz\\">
+      
+<FormKitLazyProvider>
+<FormKit />
+</FormKitLazyProvider>
 
     </div>
   </template>"
@@ -43,8 +47,10 @@ export default {
 <template>
   <div>
     
-<FormKitLazyProvider><h1>Nothing to see here</h1>
-    <FormKit type=\\"text\\" label=\\"Check me out\\" </FormKitLazyProvider>
+<FormKitLazyProvider>
+<h1>Nothing to see here</h1>
+    <FormKit type=\\"text\\" label=\\"Check me out\\" 
+</FormKitLazyProvider>
 />
   </div>
 </template>"
@@ -53,8 +59,10 @@ export default {
 exports[`index > injects the template block into an normally structured sfc 1`] = `
 "<script setup>import { FormKitLazyProvider } from '@formkit/vue'</script>
 <template>
+  
 <FormKitLazyProvider>
-  <FormKit />
+<FormKit />
+
 </FormKitLazyProvider>
 </template>"
 `;

test/index.test.ts

@@ -32,7 +32,7 @@ describe('index', () => {
       (
         await plugin.transform(
           `<template>
-    <div>
+    <div class="fizzbuzz">
       <FormKit />
     </div>
   </template>`,