feat: добавить серверную генерацию спрайтов

integration/apps/standalone/build.mjs

@@ -1,17 +1,21 @@
 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.mkdirSync(new URL('./dist/', 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('../../../dist/viewer-element.js', import.meta.url),
   new URL('./dist/viewer-element.js', 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),
-)
+
+for (const root of ['app-icons', 'remote-app-icons']) {
+  fs.mkdirSync(new URL(`./dist/${root}/`, import.meta.url), { recursive: true })
+  fs.copyFileSync(
+    new URL(`./src/${root}/.svg-sprite/sprite.svg`, import.meta.url),
+    new URL(`./dist/${root}/sprite.svg`, import.meta.url),
+  )
+  fs.copyFileSync(
+    new URL(`./src/${root}/.svg-sprite/svg-sprite.manifest.json`, import.meta.url),
+    new URL(`./dist/${root}/manifest.json`, import.meta.url),
+  )
+}

integration/apps/standalone/index.html

@@ -6,7 +6,7 @@
     <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; }
+      [data-testid="icon"], [data-testid="remote-icon"] { width: 64px; height: 64px; color: #16a34a; --icon-color-1: #16a34a; }
       gromlab-sprite-viewer { margin-top: 32px; }
     </style>
   </head>
@@ -16,12 +16,20 @@
       <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>
+      <svg data-testid="remote-icon" data-app="standalone-remote" viewBox="0 0 24 24" aria-label="Remote check icon">
+        <use href="/remote-app-icons/sprite.svg#check"></use>
+      </svg>
       <gromlab-sprite-viewer
         viewer-title="Standalone Viewer"
-        manifest-url="/app-icons/manifest.json"
-        sprite-url="/app-icons/sprite.svg"
       ></gromlab-sprite-viewer>
     </main>
-    <script type="module" src="/viewer-element.js"></script>
+    <script type="module">
+      import '/viewer-element.js'
+
+      document.querySelector('gromlab-sprite-viewer').sources = [
+        { manifestUrl: '/app-icons/manifest.json', spriteUrl: '/app-icons/sprite.svg' },
+        { manifestUrl: '/remote-app-icons/manifest.json', spriteUrl: '/remote-app-icons/sprite.svg' },
+      ]
+    </script>
   </body>
 </html>

integration/apps/standalone/package.json

@@ -3,7 +3,9 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "sprites": "svg-sprites src/sprite/svg-sprite.config.json",
+    "sprites": "npm run sprites:local && npm run sprites:remote",
+    "sprites:local": "svg-sprites src/app-icons/svg-sprite.config.json",
+    "sprites:remote": "svg-sprites src/remote-app-icons/svg-sprite.config.js",
     "build": "npm run sprites && node build.mjs",
     "dev": "npm run build && node ../../scripts/serve-static.mjs dist 4173"
   },

integration/apps/standalone/src/app-icons/svg-sprite.config.json

@@ -1,6 +1,6 @@
 {
   "mode": "standalone",
-  "name": "app-icons",
+  "name": "app",
   "input": "../../../../fixtures/icons/check.svg",
   "generatedNotice": false
 }

integration/apps/standalone/src/remote-app-icons/svg-sprite.config.js

@@ -0,0 +1,8 @@
+const manifestUrl = process.env.SVG_SPRITE_REMOTE_MANIFEST_URL
+  ?? '../../../standalone-server/cases/mixed-input/.svg-sprite/svg-sprite.manifest.json'
+
+export default {
+  mode: 'standalone',
+  source: 'remote',
+  input: manifestUrl,
+}