Criada a API do site
This commit is contained in:
Caio1w
21
node_modules/vite-plugin-vue-inspector/LICENSE
generated
vendored
Normal file
21
node_modules/vite-plugin-vue-inspector/LICENSE
generated
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2022 webfansplz
|
||||
|
||||
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.
|
||||
329
node_modules/vite-plugin-vue-inspector/README.md
generated
vendored
Normal file
329
node_modules/vite-plugin-vue-inspector/README.md
generated
vendored
Normal file
@@ -0,0 +1,329 @@
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/webfansplz/vite-plugin-vue-inspector"><img src="./logo.svg" width="180" alt="vite-plugin-vue-inspector"></a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.npmjs.com/package/vite-plugin-vue-inspector" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/v/vite-plugin-vue-inspector" alt="NPM Version" /></a>
|
||||
<a href="https://www.npmjs.com/package/vite-plugin-vue-inspector" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/dt/vite-plugin-vue-inspector" alt="NPM Downloads" /></a>
|
||||
<a href="https://github.com/webfansplz/vite-plugin-vue-inspector/blob/master/LICENSE" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/github/license/webfansplz/vite-plugin-vue-inspector" alt="License" /></a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://stackblitz.com/edit/vitejs-vite-rbr2as?file=src%2FApp.vue"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
|
||||
</p>
|
||||
|
||||
## 📖 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.
|
||||
|
||||
<p align="center">
|
||||
<img src="./public/preview.gif" alt="vite-plugin-vue-inspector">
|
||||
</p>
|
||||
|
||||
## 📦 Installation
|
||||
|
||||
```bash
|
||||
|
||||
# vite-plugin-vue-inspector
|
||||
|
||||
pnpm install vite-plugin-vue-inspector -D
|
||||
|
||||
# unplugin-vue-inspector
|
||||
|
||||
pnpm install unplugin-vue-inspector -D
|
||||
|
||||
```
|
||||
|
||||
## 🦄 Usage
|
||||
|
||||
### Configuration Vite
|
||||
|
||||
```ts
|
||||
// for Vue2
|
||||
|
||||
import { defineConfig, } from 'vite'
|
||||
import { createVuePlugin, } from 'vite-plugin-vue2'
|
||||
|
||||
import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
createVuePlugin(),
|
||||
Inspector({
|
||||
vue: 2
|
||||
}),
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
```ts
|
||||
// for Vue3
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import Vue from '@vitejs/plugin-vue'
|
||||
|
||||
import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [Vue(), Inspector()],
|
||||
})
|
||||
```
|
||||
|
||||
```ts
|
||||
// for Nuxt3
|
||||
// nuxt.config.ts
|
||||
import { defineNuxtConfig } from 'nuxt/config'
|
||||
import Inspector from 'vite-plugin-vue-inspector'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
['unplugin-vue-inspector/nuxt', {
|
||||
enabled: true,
|
||||
toggleButtonVisibility: 'always',
|
||||
}],
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
|
||||
```ts
|
||||
interface VitePluginInspectorOptions {
|
||||
/**
|
||||
* Vue version
|
||||
* @default 3
|
||||
*/
|
||||
vue?: 2 | 3
|
||||
|
||||
/**
|
||||
* Default enable state
|
||||
* @default false
|
||||
*/
|
||||
enabled?: boolean
|
||||
|
||||
/**
|
||||
* Define a combo key to toggle inspector
|
||||
* @default 'control-shift' on windows, 'meta-shift' on other os
|
||||
*
|
||||
* any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
|
||||
* examples: control-shift, control-o, control-alt-s meta-x control-meta
|
||||
* Some keys have native behavior (e.g. alt-s opens history menu on firefox).
|
||||
* To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
|
||||
* You can also disable it by setting `false`.
|
||||
*/
|
||||
toggleComboKey?: string | false
|
||||
|
||||
/**
|
||||
* Toggle button visibility
|
||||
* @default 'active'
|
||||
*/
|
||||
toggleButtonVisibility?: 'always' | 'active' | 'never'
|
||||
|
||||
/**
|
||||
* Toggle button display position
|
||||
* @default top-right
|
||||
*/
|
||||
toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
|
||||
|
||||
/**
|
||||
* append an import to the module id ending with `appendTo` instead of adding a script into body
|
||||
* useful for frameworks that do not support transformIndexHtml hook (e.g. Nuxt3)
|
||||
*
|
||||
* WARNING: only set this if you know exactly what it does.
|
||||
*/
|
||||
appendTo?: string | RegExp
|
||||
|
||||
/**
|
||||
* Customize openInEditor host (e.g. http://localhost:3000)
|
||||
* @default false
|
||||
* @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
|
||||
*/
|
||||
openInEditorHost?: string | false
|
||||
|
||||
/**
|
||||
* lazy load inspector times (ms)
|
||||
* @default false
|
||||
*/
|
||||
lazyLoad?: number | false
|
||||
|
||||
/**
|
||||
* disable inspector on editor open
|
||||
* @default false
|
||||
*/
|
||||
disableInspectorOnEditorOpen?: boolean
|
||||
|
||||
/**
|
||||
* Hide information in VNode and produce clean html in DevTools
|
||||
*
|
||||
* Currently, it only works for Vue 3
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
cleanHtml?: boolean
|
||||
|
||||
/**
|
||||
* Target editor when open in editor (v5.1.0+)
|
||||
*
|
||||
* @default code (Visual Studio Code)
|
||||
*/
|
||||
launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'cursor'
|
||||
}
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
- [Vue2](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue2)
|
||||
- [Vue3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue3)
|
||||
- [Nuxt3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/nuxt)
|
||||
|
||||
## Supported editors
|
||||
|
||||
| Value | Editor | Linux | Windows | OSX |
|
||||
|--------|------|:------:|:------:|:------:|
|
||||
| `appcode` | [AppCode](https://www.jetbrains.com/objc/) | | |✓|
|
||||
| `atom` | [Atom](https://atom.io/) |✓|✓|✓|
|
||||
| `atom-beta` | [Atom Beta](https://atom.io/beta) | | |✓|
|
||||
| `brackets` | [Brackets](http://brackets.io/) |✓|✓|✓|
|
||||
| `clion` | [Clion](https://www.jetbrains.com/clion/) | |✓|✓|
|
||||
| `code` | [Visual Studio Code](https://code.visualstudio.com/) |✓|✓|✓|
|
||||
| `code-insiders` | [Visual Studio Code Insiders](https://code.visualstudio.com/insiders/) |✓|✓|✓|
|
||||
| `codium` | [VSCodium](https://github.com/VSCodium/vscodium) |✓|✓|✓|
|
||||
| `emacs` | [Emacs](https://www.gnu.org/software/emacs/) |✓| | |
|
||||
| `idea` | [IDEA](https://www.jetbrains.com/idea/) |✓|✓|✓|
|
||||
| `notepad++` | [Notepad++](https://notepad-plus-plus.org/download/v7.5.4.html) | |✓| |
|
||||
| `pycharm` | [PyCharm](https://www.jetbrains.com/pycharm/) |✓|✓|✓|
|
||||
| `phpstorm` | [PhpStorm](https://www.jetbrains.com/phpstorm/) |✓|✓|✓|
|
||||
| `rubymine` | [RubyMine](https://www.jetbrains.com/ruby/) |✓|✓|✓|
|
||||
| `sublime` | [Sublime Text](https://www.sublimetext.com/) |✓|✓|✓|
|
||||
| `vim` | [Vim](http://www.vim.org/) |✓| | |
|
||||
| `visualstudio` | [Visual Studio](https://www.visualstudio.com/vs/) | | |✓|
|
||||
| `webstorm` | [WebStorm](https://www.jetbrains.com/webstorm/) |✓|✓|✓|
|
||||
| `cursor` | [Cursor](https://www.cursor.com/) |✓|✓|✓|
|
||||
|
||||
## 🔌 Configuration IDE / Editor
|
||||
|
||||
**Starting from v5.1.0, We recommend using the `launchEditor` option configuration to specify the IDE** (Please ensure that the editor's environment variables are correctly configured beforehand.)
|
||||
|
||||
It uses an **environment variable** named **`LAUNCH_EDITOR`** to specify an IDE application, but if you do not set this variable, it will try to open a common IDE that you have open or installed once it is certified.
|
||||
|
||||
For example, if you want it always open VS Code when inspection clicked, set `export LAUNCH_EDITOR=code` in your shell.
|
||||
|
||||
|
||||
### VS Code
|
||||
|
||||
- install VS Code command line tools, [see the official docs](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)
|
||||
|
||||
|
||||
- set env to shell, like `.bashrc` or `.zshrc`
|
||||
|
||||
```bash
|
||||
export LAUNCH_EDITOR=code
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
|
||||
### VS Code with WSL (Windows)
|
||||
|
||||
- add the configuration in the `settings.json`
|
||||
|
||||
- restart the VS Code (All Windows should be closed to take effect)
|
||||
|
||||
```json
|
||||
{
|
||||
// other config...
|
||||
|
||||
"terminal.integrated.env.linux": {
|
||||
"EDITOR": "code"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### WebStorm
|
||||
|
||||
- just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)
|
||||
|
||||
```bash
|
||||
export LAUNCH_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'
|
||||
```
|
||||
|
||||
**OR**
|
||||
|
||||
- install WebStorm command line tools
|
||||
|
||||
- then set env to shell, like `.bashrc` or `.zshrc`
|
||||
|
||||
```bash
|
||||
export LAUNCH_EDITOR=webstorm
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
### PhpStorm
|
||||
|
||||
- just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)
|
||||
|
||||
```bash
|
||||
export LAUNCH_EDITOR='/Applications/PhpStorm.app/Contents/MacOS/phpstorm'
|
||||
```
|
||||
|
||||
**OR**
|
||||
|
||||
- install PhpStorm command line tools
|
||||
|
||||
- then set env to shell, like `.bashrc` or `.zshrc`
|
||||
|
||||
```bash
|
||||
export LAUNCH_EDITOR=phpstorm
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
### Vim
|
||||
|
||||
Yes! you can also use vim if you want, just set env to shell
|
||||
|
||||
```bash
|
||||
export LAUNCH_EDITOR=vim
|
||||
```
|
||||
|
||||
<br />
|
||||
|
||||
## 💡 Notice
|
||||
|
||||
- **[BREAKING CHANGE] From v1.0, `enabled` option default value changed from `true` to `false` .**
|
||||
- It only work in develop mode .
|
||||
- It does not currently support `Template Engine (e.g. pug)` .
|
||||
|
||||
## 👨💻 Programmatic Usage
|
||||
|
||||
You can also use control inspector programmatically, by accessing the `__VUE_INSPECTOR__` global variable.
|
||||
|
||||
```ts
|
||||
import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
|
||||
|
||||
const inspector: VueInspectorClient = window.__VUE_INSPECTOR__
|
||||
|
||||
if (inspector) {
|
||||
// enable inspector
|
||||
inspector.enable()
|
||||
// or
|
||||
inspector.disable()
|
||||
}
|
||||
```
|
||||
|
||||
## 🌸 Credits
|
||||
|
||||
This project is inspired by [react-dev-inspector](https://github.com/zthxxx/react-dev-inspector) .
|
||||
|
||||
Partially implementation is inspired by [vite-plugin-svelte-inspector](https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/vite-plugin-svelte/src/ui/inspector) .
|
||||
|
||||
## 🤖️ Analysis of Theory
|
||||
|
||||
[Chinese] [点击页面元素,这个Vite插件帮我打开了Vue组件](https://juejin.cn/post/7077347158545924127)
|
||||
## 📄 License
|
||||
|
||||
[MIT LICENSE](./LICENSE)
|
||||
327
node_modules/vite-plugin-vue-inspector/dist/index.cjs
generated
vendored
Normal file
327
node_modules/vite-plugin-vue-inspector/dist/index.cjs
generated
vendored
Normal file
@@ -0,0 +1,327 @@
|
||||
var __create = Object.create;
|
||||
var __defProp = Object.defineProperty;
|
||||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
||||
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||||
var __getProtoOf = Object.getPrototypeOf;
|
||||
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||
var __export = (target, all) => {
|
||||
for (var name in all)
|
||||
__defProp(target, name, { get: all[name], enumerable: true });
|
||||
};
|
||||
var __copyProps = (to, from, except, desc) => {
|
||||
if (from && typeof from === "object" || typeof from === "function") {
|
||||
for (let key of __getOwnPropNames(from))
|
||||
if (!__hasOwnProp.call(to, key) && key !== except)
|
||||
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
||||
}
|
||||
return to;
|
||||
};
|
||||
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
||||
// If the importer is in node compatibility mode or this is not an ESM
|
||||
// file that has been converted to a CommonJS file using a Babel-
|
||||
// compatible transform (i.e. "__esModule" has not been set), then set
|
||||
// "default" to the CommonJS "module.exports" for node compatibility.
|
||||
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
||||
mod
|
||||
));
|
||||
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
||||
|
||||
// src/index.ts
|
||||
var src_exports = {};
|
||||
__export(src_exports, {
|
||||
DEFAULT_INSPECTOR_OPTIONS: () => DEFAULT_INSPECTOR_OPTIONS,
|
||||
default: () => src_default,
|
||||
normalizeComboKeyPrint: () => normalizeComboKeyPrint
|
||||
});
|
||||
module.exports = __toCommonJS(src_exports);
|
||||
|
||||
// ../../node_modules/.pnpm/tsup@7.2.0_postcss@8.4.49_typescript@5.2.2/node_modules/tsup/assets/cjs_shims.js
|
||||
var getImportMetaUrl = () => typeof document === "undefined" ? new URL("file:" + __filename).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
|
||||
var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
|
||||
|
||||
// src/index.ts
|
||||
var import_node_path2 = __toESM(require("path"));
|
||||
var import_node_url = require("url");
|
||||
var import_node_fs = __toESM(require("fs"));
|
||||
var import_node_process = __toESM(require("process"));
|
||||
var import_kolorist = require("kolorist");
|
||||
var import_vite2 = require("vite");
|
||||
var import_magic_string2 = __toESM(require("magic-string"));
|
||||
|
||||
// src/compiler/template.ts
|
||||
var import_node_path = __toESM(require("path"));
|
||||
var import_magic_string = __toESM(require("magic-string"));
|
||||
var import_compiler_dom = require("@vue/compiler-dom");
|
||||
var import_core = require("@babel/core");
|
||||
var import_babel_plugin_jsx = __toESM(require("@vue/babel-plugin-jsx"));
|
||||
var import_plugin_transform_typescript = __toESM(require("@babel/plugin-transform-typescript"));
|
||||
var import_plugin_syntax_import_meta = __toESM(require("@babel/plugin-syntax-import-meta"));
|
||||
var import_plugin_proposal_decorators = __toESM(require("@babel/plugin-proposal-decorators"));
|
||||
var import_plugin_syntax_import_attributes = __toESM(require("@babel/plugin-syntax-import-attributes"));
|
||||
var import_vite = require("vite");
|
||||
var EXCLUDE_TAG = ["template", "script", "style"];
|
||||
var KEY_DATA = "data-v-inspector";
|
||||
async function compileSFCTemplate({ code, id, type }) {
|
||||
const s = new import_magic_string.default(code);
|
||||
const relativePath = (0, import_vite.normalizePath)(import_node_path.default.relative(process.cwd(), id));
|
||||
const result = await new Promise((resolve) => {
|
||||
switch (type) {
|
||||
case "template": {
|
||||
const ast = (0, import_compiler_dom.parse)(code, { comments: true });
|
||||
(0, import_compiler_dom.transform)(ast, {
|
||||
nodeTransforms: [
|
||||
(node) => {
|
||||
if (node.type === 1) {
|
||||
if ((node.tagType === 0 || node.tagType === 1) && !EXCLUDE_TAG.includes(node.tag)) {
|
||||
if (node.loc.source.includes(KEY_DATA))
|
||||
return;
|
||||
const insertPosition = node.props.length ? Math.max(...node.props.map((i) => i.loc.end.offset)) : node.loc.start.offset + node.tag.length + 1;
|
||||
const { line, column } = node.loc.start;
|
||||
const content = ` ${KEY_DATA}="${relativePath}:${line}:${column}"`;
|
||||
s.prependLeft(
|
||||
insertPosition,
|
||||
content
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "jsx": {
|
||||
const ast = (0, import_core.parse)(code, {
|
||||
babelrc: false,
|
||||
configFile: false,
|
||||
comments: true,
|
||||
plugins: [
|
||||
import_plugin_syntax_import_meta.default,
|
||||
[import_babel_plugin_jsx.default, {}],
|
||||
[
|
||||
import_plugin_transform_typescript.default,
|
||||
{ isTSX: true, allowExtensions: true }
|
||||
],
|
||||
[
|
||||
import_plugin_proposal_decorators.default,
|
||||
{ legacy: true }
|
||||
],
|
||||
[
|
||||
import_plugin_syntax_import_attributes.default,
|
||||
{ deprecatedAssertSyntax: true }
|
||||
]
|
||||
]
|
||||
});
|
||||
(0, import_core.traverse)(ast, {
|
||||
enter({ node }) {
|
||||
if (node.type === "JSXElement" && !EXCLUDE_TAG.includes(s.slice(node.openingElement.name.start, node.openingElement.name.end))) {
|
||||
if (node.openingElement.attributes.some(
|
||||
(attr) => attr.type !== "JSXSpreadAttribute" && attr.name.name === KEY_DATA
|
||||
))
|
||||
return;
|
||||
const insertPosition = node.openingElement.end - (node.openingElement.selfClosing ? 2 : 1);
|
||||
const { line, column } = node.loc.start;
|
||||
const content = ` ${KEY_DATA}="${relativePath}:${line}:${column}"`;
|
||||
s.prependLeft(
|
||||
insertPosition,
|
||||
content
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
resolve(s.toString());
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
// src/utils/index.ts
|
||||
function parseVueRequest(id) {
|
||||
const [filename] = id.split("?", 2);
|
||||
const url = new URL(id, "http://domain.inspector");
|
||||
const query = Object.fromEntries(url.searchParams.entries());
|
||||
if (query.vue != null)
|
||||
query.vue = true;
|
||||
if (query.src != null)
|
||||
query.src = true;
|
||||
if (query.index != null)
|
||||
query.index = Number(query.index);
|
||||
if (query.raw != null)
|
||||
query.raw = true;
|
||||
if (query.hasOwnProperty("lang.tsx") || query.hasOwnProperty("lang.jsx"))
|
||||
query.isJsx = true;
|
||||
return {
|
||||
filename,
|
||||
query
|
||||
};
|
||||
}
|
||||
var FS_PREFIX = "/@fs/";
|
||||
var IS_WINDOWS = process.platform === "win32";
|
||||
var queryRE = /\?.*$/s;
|
||||
var hashRE = /#.*$/s;
|
||||
function idToFile(id) {
|
||||
if (id.startsWith(FS_PREFIX))
|
||||
id = id = id.slice(IS_WINDOWS ? FS_PREFIX.length : FS_PREFIX.length - 1);
|
||||
return id.replace(hashRE, "").replace(queryRE, "");
|
||||
}
|
||||
|
||||
// src/index.ts
|
||||
var toggleComboKeysMap = {
|
||||
control: import_node_process.default.platform === "darwin" ? "Control(^)" : "Ctrl(^)",
|
||||
meta: "Command(\u2318)",
|
||||
shift: "Shift(\u21E7)"
|
||||
};
|
||||
function getInspectorPath() {
|
||||
const pluginPath = (0, import_vite2.normalizePath)(import_node_path2.default.dirname((0, import_node_url.fileURLToPath)(importMetaUrl)));
|
||||
return pluginPath.replace(/\/dist$/, "/src");
|
||||
}
|
||||
function normalizeComboKeyPrint(toggleComboKey) {
|
||||
return toggleComboKey.split("-").map((key) => toggleComboKeysMap[key] || key[0].toUpperCase() + key.slice(1)).join((0, import_kolorist.dim)("+"));
|
||||
}
|
||||
var DEFAULT_INSPECTOR_OPTIONS = {
|
||||
vue: 3,
|
||||
enabled: false,
|
||||
toggleComboKey: import_node_process.default.platform === "darwin" ? "meta-shift" : "control-shift",
|
||||
toggleButtonVisibility: "active",
|
||||
toggleButtonPos: "top-right",
|
||||
appendTo: "",
|
||||
lazyLoad: false,
|
||||
launchEditor: import_node_process.default.env.LAUNCH_EDITOR ?? "code",
|
||||
reduceMotion: false
|
||||
};
|
||||
function VitePluginInspector(options = DEFAULT_INSPECTOR_OPTIONS) {
|
||||
const inspectorPath = getInspectorPath();
|
||||
const normalizedOptions = {
|
||||
...DEFAULT_INSPECTOR_OPTIONS,
|
||||
...options
|
||||
};
|
||||
let config;
|
||||
const {
|
||||
vue,
|
||||
appendTo,
|
||||
cleanHtml = vue === 3
|
||||
// Only enabled for Vue 3 by default
|
||||
} = normalizedOptions;
|
||||
if (normalizedOptions.launchEditor)
|
||||
import_node_process.default.env.LAUNCH_EDITOR = normalizedOptions.launchEditor;
|
||||
return [
|
||||
{
|
||||
name: "vite-plugin-vue-inspector",
|
||||
enforce: "pre",
|
||||
apply(_, { command }) {
|
||||
return command === "serve" && import_node_process.default.env.NODE_ENV !== "test";
|
||||
},
|
||||
async resolveId(importee) {
|
||||
if (importee.startsWith("virtual:vue-inspector-options")) {
|
||||
return importee;
|
||||
} else if (importee.startsWith("virtual:vue-inspector-path:")) {
|
||||
const resolved = importee.replace("virtual:vue-inspector-path:", `${inspectorPath}/`);
|
||||
return resolved;
|
||||
}
|
||||
},
|
||||
async load(id) {
|
||||
if (id === "virtual:vue-inspector-options") {
|
||||
return `export default ${JSON.stringify({ ...normalizedOptions, base: config.base })}`;
|
||||
} else if (id.startsWith(inspectorPath)) {
|
||||
const { query } = parseVueRequest(id);
|
||||
if (query.type)
|
||||
return;
|
||||
const file = idToFile(id);
|
||||
if (import_node_fs.default.existsSync(file))
|
||||
return await import_node_fs.default.promises.readFile(file, "utf-8");
|
||||
else
|
||||
console.error(`failed to find file for vue-inspector: ${file}, referenced by id ${id}.`);
|
||||
}
|
||||
},
|
||||
transform(code, id) {
|
||||
const { filename, query } = parseVueRequest(id);
|
||||
const isJsx = filename.endsWith(".jsx") || filename.endsWith(".tsx") || filename.endsWith(".vue") && query.isJsx;
|
||||
const isTpl = filename.endsWith(".vue") && query.type !== "style" && !query.raw;
|
||||
if (isJsx || isTpl)
|
||||
return compileSFCTemplate({ code, id: filename, type: isJsx ? "jsx" : "template" });
|
||||
if (!appendTo)
|
||||
return;
|
||||
if (typeof appendTo === "string" && filename.endsWith(appendTo) || appendTo instanceof RegExp && appendTo.test(filename))
|
||||
return { code: `${code}
|
||||
import 'virtual:vue-inspector-path:load.js'` };
|
||||
},
|
||||
configureServer(server) {
|
||||
const _printUrls = server.printUrls;
|
||||
const { toggleComboKey } = normalizedOptions;
|
||||
toggleComboKey && (server.printUrls = () => {
|
||||
const keys = normalizeComboKeyPrint(toggleComboKey);
|
||||
_printUrls();
|
||||
console.log(` ${(0, import_kolorist.green)("\u279C")} ${(0, import_kolorist.bold)("Vue Inspector")}: ${(0, import_kolorist.green)(`Press ${(0, import_kolorist.yellow)(keys)} in App to toggle the Inspector`)}
|
||||
`);
|
||||
});
|
||||
},
|
||||
transformIndexHtml(html) {
|
||||
if (appendTo)
|
||||
return;
|
||||
return {
|
||||
html,
|
||||
tags: [
|
||||
{
|
||||
tag: "script",
|
||||
injectTo: "head",
|
||||
attrs: {
|
||||
type: "module",
|
||||
src: `${config.base || "/"}@id/virtual:vue-inspector-path:load.js`
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
configResolved(resolvedConfig) {
|
||||
config = resolvedConfig;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "vite-plugin-vue-inspector:post",
|
||||
enforce: "post",
|
||||
apply(_, { command }) {
|
||||
return cleanHtml && vue === 3 && command === "serve" && import_node_process.default.env.NODE_ENV !== "test";
|
||||
},
|
||||
transform(code) {
|
||||
if (code.includes("_interopVNode"))
|
||||
return;
|
||||
if (!code.includes("data-v-inspector"))
|
||||
return;
|
||||
const fn = /* @__PURE__ */ new Set();
|
||||
const s = new import_magic_string2.default(code);
|
||||
s.replace(/(createElementVNode|createVNode|createElementBlock|createBlock) as _\1,?/g, (_, name) => {
|
||||
fn.add(name);
|
||||
return "";
|
||||
});
|
||||
if (!fn.size)
|
||||
return;
|
||||
s.appendLeft(0, `/* Injection by vite-plugin-vue-inspector Start */
|
||||
import { ${Array.from(fn.values()).map((i) => `${i} as __${i}`).join(",")} } from 'vue'
|
||||
function _interopVNode(vnode) {
|
||||
if (vnode && vnode.props && 'data-v-inspector' in vnode.props) {
|
||||
const data = vnode.props['data-v-inspector']
|
||||
delete vnode.props['data-v-inspector']
|
||||
Object.defineProperty(vnode.props, '__v_inspector', { value: data, enumerable: false })
|
||||
}
|
||||
return vnode
|
||||
}
|
||||
${Array.from(fn.values()).map((i) => `function _${i}(...args) { return _interopVNode(__${i}(...args)) }`).join("\n")}
|
||||
/* Injection by vite-plugin-vue-inspector End */
|
||||
`);
|
||||
return {
|
||||
code: s.toString(),
|
||||
map: s.generateMap({ hires: "boundary" })
|
||||
};
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
var src_default = VitePluginInspector;
|
||||
// Annotate the CommonJS export names for ESM import in node:
|
||||
0 && (module.exports = {
|
||||
DEFAULT_INSPECTOR_OPTIONS,
|
||||
normalizeComboKeyPrint
|
||||
});
|
||||
101
node_modules/vite-plugin-vue-inspector/dist/index.d.mts
generated
vendored
Normal file
101
node_modules/vite-plugin-vue-inspector/dist/index.d.mts
generated
vendored
Normal file
@@ -0,0 +1,101 @@
|
||||
import { PluginOption } from 'vite';
|
||||
|
||||
interface VueInspectorClient {
|
||||
enabled: boolean;
|
||||
position: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
linkParams: {
|
||||
file: string;
|
||||
line: number;
|
||||
column: number;
|
||||
};
|
||||
enable: () => void;
|
||||
disable: () => void;
|
||||
toggleEnabled: () => void;
|
||||
onEnabled: () => void;
|
||||
onDisabled: () => void;
|
||||
openInEditor: (url: URL) => void;
|
||||
onUpdated: () => void;
|
||||
}
|
||||
interface VitePluginInspectorOptions {
|
||||
/**
|
||||
* Vue version
|
||||
* @default 3
|
||||
*/
|
||||
vue?: 2 | 3;
|
||||
/**
|
||||
* Default enable state
|
||||
* @default false
|
||||
*/
|
||||
enabled?: boolean;
|
||||
/**
|
||||
* Define a combo key to toggle inspector
|
||||
* @default 'control-shift' on windows, 'meta-shift' on other os
|
||||
*
|
||||
* any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
|
||||
* examples: control-shift, control-o, control-alt-s meta-x control-meta
|
||||
* Some keys have native behavior (e.g. alt-s opens history menu on firefox).
|
||||
* To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
|
||||
* You can also disable it by setting `false`.
|
||||
*/
|
||||
toggleComboKey?: string | false;
|
||||
/**
|
||||
* Toggle button visibility
|
||||
* @default 'active'
|
||||
*/
|
||||
toggleButtonVisibility?: 'always' | 'active' | 'never';
|
||||
/**
|
||||
* Toggle button display position
|
||||
* @default top-right
|
||||
*/
|
||||
toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
||||
/**
|
||||
* append an import to the module id ending with `appendTo` instead of adding a script into body
|
||||
* useful for frameworks that do not support transformIndexHtml hook (e.g. Nuxt3)
|
||||
*
|
||||
* WARNING: only set this if you know exactly what it does.
|
||||
*/
|
||||
appendTo?: string | RegExp;
|
||||
/**
|
||||
* Customize openInEditor host (e.g. http://localhost:3000)
|
||||
* @default false
|
||||
* @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
|
||||
*/
|
||||
openInEditorHost?: string | false;
|
||||
/**
|
||||
* lazy load inspector times (ms)
|
||||
* @default false
|
||||
*/
|
||||
lazyLoad?: number | false;
|
||||
/**
|
||||
* disable inspector on editor open
|
||||
* @default false
|
||||
*/
|
||||
disableInspectorOnEditorOpen?: boolean;
|
||||
/**
|
||||
* Hide information in VNode and produce clean html in DevTools
|
||||
*
|
||||
* Currently, it only works for Vue 3
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
cleanHtml?: boolean;
|
||||
/**
|
||||
* Target editor when open in editor (v5.1.0+)
|
||||
*
|
||||
* @default process.env.LAUNCH_EDITOR ?? code (Visual Studio Code)
|
||||
*/
|
||||
launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'rider' | 'cursor' | string;
|
||||
/**
|
||||
* Disable animation/transition, will auto disable when `prefers-reduced-motion` is set
|
||||
* @default false
|
||||
*/
|
||||
reduceMotion?: boolean;
|
||||
}
|
||||
declare function normalizeComboKeyPrint(toggleComboKey: string): string;
|
||||
declare const DEFAULT_INSPECTOR_OPTIONS: VitePluginInspectorOptions;
|
||||
declare function VitePluginInspector(options?: VitePluginInspectorOptions): PluginOption;
|
||||
|
||||
export { DEFAULT_INSPECTOR_OPTIONS, VitePluginInspectorOptions, VueInspectorClient, VitePluginInspector as default, normalizeComboKeyPrint };
|
||||
101
node_modules/vite-plugin-vue-inspector/dist/index.d.ts
generated
vendored
Normal file
101
node_modules/vite-plugin-vue-inspector/dist/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,101 @@
|
||||
import { PluginOption } from 'vite';
|
||||
|
||||
interface VueInspectorClient {
|
||||
enabled: boolean;
|
||||
position: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
linkParams: {
|
||||
file: string;
|
||||
line: number;
|
||||
column: number;
|
||||
};
|
||||
enable: () => void;
|
||||
disable: () => void;
|
||||
toggleEnabled: () => void;
|
||||
onEnabled: () => void;
|
||||
onDisabled: () => void;
|
||||
openInEditor: (url: URL) => void;
|
||||
onUpdated: () => void;
|
||||
}
|
||||
interface VitePluginInspectorOptions {
|
||||
/**
|
||||
* Vue version
|
||||
* @default 3
|
||||
*/
|
||||
vue?: 2 | 3;
|
||||
/**
|
||||
* Default enable state
|
||||
* @default false
|
||||
*/
|
||||
enabled?: boolean;
|
||||
/**
|
||||
* Define a combo key to toggle inspector
|
||||
* @default 'control-shift' on windows, 'meta-shift' on other os
|
||||
*
|
||||
* any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
|
||||
* examples: control-shift, control-o, control-alt-s meta-x control-meta
|
||||
* Some keys have native behavior (e.g. alt-s opens history menu on firefox).
|
||||
* To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
|
||||
* You can also disable it by setting `false`.
|
||||
*/
|
||||
toggleComboKey?: string | false;
|
||||
/**
|
||||
* Toggle button visibility
|
||||
* @default 'active'
|
||||
*/
|
||||
toggleButtonVisibility?: 'always' | 'active' | 'never';
|
||||
/**
|
||||
* Toggle button display position
|
||||
* @default top-right
|
||||
*/
|
||||
toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
||||
/**
|
||||
* append an import to the module id ending with `appendTo` instead of adding a script into body
|
||||
* useful for frameworks that do not support transformIndexHtml hook (e.g. Nuxt3)
|
||||
*
|
||||
* WARNING: only set this if you know exactly what it does.
|
||||
*/
|
||||
appendTo?: string | RegExp;
|
||||
/**
|
||||
* Customize openInEditor host (e.g. http://localhost:3000)
|
||||
* @default false
|
||||
* @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
|
||||
*/
|
||||
openInEditorHost?: string | false;
|
||||
/**
|
||||
* lazy load inspector times (ms)
|
||||
* @default false
|
||||
*/
|
||||
lazyLoad?: number | false;
|
||||
/**
|
||||
* disable inspector on editor open
|
||||
* @default false
|
||||
*/
|
||||
disableInspectorOnEditorOpen?: boolean;
|
||||
/**
|
||||
* Hide information in VNode and produce clean html in DevTools
|
||||
*
|
||||
* Currently, it only works for Vue 3
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
cleanHtml?: boolean;
|
||||
/**
|
||||
* Target editor when open in editor (v5.1.0+)
|
||||
*
|
||||
* @default process.env.LAUNCH_EDITOR ?? code (Visual Studio Code)
|
||||
*/
|
||||
launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'rider' | 'cursor' | string;
|
||||
/**
|
||||
* Disable animation/transition, will auto disable when `prefers-reduced-motion` is set
|
||||
* @default false
|
||||
*/
|
||||
reduceMotion?: boolean;
|
||||
}
|
||||
declare function normalizeComboKeyPrint(toggleComboKey: string): string;
|
||||
declare const DEFAULT_INSPECTOR_OPTIONS: VitePluginInspectorOptions;
|
||||
declare function VitePluginInspector(options?: VitePluginInspectorOptions): PluginOption;
|
||||
|
||||
export { DEFAULT_INSPECTOR_OPTIONS, VitePluginInspectorOptions, VueInspectorClient, VitePluginInspector as default, normalizeComboKeyPrint };
|
||||
286
node_modules/vite-plugin-vue-inspector/dist/index.mjs
generated
vendored
Normal file
286
node_modules/vite-plugin-vue-inspector/dist/index.mjs
generated
vendored
Normal file
@@ -0,0 +1,286 @@
|
||||
// src/index.ts
|
||||
import path2 from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import fs from "node:fs";
|
||||
import process2 from "node:process";
|
||||
import { bold, dim, green, yellow } from "kolorist";
|
||||
import { normalizePath as normalizePath2 } from "vite";
|
||||
import MagicString2 from "magic-string";
|
||||
|
||||
// src/compiler/template.ts
|
||||
import path from "node:path";
|
||||
import MagicString from "magic-string";
|
||||
import { parse as vueParse, transform as vueTransform } from "@vue/compiler-dom";
|
||||
import { parse as babelParse, traverse as babelTraverse } from "@babel/core";
|
||||
import vueJsxPlugin from "@vue/babel-plugin-jsx";
|
||||
import typescriptPlugin from "@babel/plugin-transform-typescript";
|
||||
import importMeta from "@babel/plugin-syntax-import-meta";
|
||||
import decoratorsPlugin from "@babel/plugin-proposal-decorators";
|
||||
import importAttributesPlugin from "@babel/plugin-syntax-import-attributes";
|
||||
import { normalizePath } from "vite";
|
||||
var EXCLUDE_TAG = ["template", "script", "style"];
|
||||
var KEY_DATA = "data-v-inspector";
|
||||
async function compileSFCTemplate({ code, id, type }) {
|
||||
const s = new MagicString(code);
|
||||
const relativePath = normalizePath(path.relative(process.cwd(), id));
|
||||
const result = await new Promise((resolve) => {
|
||||
switch (type) {
|
||||
case "template": {
|
||||
const ast = vueParse(code, { comments: true });
|
||||
vueTransform(ast, {
|
||||
nodeTransforms: [
|
||||
(node) => {
|
||||
if (node.type === 1) {
|
||||
if ((node.tagType === 0 || node.tagType === 1) && !EXCLUDE_TAG.includes(node.tag)) {
|
||||
if (node.loc.source.includes(KEY_DATA))
|
||||
return;
|
||||
const insertPosition = node.props.length ? Math.max(...node.props.map((i) => i.loc.end.offset)) : node.loc.start.offset + node.tag.length + 1;
|
||||
const { line, column } = node.loc.start;
|
||||
const content = ` ${KEY_DATA}="${relativePath}:${line}:${column}"`;
|
||||
s.prependLeft(
|
||||
insertPosition,
|
||||
content
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "jsx": {
|
||||
const ast = babelParse(code, {
|
||||
babelrc: false,
|
||||
configFile: false,
|
||||
comments: true,
|
||||
plugins: [
|
||||
importMeta,
|
||||
[vueJsxPlugin, {}],
|
||||
[
|
||||
typescriptPlugin,
|
||||
{ isTSX: true, allowExtensions: true }
|
||||
],
|
||||
[
|
||||
decoratorsPlugin,
|
||||
{ legacy: true }
|
||||
],
|
||||
[
|
||||
importAttributesPlugin,
|
||||
{ deprecatedAssertSyntax: true }
|
||||
]
|
||||
]
|
||||
});
|
||||
babelTraverse(ast, {
|
||||
enter({ node }) {
|
||||
if (node.type === "JSXElement" && !EXCLUDE_TAG.includes(s.slice(node.openingElement.name.start, node.openingElement.name.end))) {
|
||||
if (node.openingElement.attributes.some(
|
||||
(attr) => attr.type !== "JSXSpreadAttribute" && attr.name.name === KEY_DATA
|
||||
))
|
||||
return;
|
||||
const insertPosition = node.openingElement.end - (node.openingElement.selfClosing ? 2 : 1);
|
||||
const { line, column } = node.loc.start;
|
||||
const content = ` ${KEY_DATA}="${relativePath}:${line}:${column}"`;
|
||||
s.prependLeft(
|
||||
insertPosition,
|
||||
content
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
resolve(s.toString());
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
// src/utils/index.ts
|
||||
function parseVueRequest(id) {
|
||||
const [filename] = id.split("?", 2);
|
||||
const url = new URL(id, "http://domain.inspector");
|
||||
const query = Object.fromEntries(url.searchParams.entries());
|
||||
if (query.vue != null)
|
||||
query.vue = true;
|
||||
if (query.src != null)
|
||||
query.src = true;
|
||||
if (query.index != null)
|
||||
query.index = Number(query.index);
|
||||
if (query.raw != null)
|
||||
query.raw = true;
|
||||
if (query.hasOwnProperty("lang.tsx") || query.hasOwnProperty("lang.jsx"))
|
||||
query.isJsx = true;
|
||||
return {
|
||||
filename,
|
||||
query
|
||||
};
|
||||
}
|
||||
var FS_PREFIX = "/@fs/";
|
||||
var IS_WINDOWS = process.platform === "win32";
|
||||
var queryRE = /\?.*$/s;
|
||||
var hashRE = /#.*$/s;
|
||||
function idToFile(id) {
|
||||
if (id.startsWith(FS_PREFIX))
|
||||
id = id = id.slice(IS_WINDOWS ? FS_PREFIX.length : FS_PREFIX.length - 1);
|
||||
return id.replace(hashRE, "").replace(queryRE, "");
|
||||
}
|
||||
|
||||
// src/index.ts
|
||||
var toggleComboKeysMap = {
|
||||
control: process2.platform === "darwin" ? "Control(^)" : "Ctrl(^)",
|
||||
meta: "Command(\u2318)",
|
||||
shift: "Shift(\u21E7)"
|
||||
};
|
||||
function getInspectorPath() {
|
||||
const pluginPath = normalizePath2(path2.dirname(fileURLToPath(import.meta.url)));
|
||||
return pluginPath.replace(/\/dist$/, "/src");
|
||||
}
|
||||
function normalizeComboKeyPrint(toggleComboKey) {
|
||||
return toggleComboKey.split("-").map((key) => toggleComboKeysMap[key] || key[0].toUpperCase() + key.slice(1)).join(dim("+"));
|
||||
}
|
||||
var DEFAULT_INSPECTOR_OPTIONS = {
|
||||
vue: 3,
|
||||
enabled: false,
|
||||
toggleComboKey: process2.platform === "darwin" ? "meta-shift" : "control-shift",
|
||||
toggleButtonVisibility: "active",
|
||||
toggleButtonPos: "top-right",
|
||||
appendTo: "",
|
||||
lazyLoad: false,
|
||||
launchEditor: process2.env.LAUNCH_EDITOR ?? "code",
|
||||
reduceMotion: false
|
||||
};
|
||||
function VitePluginInspector(options = DEFAULT_INSPECTOR_OPTIONS) {
|
||||
const inspectorPath = getInspectorPath();
|
||||
const normalizedOptions = {
|
||||
...DEFAULT_INSPECTOR_OPTIONS,
|
||||
...options
|
||||
};
|
||||
let config;
|
||||
const {
|
||||
vue,
|
||||
appendTo,
|
||||
cleanHtml = vue === 3
|
||||
// Only enabled for Vue 3 by default
|
||||
} = normalizedOptions;
|
||||
if (normalizedOptions.launchEditor)
|
||||
process2.env.LAUNCH_EDITOR = normalizedOptions.launchEditor;
|
||||
return [
|
||||
{
|
||||
name: "vite-plugin-vue-inspector",
|
||||
enforce: "pre",
|
||||
apply(_, { command }) {
|
||||
return command === "serve" && process2.env.NODE_ENV !== "test";
|
||||
},
|
||||
async resolveId(importee) {
|
||||
if (importee.startsWith("virtual:vue-inspector-options")) {
|
||||
return importee;
|
||||
} else if (importee.startsWith("virtual:vue-inspector-path:")) {
|
||||
const resolved = importee.replace("virtual:vue-inspector-path:", `${inspectorPath}/`);
|
||||
return resolved;
|
||||
}
|
||||
},
|
||||
async load(id) {
|
||||
if (id === "virtual:vue-inspector-options") {
|
||||
return `export default ${JSON.stringify({ ...normalizedOptions, base: config.base })}`;
|
||||
} else if (id.startsWith(inspectorPath)) {
|
||||
const { query } = parseVueRequest(id);
|
||||
if (query.type)
|
||||
return;
|
||||
const file = idToFile(id);
|
||||
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}.`);
|
||||
}
|
||||
},
|
||||
transform(code, id) {
|
||||
const { filename, query } = parseVueRequest(id);
|
||||
const isJsx = filename.endsWith(".jsx") || filename.endsWith(".tsx") || filename.endsWith(".vue") && query.isJsx;
|
||||
const isTpl = filename.endsWith(".vue") && query.type !== "style" && !query.raw;
|
||||
if (isJsx || isTpl)
|
||||
return compileSFCTemplate({ code, id: filename, type: isJsx ? "jsx" : "template" });
|
||||
if (!appendTo)
|
||||
return;
|
||||
if (typeof appendTo === "string" && filename.endsWith(appendTo) || appendTo instanceof RegExp && appendTo.test(filename))
|
||||
return { code: `${code}
|
||||
import 'virtual:vue-inspector-path:load.js'` };
|
||||
},
|
||||
configureServer(server) {
|
||||
const _printUrls = server.printUrls;
|
||||
const { toggleComboKey } = normalizedOptions;
|
||||
toggleComboKey && (server.printUrls = () => {
|
||||
const keys = normalizeComboKeyPrint(toggleComboKey);
|
||||
_printUrls();
|
||||
console.log(` ${green("\u279C")} ${bold("Vue Inspector")}: ${green(`Press ${yellow(keys)} in App to toggle the Inspector`)}
|
||||
`);
|
||||
});
|
||||
},
|
||||
transformIndexHtml(html) {
|
||||
if (appendTo)
|
||||
return;
|
||||
return {
|
||||
html,
|
||||
tags: [
|
||||
{
|
||||
tag: "script",
|
||||
injectTo: "head",
|
||||
attrs: {
|
||||
type: "module",
|
||||
src: `${config.base || "/"}@id/virtual:vue-inspector-path:load.js`
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
configResolved(resolvedConfig) {
|
||||
config = resolvedConfig;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "vite-plugin-vue-inspector:post",
|
||||
enforce: "post",
|
||||
apply(_, { command }) {
|
||||
return cleanHtml && vue === 3 && command === "serve" && process2.env.NODE_ENV !== "test";
|
||||
},
|
||||
transform(code) {
|
||||
if (code.includes("_interopVNode"))
|
||||
return;
|
||||
if (!code.includes("data-v-inspector"))
|
||||
return;
|
||||
const fn = /* @__PURE__ */ new Set();
|
||||
const s = new MagicString2(code);
|
||||
s.replace(/(createElementVNode|createVNode|createElementBlock|createBlock) as _\1,?/g, (_, name) => {
|
||||
fn.add(name);
|
||||
return "";
|
||||
});
|
||||
if (!fn.size)
|
||||
return;
|
||||
s.appendLeft(0, `/* Injection by vite-plugin-vue-inspector Start */
|
||||
import { ${Array.from(fn.values()).map((i) => `${i} as __${i}`).join(",")} } from 'vue'
|
||||
function _interopVNode(vnode) {
|
||||
if (vnode && vnode.props && 'data-v-inspector' in vnode.props) {
|
||||
const data = vnode.props['data-v-inspector']
|
||||
delete vnode.props['data-v-inspector']
|
||||
Object.defineProperty(vnode.props, '__v_inspector', { value: data, enumerable: false })
|
||||
}
|
||||
return vnode
|
||||
}
|
||||
${Array.from(fn.values()).map((i) => `function _${i}(...args) { return _interopVNode(__${i}(...args)) }`).join("\n")}
|
||||
/* Injection by vite-plugin-vue-inspector End */
|
||||
`);
|
||||
return {
|
||||
code: s.toString(),
|
||||
map: s.generateMap({ hires: "boundary" })
|
||||
};
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
var src_default = VitePluginInspector;
|
||||
export {
|
||||
DEFAULT_INSPECTOR_OPTIONS,
|
||||
src_default as default,
|
||||
normalizeComboKeyPrint
|
||||
};
|
||||
62
node_modules/vite-plugin-vue-inspector/package.json
generated
vendored
Normal file
62
node_modules/vite-plugin-vue-inspector/package.json
generated
vendored
Normal file
@@ -0,0 +1,62 @@
|
||||
{
|
||||
"name": "vite-plugin-vue-inspector",
|
||||
"version": "5.3.2",
|
||||
"description": "jump to local IDE source code while click the element of browser automatically.",
|
||||
"author": "webfansplz",
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/webfansplz/vite-plugin-vue-inspector#readme",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/webfansplz/vite-plugin-vue-inspector.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/webfansplz/vite-plugin-vue-inspector/issues"
|
||||
},
|
||||
"keywords": [
|
||||
"vue",
|
||||
"vite",
|
||||
"vscode",
|
||||
"vite-plugin",
|
||||
"inspector",
|
||||
"debug"
|
||||
],
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"require": "./dist/index.cjs",
|
||||
"import": "./dist/index.mjs"
|
||||
},
|
||||
"./src/*": "./src/*"
|
||||
},
|
||||
"main": "./dist/index.cjs",
|
||||
"module": "./dist/index.mjs",
|
||||
"types": "./dist/index.d.ts",
|
||||
"files": [
|
||||
"dist",
|
||||
"src/load.js",
|
||||
"src/Overlay.vue"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"vite": "^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.23.0",
|
||||
"@babel/plugin-proposal-decorators": "^7.23.0",
|
||||
"@babel/plugin-syntax-import-attributes": "^7.22.5",
|
||||
"@babel/plugin-syntax-import-meta": "^7.10.4",
|
||||
"@babel/plugin-transform-typescript": "^7.22.15",
|
||||
"@vue/babel-plugin-jsx": "^1.1.5",
|
||||
"@vue/compiler-dom": "^3.3.4",
|
||||
"kolorist": "^1.8.0",
|
||||
"magic-string": "^0.30.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/babel__core": "^7.20.2",
|
||||
"unplugin": "^1.5.0"
|
||||
},
|
||||
"scripts": {
|
||||
"lint": "eslint --fix --ext .js,.ts,.vue .",
|
||||
"dev": "tsup --watch",
|
||||
"build": "tsup"
|
||||
}
|
||||
}
|
||||
400
node_modules/vite-plugin-vue-inspector/src/Overlay.vue
generated
vendored
Normal file
400
node_modules/vite-plugin-vue-inspector/src/Overlay.vue
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
44
node_modules/vite-plugin-vue-inspector/src/load.js
generated
vendored
Normal file
44
node_modules/vite-plugin-vue-inspector/src/load.js
generated
vendored
Normal file
@@ -0,0 +1,44 @@
|
||||
/* eslint-disable new-cap */
|
||||
|
||||
import * as Vue from 'vue'
|
||||
import App from 'virtual:vue-inspector-path:Overlay.vue'
|
||||
import inspectorOptions from 'virtual:vue-inspector-options'
|
||||
const CONTAINER_ID = 'vue-inspector-container'
|
||||
|
||||
function createInspectorContainer() {
|
||||
if (document.getElementById(CONTAINER_ID) != null)
|
||||
throw new Error('vueInspectorContainer element already exists')
|
||||
|
||||
const el = document.createElement('div')
|
||||
el.setAttribute('id', CONTAINER_ID)
|
||||
document.getElementsByTagName('body')[0].appendChild(el)
|
||||
return el
|
||||
}
|
||||
|
||||
function load() {
|
||||
const isClient = typeof window !== 'undefined'
|
||||
if (!isClient)
|
||||
return
|
||||
createInspectorContainer()
|
||||
const { vue } = inspectorOptions
|
||||
// vue 2/3 compatibility
|
||||
vue === 3
|
||||
? Vue.createApp({
|
||||
render: () => Vue.h(App),
|
||||
devtools: {
|
||||
hide: true,
|
||||
},
|
||||
}).mount(`#${CONTAINER_ID}`)
|
||||
: new Vue.default({
|
||||
render: h => h(App),
|
||||
devtools: {
|
||||
hide: true,
|
||||
},
|
||||
}).$mount(`#${CONTAINER_ID}`)
|
||||
}
|
||||
|
||||
if (inspectorOptions.lazyLoad)
|
||||
setTimeout(load, inspectorOptions.lazyLoad)
|
||||
|
||||
else
|
||||
load()
|
||||
Reference in New Issue
Block a user