Skip to content
This repository was archived by the owner on Jan 6, 2024. It is now read-only.

Commit 8750b85

Browse files
committed
workflow: copy-files script
1 parent fd0f26f commit 8750b85

File tree

4 files changed

+213
-29
lines changed

4 files changed

+213
-29
lines changed

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"build:ui-kit": "nr -C packages/ui-kit build",
4949
"build:client": "nr -C packages/client build",
5050
"dev": "nr build:core && nr build:ui-kit && nr stub && nr dev:client",
51-
"build": "nr build:core && nr build:ui-kit && nr build:client && nr build:node",
51+
"build": "esno scripts/copy-files.ts && nr build:core && nr build:ui-kit && nr build:client && nr build:node",
5252
"play": "nr -C packages/playground dev",
5353
"lint": "eslint .",
5454
"prepublishOnly": "npm run build",
@@ -66,6 +66,7 @@
6666
"@vite-plugin-vue-devtools/ui-kit": "workspace:*",
6767
"bumpp": "^9.1.1",
6868
"eslint": "8.45.0",
69+
"esno": "^0.17.0",
6970
"lint-staged": "^13.2.3",
7071
"npm-run-all": "^4.1.5",
7172
"pnpm": "^8.6.8",

packages/node/README.md

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<p align="center">
2+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/bg.png" />
3+
</p>
4+
<h1 align="center">
5+
Vue DevTools <sup>Preview</sup>
6+
</h1>
7+
8+
9+
<p align="center">
10+
<a href="https://www.npmjs.com/package/vite-plugin-vue-devtools" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/v/vite-plugin-vue-devtools" alt="NPM Version" /></a>
11+
<a href="https://www.npmjs.com/package/vite-plugin-vue-devtools" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/npm/dt/vite-plugin-vue-devtools" alt="NPM Downloads" /></a>
12+
<a href="https://github.comhttps://github.com/webfansplz/vite-plugin-vue-devtools/blob/main/LICENSE" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/github/license/webfansplz/vite-plugin-vue-devtools" alt="License" /></a>
13+
</p>
14+
15+
<p align="center">
16+
<a href="https://github.comhttps://github.com/webfansplz/vite-plugin-vue-devtools/discussions/1">💡 Ideas & Suggestions</a> |
17+
<a href="https://github.comhttps://github.com/webfansplz/vite-plugin-vue-devtools/discussions/2">🗺️ Project Roadmap</a>
18+
</p>
19+
20+
<p align="center">
21+
<a href="https://stackblitz.com/edit/vitejs-vite-oxbwzk?file=vite.config.ts&view=preview"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
22+
</p>
23+
24+
25+
## 📖 Introduction
26+
27+
`vite-plugin-vue-devtools` is a Vite plugin designed to enhance the Vue developer experience.
28+
29+
30+
31+
## 🎉 Features
32+
33+
### Pages
34+
35+
The pages tab shows your current routes and provide a quick way to navigate to them. For dynamic routes, it also provide a form to fill with each params interactively. You can also use the textbox to play and test how each route is matched.
36+
37+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/pages.png" />
38+
39+
40+
### Components
41+
42+
Components tab show all the components you are using in your app and hierarchy. You can also select them to see the details of the component (e.g. data,props).
43+
44+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/components.png" />
45+
46+
### Assets
47+
48+
Assets tab that shows all your static assets and their information. You can open the asset in the browser or download it.
49+
50+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/assets.png" />
51+
52+
### Timeline
53+
54+
Timeline tab has three categories: Performance, Router Navigations, and Pinia. You can switch between them to see the state changes and timelines.
55+
56+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/timeline.png" />
57+
58+
### Routes
59+
60+
Routes tab is a feature integrated with [Vue Router](https://github.com/vuejs/router), allowing you to view the registered routes and their details.
61+
62+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/routes.png" />
63+
64+
### Pinia
65+
66+
Pinia tab is a feature integrated with [Pinia](https://github.com/vuejs/pinia), allowing you to view the registered modules and their details.
67+
68+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/pinia.png" />
69+
70+
### Graph
71+
72+
Graph tab provides a graph view that show the relationship between components.
73+
74+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/graph.png" />
75+
76+
### Inspect
77+
78+
Inspect expose the [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) integration, allowing you to inspect transformation steps of Vite. It can be helpful to understand how each plugin is transforming your code and spot potential issues.
79+
80+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/inspect.png" />
81+
82+
### Inspector
83+
84+
You can also use the "Inspector" feature to inspect the DOM tree and see which component is rendering it. Click to go to your editor of the specific line. Making it much easier to make changes, without the requirement of understanding the project structure thoroughly. (This feature is implemented based on the [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector))
85+
86+
<img src="https://github.com/webfansplz/vite-plugin-vue-devtools/raw/main/screenshots/inspector.png" height=450 />
87+
88+
## 📦 Installation
89+
90+
```
91+
92+
# vite-plugin-vue-devtools
93+
94+
pnpm install vite-plugin-vue-devtools -D
95+
96+
```
97+
98+
## 🦄 Usage
99+
100+
### Configuration Vite
101+
102+
```ts
103+
import { defineConfig } from 'vite'
104+
import VueDevTools from 'vite-plugin-vue-devtools'
105+
106+
export default defineConfig({
107+
plugins: [
108+
VueDevTools(),
109+
vue(),
110+
],
111+
})
112+
```
113+
114+
### Options
115+
116+
```ts
117+
interface VitePluginVueDevToolsOptions {
118+
/**
119+
* append an import to the module id ending with `appendTo` instead of adding a script into body
120+
* useful for projects that do not use html file as an entry
121+
*
122+
* WARNING: only set this if you know exactly what it does.
123+
*/
124+
appendTo?: string | RegExp
125+
}
126+
```
127+
128+
## 💡 Notice
129+
130+
- Only available in development mode.
131+
- Only support Vue3.0+.
132+
- Currently only supports single-instance Vue applications (multi-instance support is coming soon).
133+
- Doesn't support SSR (If you're using Nuxt, use [nuxt/devtools](https://github.com/nuxt/devtools) directly).
134+
- The plugin follows Vue's DevTools configuration, so if you have configured the `hide` option, it will also be applied in this plugin. e.g.
135+
136+
```js
137+
// This Vue instance will be ignored by the plugin.
138+
createApp({
139+
render: () => h(App),
140+
devtools: {
141+
hide: true,
142+
},
143+
})
144+
```
145+
146+
## 📖 Blog Post
147+
148+
- [Introducing Vue DevTools (Vite Plugin)](https://gist.github.com/webfansplz/bc90a773a0dd474a34e043ab2d2a37a4)
149+
150+
## 🌸 Credits
151+
152+
- This project is highly inspired by [nuxt/devtools](https://github.com/nuxt/devtools). Kudos to Anthony Fu and Nuxt team for the awesome work!
153+
154+
- [vuejs/devtools](https://github.com/vuejs/devtools)
155+
156+
157+
## 👨‍💻 Contributors
158+
159+
<a href="https://github.comhttps://github.com/webfansplz/vite-plugin-vue-devtools/graphs/contributors">
160+
<img src="https://contrib.rocks/image?repo=webfansplz/vite-plugin-vue-devtools" />
161+
</a>
162+
163+
## 📄 License
164+
165+
[MIT LICENSE](./LICENSE)
166+

0 commit comments

Comments
 (0)