fix: improved root element detection

formkit · Jan 2, 2024 · 3b80c2e · 3b80c2e
1 parent 6d82457
commit 3b80c2e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -20,7 +20,9 @@ function getRootBlock(
       rootChild &&
       tag !== 'formkit' &&
       tag !== 'form-kit' &&
-      rootChild.isSelfClosing === false
+      tag !== 'formkitschema' &&
+      tag !== 'form-kit-schema' &&
+      !rootChild.isSelfClosing
     ) {
       // In this case the component has a root node that is not formkit and is
       // not self-closing, like, perhaps, a div. We need to move the provider
@@ -114,7 +116,6 @@ function injectProviderComponent(
   const content = code.substring(startInsertAt, template.loc.end.offset - 11)
   const after = code.substring(template.loc.end.offset - 11)
   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
@@ -32,6 +32,30 @@ exports[`index > injects inside root node if there is one 1`] = `
   </template>"
 `;
 
+exports[`index > injects inside root node with full sfc 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>
+<FormKit type=\\"form\\" submit-label=\\"login\\" @submit=\\"handleLoginSubmit\\">
+      <FormKit type=\\"email\\" label=\\"Email\\" name=\\"email\\" />
+      <FormKit type=\\"password\\" label=\\"Password\\" name=\\"password\\" />
+    </FormKi
+</FormKitLazyProvider>
+t>
+  </div>
+</template>
+"
+`;
+
 exports[`index > injects setup block when using options api 1`] = `
 "<script setup lang=\\"ts\\">import { FormKitLazyProvider } from '@formkit/vue'</script>
 <script lang=\\"ts\\">

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -42,6 +42,31 @@ describe('index', () => {
     ).toMatchSnapshot()
   })
 
+  it('injects inside root node with full sfc', 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>
+    <FormKit type="form" submit-label="login" @submit="handleLoginSubmit">
+      <FormKit type="email" label="Email" name="email" />
+      <FormKit type="password" label="Password" name="password" />
+    </FormKit>
+  </div>
+</template>
+`,
+          'test.vue',
+        )
+      ).code,
+    ).toMatchSnapshot()
+  })
+
   it('injects import into script setup block', async () => {
     expect(
       (await plugin.transform(aboutSFCFile, 'about.vue')).code,