Improve inspector position 💞 (#16)

willnguyen1312 · Jan 7, 2024 · 94b264a · 94b264a
1 parent e36ec36
commit 94b264a
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 12 deletions.
diff --git a/.changeset/weak-terms-clap.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -6,6 +6,7 @@
     "types": ["vitest/importMeta", "vitest/globals"],
     "lib": ["ESNext", "DOM"],
     "target": "ESNext",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "module": "ESNext"
   }
 }