@styleui/vite-plugin 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +80 -80
  2. package/dist/index.js +9 -9
  3. package/package.json +29 -29
package/README.md CHANGED
@@ -1,80 +1,80 @@
1
- # @styleui/vite-plugin
2
-
3
- The official **Vite integration plugin** for **StyleUI**.
4
-
5
- `@styleui/vite-plugin` acts as a compilation-time bridge for StyleUI. It wraps your Vite configuration to automatically parse and transform your source code during development. It tags JSX elements with source-code location metadata, enabling the StyleUI browser extension to map visual elements on your screen directly to the corresponding source file and line number in your code editor.
6
-
7
- ---
8
-
9
- ## Installation
10
-
11
- This package is typically installed and configured automatically when you run the StyleUI setup CLI:
12
-
13
- ```bash
14
- npx styleui init
15
- ```
16
-
17
- If you prefer to install it manually:
18
-
19
- ```bash
20
- npm install -D @styleui/vite-plugin
21
- ```
22
-
23
- ---
24
-
25
- ## How It Works
26
-
27
- 1. **Development Transformation:** The plugin parses `.tsx` and `.jsx` files using Babel parser and traverses the AST.
28
- 2. **Filters & Exclusions:** It automatically ignores files inside `node_modules`, query parameter imports, and files outside standard source directories (`src/`, `app/`, `pages/`, `components/`).
29
- 3. **AST Metadata Decoration:** It injects the following source-tracing data attributes into elements:
30
- - `data-tail-file`: The normalized absolute path to the local source file.
31
- - `data-tail-line`: The source line number where the element's JSX definition starts.
32
- 4. **React Fragment Safety:** Skips React fragments (e.g. `<Fragment>` or `<React.Fragment>`) and shorthand fragment syntax (`<>...</>`) to prevent invalid HTML attribute compilation.
33
-
34
- ---
35
-
36
- ## Usage
37
-
38
- Register the plugin in your `vite.config.ts` (or `vite.config.js`).
39
-
40
- ### TypeScript (`vite.config.ts`)
41
- ```typescript
42
- import { defineConfig } from 'vite';
43
- import react from '@vitejs/plugin-react';
44
- import withStyleUI from '@styleui/vite-plugin';
45
-
46
- export default defineConfig({
47
- plugins: [
48
- withStyleUI(),
49
- react()
50
- ],
51
- });
52
- ```
53
-
54
- ### ESM (`vite.config.js` or `vite.config.mjs`)
55
- ```javascript
56
- import { defineConfig } from 'vite';
57
- import react from '@vitejs/plugin-react';
58
- import withStyleUI from '@styleui/vite-plugin';
59
-
60
- export default defineConfig({
61
- plugins: [
62
- withStyleUI(),
63
- react()
64
- ],
65
- });
66
- ```
67
-
68
- ### CommonJS (`vite.config.cjs`)
69
- ```javascript
70
- const { defineConfig } = require('vite');
71
- const react = require('@vitejs/plugin-react');
72
- const withStyleUI = require('@styleui/vite-plugin');
73
-
74
- module.exports = defineConfig({
75
- plugins: [
76
- withStyleUI(),
77
- react()
78
- ],
79
- });
80
- ```
1
+ # @styleui/vite-plugin
2
+
3
+ The official **Vite integration plugin** for **StyleUI**.
4
+
5
+ `@styleui/vite-plugin` acts as a compilation-time bridge for StyleUI. It wraps your Vite configuration to automatically parse and transform your source code during development. It tags JSX elements with source-code location metadata, enabling the StyleUI browser extension to map visual elements on your screen directly to the corresponding source file and line number in your code editor.
6
+
7
+ ---
8
+
9
+ ## Installation
10
+
11
+ This package is typically installed and configured automatically when you run the StyleUI setup CLI:
12
+
13
+ ```bash
14
+ npx styleui init
15
+ ```
16
+
17
+ If you prefer to install it manually:
18
+
19
+ ```bash
20
+ npm install -D @styleui/vite-plugin
21
+ ```
22
+
23
+ ---
24
+
25
+ ## How It Works
26
+
27
+ 1. **Development Transformation:** The plugin parses `.tsx` and `.jsx` files using Babel parser and traverses the AST.
28
+ 2. **Filters & Exclusions:** It automatically ignores files inside `node_modules`, query parameter imports, and files outside standard source directories (`src/`, `app/`, `pages/`, `components/`).
29
+ 3. **AST Metadata Decoration:** It injects the following source-tracing data attributes into elements:
30
+ - `data-tail-file`: The normalized absolute path to the local source file.
31
+ - `data-tail-line`: The source line number where the element's JSX definition starts.
32
+ 4. **React Fragment Safety:** Skips React fragments (e.g. `<Fragment>` or `<React.Fragment>`) and shorthand fragment syntax (`<>...</>`) to prevent invalid HTML attribute compilation.
33
+
34
+ ---
35
+
36
+ ## Usage
37
+
38
+ Register the plugin in your `vite.config.ts` (or `vite.config.js`).
39
+
40
+ ### TypeScript (`vite.config.ts`)
41
+ ```typescript
42
+ import { defineConfig } from 'vite';
43
+ import react from '@vitejs/plugin-react';
44
+ import withStyleUI from '@styleui/vite-plugin';
45
+
46
+ export default defineConfig({
47
+ plugins: [
48
+ withStyleUI(),
49
+ react()
50
+ ],
51
+ });
52
+ ```
53
+
54
+ ### ESM (`vite.config.js` or `vite.config.mjs`)
55
+ ```javascript
56
+ import { defineConfig } from 'vite';
57
+ import react from '@vitejs/plugin-react';
58
+ import withStyleUI from '@styleui/vite-plugin';
59
+
60
+ export default defineConfig({
61
+ plugins: [
62
+ withStyleUI(),
63
+ react()
64
+ ],
65
+ });
66
+ ```
67
+
68
+ ### CommonJS (`vite.config.cjs`)
69
+ ```javascript
70
+ const { defineConfig } = require('vite');
71
+ const react = require('@vitejs/plugin-react');
72
+ const withStyleUI = require('@styleui/vite-plugin');
73
+
74
+ module.exports = defineConfig({
75
+ plugins: [
76
+ withStyleUI(),
77
+ react()
78
+ ],
79
+ });
80
+ ```