Make default better 💞 (#65)

.changeset/brave-cars-beg.md

@@ -0,0 +1,5 @@
+---
+"@namnode/vite-plugin-inspect-react": minor
+---
+
+Make default better 💞

packages/vite-plugin-inspect-react/package.json

@@ -74,6 +74,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.23.7",
+    "@babel/plugin-proposal-decorators": "^7.23.7",
     "@babel/preset-env": "^7.23.8",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",

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

@@ -6,6 +6,10 @@ import { propName } from "./_internal"
 
 type InspecType = "devtool" | "dom"
 
+const defaultFormatDataInspectId = (id: string) => {
+  return id.substring(__dirname.length + 1)
+}
+
 export type Options = {
   predicate?: (node: Node) => boolean
   plugins?: PluginItem[]
@@ -36,6 +40,10 @@ export function inspectReact(options: Options): Plugin {
     options.propName = propName
   }
 
+  if (!options.formatDataInspectId) {
+    options.formatDataInspectId = defaultFormatDataInspectId
+  }
+
   return {
     name: "vite-plugin-inspect-react",
 
@@ -62,12 +70,18 @@ export function inspectReact(options: Options): Plugin {
           )
         }
 
+        let plugins: PluginItem[] = [["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }]]
+
+        if (options.plugins) {
+          plugins = plugins.concat(options.plugins)
+        }
+
         const ast = parse(code, {
           configFile: false,
           filename: id,
           ast: true,
           presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
-          plugins: options.plugins,
+          plugins,
         })
 
         traverse(ast as Node, {