From 637a039dc939b813bb504375f2eba3200630a7eb Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 5 Feb 2024 16:39:06 +0000
Subject: [PATCH 1/2] fix: use `magic-string` to create sourcemaps

---
 src/index.ts                          | 74 +++++++++++++++++----------
 src/types.ts                          |  1 +
 test/__snapshots__/index.test.ts.snap | 47 +++++------------
 3 files changed, 60 insertions(+), 62 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 883d65d..841c855 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,12 +5,13 @@ import { resolve } from 'pathe'
 import { existsSync } from 'fs'
 import { parse } from '@vue/compiler-dom'
 import type { RootNode, ElementNode, AttributeNode } from '@vue/compiler-dom'
+import MagicString from 'magic-string'
 
 const FORMKIT_CONFIG_ID = 'virtual:formkit-config'
-const FORMKIT_PROVIDER_IMPORT_STATEMENT = [
-  `import { FormKitProvider } from "@formkit/vue";`,
-  `import __formkitConfig from "${FORMKIT_CONFIG_ID}";`,
-].join('\n')
+const FORMKIT_PROVIDER_IMPORT_STATEMENT = `
+import { FormKitProvider } from "@formkit/vue";
+import __formkitConfig from "${FORMKIT_CONFIG_ID}";
+`
 /**
  * A relatively cheap, albeit not foolproof, regex to determine if the code
  * being processed contains FormKit usage.
@@ -67,15 +68,19 @@ function langAttr(node?: ElementNode): string {
  * Imports `FormKitProvider` component into the script block of the SFC.
  * @param code - The SFC source code.
  * @param id - The ID of the SFC file.
+ * @param s - A MagicString instance, for tracking sourcemaps.
  */
