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

integration/apps/sveltekit/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": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "build": "npm run sprites && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && vite build",
     "dev": "npm run sprites && vite dev",

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

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

integration/apps/sveltekit/src/remote-app-icons/.gitignore

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

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

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

integration/apps/sveltekit/src/remote-app-icons/index.js

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

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

@@ -0,0 +1,7 @@
+export default {
+  mode: 'sveltekit@vite',
+  source: 'remote',
+  // @ts-ignore The config runs in Node, while the app typecheck only includes browser globals.
+  input: process.env.SVG_SPRITE_REMOTE_MANIFEST_URL
+    ?? '../../../standalone-server/cases/mixed-input/.svg-sprite/svg-sprite.manifest.json',
+}

integration/apps/sveltekit/src/routes/+page.svelte

@@ -1,8 +1,10 @@
 <script>
-  import { IconsIcon } from '../sprite/index.js'
+  import { AppIcon } from '../app-icons/index.js'
+  import { RemoteAppIcon } from '../remote-app-icons/index.js'
 
   const viewerSources = [
-    () => import('../sprite/.svg-sprite/svg-sprite.manifest.js'),
+    () => import('../app-icons/.svg-sprite/svg-sprite.manifest.js'),
+    () => import('../remote-app-icons/.svg-sprite/svg-sprite.manifest.js'),
   ]
 
   /** @param {HTMLElement & { sources: unknown; viewerTitle: string }} node */
@@ -28,7 +30,7 @@
 
 <main>
   <h1>SvelteKit</h1>
-  <IconsIcon
+  <AppIcon
     data-testid="icon"
     data-app="sveltekit"
     icon="check"
@@ -37,6 +39,15 @@
     height="64"
     style="--icon-color-1: #16a34a"
   />
+  <RemoteAppIcon
+    data-testid="remote-icon"
+    data-app="sveltekit-remote"
+    icon="check"
+    aria-label="Remote check icon"
+    width="64"
+    height="64"
+    style="--icon-color-1: #16a34a"
+  />
   <gromlab-sprite-viewer use:connectViewer></gromlab-sprite-viewer>
 </main>
 

integration/apps/sveltekit/src/type-probe.ts

@@ -1,9 +1,17 @@
 import type { ComponentProps } from 'svelte'
-import { IconsIcon } from './sprite/index.js'
-import type { IconsIconName, IconsIconProps } from './sprite/index.js'
+import { AppIcon } from './app-icons/index.js'
+import type { AppIconName, AppIconProps } from './app-icons/index.js'
+import { RemoteAppIcon } from './remote-app-icons/index.js'
+import type { RemoteAppIconName, RemoteAppIconProps } from './remote-app-icons/index.js'
 
-const icon: IconsIconName = 'check'
-const inferred: ComponentProps<typeof IconsIcon> = { icon, role: 'img' }
-const declared: IconsIconProps = inferred
+const iconName: AppIconName = 'check'
+const inferred: ComponentProps<typeof AppIcon> = { icon: iconName, role: 'img' }
+const declared: AppIconProps = inferred
+const remoteIconName: RemoteAppIconName = 'check'
+const remoteInferred: ComponentProps<typeof RemoteAppIcon> = {
+  icon: remoteIconName,
+  role: 'img',
+}
+const remoteDeclared: RemoteAppIconProps = remoteInferred
 
-void declared
+void [declared, remoteDeclared]