@code-inspector/vite 1.1.0

package/README.md

@@ -0,0 +1,393 @@
+<div align="center">
+<img src="https://github.com/zh-lx/code-inspector/assets/73059627/842c3e88-dca7-4743-854c-d61093d3d34f" width="160px" style="margin-bottom: 12px;" />
+
+<p align="center">
+  <h2>code-inspector</h2>
+  <a href="https://inspector.fe-dev.cn">中文文档</a> | <a href="https://inspector.fe-dev.cn/en">Documentation</a>
+</p>
+
+[![NPM version](https://img.shields.io/npm/v/code-inspector-plugin.svg)](https://www.npmjs.com/package/code-inspector-plugin)
+[![GITHUB star](https://img.shields.io/github/stars/zh-lx/code-inspector?style=flat&label=%E2%AD%90%EF%B8%8F%20stars)](https://github.com/zh-lx/code-inspector)
+[![NPM Downloads](https://img.shields.io/npm/dm/code-inspector-plugin.svg)](https://npmcharts.netlify.app/compare/code-inspector-plugin?minimal=true)
+[![MIT-license](https://img.shields.io/npm/l/code-inspector.svg)](https://opensource.org/licenses/MIT)
+[![GITHUB-language](https://img.shields.io/github/languages/top/zh-lx/code-inspector?logoColor=purple&color=purple)](https://github.com/zh-lx/code-inspector)
+
+</div>
+
+<hr />
+
+## 📖 Introduction
+
+Click the element on the page, it can automatically open the code editor and position the cursor to the source code of the element.
+
+![code-inspector](https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/demo.gif)
+
+## 💻 Try it out online
+
+- [vue online demo](https://stackblitz.com/edit/vitejs-vite-4pseos?file=vite.config.ts)
+- [react online demo](https://stackblitz.com/edit/vitejs-vite-svtwrr?file=vite.config.ts)
+- [preact online demo](https://stackblitz.com/edit/vitejs-vite-iyawbf?file=vite.config.ts)
+- [solid online demo](https://stackblitz.com/edit/solidjs-templates-6u76jn?file=vite.config.ts)
+- [qwik online demo](https://stackblitz.com/edit/vitejs-vite-antzds?file=vite.config.ts)
+- [svelte online demo](https://stackblitz.com/edit/vitejs-vite-zoncqr?file=vite.config.ts)
+- [astro online demo](https://stackblitz.com/edit/withastro-astro-f5xq1t?file=astro.config.mjs)
+
+## 🎨 Support
+
+The following are which compilers, web frameworks and editors we supported now:
+
+- The following bundlers are currently supported:<br />
+  ✅ webpack<br />
+  ✅ vite<br />
+  ✅ rspack / rsbuild<br />
+  ✅ farm<br />
+  ✅ esbuild<br />
+  ✅ turbopack<br />
+  ✅ mako<br />
+- The following Web frameworks are currently supported:<br />
+  ✅ vue2 / vue3 / nuxt<br />
+  ✅ react / nextjs / umijs<br />
+  ✅ preact<br />
+  ✅ solid<br />
+  ✅ qwik<br />
+  ✅ svelte<br />
+  ✅ astro<br />
+- The following code editors are currently supported:<br />
+  [VSCode](https://code.visualstudio.com/) | [Cursor](https://www.cursor.com/) | [Windsurf](https://codeium.com/windsurf) | [WebStorm](https://www.jetbrains.com/webstorm/) | [Atom](https://atom.io/) | [HBuilderX](https://www.dcloud.io/hbuilderx.html) | [PhpStorm](https://www.jetbrains.com/phpstorm/) | [PyCharm](https://www.jetbrains.com/pycharm/) | [IntelliJ IDEA](https://www.jetbrains.com/idea/) | [and Others](https://inspector.fe-dev.cn/en/guide/ide.html)
+
+## 🚀 Install
+
+```perl
+npm i code-inspector-plugin -D
+# or
+yarn add code-inspector-plugin -D
+# or
+pnpm add code-inspector-plugin -D
+```
+
+## 🌈 Usage
+
+Please check here for more usage information: [code-inspector-plugin configuration](https://inspector.fe-dev.cn/en/guide/start.html#configuration)
+
+- 1.Configuring Build Tools
+
+  <details>
+    <summary>Click to expand configuration about: <b>webpack</b></summary>
+
+  ```js
+  // webpack.config.js
+  const { codeInspectorPlugin } = require('code-inspector-plugin');
+
+  module.exports = () => ({
+    plugins: [
+      codeInspectorPlugin({
+        bundler: 'webpack',
+      }),
+    ],
+  });
+  ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>vite</b></summary>
+
+  ```js
+  // vite.config.js
+  import { defineConfig } from 'vite';
+  import { codeInspectorPlugin } from 'code-inspector-plugin';
+
+  export default defineConfig({
+    plugins: [
+      codeInspectorPlugin({
+        bundler: 'vite',
+      }),
+    ],
+  });
+  ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>rspack</b></summary>
+
+  ```js
+  // rspack.config.js
+  const { codeInspectorPlugin } = require('code-inspector-plugin');
+
+  module.exports = {
+    // other config...
+    plugins: [
+      codeInspectorPlugin({
+        bundler: 'rspack',
+      }),
+      // other plugins...
+    ],
+  };
+  ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>rsbuild</b></summary>
+
+  ```js
+  // rsbuild.config.js
+  const { codeInspectorPlugin } = require('code-inspector-plugin');
+
+  module.exports = {
+    // other config...
+    tools: {
+      rspack: {
+        plugins: [
+          codeInspectorPlugin({
+            bundler: 'rspack',
+          }),
+        ],
+      },
+    },
+  };
+  ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>esbuild</b></summary>
+
+  ```js
+  // esbuild.config.js
+  const esbuild = require('esbuild');
+  const { codeInspectorPlugin } = require('code-inspector-plugin');
+
+  esbuild.build({
+    // other configs...
+    // [注意] esbuild 中使用时，dev 函数的返回值需自己根据环境判断，本地开发的环境返回 true，线上打包返回 false
+    plugins: [codeInspectorPlugin({ bundler: 'esbuild', dev: () => true })],
+  });
+  ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>farm</b></summary>
+
+  ```js
+  // farm.config.js
+  import { defineConfig } from '@farmfe/core';
+  import { codeInspectorPlugin } from 'code-inspector-plugin';
+
+  export default defineConfig({
+    vitePlugins: [
+      codeInspectorPlugin({
+        bundler: 'vite',
+      }),
+      // ...other code
+    ],
+  });
+  ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>vue-cli</b></summary>
+
+  ```js
+  // vue.config.js
+  const { codeInspectorPlugin } = require('code-inspector-plugin');
+
+  module.exports = {
+    // ...other code
+    chainWebpack: (config) => {
+      config.plugin('code-inspector-plugin').use(
+        codeInspectorPlugin({
+          bundler: 'webpack',
+        })
+      );
+    },
+  };
+  ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>nuxt</b></summary>
+
+  - For nuxt3.x :
+
+    ```js
+    // nuxt.config.js
+    import { codeInspectorPlugin } from 'code-inspector-plugin';
+
+    // https://nuxt.com/docs/api/configuration/nuxt-config
+    export default defineNuxtConfig({
+      vite: {
+        plugins: [codeInspectorPlugin({ bundler: 'vite' })],
+      },
+    });
+    ```
+
+  - For nuxt2.x :
+
+    ```js
+    // nuxt.config.js
+    import { codeInspectorPlugin } from 'code-inspector-plugin';
+
+    export default {
+      build: {
+        extend(config) {
+          config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
+          return config;
+        },
+      },
+    };
+    ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>next.js</b></summary>
+
+  - For next.js(<= 14.x):
+
+    ```js
+    // next.config.js
+    const { codeInspectorPlugin } = require('code-inspector-plugin');
+
+    const nextConfig = {
+      webpack: (config, { dev, isServer }) => {
+        config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
+        return config;
+      },
+    };
+
+    module.exports = nextConfig;
+    ```
+
+  - For next.js(15.0.x ~ 15.2.x):
+
+    ```js
+    import type { NextConfig } from 'next';
+    import { codeInspectorPlugin } from 'code-inspector-plugin';
+
+    const nextConfig: NextConfig = {
+      experimental: {
+        turbo: {
+          rules: codeInspectorPlugin({
+            bundler: 'turbopack',
+          }),
+        },
+      },
+    };
+
+    export default nextConfig;
+    ```
+
+  - For next.js(>= 15.3.x):
+
+    ```js
+    // next.config.js
+    import type { NextConfig } from 'next';
+    import { codeInspectorPlugin } from 'code-inspector-plugin';
+
+    const nextConfig: NextConfig = {
+      turbopack: {
+        rules: codeInspectorPlugin({
+          bundler: 'turbopack',
+        }),
+      },
+    };
+
+    export default nextConfig;
+    ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>umi.js</b></summary>
+
+  - With webpack:
+
+    ```js
+    // umi.config.js or umirc.js
+    import { defineConfig } from '@umijs/max';
+    import { codeInspectorPlugin } from 'code-inspector-plugin';
+
+    export default defineConfig({
+      chainWebpack(memo) {
+        memo.plugin('code-inspector-plugin').use(
+          codeInspectorPlugin({
+            bundler: 'webpack',
+          })
+        );
+      },
+      // other config
+    });
+    ```
+
+  - With mako:
+
+    ```ts
+    // .umirc.ts
+    import { defineConfig } from 'umi';
+    import { codeInspectorPlugin } from 'code-inspector-plugin';
+
+    export default defineConfig({
+      // other config...
+      mako: {
+        plugins: [
+          codeInspectorPlugin({
+            bundler: 'mako',
+          }),
+        ],
+      },
+    });
+    ```
+
+  </details>
+
+  <details>
+    <summary>Click to expand configuration about: <b>astro</b></summary>
+
+  ```js
+  // astro.config.mjs
+  import { defineConfig } from 'astro/config';
+  import { codeInspectorPlugin } from 'code-inspector-plugin';
+
+  export default defineConfig({
+    vite: {
+      plugins: [codeInspectorPlugin({ bundler: 'vite' })],
+    },
+  });
+  ```
+
+  </details>
+
+- 2.Using the function
+
+  Now you can enjoy using it!~
+
+  When pressing the combination keys on the page, moving the mouse over the page will display a mask layer on the DOM with relevant information. Clicking will automatically open the IDE and position the cursor to the corresponding code location. (The default combination keys for Mac are `Option + Shift`; for Windows, it's `Alt + Shift`, and the browser console will output related combination key prompts)
+
+  <img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/console-success.png" width="700px" />
+
+## 👨‍💻 Contributors
+
+Special thanks to the contributors of this project:<br />
+
+<img src="https://contrib.rocks/image?repo=zh-lx/code-inspector" height="40" />
+
+## 📧 Communication and Feedback
+
+For any usage issues, please leave a message below my [Twitter](https://twitter.com/zhulxing312147) post or [submit an issue](https://github.com/zh-lx/code-inspector/issues) on Github.
+
+For Chinese users, you can join the QQ group `769748484` or add the author's WeiXin account `zhoulx1688888` for consultation and feedback:
+
+<div style="display: flex; column-gap: 16px; row-gap: 16px; flex-wrap: wrap;">
+  <img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/qq-group.png" width="200" height="272" />
+  <img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/wx-group.jpg" width="200" height="272" />
+  <img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/wx-qrcode.jpg" width="200" height="272" />
+</div>
+
+## 💖 Sponsor
+
+Sponsoring this project can help the author create better. If you are willing, thanks for sponsoring me through [here](https://inspector.fe-dev.cn/en/more/sponsor.html).

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var P=Object.defineProperty,x=Object.defineProperties;var C=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var v=(e,t,r)=>t in e?P(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,g=(e,t)=>{for(var r in t||(t={}))W.call(t,r)&&v(e,r,t[r]);if(d)for(var r of d(t))j.call(t,r)&&v(e,r,t[r]);return e},f=(e,t)=>x(e,C(t));var h=(e,t,r)=>new Promise((n,a)=>{var p=l=>{try{o(r.next(l))}catch(s){a(s)}},m=l=>{try{o(r.throw(l))}catch(s){a(s)}},o=l=>l.done?n(l.value):Promise.resolve(l.value).then(p,m);o((r=r.apply(e,t)).next())});Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@code-inspector/core"),T="@code-inspector/vite",b=["isJsx","isTsx","lang.jsx","lang.tsx"];function w(e){const t={port:0,entry:"",output:e.output,envDir:""};return f(g({name:T},e.enforcePre===!1?{}:{enforce:"pre"}),{apply(n,{command:a}){return!e.close&&i.isDev(e.dev,a==="serve")},configResolved(n){t.envDir=n.envDir||n.root},transform(n,a){return h(this,null,function*(){if(i.isExcludedFile(a,e))return n;n=yield i.getCodeWithWebComponent({options:e,file:a,code:n,record:t});const{escapeTags:p=[],mappings:m}=e,[o,l]=a.split("?",2);let s=i.normalizePath(o);s=i.getMappingFilePath(s,m);const c=new URLSearchParams(l);if(e.match&&!e.match.test(s))return n;let u="";return i.isJsTypeFile(s)||s.endsWith(".vue")&&(b.some(y=>c.get(y)!==null)||c.get("lang")==="tsx"||c.get("lang")==="jsx")?u="jsx":s.endsWith(".html")&&c.get("type")==="template"&&c.has("vue")||s.endsWith(".vue")&&c.get("type")!=="style"&&c.get("raw")===null?u="vue":s.endsWith(".svelte")&&(u="svelte"),u?i.transformCode({content:n,filePath:s,fileType:u,escapeTags:p,pathType:e.pathType}):n})},transformIndexHtml(n){return h(this,null,function*(){const a=yield i.getCodeWithWebComponent({options:f(g({},e),{importClient:"code"}),file:"main.js",code:"",record:t,inject:!0});return n.replace("<head>",'<head><script type="module">\n'.concat(a,"\n<\/script>"))})}})}exports.ViteCodeInspectorPlugin=w;

package/dist/index.mjs

@@ -0,0 +1,93 @@
+var x = Object.defineProperty, P = Object.defineProperties;
+var j = Object.getOwnPropertyDescriptors;
+var g = Object.getOwnPropertySymbols;
+var T = Object.prototype.hasOwnProperty, W = Object.prototype.propertyIsEnumerable;
+var v = (e, t, r) => t in e ? x(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, f = (e, t) => {
+  for (var r in t || (t = {}))
+    T.call(t, r) && v(e, r, t[r]);
+  if (g)
+    for (var r of g(t))
+      W.call(t, r) && v(e, r, t[r]);
+  return e;
+}, h = (e, t) => P(e, j(t));
+var o = (e, t, r) => new Promise((s, a) => {
+  var p = (l) => {
+    try {
+      u(r.next(l));
+    } catch (n) {
+      a(n);
+    }
+  }, m = (l) => {
+    try {
+      u(r.throw(l));
+    } catch (n) {
+      a(n);
+    }
+  }, u = (l) => l.done ? s(l.value) : Promise.resolve(l.value).then(p, m);
+  u((r = r.apply(e, t)).next());
+});
+import { isDev as C, isExcludedFile as w, getCodeWithWebComponent as d, normalizePath as D, getMappingFilePath as F, isJsTypeFile as I, transformCode as J } from "@code-inspector/core";
+const L = "@code-inspector/vite", R = ["isJsx", "isTsx", "lang.jsx", "lang.tsx"];
+function q(e) {
+  const t = {
+    port: 0,
+    entry: "",
+    output: e.output,
+    envDir: ""
+  };
+  return h(f({
+    name: L
+  }, e.enforcePre === !1 ? {} : { enforce: "pre" }), {
+    apply(s, { command: a }) {
+      return !e.close && C(e.dev, a === "serve");
+    },
+    configResolved(s) {
+      t.envDir = s.envDir || s.root;
+    },
+    transform(s, a) {
+      return o(this, null, function* () {
+        if (w(a, e))
+          return s;
+        s = yield d({
+          options: e,
+          file: a,
+          code: s,
+          record: t
+        });
+        const { escapeTags: p = [], mappings: m } = e, [u, l] = a.split("?", 2);
+        let n = D(u);
+        n = F(n, m);
+        const i = new URLSearchParams(l);
+        if (e.match && !e.match.test(n))
+          return s;
+        let c = "";
+        return I(n) || n.endsWith(".vue") && (R.some((y) => i.get(y) !== null) || i.get("lang") === "tsx" || i.get("lang") === "jsx") ? c = "jsx" : n.endsWith(".html") && i.get("type") === "template" && i.has("vue") || n.endsWith(".vue") && i.get("type") !== "style" && i.get("raw") === null ? c = "vue" : n.endsWith(".svelte") && (c = "svelte"), c ? J({
+          content: s,
+          filePath: n,
+          fileType: c,
+          escapeTags: p,
+          pathType: e.pathType
+        }) : s;
+      });
+    },
+    // 追加到 html 中，适配 MPA 项目
+    transformIndexHtml(s) {
+      return o(this, null, function* () {
+        const a = yield d({
+          options: h(f({}, e), { importClient: "code" }),
+          file: "main.js",
+          code: "",
+          record: t,
+          inject: !0
+        });
+        return s.replace(
+          "<head>",
+          '<head><script type="module">\n'.concat(a, "\n<\/script>")
+        );
+      });
+    }
+  });
+}
+export {
+  q as ViteCodeInspectorPlugin
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@code-inspector/vite",
+  "version": "1.1.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "typings": "./types/index.d.ts",
+  "repository": "git@github.com:zh-lx/code-inspector.git",
+  "author": "zh-lx <18366276315@163.com>",
+  "license": "MIT",
+  "homepage": "https://inspector.fe-dev.cn/en",
+  "description": "Click the dom on the page, it will open your IDE and position the cursor to the source code location of the dom.",
+  "files": [
+    "dist",
+    "types"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "keywords": [
+    "webpack",
+    "vite",
+    "plugin",
+    "vue",
+    "vscode",
+    "inspector",
+    "inspect"
+  ],
+  "bugs": {
+    "url": "https://github.com/zh-lx/code-inspector/issues"
+  },
+  "dependencies": {
+    "@code-inspector/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^16.0.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.3.9"
+  },
+  "scripts": {
+    "clear": "rimraf ./dist && rimraf ./types",
+    "build": "pnpm clear && tsc && vite build",
+    "pub": "pnpm publish",
+    "pub:beta": "pnpm publish --tag beta"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,16 @@
+import { CodeOptions } from '@code-inspector/core';
+interface Options extends CodeOptions {
+    close?: boolean;
+    output: string;
+}
+export declare function ViteCodeInspectorPlugin(options: Options): {
+    apply(_: any, { command }: {
+        command: any;
+    }): boolean;
+    configResolved(config: any): void;
+    transform(code: string, id: string): Promise<string>;
+    transformIndexHtml(html: any): Promise<any>;
+    enforce?: "pre";
+    name: string;
+};
+export {};