@vizejs/vite-plugin-musea 0.76.0 → 0.78.0

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 (2) hide show
  1. package/README.md +111 -5
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -7,7 +7,7 @@ Vite plugin for Musea - Vue component gallery and documentation.
7
7
  Install `vp` once from the [Vite+ install guide](https://viteplus.dev/guide/install), then add the package:
8
8
 
9
9
  ```bash
10
- vp install -D @vizejs/vite-plugin-musea
10
+ vp install -D @vizejs/vite-plugin @vizejs/vite-plugin-musea vize
11
11
  ```
12
12
 
13
13
  ## Usage
@@ -15,24 +15,59 @@ vp install -D @vizejs/vite-plugin-musea
15
15
  ```ts
16
16
  // vite.config.ts
17
17
  import { defineConfig } from "vite";
18
+ import vize from "@vizejs/vite-plugin";
18
19
  import { musea } from "@vizejs/vite-plugin-musea";
19
20
 
20
21
  export default defineConfig({
21
22
  plugins: [
23
+ vize(),
22
24
  musea({
23
- // Art files pattern
24
- include: "**/*.art.vue",
25
- // Output directory
26
- outDir: ".musea",
25
+ include: ["src/**/*.art.vue"],
26
+ basePath: "/__musea__",
27
+ previewCss: ["src/styles/main.css"],
28
+ previewSetup: "musea.preview.ts",
27
29
  }),
28
30
  ],
29
31
  });
30
32
  ```
31
33
 
34
+ Run your Vite dev server and open the gallery route:
35
+
36
+ ```bash
37
+ vp dev
38
+ ```
39
+
40
+ ```txt
41
+ http://localhost:5173/__musea__
42
+ ```
43
+
44
+ Shared defaults can live in `vize.config.ts`:
45
+
46
+ ```ts
47
+ import { defineConfig } from "vize";
48
+
49
+ export default defineConfig({
50
+ musea: {
51
+ include: ["src/**/*.art.vue"],
52
+ exclude: ["node_modules/**", "dist/**"],
53
+ basePath: "/__musea__",
54
+ inlineArt: false,
55
+ storybookCompat: false,
56
+ },
57
+ });
58
+ ```
59
+
60
+ Direct `musea()` options override shared config. Pass preview-only options such as `previewCss`,
61
+ `previewSetup`, `tokensPath`, `theme`, and `storybookOutDir` directly to the plugin.
62
+
32
63
  ## Art File Format
33
64
 
34
65
  ```vue
35
66
  <!-- Button.art.vue -->
67
+ <script setup lang="ts">
68
+ import Button from "./Button.vue";
69
+ </script>
70
+
36
71
  <art title="Button" component="./Button.vue">
37
72
  <variant name="Primary" default>
38
73
  <Button variant="primary">Click me</Button>
@@ -43,6 +78,56 @@ export default defineConfig({
43
78
  </art>
44
79
  ```
45
80
 
81
+ Common `<art>` attributes:
82
+
83
+ | Attribute | Purpose |
84
+ | ------------------- | ------------------------------------- |
85
+ | `title` | Display name in the gallery |
86
+ | `component` | Relative source component path |
87
+ | `category` | Sidebar grouping |
88
+ | `status` | Optional status badge |
89
+ | `tags` | Search and filtering tags |
90
+ | `action-events` | Comma-separated events to capture |
91
+ | `capture-mousemove` | Include mousemove in captured actions |
92
+
93
+ Enable inline art when examples should live inside the component file:
94
+
95
+ ```ts
96
+ musea({
97
+ inlineArt: true,
98
+ });
99
+ ```
100
+
101
+ Use `<Self>` in an inline `<art>` block to render the host component.
102
+
103
+ ## Preview Setup
104
+
105
+ ```ts
106
+ musea({
107
+ previewCss: ["src/styles/main.css", "src/styles/musea-preview.css"],
108
+ previewSetup: "musea.preview.ts",
109
+ });
110
+ ```
111
+
112
+ ```ts
113
+ // musea.preview.ts
114
+ import type { App } from "vue";
115
+
116
+ export default function setup(app: App) {
117
+ // Install vue-router, vue-i18n, stores, or design-system plugins here.
118
+ }
119
+ ```
120
+
121
+ ## Design Tokens
122
+
123
+ Expose a Style Dictionary-compatible token file in the gallery:
124
+
125
+ ```ts
126
+ musea({
127
+ tokensPath: "src/tokens.json",
128
+ });
129
+ ```
130
+
46
131
  ## Commands
47
132
 
48
133
  ```bash
@@ -51,6 +136,27 @@ vp dev
51
136
 
52
137
  # Build gallery
53
138
  vp build
139
+
140
+ # Run visual regression snapshots
141
+ vp exec musea-vrt --base-url http://localhost:5173
142
+
143
+ # Update local baselines
144
+ vp exec musea-vrt --update
145
+
146
+ # CI mode with JSON output
147
+ vp exec musea-vrt --ci --json
148
+
149
+ # Run a11y audits alongside snapshots
150
+ vp exec musea-vrt --a11y
151
+
152
+ # Approve failed snapshots
153
+ vp exec musea-vrt approve
154
+
155
+ # Remove orphaned snapshots
156
+ vp exec musea-vrt clean
157
+
158
+ # Generate an art-file draft
159
+ vp exec musea-vrt generate src/components/Button.vue
54
160
  ```
55
161
 
56
162
  ## License
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vizejs/vite-plugin-musea",
3
- "version": "0.76.0",
3
+ "version": "0.78.0",
4
4
  "description": "Vite plugin for Musea - Component gallery for Vue components",
5
5
  "keywords": [
6
6
  "component-gallery",
@@ -54,7 +54,7 @@
54
54
  "access": "public"
55
55
  },
56
56
  "dependencies": {
57
- "@vizejs/native": "0.76.0",
57
+ "@vizejs/native": "0.78.0",
58
58
  "pngjs": "7.0.0"
59
59
  },
60
60
  "devDependencies": {
@@ -63,7 +63,7 @@
63
63
  "@types/node": "25.6.0",
64
64
  "@types/pngjs": "6.0.5",
65
65
  "@vitejs/plugin-vue": "6.0.6",
66
- "@vizejs/vite-plugin": "0.76.0",
66
+ "@vizejs/vite-plugin": "0.78.0",
67
67
  "highlight.js": "11.11.1",
68
68
  "marked": "17.0.1",
69
69
  "marked-highlight": "2.2.4",
@@ -75,7 +75,7 @@
75
75
  "vue-router": "4.6.4"
76
76
  },
77
77
  "peerDependencies": {
78
- "@vizejs/vite-plugin": "0.76.0",
78
+ "@vizejs/vite-plugin": "0.78.0",
79
79
  "axe-core": "^4.7.0",
80
80
  "playwright": "^1.40.0",
81
81
  "vite": "^8.0.0"