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

@@ -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'

View File

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

View File

@@ -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'

View File

@@ -1,28 +1,43 @@
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'
import './style.css'
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 Vite facade and manifest disagree.')
}
defineIconsIconElement()
const remoteAppCheck = remoteAppManifest.icons.find((icon) => icon.name === 'check')
if (!remoteAppCheck || remoteAppManifest.spriteUrl !== remoteAppSpriteUrl) {
throw new Error('Generated remote Vite facade and manifest disagree.')
}
defineAppIconElement()
defineRemoteAppIconElement()
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<h1>Standalone + Vite</h1>
<icons-icon
<app-icon
data-testid="icon"
data-app="standalone-vite"
icon="check"
role="img"
aria-label="Check icon"
></icons-icon>
></app-icon>
<remote-app-icon
data-testid="remote-icon"
data-app="standalone-vite-remote"
icon="check"
role="img"
aria-label="Remote check icon"
></remote-app-icon>
<gromlab-sprite-viewer></gromlab-sprite-viewer>
`
const viewer = document.querySelector<SpriteViewerElement>('gromlab-sprite-viewer')!
viewer.viewerTitle = 'Standalone Vite Viewer'
viewer.sources = [spriteManifest]
viewer.sources = [appManifest, remoteAppManifest]

View File

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

View File

@@ -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'

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

View File

@@ -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'

View File

@@ -4,7 +4,8 @@ body {
font-family: system-ui, sans-serif;
}
[data-testid='icon'] {
[data-testid='icon'],
[data-testid='remote-icon'] {
width: 64px;
height: 64px;
color: #16a34a;