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

integration/apps/standalone-webpack/package.json

@@ -4,7 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
+    "sprites": "npm run sprites:local && npm run sprites:remote",
+    "sprites:local": "svg-sprites src/app-icons/svg-sprite.config.ts",
+    "sprites:remote": "svg-sprites src/remote-app-icons/svg-sprite.config.js",
     "typecheck": "tsc --noEmit",
     "build": "npm run sprites && webpack --mode production",
     "dev": "npm run sprites && webpack serve --mode development"

integration/apps/standalone-webpack/src/app-icons/index.ts

@@ -0,0 +1,9 @@
+export {
+  appIconIds,
+  appIconNames,
+  appIconTagName,
+  appSpriteUrl,
+  defineAppIconElement,
+  getAppIconHref,
+} from './.svg-sprite/index.js'
+export type { AppIconElement, AppIconName } from './.svg-sprite/index.js'

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

@@ -2,7 +2,7 @@ import { defineSpriteConfig } from '@gromlab/svg-sprites'
 
 export default defineSpriteConfig({
   mode: 'standalone@webpack',
-  name: 'icons',
+  name: 'app',
   input: '../../../../fixtures/icons/check.svg',
   generatedNotice: false,
 })

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

@@ -1,9 +1,15 @@
-import type { IconsIconElement } from './sprite'
+import type { AppIconElement } from './app-icons'
+import type { RemoteAppIconElement } from './remote-app-icons'
 
-const icon = document.createElement('icons-icon')
-const typedIcon: IconsIconElement = icon
+const appIcon = document.createElement('app-icon')
+const typedAppIcon: AppIconElement = appIcon
+const remoteAppIcon = document.createElement('remote-app-icon')
+const typedRemoteAppIcon: RemoteAppIconElement = remoteAppIcon
 
-typedIcon.icon = 'check'
+typedAppIcon.icon = 'check'
+typedRemoteAppIcon.icon = 'check'
 
 // @ts-expect-error Generated icon names form a literal union.
-typedIcon.icon = 'missing'
+typedAppIcon.icon = 'missing'
+// @ts-expect-error Generated remote icon names form a literal union.
+typedRemoteAppIcon.icon = 'missing'

integration/apps/standalone-webpack/src/main.ts

@@ -1,28 +1,44 @@
 import '@gromlab/svg-sprites/viewer/element'
 import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
-import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
-import { defineIconsIconElement, iconsSpriteUrl } from './sprite'
+import appManifest from './app-icons/.svg-sprite/svg-sprite.manifest.js'
+import { appSpriteUrl, defineAppIconElement } from './app-icons'
+import remoteAppManifest from './remote-app-icons/.svg-sprite/svg-sprite.manifest.js'
+import { defineRemoteAppIconElement, remoteAppSpriteUrl } from './remote-app-icons'
 
-const check = spriteManifest.icons.find((icon) => icon.name === 'check')
-if (!check || spriteManifest.spriteUrl !== iconsSpriteUrl) {
+const appCheck = appManifest.icons.find((icon) => icon.name === 'check')
+if (!appCheck || appManifest.spriteUrl !== appSpriteUrl) {
   throw new Error('Generated Webpack facade and manifest disagree.')
 }
 
-defineIconsIconElement()
+const remoteAppCheck = remoteAppManifest.icons.find((icon) => icon.name === 'check')
+if (!remoteAppCheck || remoteAppManifest.spriteUrl !== remoteAppSpriteUrl) {
+  throw new Error('Generated remote Webpack facade and manifest disagree.')
+}
+
+defineAppIconElement()
+defineRemoteAppIconElement()
 
 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   <h1>Standalone + Webpack</h1>
-  <icons-icon
+  <app-icon
     data-testid="icon"
     data-app="standalone-webpack"
     icon="check"
     role="img"
     aria-label="Check icon"
     style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
-  ></icons-icon>
+  ></app-icon>
+  <remote-app-icon
+    data-testid="remote-icon"
+    data-app="standalone-webpack-remote"
+    icon="check"
+    role="img"
+    aria-label="Remote check icon"
+    style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
+  ></remote-app-icon>
   <gromlab-sprite-viewer></gromlab-sprite-viewer>
 `
 
 const viewer = document.querySelector<SpriteViewerElement>('gromlab-sprite-viewer')!
 viewer.viewerTitle = 'Standalone Webpack Viewer'
-viewer.sources = [spriteManifest]
+viewer.sources = [appManifest, remoteAppManifest]

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

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

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

@@ -0,0 +1,9 @@
+export {
+  defineRemoteAppIconElement,
+  getRemoteAppIconHref,
+  remoteAppIconIds,
+  remoteAppIconNames,
+  remoteAppIconTagName,
+  remoteAppSpriteUrl,
+} from './.svg-sprite/index.js'
+export type { RemoteAppIconElement, RemoteAppIconName } from './.svg-sprite/index.js'

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

integration/apps/standalone-webpack/src/sprite/index.ts

@@ -1,9 +0,0 @@
-export {
-  defineIconsIconElement,
-  getIconsIconHref,
-  iconsIconIds,
-  iconsIconNames,
-  iconsIconTagName,
-  iconsSpriteUrl,
-} from './.svg-sprite/index.js'
-export type { IconsIconElement, IconsIconName } from './.svg-sprite/index.js'