fix: corrects faulty endblock detection

formkit · Jan 2, 2024 · ba34837 · ba34837
1 parent e007766
commit ba34837
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 9 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -107,14 +107,16 @@ function injectProviderComponent(
   const template = getRootBlock(root, 'template')
   if (!template) {
     console.warn(
-      `To <template> block found in ${id}. Skipping FormKitLazyProvider injection.`,
+      `No <template> block found in ${id}. Skipping FormKitLazyProvider injection.`,
     )
     return { code, map: null }
   }
   const startInsertAt = template.children[0].loc.start.offset
+  const endInsertAt =
+    template.children[template.children.length - 1].loc.end.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)
+  const content = code.substring(startInsertAt, endInsertAt)
+  const after = code.substring(endInsertAt)
   code = `${before}\n${open}\n${content}\n${close}\n${after}`
   return { code, map: null }
 }

diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap
@@ -14,8 +14,8 @@ import { FormKit } from '@formkit/vue'
     label=\\"Your name\\"
     help=\\"Enter your name\\"
   />
-
 </FormKitLazyProvider>
+
 </template>"
 `;
 
@@ -48,9 +48,38 @@ function handleLoginSubmit(values: any) {
 <FormKit type=\\"form\\" submit-label=\\"login\\" @submit=\\"handleLoginSubmit\\">
       <FormKit type=\\"email\\" label=\\"Email\\" name=\\"email\\" />
       <FormKit type=\\"password\\" label=\\"Password\\" name=\\"password\\" />
-    </FormKi
+    </FormKit>
 </FormKitLazyProvider>
-t>
+
+  </div>
+</template>
+"
+`;
+
+exports[`index > injects inside root node with multiple child elements 1`] = `
+"<script lang=\\"ts\\" setup>
+import { FormKitLazyProvider } from '@formkit/vue'
+function handleLoginSubmit(values: any) {
+  window.alert(\\"You are logged in. Credentials: 
+\\" + JSON.stringify(values));
+}
+</script>
+
+<template>
+  <div>
+    
+<FormKitLazyProvider>
+<main>
+    <p>
+    <FormKit type=\\"form\\" submit-label=\\"login\\" @submit=\\"handleLoginSubmit\\">
+      <FormKit type=\\"email\\" label=\\"Email\\" name=\\"email\\" />
+      <FormKit type=\\"password\\" label=\\"Password\\" name=\\"password\\" />
+    </FormKit>
+    </p>
+    </main>
+    <div class=\\"filler\\">Here we go</div>
+</FormKitLazyProvider>
+
   </div>
 </template>
 "
@@ -73,9 +102,9 @@ export default {
     
 <FormKitLazyProvider>
 <h1>Nothing to see here</h1>
-    <FormKit type=\\"text\\" label=\\"Check me out\\" 
+    <FormKit type=\\"text\\" label=\\"Check me out\\" />
 </FormKitLazyProvider>
-/>
+
   </div>
 </template>"
 `;
@@ -86,7 +115,7 @@ exports[`index > injects the template block into an normally structured sfc 1`]
   
 <FormKitLazyProvider>
 <FormKit />
-
 </FormKitLazyProvider>
+
 </template>"
 `;
diff --git a/test/index.test.ts b/test/index.test.ts
@@ -67,6 +67,36 @@ function handleLoginSubmit(values: any) {
     ).toMatchSnapshot()
   })
 
+  it('injects inside root node with multiple child elements', async () => {
+    expect(
+      (
+        await plugin.transform(
+          `<script lang="ts" setup>
+function handleLoginSubmit(values: any) {
+  window.alert("You are logged in. Credentials: \n" + JSON.stringify(values));
+}
+</script>
+
+<template>
+  <div>
+    <main>
+    <p>
+    <FormKit type="form" submit-label="login" @submit="handleLoginSubmit">
+      <FormKit type="email" label="Email" name="email" />
+      <FormKit type="password" label="Password" name="password" />
+    </FormKit>
+    </p>
+    </main>
+    <div class="filler">Here we go</div>
+  </div>
+</template>
+`,
+          'test.vue',
+        )
+      ).code,
+    ).toMatchSnapshot()
+  })
+
   it('injects import into script setup block', async () => {
     expect(
       (await plugin.transform(aboutSFCFile, 'about.vue')).code,