Release first version of vite-plugin-inspect-react 💞 (#11)

willnguyen1312 · Jan 7, 2024 · 66e9996 · 66e9996
1 parent 093a09c
commit 66e9996
Show file tree

Hide file tree

Showing 19 changed files with 2,397 additions and 178 deletions.
diff --git a/.changeset/tidy-students-beg.md b/.changeset/tidy-students-beg.md
@@ -0,0 +1,5 @@
+---
+"@namnode/vite-plugin-inspect-react": major
+---
+
+Release first version of vite-plugin-inspect-react 💞
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Nam Nguyen
+Copyright (c) 2024 Nam Nguyen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
 associated documentation files (the "Software"), to deal in the Software without restriction,

diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
     "release": "pnpm check && changeset version && changeset publish",
     "size": "esno scripts/size-limit.ts",
     "turbo:update": "pnpx @turbo/codemod update",
-    "typecheck": "turbo run typecheck"
+    "typecheck": "turbo run typecheck",
+    "start-inspect-react": "turbo run dev --filter=@namnode/vite-plugin-inspect-react"
   },
   "dependencies": {
     "@changesets/changelog-github": "^0.5.0",

diff --git a/packages/store/LICENSE b/packages/store/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Nam Nguyen
+Copyright (c) 2024 Nam Nguyen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
 associated documentation files (the "Software"), to deal in the Software without restriction,

diff --git a/packages/utils/LICENSE b/packages/utils/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Nam Nguyen
+Copyright (c) 2024 Nam Nguyen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
 associated documentation files (the "Software"), to deal in the Software without restriction,

diff --git a/packages/vite-plugin-inspect-react/.eslintrc.cjs b/packages/vite-plugin-inspect-react/.eslintrc.cjs
@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["custom"],
+}
diff --git a/packages/vite-plugin-inspect-react/CHANGELOG.md b/packages/vite-plugin-inspect-react/CHANGELOG.md
diff --git a/packages/vite-plugin-inspect-react/LICENSE b/packages/vite-plugin-inspect-react/LICENSE
@@ -0,0 +1,18 @@
+MIT License
+
+Copyright (c) 2024 Nam Nguyen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/vite-plugin-inspect-react/index.html b/packages/vite-plugin-inspect-react/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite Plugin Inspect React Playground</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/playground/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/vite-plugin-inspect-react/package.json b/packages/vite-plugin-inspect-react/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@namnode/vite-plugin-inspect-react",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "A Vite plugin to inspect React components",
+  "author": "Nam Nguyen <[email protected]>",
+  "repository": "willnguyen1312/namnode",
+  "homepage": "https://github.com/sponsors/willnguyen1312",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/willnguyen1312"
+  },
+  "keywords": [
+    "vite-plugin-inspect-react"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup src terse",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "dev": "vite",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.1.2",
+    "@types/babel__core": "^7.20.5",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.18.0",
+    "@typescript-eslint/parser": "^6.18.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.56.0",
+    "eslint-config-custom": "workspace:*",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "workspace:*",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vite-plugin-inspect": "^0.8.1",
+    "vitest": "^1.1.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.7",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "magic-string": "^0.30.5"
+  }
+}
diff --git a/packages/vite-plugin-inspect-react/playground/App.tsx b/packages/vite-plugin-inspect-react/playground/App.tsx
@@ -0,0 +1,9 @@
+import React from "react"
+
+export function App() {
+  return (
+    <>
+      <h1>Hi there 💞</h1>
+    </>
+  )
+}
diff --git a/packages/vite-plugin-inspect-react/playground/main.tsx b/packages/vite-plugin-inspect-react/playground/main.tsx
@@ -0,0 +1,9 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { App } from "./App.tsx"
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/packages/vite-plugin-inspect-react/playground/vite-env.d.ts b/packages/vite-plugin-inspect-react/playground/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/vite-plugin-inspect-react/src/index.ts b/packages/vite-plugin-inspect-react/src/index.ts
@@ -0,0 +1,59 @@
+import { Node, parseAsync, traverse } from "@babel/core"
+import MagicString from "magic-string"
+import type { Plugin } from "vite"
+
+export function inspectReact(): Plugin {
+  return {
+    name: "vite-plugin-inspect-react",
+
+    enforce: "pre",
+
+    apply: "serve",
+
+    config: () => {
+      return {
+        optimizeDeps: {
+          include: ["react-dom"],
+        },
+      }
+    },
+
+    transform: async (code, id) => {
+      if (id.endsWith(".tsx")) {
+        const str = new MagicString(code)
+        const ast = await parseAsync(code, {
+          configFile: false,
+          filename: id,
+          ast: true,
+          presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+        })
+
+        traverse(ast as Node, {
+          enter({ node }) {
+            if (node.type === "JSXElement") {
+              const { start, end } = node
+
+              // Make sure all necessary properties exist
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-expect-error
+              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}' />`
+              str.prependLeft(start, `<>${injectedContent}`)
+              str.appendRight(end, `</>`)
+            }
+          },
+        })
+
+        return {
+          code: str.toString(),
+          map: str.generateMap({
+            source: id,
+            includeContent: true,
+          }),
+        }
+      }
+    },
+  }
+}
diff --git a/packages/vite-plugin-inspect-react/test/index.test.tsx b/packages/vite-plugin-inspect-react/test/index.test.tsx
@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { App } from "../playground/App"
+
+function traverseBottomUp(node: HTMLElement, predicate: (node: HTMLElement) => HTMLElement | null) {
+  let currentNode: Node | null = node
+  while (currentNode) {
+    const found = predicate(currentNode as HTMLElement)
+    if (found) {
+      return found
+    }
+    currentNode = currentNode.parentElement
+  }
+
+  return null
+}
+
+describe("vite-plugin-inspect-react", () => {
+  it("should work", () => {
+    render(<App />)
+
+    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
+
+        if (sib.hasAttribute("hidden") && sib.tagName === "SPAN") {
+          return sib
+        }
+
+        currentNode = sib
+      }
+
+      return null
+    })
+
+    if (!nearestInjectedNode) {
+      throw new Error("No injected node found")
+    }
+
+    const h1Position = `playground/App.tsx:6:6`
+    expect(nearestInjectedNode.id).toContain(h1Position)
+  })
+})
diff --git a/packages/vite-plugin-inspect-react/tsconfig.json b/packages/vite-plugin-inspect-react/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "tsconfig/base.json",
+  "exclude": ["dist", "build", "node_modules"],
+  "include": ["src", "test", "vite.config.ts", "./vitest.setup.ts"],
+  "compilerOptions": {
+    "types": ["vitest/importMeta", "vitest/globals"],
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "jsx": "react-jsx"
+  }
+}
diff --git a/packages/vite-plugin-inspect-react/tsup.config.ts b/packages/vite-plugin-inspect-react/tsup.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from "tsup"
+
+export default defineConfig({
+  clean: true,
+  format: ["cjs", "esm"],
+  external: [],
+  treeshake: true,
+  minify: true,
+  dts: true,
+})
diff --git a/packages/vite-plugin-inspect-react/vite.config.ts b/packages/vite-plugin-inspect-react/vite.config.ts
@@ -0,0 +1,12 @@
+import react from "@vitejs/plugin-react-swc"
+import { defineConfig } from "vite"
+import Inspect from "vite-plugin-inspect"
+import { inspectReact } from "./src"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [Inspect(), inspectReact(), react()],
+  test: {
+    environment: "happy-dom",
+  },
+})