From 94b264a80a12e398e45d23fe98fdfcfedee384fc Mon Sep 17 00:00:00 2001
From: Nam Nguyen <nam.nguyen.node@gmail.com>
Date: Sun, 7 Jan 2024 19:34:37 -0400
Subject: [PATCH] =?UTF-8?q?Improve=20inspector=20position=20=F0=9F=92=9E?=
 =?UTF-8?q?=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/weak-terms-clap.md                          | 5 +++++
 packages/vite-plugin-inspect-react/CHANGELOG.md        | 7 +++++--
 packages/vite-plugin-inspect-react/README.md           | 9 +++++++--
 packages/vite-plugin-inspect-react/src/index.ts        | 9 ++++++++-
 packages/vite-plugin-inspect-react/test/index.test.tsx | 8 ++------
 packages/vite-plugin-inspect-react/tsconfig.json       | 3 ++-
 6 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/weak-terms-clap.md

diff --git a/.changeset/weak-terms-clap.md b/.changeset/weak-terms-clap.md
new file mode 100644
index 0000000..2c79a8a
--- /dev/null
+++ b/.changeset/weak-terms-clap.md
@@ -0,0 +1,5 @@
+---
+"@namnode/vite-plugin-inspect-react": minor
+---
+
+Improve inspector position 💞
diff --git a/packages/vite-plugin-inspect-react/CHANGELOG.md b/packages/vite-plugin-inspect-react/CHANGELOG.md
index 8c98a21..5134678 100644
--- a/packages/vite-plugin-inspect-react/CHANGELOG.md
+++ b/packages/vite-plugin-inspect-react/CHANGELOG.md
@@ -4,13 +4,16 @@
 
 ### Minor Changes
 
-- [`f27d25d`](https://github.com/willnguyen1312/namnode/commit/f27d25d42aecf04477ef69edd6d5caccc3551d62) Thanks [@willnguyen1312](https://github.com/willnguyen1312)! - Add documentation to READ and improve inspector's result 💞
+- [`f27d25d`](https://github.com/willnguyen1312/namnode/commit/f27d25d42aecf04477ef69edd6d5caccc3551d62) Thanks
+  [@willnguyen1312](https://github.com/willnguyen1312)! - Add documentation to READ and improve inspector's result 💞
 
 ## 1.1.0
 
 ### Minor Changes
 
-- [#13](https://github.com/willnguyen1312/namnode/pull/13) [`7acb4a8`](https://github.com/willnguyen1312/namnode/commit/7acb4a816b7c26cab40c5f100d122c1d1f764a70) Thanks [@willnguyen1312](https://github.com/willnguyen1312)! - Enhance vite plugin inspect react 💞
+- [#13](https://github.com/willnguyen1312/namnode/pull/13)
+  [`7acb4a8`](https://github.com/willnguyen1312/namnode/commit/7acb4a816b7c26cab40c5f100d122c1d1f764a70) Thanks
+  [@willnguyen1312](https://github.com/willnguyen1312)! - Enhance vite plugin inspect react 💞
 
 ## 1.0.0
 
diff --git a/packages/vite-plugin-inspect-react/README.md b/packages/vite-plugin-inspect-react/README.md
index 55abd59..95a2eda 100644
--- a/packages/vite-plugin-inspect-react/README.md
+++ b/packages/vite-plugin-inspect-react/README.md
@@ -2,8 +2,9 @@
 
 ## WHY 🙈
 
-This plugin will wrap your react component inside your codebase with a hidden span that does not affect your layout.
-Yet, it comes with an ID that stores the location of the next sibling of the span inside your code.
+This plugin will wrap your react components inside your codebase during compile time with hidden span elements that do
+not affect your layout. Yet, those come with unique `data-inspect-id` attributes that store the location of your React
+components accordingly.
 
 This plugin is highly inspired by another fantastic plugin so-called
 [vite-plugin-react-inspector](https://github.com/sudongyuer/vite-plugin-react-inspector). The reason this plugin exists
@@ -12,6 +13,10 @@ the flexibility of the component's structure. For instance, some component libra
 to the root component other than their defined set of props. This plugin will help you inspect the component's structure
 by wrapping a tiny hidden span around your component.
 
+## Demo
+
+https://github.com/willnguyen1312/namnode/assets/17794897/cbcad980-fae2-4276-89bf-54a5bb8951ab
+
 ## Installation 🚀
 
 ```bash
diff --git a/packages/vite-plugin-inspect-react/src/index.ts b/packages/vite-plugin-inspect-react/src/index.ts
index 7bfb732..c33ec0e 100644
--- a/packages/vite-plugin-inspect-react/src/index.ts
+++ b/packages/vite-plugin-inspect-react/src/index.ts
@@ -1,7 +1,13 @@
 import { Node, PluginItem, parseAsync, traverse } from "@babel/core"
 import MagicString from "magic-string"
+import { dirname } from "path"
+import { fileURLToPath } from "url"
 import type { Plugin } from "vite"
 
+// Credit to https://antfu.me/posts/isomorphic-dirname
+const DIRNAME = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url))
+const rootDirectory = dirname(DIRNAME)
+
 type Options = {
   predicate?: (node: Node) => boolean
   plugins?: PluginItem[]
@@ -53,7 +59,8 @@ export function inspectReact(
               if (node?.openingElement?.name?.object?.name === "React" || !start || !end || !node?.loc?.start) return
 
               const { column, line } = node.loc.start
-              const injectedContent = `<span hidden id='${id}:${line}:${column + 1}' />`
+              const shortId = id.substring(rootDirectory.length + 1)
+              const injectedContent = `<span hidden data-inspect-id='${shortId}:${line}:${column + 1}' />`
               str.prependLeft(start, `<>${injectedContent}`)
               str.appendRight(end, `</>`)
             }
diff --git a/packages/vite-plugin-inspect-react/test/index.test.tsx b/packages/vite-plugin-inspect-react/test/index.test.tsx
index 6a384e6..e3668ff 100644
--- a/packages/vite-plugin-inspect-react/test/index.test.tsx
+++ b/packages/vite-plugin-inspect-react/test/index.test.tsx
@@ -22,11 +22,7 @@ describe("vite-plugin-inspect-react", () => {
     const hiThereText = screen.getByText(/hi there/i)
 
     const nearestInjectedNode = traverseBottomUp(hiThereText, (node) => {
-      // const isCurrentNode
-      // return !!node.hidden && node.tagName === "SPAN"
-
       let currentNode = node
-
       while (currentNode.previousSibling) {
         const sib = currentNode.previousSibling as HTMLElement
 
@@ -44,7 +40,7 @@ describe("vite-plugin-inspect-react", () => {
       throw new Error("No injected node found")
     }
 
-    const h1Position = `playground/App.tsx:4:7`
-    expect(nearestInjectedNode.id).toContain(h1Position)
+    const expectedHiThereTextPosition = "playground/App.tsx:4:7"
+    expect(nearestInjectedNode.dataset.inspectId).toBe(expectedHiThereTextPosition)
   })
 })
diff --git a/packages/vite-plugin-inspect-react/tsconfig.json b/packages/vite-plugin-inspect-react/tsconfig.json
index f0d57fc..74fc285 100644
--- a/packages/vite-plugin-inspect-react/tsconfig.json
+++ b/packages/vite-plugin-inspect-react/tsconfig.json
@@ -6,6 +6,7 @@
     "types": ["vitest/importMeta", "vitest/globals"],
     "lib": ["ESNext", "DOM"],
     "target": "ESNext",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "module": "ESNext"
   }
 }