diff --git a/.changeset/tidy-students-beg.md b/.changeset/tidy-students-beg.md new file mode 100644 index 0000000..7300ded --- /dev/null +++ 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 index 58bb4a2..6b92ddc 100644 --- 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 index e5f9559..b5ee691 100755 --- 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 index 58bb4a2..6b92ddc 100644 --- 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 index 58bb4a2..6b92ddc 100644 --- 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 new file mode 100644 index 0000000..23daa20 --- /dev/null +++ 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 new file mode 100644 index 0000000..e69de29 diff --git a/packages/vite-plugin-inspect-react/LICENSE b/packages/vite-plugin-inspect-react/LICENSE new file mode 100644 index 0000000..6b92ddc --- /dev/null +++ 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 new file mode 100644 index 0000000..4378f76 --- /dev/null +++ b/packages/vite-plugin-inspect-react/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite Plugin Inspect React Playground + + +
+ + + diff --git a/packages/vite-plugin-inspect-react/package.json b/packages/vite-plugin-inspect-react/package.json new file mode 100644 index 0000000..ba458a3 --- /dev/null +++ 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 ", + "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 new file mode 100644 index 0000000..094acc9 --- /dev/null +++ b/packages/vite-plugin-inspect-react/playground/App.tsx @@ -0,0 +1,9 @@ +import React from "react" + +export function App() { + return ( + <> +

Hi there 💞

+ + ) +} diff --git a/packages/vite-plugin-inspect-react/playground/main.tsx b/packages/vite-plugin-inspect-react/playground/main.tsx new file mode 100644 index 0000000..90ab03f --- /dev/null +++ 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( + + + , +) diff --git a/packages/vite-plugin-inspect-react/playground/vite-env.d.ts b/packages/vite-plugin-inspect-react/playground/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/packages/vite-plugin-inspect-react/playground/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/vite-plugin-inspect-react/src/index.ts b/packages/vite-plugin-inspect-react/src/index.ts new file mode 100644 index 0000000..ed1a922 --- /dev/null +++ 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 = `