@onedarnleyroad/vite-plugin-svg-sprite 2.0.0-beta.5 → 2.0.0-beta.6

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 +14 -5
  2. package/package.json +1 -1
  3. package/src/index.js +0 -36
package/README.md CHANGED
@@ -12,7 +12,6 @@ A Vite plugin that builds SVG sprite sheets from a directory of SVG files — wi
12
12
  - **Preserves outer `<svg>` attributes** on the generated `<symbol>` — `fill="currentColor"`, `stroke`, `class`, `role`, `aria-*`, `data-*`, `style` (including CSS custom properties), etc. Only the truly wrapper-specific attributes are stripped: `xmlns`, `version`, `width`, `height`, and `id` (we set our own).
13
13
  - Preserves existing `<title>` elements, or falls back to the filename
14
14
  - Strips comments and empty `<defs>` blocks
15
- - Dev server serves sprites from memory with full-reload on change
16
15
 
17
16
  ## Installation
18
17
 
@@ -92,19 +91,29 @@ With `build.manifest: true` enabled, each sprite is registered in `manifest.json
92
91
  }
93
92
  ```
94
93
 
95
- With Craft CMS + [nystudio107/craft-vite](https://nystudio107.com/docs/vite/), use `craft.vite.asset()` — **not `entry()`**. The `asset()` helper is dev-server-aware; `entry()` always reads the manifest, so in dev it would serve stale built files:
94
+ With Craft CMS + [nystudio107/craft-vite](https://nystudio107.com/docs/vite/):
96
95
 
97
96
  ```twig
98
97
  <svg aria-hidden="true">
99
- <use href="{{ craft.vite.asset('src/icons/sprite.svg') }}#svg-arrow"></use>
98
+ <use href="{{ craft.vite.entry('src/icons/sprite.svg') }}#svg-arrow"></use>
100
99
  </svg>
101
100
 
102
101
  <svg aria-hidden="true">
103
- <use href="{{ craft.vite.asset('src/icons/sprite-light.svg') }}#svg-sun"></use>
102
+ <use href="{{ craft.vite.entry('src/icons/sprite-light.svg') }}#svg-sun"></use>
104
103
  </svg>
105
104
  ```
106
105
 
107
- In dev, `asset()` returns the Vite dev-server URL (e.g. `https://…:3000/src/icons/sprite.svg`), which the plugin's in-memory middleware serves. In production it returns the hashed URL from the manifest.
106
+ `entry()` resolves the hashed URL from the manifest.
107
+
108
+ ## Development workflow
109
+
110
+ Sprites are generated at build time only — the plugin does **not** run during `vite dev`. For a live-ish dev loop, run a separate build watcher alongside your usual dev server:
111
+
112
+ ```bash
113
+ vite build --watch
114
+ ```
115
+
116
+ Every edit under `inputDir` triggers a rebuild (a second or two), updates `manifest.json` with the new content hash, and `craft.vite.entry('src/icons/sprite.svg')` picks up the new URL on the next request. Not instant HMR, but avoids the CORS / cross-origin complications of trying to serve sprites through a separate dev port.
108
117
 
109
118
  ### Without manifest
110
119
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onedarnleyroad/vite-plugin-svg-sprite",
3
- "version": "2.0.0-beta.5",
3
+ "version": "2.0.0-beta.6",
4
4
  "description": "Vite plugin that builds an SVG sprite sheet from a directory of SVG files",
5
5
  "type": "module",
6
6
  "exports": {
package/src/index.js CHANGED
@@ -97,7 +97,6 @@ export default function svgSpritePlugin(options = {}) {
97
97
  throw new Error('[vite-plugin-svg-sprite] `inputDir` is required.')
98
98
  }
99
99
 
100
- const absInputDir = resolve(inputDir)
101
100
  const emitted = []
102
101
  let viteConfig
103
102
 
@@ -141,40 +140,5 @@ export default function svgSpritePlugin(options = {}) {
141
140
 
142
141
  writeFileSync(manifestPath, JSON.stringify(manifest, null, 2))
143
142
  },
144
-
145
- configureServer(server) {
146
- const sprites = new Map()
147
-
148
- const rebuild = () => {
149
- sprites.clear()
150
- for (const group of collectSpriteGroups(inputDir, prefix)) {
151
- const key = join(inputDir, group.logicalName)
152
- sprites.set(key, buildSpriteSvg(group.dir, group.files))
153
- }
154
- }
155
- rebuild()
156
-
157
- server.middlewares.use((req, res, next) => {
158
- const path = req.url?.split('?')[0]?.replace(/^\//, '')
159
- if (!path) return next()
160
- const match = sprites.get(path)
161
- if (!match) return next()
162
- res.setHeader('Content-Type', 'image/svg+xml')
163
- res.setHeader('Cache-Control', 'no-cache')
164
- res.setHeader('Access-Control-Allow-Origin', '*')
165
- res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin')
166
- res.end(match)
167
- })
168
-
169
- server.watcher.add(absInputDir)
170
- const onChange = file => {
171
- if (!file.startsWith(absInputDir)) return
172
- rebuild()
173
- server.ws.send({ type: 'full-reload' })
174
- }
175
- server.watcher.on('change', onChange)
176
- server.watcher.on('add', onChange)
177
- server.watcher.on('unlink', onChange)
178
- },
179
143
  }
180
144
  }