-function injectProviderImport(code: string): string {
+function injectProviderImport(
+  code: string,
+  s = new MagicString(code),
+): MagicString | undefined {
   let root: RootNode
   try {
     root = parse(code)
   } catch (err) {
     console.warn('Failed to parse SFC:', code)
     console.error(err)
-    return code
+    return
   }
   const script = getRootBlock(root, 'script')
   const setupScript = root.children.find(
@@ -83,56 +88,51 @@ function injectProviderImport(code: string): string {
       node.type === 1 && node.tag === 'script' && isSetupScript(node),
   )
   if (!setupScript) {
-    return [
-      `<script setup${langAttr(script)}>`,
-      FORMKIT_PROVIDER_IMPORT_STATEMENT,
-      `</script>`,
-      code,
-    ].join('\n')
+    const block = `<script setup${langAttr(script)}>${FORMKIT_PROVIDER_IMPORT_STATEMENT}</script>\n`
+    return s.prepend(block)
   }
+
   const startAt = setupScript.children[0].loc.start.offset
-  const before = code.substring(0, startAt)
-  const after = code.substring(startAt)
-  return `${before}\n${FORMKIT_PROVIDER_IMPORT_STATEMENT}${after}`
+  return s.appendLeft(startAt, FORMKIT_PROVIDER_IMPORT_STATEMENT)
 }
 
 /**
  * Injects the `<FormKitProvider>` component import into the SFC.
  * @param code - The SFC source code.
  * @param id - The ID of the SFC file.
+ * @param s - A MagicString instance, for tracking sourcemaps.
  */
 function injectProviderComponent(
   code: string,
   id: string,
-): { code: string; map?: null } {
+  s = new MagicString(code),
+): MagicString | undefined {
   let root: RootNode
   try {
     root = parse(code)
   } catch (err) {
     console.warn('Failed to parse SFC:', code)
     console.error(err)
-    return { code }
+    return
   }
+
   const template = getRootBlock(root, 'template')
   if (!template) {
     console.warn(
       `No <template> block found in ${id}. Skipping FormKitProvider injection.`,
     )
-    return { code, map: null }
+    return
   }
+
   const startInsertAt = template.children[0].loc.start.offset
   const endInsertAt =
     template.children[template.children.length - 1].loc.end.offset
 
-  code = [
-    code.substring(0, startInsertAt),
+  s.appendRight(
+    startInsertAt,
     `<FormKitProvider :config="__formkitConfig">`,
-    code.substring(startInsertAt, endInsertAt),
-    '</FormKitProvider>',
-    code.substring(endInsertAt),
-  ].join('\n')
-
-  return { code, map: null }
+  )
+  s.appendLeft(endInsertAt, '</FormKitProvider>')
 }
 
 /**
@@ -158,6 +158,7 @@ export const unpluginFactory: UnpluginFactory<Options | undefined> = (
   options = {
     configFile: './formkit.config',
     defaultConfig: true,
+    sourcemap: false,
   },
 ) => {
   return {
@@ -204,8 +205,25 @@ export const unpluginFactory: UnpluginFactory<Options | undefined> = (
     // just like rollup transform
     async transform(code, id) {
       // Test if the given code is a likely candidate for FormKit usage.
-      if (id.endsWith('.vue') && CONTAINS_FORMKIT_RE.test(code)) {
-        return injectProviderComponent(injectProviderImport(code), id)
+      if (!id.endsWith('.vue') || !CONTAINS_FORMKIT_RE.test(code)) {
+        return
+      }
+
+      // Generate a MagicString instance to track changes to code
+      const s = new MagicString(code)
+
+      injectProviderComponent(code, id, s)
+
+      // We can save extra parsing time by not returning anything or adding imports if we haven't added the wrapper
+      if (!s.hasChanged()) {
+        return
+      }
+
+      injectProviderImport(code, s)
+
+      return {
+        code: s.toString(),
+        map: options.sourcemap ? s.generateMap({ hires: true }) : undefined,
       }
     },
   }
diff --git a/src/types.ts b/src/types.ts
index 20c4e17..441d9c4 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,4 +1,5 @@
 export interface Options {
   configFile?: string
   defaultConfig?: boolean
+  sourcemap?: boolean
 }
diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap
index 80f7f5b..0f721ba 100644
--- a/test/__snapshots__/index.test.ts.snap
+++ b/test/__snapshots__/index.test.ts.snap
@@ -28,19 +28,16 @@ exports[`vue file transformations > injects import into script setup block 1`] =
 "<script setup lang=\\"ts\\">
 import { FormKitProvider } from \\"@formkit/vue\\";
 import __formkitConfig from \\"virtual:formkit-config\\";
+
 import { FormKit } from '@formkit/vue'
 </script>
 
 <template>
-  
-<FormKitProvider :config=\\"__formkitConfig\\">
-<FormKit
+  <FormKitProvider :config=\\"__formkitConfig\\"><FormKit
     type=\\"text\\"
     label=\\"Your name\\"
     help=\\"Enter your name\\"
-  />
-</FormKitProvider>
-
+  /></FormKitProvider>
 </template>"
 `;
 
@@ -51,11 +48,7 @@ import __formkitConfig from \\"virtual:formkit-config\\";
 </script>
 <template>
     <div class=\\"fizzbuzz\\">
-      
-<FormKitProvider :config=\\"__formkitConfig\\">
-<FormKit />
-</FormKitProvider>
-
+      <FormKitProvider :config=\\"__formkitConfig\\"><FormKit /></FormKitProvider>
     </div>
   </template>"
 `;
@@ -64,6 +57,7 @@ exports[`vue file transformations > injects inside root node with full sfc 1`] =
 "<script lang=\\"ts\\" setup>
 import { FormKitProvider } from \\"@formkit/vue\\";
 import __formkitConfig from \\"virtual:formkit-config\\";
+
 function handleLoginSubmit(values: any) {
   window.alert(\\"You are logged in. Credentials: 
 \\" + JSON.stringify(values));
@@ -72,14 +66,10 @@ function handleLoginSubmit(values: any) {
 
 <template>
   <div>
-    
-<FormKitProvider :config=\\"__formkitConfig\\">
-<FormKit type=\\"form\\" submit-label=\\"login\\" @submit=\\"handleLoginSubmit\\">
+    <FormKitProvider :config=\\"__formkitConfig\\"><FormKit type=\\"form\\" submit-label=\\"login\\" @submit=\\"handleLoginSubmit\\">
       <FormKit type=\\"email\\" label=\\"Email\\" name=\\"email\\" />
       <FormKit type=\\"password\\" label=\\"Password\\" name=\\"password\\" />
-    </FormKit>
-</FormKitProvider>
-
+    </FormKit></FormKitProvider>
   </div>
 </template>
 "
@@ -89,6 +79,7 @@ exports[`vue file transformations > injects inside root node with multiple child
 "<script lang=\\"ts\\" setup>
 import { FormKitProvider } from \\"@formkit/vue\\";
 import __formkitConfig from \\"virtual:formkit-config\\";
+
 function handleLoginSubmit(values: any) {
   window.alert(\\"You are logged in. Credentials: 
 \\" + JSON.stringify(values));
@@ -97,9 +88,7 @@ function handleLoginSubmit(values: any) {
 
 <template>
   <div>
-    
-<FormKitProvider :config=\\"__formkitConfig\\">
-<main>
+    <FormKitProvider :config=\\"__formkitConfig\\"><main>
     <p>
     <FormKit type=\\"form\\" submit-label=\\"login\\" @submit=\\"handleLoginSubmit\\">
       <FormKit type=\\"email\\" label=\\"Email\\" name=\\"email\\" />
@@ -107,9 +96,7 @@ function handleLoginSubmit(values: any) {
     </FormKit>
     </p>
     </main>
-    <div class=\\"filler\\">Here we go</div>
-</FormKitProvider>
-
+    <div class=\\"filler\\">Here we go</div></FormKitProvider>
   </div>
 </template>
 "
@@ -132,12 +119,8 @@ export default {
 
 <template>
   <div>
-    
-<FormKitProvider :config=\\"__formkitConfig\\">
-<h1>Nothing to see here</h1>
-    <FormKit type=\\"text\\" label=\\"Check me out\\" />
-</FormKitProvider>
-
+    <FormKitProvider :config=\\"__formkitConfig\\"><h1>Nothing to see here</h1>
+    <FormKit type=\\"text\\" label=\\"Check me out\\" /></FormKitProvider>
   </div>
 </template>"
 `;
@@ -148,10 +131,6 @@ import { FormKitProvider } from \\"@formkit/vue\\";
 import __formkitConfig from \\"virtual:formkit-config\\";
 </script>
 <template>
-  
-<FormKitProvider :config=\\"__formkitConfig\\">
-<FormKit />
-</FormKitProvider>
-
+  <FormKitProvider :config=\\"__formkitConfig\\"><FormKit /></FormKitProvider>
 </template>"
 `;

From 7454bcfbe8d290b672858b7d3235d9bed9715fac Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 5 Feb 2024 16:39:43 +0000
Subject: [PATCH 2/2] style: lint

---
 src/index.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 841c855..89d9577 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -128,10 +128,7 @@ function injectProviderComponent(
   const endInsertAt =
     template.children[template.children.length - 1].loc.end.offset
 
-  s.appendRight(
-    startInsertAt,
-    `<FormKitProvider :config="__formkitConfig">`,
-  )
+  s.appendRight(startInsertAt, `<FormKitProvider :config="__formkitConfig">`)
   s.appendLeft(endInsertAt, '</FormKitProvider>')
 }