feat: support all frameworks

Author: xxxsf

.changeset/config.json

@@ -9,6 +9,7 @@
   "updateInternalDependencies": "patch",
   "ignore": [
     "playground-vue2",
-    "playground-vue3"
+    "playground-vue3",
+    "playground-react"
   ]
 }

.eslintrc

@@ -3,9 +3,6 @@
   "rules":{
     "no-console":0,
     "prefer-const":0,
-    "no-prototype-builtins":0,
-    "vue/no-parsing-error": ["error", {
-      "invalid-first-character-of-tag-name": false
-    }]
+    "no-prototype-builtins":0
   }
 }

README.md

@@ -1,7 +1,7 @@
 
 ## Introduction
 
-A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2 & 3 & SSR.
+A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2, Vue3, React, Svelte,Angular, SSR(All frameworks).
 
 ## Installation
 

packages/core/README.md

@@ -1,7 +1,7 @@
 
 ## Introduction
 
-A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2 & 3 & SSR.
+A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2, Vue3, React, Svelte,Angular, SSR(All frameworks).
 
 ## Installation
 

packages/core/package.json

@@ -33,7 +33,7 @@
     "src/overlay.js"
   ],
   "scripts": {
-    "lint": "eslint --fix --ext .js,.ts,.vue .",
+    "lint": "eslint --fix --ext .js,.ts,.vue,.jsx .",
     "dev": "tsup --watch",
     "build": "tsup"
   },

packages/core/src/index.ts

@@ -9,7 +9,7 @@ import MagicString from 'magic-string'
 import { compileSFCTemplate } from './compiler'
 import { idToFile, parseVueRequest } from './utils'
 
