feat: standalone mode

2026-07-22 04:40:17 +03:00 · 2026-07-14 08:34:45 +03:00
parent 3dd385bfda
commit c596f9f1c3
64 changed files with 1341 additions and 2755 deletions
--- a/integration/README.md
+++ b/integration/README.md
@@ -7,6 +7,9 @@ production build и отображения внешнего SVG-спрайта

 | Fixture | Генератор | Runtime |
 | --- | --- | --- |
+| `standalone` | `standalone` | Static HTML + явный copy SVG |
+| `standalone-vite` | `standalone@vite` | Vanilla TypeScript + Vite |
+| `standalone-webpack` | `standalone@webpack` | Vanilla TypeScript + Webpack 5 |
 | `react-vite` | `react@vite` | React + Vite |
 | `react-webpack` | `react@webpack` | React + Webpack 5 |
 | `next-app-turbopack` | `next@app/turbopack` | App Router + Turbopack |
@@ -51,6 +54,11 @@ npm run dev --workspace @svg-sprites-fixtures/react-vite --prefix integration
 последовательно, проверяет внешний `href`, HTTP status и Content-Type спрайта,
 наличие symbol ID, отсутствие browser errors и зелёные пиксели отрисованной иконки.

+Static fixture копирует managed SVG и JSON manifest в `dist/app-icons/` и использует
+literal `<use href="/app-icons/sprite.svg#check">`.
+Vite и Webpack fixtures получают URL только из generated facade и сверяют его с
+resolved manifest.
+
 ## Структура

 ```text
--- a/integration/apps/standalone-vite/index.html
+++ b/integration/apps/standalone-vite/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vanilla Vite sprite fixture</title>
+    <title>Standalone Vite sprite fixture</title>
  </head>
  <body>
    <main id="app"></main>
--- a/integration/apps/standalone-vite/package.json
+++ b/integration/apps/standalone-vite/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "@svg-sprites-fixtures/vanilla-vite",
+  "name": "@svg-sprites-fixtures/standalone-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
-    "sprites": "svg-sprites --mode legacy .",
+    "sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
    "typecheck": "tsc --noEmit",
    "build": "npm run sprites && tsc --noEmit && vite build",
    "dev": "npm run sprites && vite"
--- a/integration/apps/standalone-vite/src/main.ts
+++ b/integration/apps/standalone-vite/src/main.ts
@@ -0,0 +1,20 @@
+import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
+import { getIconsIconHref, iconsSpriteUrl } from './sprite'
+import './style.css'
+
+const check = spriteManifest.icons.find((icon) => icon.name === 'check')
+if (!check || spriteManifest.spriteUrl !== iconsSpriteUrl) {
+  throw new Error('Generated Vite facade and manifest disagree.')
+}
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+  <h1>Standalone + Vite</h1>
+  <svg
+    data-testid="icon"
+    data-app="standalone-vite"
+    viewBox="${check.viewBox ?? '0 0 24 24'}"
+    aria-label="Check icon"
+  >
+    <use href="${getIconsIconHref('check')}"></use>
+  </svg>
+`
--- a/integration/apps/standalone-vite/src/sprite/.gitignore
+++ b/integration/apps/standalone-vite/src/sprite/.gitignore
@@ -0,0 +1,2 @@
+# @generated by @gromlab/svg-sprites. Do not edit.
+/.svg-sprite/
--- a/integration/apps/standalone-vite/src/sprite/index.ts
+++ b/integration/apps/standalone-vite/src/sprite/index.ts
@@ -0,0 +1,7 @@
+export {
+  getIconsIconHref,
+  iconsIconIds,
+  iconsIconNames,
+  iconsSpriteUrl,
+} from './.svg-sprite/index.js'
+export type { IconsIconName } from './.svg-sprite/index.js'
--- a/integration/apps/standalone-vite/src/sprite/svg-sprite.config.ts
+++ b/integration/apps/standalone-vite/src/sprite/svg-sprite.config.ts
@@ -0,0 +1,8 @@
+import { defineSpriteConfig } from '@gromlab/svg-sprites'
+
+export default defineSpriteConfig({
+  mode: 'standalone@vite',
+  name: 'icons',
+  inputFiles: ['../../../../fixtures/icons/check.svg'],
+  generatedNotice: false,
+})
--- a/integration/apps/standalone-vite/src/style.css
+++ b/integration/apps/standalone-vite/src/style.css
@@ -1,16 +1,12 @@
-:root {
-  font-family: system-ui, sans-serif;
-  color: #172033;
-  background: #fff;
-}
-
 body {
  margin: 0;
  padding: 40px;
+  font-family: system-ui, sans-serif;
 }

 [data-testid='icon'] {
  width: 64px;
  height: 64px;
  color: #16a34a;
+  --icon-color-1: #16a34a;
 }
