Add documentation and improve inspector's result 💞

.changeset/six-years-build.md

@@ -0,0 +1,5 @@
+---
+"@namnode/vite-plugin-inspect-react": minor
+---
+
+Add documentation to READ and improve inspector's result 💞

packages/vite-plugin-inspect-react/README.md

@@ -11,3 +11,55 @@ because not all React's component libraries are built with the same structure. T
 the flexibility of the component's structure. For instance, some component libraries do not allow you to pass any props
 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.
+
+## Installation 🚀
+
+```bash
+# pnpm
+pnpm add @namnode/vite-plugin-inspect-react -D
+
+# yarn
+yarn add @namnode/vite-plugin-inspect-react -D
+
+# npm
+npm install @namnode/vite-plugin-inspect-react -D
+
+# bun
+bun install @namnode/vite-plugin-inspect-react -dev
+```
+
+## Usage 🎉
+
+```ts
+// vite.config.ts
+// Please ensure this plugin comes before react plugin, otherwise it can't detect your react component inside your source code.
+
+import react from "@vitejs/plugin-react-swc"
+import { defineConfig } from "vite"
+import { inspectReact } from "@namnode/vite-plugin-inspect-react"
+
+export default defineConfig({
+  plugins: [inspectReact(), react()],
+})
+```
+
+## Options 🎨
+
+```ts
+type Options = {
+  predicate?: (node: Node) => boolean
+  plugins?: PluginItem[]
+}
+
+function inspectReact(option?: Options): Plugin
+```
+
+### predicate
+
+By default, all nodes of type `JSXElement` will be inspected. However, you can pass a predicate function to filter out
+the nodes that you want to ignore.
+
+### plugins
+
+Since the plugin is powered by `@babel/core`, you can pass any Babel plugins. For more information, please refer to
+[Babel's documentation](https://babeljs.io/docs/en/plugins)

packages/vite-plugin-inspect-react/playground/App.tsx

@@ -1,5 +1,3 @@
-import React from "react"
-
 export function App() {
   return (
     <>

packages/vite-plugin-inspect-react/src/index.ts

@@ -53,7 +53,7 @@ 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}' />`
+              const injectedContent = `<span hidden id='${id}:${line}:${column + 1}' />`
               str.prependLeft(start, `<>${injectedContent}`)
               str.appendRight(end, `</>`)
             }

packages/vite-plugin-inspect-react/test/index.test.tsx

@@ -44,7 +44,7 @@ describe("vite-plugin-inspect-react", () => {
       throw new Error("No injected node found")
     }
 
-    const h1Position = `playground/App.tsx:6:6`
+    const h1Position = `playground/App.tsx:4:7`
     expect(nearestInjectedNode.id).toContain(h1Position)
   })
 })