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

This commit is contained in:
2026-07-16 09:14:11 +03:00
parent e9ae91815a
commit 57342fae4e
379 changed files with 3108 additions and 655 deletions

View File

@@ -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": "astro check",
"build": "npm run sprites && astro check && astro build",
"dev": "npm run sprites && astro dev"

View File

@@ -1,6 +1,6 @@
export default {
mode: 'astro@vite',
name: 'icons',
name: 'app',
input: '../../../../fixtures/icons/check.svg',
generatedNotice: false,
}

View File

@@ -1,5 +1,6 @@
---
import { IconsIcon } from '../sprite/index.js'
import { AppIcon } from '../app-icons/index.js'
import { RemoteAppIcon } from '../remote-app-icons/index.js'
const title = 'Astro sprite fixture'
---
@@ -14,14 +15,23 @@ const title = 'Astro sprite fixture'
<body>
<main>
<h1>Astro</h1>
<IconsIcon
<AppIcon
data-testid="icon"
data-app="astro"
icon="check"
aria-label="Check icon"
width="64"
height="64"
style="--icon-color-1: #16a34a"
style="color: #16a34a; --icon-color-1: #16a34a"
/>
<RemoteAppIcon
data-testid="remote-icon"
data-app="astro-remote"
icon="check"
aria-label="Remote check icon"
width="64"
height="64"
style="color: #16a34a; --icon-color-1: #16a34a"
/>
<gromlab-sprite-viewer id="sprite-viewer"></gromlab-sprite-viewer>
</main>
@@ -34,7 +44,10 @@ const title = 'Astro sprite fixture'
if (!viewer) throw new Error('Sprite Viewer element is missing.')
Object.assign(viewer, {
viewerTitle: 'Astro Vite Viewer',
sources: [() => import('../sprite/.svg-sprite/svg-sprite.manifest.js')],
sources: [
() => import('../app-icons/.svg-sprite/svg-sprite.manifest.js'),
() => import('../remote-app-icons/.svg-sprite/svg-sprite.manifest.js'),
],
})
</script>
</body>
@@ -52,7 +65,8 @@ const title = 'Astro sprite fixture'
padding: 40px;
}
[data-testid='icon'] {
[data-testid='icon'],
[data-testid='remote-icon'] {
width: 64px;
height: 64px;
color: #16a34a;

View File

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

View File

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

View File

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

View File

@@ -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: 'astro@vite',
source: 'remote',
input: manifestUrl,
}

View File

@@ -1,11 +1,16 @@
import type { IconsIconName, IconsIconProps } from './sprite/index.js'
import type { SpriteManifest } from './sprite/.svg-sprite/svg-sprite.manifest.js'
import type { AppIconName, AppIconProps } from './app-icons/index.js'
import type { SpriteManifest } from './app-icons/.svg-sprite/svg-sprite.manifest.js'
import type { RemoteAppIconName, RemoteAppIconProps } from './remote-app-icons/index.js'
import type { SpriteManifest as RemoteSpriteManifest } from './remote-app-icons/.svg-sprite/svg-sprite.manifest.js'
const icon: IconsIconName = 'check'
const props: IconsIconProps = { icon, width: 24, 'aria-label': 'Check icon' }
const icon: AppIconName = 'check'
const remoteIcon: RemoteAppIconName = 'check'
const props: AppIconProps = { icon, width: 24, 'aria-label': 'Check icon' }
const remoteProps: RemoteAppIconProps = { icon: remoteIcon, width: 24, 'aria-label': 'Remote check icon' }
const framework: SpriteManifest['usage']['framework'] = 'astro'
const remoteFramework: RemoteSpriteManifest['usage']['framework'] = 'astro'
// @ts-expect-error Unknown source file names are rejected by the generated union.
const unknownIcon: IconsIconName = 'missing'
const unknownIcon: AppIconName = 'missing'
export { framework, icon, props, unknownIcon }
export { framework, icon, props, remoteFramework, remoteIcon, remoteProps, unknownIcon }