--- a/integration/apps/standalone-vite/src/vite-env.d.ts
+++ b/integration/apps/standalone-vite/src/vite-env.d.ts
--- a/integration/apps/standalone-vite/tsconfig.json
+++ b/integration/apps/standalone-vite/tsconfig.json
--- a/integration/apps/standalone-webpack/index.html
+++ b/integration/apps/standalone-webpack/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Standalone Webpack sprite fixture</title>
+  </head>
+  <body>
+    <main id="app"></main>
+  </body>
+</html>
--- a/integration/apps/standalone-webpack/package.json
+++ b/integration/apps/standalone-webpack/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@svg-sprites-fixtures/standalone-webpack",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run sprites && webpack --mode production",
+    "dev": "npm run sprites && webpack serve --mode development"
+  },
+  "devDependencies": {
+    "@gromlab/svg-sprites": "file:../../..",
+    "html-webpack-plugin": "5.6.7",
+    "ts-loader": "9.6.2",
+    "typescript": "6.0.2",
+    "webpack": "5.108.4",
+    "webpack-cli": "7.2.1",
+    "webpack-dev-server": "5.2.2"
+  }
+}
--- a/integration/apps/standalone-webpack/src/main.ts
+++ b/integration/apps/standalone-webpack/src/main.ts
@@ -0,0 +1,20 @@
+import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
+import { getIconsIconHref, iconsSpriteUrl } from './sprite'
+
+const check = spriteManifest.icons.find((icon) => icon.name === 'check')
+if (!check || spriteManifest.spriteUrl !== iconsSpriteUrl) {
+  throw new Error('Generated Webpack facade and manifest disagree.')
+}
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+  <h1>Standalone + Webpack</h1>
+  <svg
+    data-testid="icon"
+    data-app="standalone-webpack"
+    viewBox="${check.viewBox ?? '0 0 24 24'}"
+    aria-label="Check icon"
+    style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
+  >
+    <use href="${getIconsIconHref('check')}"></use>
+  </svg>
+`
--- a/integration/apps/standalone-webpack/src/sprite/.gitignore
+++ b/integration/apps/standalone-webpack/src/sprite/.gitignore
@@ -0,0 +1,2 @@
+# @generated by @gromlab/svg-sprites. Do not edit.
+/.svg-sprite/
--- a/integration/apps/standalone-webpack/src/sprite/index.ts
+++ b/integration/apps/standalone-webpack/src/sprite/index.ts
@@ -0,0 +1,7 @@
+export {
+  getIconsIconHref,
+  iconsIconIds,
+  iconsIconNames,
+  iconsSpriteUrl,
+} from './.svg-sprite/index.js'
+export type { IconsIconName } from './.svg-sprite/index.js'
--- a/integration/apps/standalone-webpack/src/sprite/svg-sprite.config.ts
+++ b/integration/apps/standalone-webpack/src/sprite/svg-sprite.config.ts
@@ -0,0 +1,8 @@
+import { defineSpriteConfig } from '@gromlab/svg-sprites'
+
+export default defineSpriteConfig({
+  mode: 'standalone@webpack',
+  name: 'icons',
+  inputFiles: ['../../../../fixtures/icons/check.svg'],
+  generatedNotice: false,
+})
--- a/integration/apps/standalone-webpack/tsconfig.json
+++ b/integration/apps/standalone-webpack/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM"],
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}
--- a/integration/apps/standalone-webpack/webpack.config.js
+++ b/integration/apps/standalone-webpack/webpack.config.js
@@ -0,0 +1,31 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+
+const root = path.dirname(fileURLToPath(import.meta.url))
+
+export default {
+  entry: './src/main.ts',
+  output: {
+    path: path.join(root, 'dist'),
+    filename: 'assets/app.[contenthash].js',
+    assetModuleFilename: 'assets/[name].[contenthash][ext]',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: 'ts-loader',
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({ template: './index.html' }),
+  ],
+}
--- a/integration/apps/standalone/build.mjs
+++ b/integration/apps/standalone/build.mjs
@@ -0,0 +1,13 @@
+import fs from 'node:fs'
+
+fs.rmSync(new URL('./dist/', import.meta.url), { recursive: true, force: true })
+fs.mkdirSync(new URL('./dist/app-icons/', import.meta.url), { recursive: true })
+fs.copyFileSync(new URL('./index.html', import.meta.url), new URL('./dist/index.html', import.meta.url))
+fs.copyFileSync(
+  new URL('./src/sprite/.svg-sprite/sprite.svg', import.meta.url),
+  new URL('./dist/app-icons/sprite.svg', import.meta.url),
+)
+fs.copyFileSync(
+  new URL('./src/sprite/.svg-sprite/svg-sprite.manifest.json', import.meta.url),
+  new URL('./dist/app-icons/manifest.json', import.meta.url),
+)
--- a/integration/apps/standalone/index.html
+++ b/integration/apps/standalone/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Standalone sprite fixture</title>
+    <style>
+      body { margin: 0; padding: 40px; font-family: system-ui, sans-serif; }
+      [data-testid="icon"] { width: 64px; height: 64px; color: #16a34a; --icon-color-1: #16a34a; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Standalone</h1>
+      <svg data-testid="icon" data-app="standalone" viewBox="0 0 24 24" aria-label="Check icon">
+        <use href="/app-icons/sprite.svg#check"></use>
+      </svg>
+    </main>
+  </body>
+</html>
--- a/integration/apps/standalone/package.json
+++ b/integration/apps/standalone/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@svg-sprites-fixtures/standalone",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "sprites": "svg-sprites src/sprite/svg-sprite.config.json",
+    "build": "npm run sprites && node build.mjs",
+    "dev": "npm run build && node ../../scripts/serve-static.mjs dist 4173"
+  },
+  "devDependencies": {
+    "@gromlab/svg-sprites": "file:../../.."
+  }
+}
--- a/integration/apps/standalone/src/sprite/.gitignore
+++ b/integration/apps/standalone/src/sprite/.gitignore
@@ -0,0 +1,2 @@
+# @generated by @gromlab/svg-sprites. Do not edit.
+/.svg-sprite/
--- a/integration/apps/standalone/src/sprite/svg-sprite.config.json
+++ b/integration/apps/standalone/src/sprite/svg-sprite.config.json
@@ -0,0 +1,6 @@
+{
+  "mode": "standalone",
+  "name": "app-icons",
+  "inputFiles": ["../../../../fixtures/icons/check.svg"],
+  "generatedNotice": false
+}
--- a/integration/apps/vanilla-vite/src/main.ts
+++ b/integration/apps/vanilla-vite/src/main.ts
@@ -1,8 +0,0 @@
-import './style.css'
-
-document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
-  <h1>Vanilla + Vite</h1>
-  <svg data-testid="icon" data-app="vanilla-vite" aria-label="Check icon" viewBox="0 0 24 24">
-    <use href="/sprites/icons.sprite.svg#check"></use>
-  </svg>
-`
--- a/integration/apps/vanilla-vite/svg-sprites.config.ts
+++ b/integration/apps/vanilla-vite/svg-sprites.config.ts
@@ -1,11 +0,0 @@
-export default {
-  output: 'public/sprites',
-  preview: false,
-  sprites: [
-    {
-      name: 'icons',
-      input: '../../fixtures/icons',
-      format: 'symbol',
-    },
-  ],
-}
--- a/integration/package-lock.json
+++ b/integration/package-lock.json
@@ -34,14 +34,11 @@
        "@types/react-dom": "^19.2.3",
        "@types/svg-sprite": "^0.0.39",
        "jsdom": "^26.1.0",