-export interface VueInspectorClient {
+export interface DevInspectorClient {
   enabled: boolean
   position: {
     x: number
@@ -167,19 +167,19 @@ function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPE
       async resolveId(importee: string) {
         // console.log('resolveId', importee)
 
-        if (importee.startsWith('virtual:vue-inspector-options')) {
+        if (importee.startsWith('virtual:dev-inspector-options')) {
           return importee
         }
-        else if (importee.startsWith('virtual:vue-inspector-path:')) {
-          const resolved = importee.replace('virtual:vue-inspector-path:', `${inspectorPath}/`)
+        else if (importee.startsWith('virtual:dev-inspector-path:')) {
+          const resolved = importee.replace('virtual:dev-inspector-path:', `${inspectorPath}/`)
           return resolved
         }
       },
 
       async load(id) {
         // console.log('load', id)
 
-        if (id === 'virtual:vue-inspector-options') {
+        if (id === 'virtual:dev-inspector-options') {
           return `export default ${JSON.stringify({ ...normalizedOptions, base: config.base })}`
         }
         else if (id.startsWith(inspectorPath)) {
@@ -191,7 +191,7 @@ function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPE
           if (fs.existsSync(file))
             return await fs.promises.readFile(file, 'utf-8')
           else
-            console.error(`failed to find file for vue-inspector: ${file}, referenced by id ${id}.`)
+            console.error(`failed to find file for dev-inspector: ${file}, referenced by id ${id}.`)
         }
       },
       transform(code, id) {
@@ -208,7 +208,7 @@ function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPE
 
         if ((typeof appendTo === 'string' && filename.endsWith(appendTo))
           || (appendTo instanceof RegExp && appendTo.test(filename)))
-          return { code: `${code}\nimport 'virtual:vue-inspector-path:load.js'` }
+          return { code: `${code}\nimport 'virtual:dev-inspector-path:load.js'` }
       },
       configureServer(server) {
         const _printUrls = server.printUrls
@@ -231,7 +231,7 @@ function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPE
               injectTo: 'head',
               attrs: {
                 type: 'module',
-                src: `${config.base || '/'}@id/virtual:vue-inspector-path:load.js`,
+                src: `${config.base || '/'}@id/virtual:dev-inspector-path:load.js`,
               },
             },
           ],

packages/core/src/load.js

@@ -1,8 +1,8 @@
-import inspectorOptions from 'virtual:vue-inspector-options'
+import inspectorOptions from 'virtual:dev-inspector-options'
 
 import './overlay.js' // import Custom Element
 
-const CONTAINER_ID = 'vue-inspector-container'
+const CONTAINER_ID = 'dev-inspector-container'
 
 function createInspectorContainer() {
   if (document.getElementById(CONTAINER_ID) != null)

packages/core/src/overlay.js

@@ -1,4 +1,4 @@
-import inspectorOptions from 'virtual:vue-inspector-options'
+import inspectorOptions from 'virtual:dev-inspector-options'
 
 const base = inspectorOptions.base
 
@@ -15,7 +15,7 @@ template.innerHTML = `<style>
     box-sizing: border-box;
   }
 
-  .vue-inspector-container {
+  .dev-inspector-container {
     cursor: pointer;
     position: fixed;
     text-align: center;
@@ -25,7 +25,7 @@ template.innerHTML = `<style>
     right: 15px;
   }
 
-  .vue-inspector-card {
+  .dev-inspector-card {
     font-family: Arial, Helvetica, sans-serif;
     padding: 5px 8px;
     border-radius: 4px;
@@ -36,15 +36,15 @@ template.innerHTML = `<style>
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   }
 
-  .vue-inspector-floats {
+  .dev-inspector-floats {
     z-index: 9999;
     position: fixed;
     transform: translateX(-50%);
     transition: all 0.1s ease-in;
     pointer-events: none;
   }
 
-  .vue-inspector-size-indicator {
+  .dev-inspector-size-indicator {
     z-index: 9999;
     position: fixed;
     background-color:#42b88325;
@@ -54,29 +54,29 @@ template.innerHTML = `<style>
     pointer-events: none;
   }
 
-  .vue-inspector-button {
+  .dev-inspector-button {
     color: #e4c9c9;
   }
 
-  .vue-inspector-button--active {
+  .dev-inspector-button--active {
     color: #42b883;
   }
   </style>
 
   <div data-v-inspector-ignore="true">
       <div
-        class="vue-inspector-container"
+        class="dev-inspector-container"
         id="toggle-inspector-container"
       >
-        <div class="vue-inspector-button" id="inspector-btn">
+        <div class="dev-inspector-button" id="inspector-btn">
           Code Inspector
         </div>
       </div>
 
     <div id="overlay-container">
       <div
         ref="floatsRef"
-        class="vue-inspector-floats vue-inspector-card"
+        class="dev-inspector-floats dev-inspector-card"
         id="floatsRef"
       >
         <div id="overlay-content"></div>
@@ -85,7 +85,7 @@ template.innerHTML = `<style>
         </div>
       </div>
       <div
-        class="vue-inspector-size-indicator"
+        class="dev-inspector-size-indicator"
         :style="sizeIndicatorStyle"
       />
     </div>
@@ -119,7 +119,7 @@ class DevInspector extends HTMLElement {
 
   switchBtnVisible = () => {
     const toggleInspectorContainer = this.root.querySelector('#toggle-inspector-container')
-    !this.enabled && toggleInspectorContainer.classList.add('vue-inspector-container--disabled')
+    !this.enabled && toggleInspectorContainer.classList.add('dev-inspector-container--disabled')
   }
 
   toggleEventListener = () => {
@@ -143,9 +143,9 @@ class DevInspector extends HTMLElement {
   toggleBtnVisible = () => {
     const btn = this.root.querySelector('#inspector-btn')
     if (this.enabled)
-      btn.classList.add('vue-inspector-button--active')
+      btn.classList.add('dev-inspector-button--active')
     else
-      btn.classList.remove('vue-inspector-button--active')
+      btn.classList.remove('dev-inspector-button--active')
   }
 
   toggleEnabled = () => {
@@ -256,7 +256,7 @@ class DevInspector extends HTMLElement {
 
   // update size indicator style
   sizeIndicatorStyle = () => {
-    const targetNode = this.root.querySelector('.vue-inspector-size-indicator')
+    const targetNode = this.root.querySelector('.dev-inspector-size-indicator')
     targetNode.style.left = `${this.position.x}px`
     targetNode.style.top = `${this.position.y}px`
     targetNode.style.width = `${this.position.width}px`