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

integration/apps/alpine-webpack/package.json

@@ -4,7 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "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",
     "typecheck": "tsc --noEmit",
     "build": "npm run sprites && npm run typecheck && webpack --mode production",
     "dev": "npm run sprites && webpack serve --mode development"

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

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

integration/apps/alpine-webpack/src/generated-contract.typecheck.ts

@@ -1,22 +1,41 @@
 import {
-  iconsAlpinePlugin,
-  iconsIconDirective,
-  iconsIconMagic,
-  iconsIconNames,
-  type IconsIconName,
-} from './sprite/index.js'
+  appAlpinePlugin,
+  appIconDirective,
+  appIconMagic,
+  appIconNames,
+  type AppIconName,
+} from './app-icons/index.js'
+import {
+  remoteAppAlpinePlugin,
+  remoteAppIconDirective,
+  remoteAppIconMagic,
+  remoteAppIconNames,
+  type RemoteAppIconName,
+} from './remote-app-icons/index.js'
 
-declare const Alpine: { plugin(plugin: typeof iconsAlpinePlugin): void }
+declare const Alpine: {
+  plugin(plugin: typeof appAlpinePlugin | typeof remoteAppAlpinePlugin): void
+}
 
-const iconName: IconsIconName = iconsIconNames[0]
-const directive: 'icons-icon' = iconsIconDirective
-const magic: 'iconsIconHref' = iconsIconMagic
+const appIconName: AppIconName = appIconNames[0]
+const appDirective: 'app-icon' = appIconDirective
+const appMagic: 'appIconHref' = appIconMagic
+const remoteAppIconName: RemoteAppIconName = remoteAppIconNames[0]
+const remoteAppDirective: 'remote-app-icon' = remoteAppIconDirective
+const remoteAppMagic: 'remoteAppIconHref' = remoteAppIconMagic
 
-Alpine.plugin(iconsAlpinePlugin)
-void iconName
-void directive
-void magic
+Alpine.plugin(appAlpinePlugin)
+Alpine.plugin(remoteAppAlpinePlugin)
+void appIconName
+void appDirective
+void appMagic
+void remoteAppIconName
+void remoteAppDirective
+void remoteAppMagic
 
 // @ts-expect-error Generated icon names form a literal union.
-const missingIcon: IconsIconName = 'missing'
+const missingIcon: AppIconName = 'missing'
 void missingIcon
+// @ts-expect-error Generated remote icon names form a literal union.
+const missingRemoteIcon: RemoteAppIconName = 'missing'
+void missingRemoteIcon

integration/apps/alpine-webpack/src/main.js

@@ -1,9 +1,12 @@
 import '@gromlab/svg-sprites/viewer/element'
 import Alpine from 'alpinejs'
-import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
-import { iconsAlpinePlugin } from './sprite/index.js'
+import appManifest from './app-icons/.svg-sprite/svg-sprite.manifest.js'
+import { appAlpinePlugin } from './app-icons/index.js'
+import remoteAppManifest from './remote-app-icons/.svg-sprite/svg-sprite.manifest.js'
+import { remoteAppAlpinePlugin } from './remote-app-icons/index.js'
 
-Alpine.plugin(iconsAlpinePlugin)
+Alpine.plugin(appAlpinePlugin)
+Alpine.plugin(remoteAppAlpinePlugin)
 window.Alpine = Alpine
 
 document.querySelector('#app').innerHTML = `
@@ -12,14 +15,22 @@ document.querySelector('#app').innerHTML = `
     <svg
       data-testid="icon"
       data-app="alpine-webpack"
-      x-icons-icon="'check'"
+      x-app-icon="'check'"
       role="img"
       aria-label="Check icon"
       style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
     ></svg>
+    <svg
+      data-testid="remote-icon"
+      data-app="alpine-webpack-remote"
+      x-remote-app-icon="'check'"
+      role="img"
+      aria-label="Remote check icon"
+      style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
+    ></svg>
     <gromlab-sprite-viewer viewer-title="Alpine Webpack Viewer"></gromlab-sprite-viewer>
   </main>
 `
 
-document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]
+document.querySelector('gromlab-sprite-viewer').sources = [appManifest, remoteAppManifest]
 Alpine.start()

integration/apps/alpine-webpack/src/remote-app-icons/.gitignore

@@ -0,0 +1,2 @@
+# @generated by @gromlab/svg-sprites. Do not edit.
+/.svg-sprite/

integration/apps/alpine-webpack/src/remote-app-icons/index.d.ts

@@ -0,0 +1 @@
+export * from './.svg-sprite/index.js'

integration/apps/alpine-webpack/src/remote-app-icons/index.js

@@ -0,0 +1 @@
+export * from './.svg-sprite/index.js'

integration/apps/alpine-webpack/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: 'alpine@webpack',
+  source: 'remote',
+  input: manifestUrl,
+}