-        "next": "16.2.10",
        "react": "^19.2.5",
        "react-colorful": "^5.6.1",
        "react-dom": "^19.2.5",
        "tsup": "^8.4.0",
-        "typescript": "^5.8.3",
-        "vite": "^6.4.3",
-        "webpack": "^5.108.4"
+        "typescript": "^5.8.3"
      },
      "engines": {
        "node": ">=18"
@@ -2130,6 +2127,35 @@
        "vite-plugin-solid": "2.11.12"
      }
    },
+    "apps/standalone": {
+      "name": "@svg-sprites-fixtures/standalone",
+      "version": "0.0.0",
+      "devDependencies": {
+        "@gromlab/svg-sprites": "file:../../.."
+      }
+    },
+    "apps/standalone-vite": {
+      "name": "@svg-sprites-fixtures/standalone-vite",
+      "version": "0.0.0",
+      "devDependencies": {
+        "@gromlab/svg-sprites": "file:../../..",
+        "typescript": "6.0.2",
+        "vite": "8.1.4"
+      }
+    },
+    "apps/standalone-webpack": {
+      "name": "@svg-sprites-fixtures/standalone-webpack",
+      "version": "0.0.0",
+      "devDependencies": {
+        "@gromlab/svg-sprites": "file:../../..",
+        "html-webpack-plugin": "5.6.7",
+        "ts-loader": "9.6.2",
+        "typescript": "6.0.2",
+        "webpack": "5.108.4",
+        "webpack-cli": "7.2.1",
+        "webpack-dev-server": "5.2.2"
+      }
+    },
    "apps/svelte-vite": {
      "name": "@svg-sprites-fixtures/svelte-vite",
      "version": "0.0.0",
@@ -2160,15 +2186,6 @@
        "vite": "8.1.4"
      }
    },
-    "apps/vanilla-vite": {
-      "name": "@svg-sprites-fixtures/vanilla-vite",
-      "version": "0.0.0",
-      "devDependencies": {
-        "@gromlab/svg-sprites": "file:../../..",
-        "typescript": "6.0.2",
-        "vite": "8.1.4"
-      }
-    },
    "apps/vue-vite": {
      "name": "@svg-sprites-fixtures/vue-vite",
      "version": "0.0.0",
@@ -9372,6 +9389,18 @@
      "resolved": "apps/solid-vite",
      "link": true
    },
+    "node_modules/@svg-sprites-fixtures/standalone": {
+      "resolved": "apps/standalone",
+      "link": true
+    },
+    "node_modules/@svg-sprites-fixtures/standalone-vite": {
+      "resolved": "apps/standalone-vite",
+      "link": true
+    },
+    "node_modules/@svg-sprites-fixtures/standalone-webpack": {
+      "resolved": "apps/standalone-webpack",
+      "link": true
+    },
    "node_modules/@svg-sprites-fixtures/svelte-vite": {
      "resolved": "apps/svelte-vite",
      "link": true
@@ -9380,10 +9409,6 @@
      "resolved": "apps/sveltekit",
      "link": true
    },
-    "node_modules/@svg-sprites-fixtures/vanilla-vite": {
-      "resolved": "apps/vanilla-vite",
-      "link": true
-    },
    "node_modules/@svg-sprites-fixtures/vue-vite": {
      "resolved": "apps/vue-vite",
      "link": true
@@ -11906,7 +11931,7 @@
      "version": "8.3.0",
      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">= 12"
@@ -14372,7 +14397,7 @@
      "version": "5.1.9",
      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz",
      "integrity": "sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/import-local": {
--- a/integration/scripts/apps.mjs
+++ b/integration/scripts/apps.mjs
@@ -1,4 +1,7 @@
 export const apps = [
+  { id: 'standalone', kind: 'static', output: 'dist', expectedSpritePath: '/app-icons/sprite.svg' },
+  { id: 'standalone-vite', kind: 'static', output: 'dist' },
+  { id: 'standalone-webpack', kind: 'static', output: 'dist' },
  { id: 'react-vite', kind: 'static', output: 'dist' },
  { id: 'react-webpack', kind: 'static', output: 'dist' },
  { id: 'next-app-turbopack', kind: 'next' },
--- a/integration/tests/apps.spec.ts
+++ b/integration/tests/apps.spec.ts
@@ -114,6 +114,9 @@ for (const app of apps) {
      expect(href).not.toMatch(/^(?:blob|data|file):/)

      const spriteUrl = new URL(href!.split('#')[0], page.url())
+      if ('expectedSpritePath' in app) {
+        expect(spriteUrl.pathname).toBe(app.expectedSpritePath)
+      }
      const spriteResponse = await fetch(spriteUrl)
      expect(spriteResponse.status).toBe(200)
      expect(spriteResponse.headers.get('content-type') ?? '').toMatch(/image\/svg\+xml/)