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.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 && vite build",
"dev": "npm run sprites && vite"

View File

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

View File

@@ -1,18 +1,33 @@
import {
defineIconsIcon,
IconsIcon,
iconsIconNames,
iconsIconTagName,
type IconsIconName,
} from './sprite/index.js'
AppIcon,
appIconNames,
appIconTagName,
defineAppIcon,
type AppIconName,
} from './app-icons/index.js'
import {
defineRemoteAppIcon,
RemoteAppIcon,
remoteAppIconNames,
remoteAppIconTagName,
type RemoteAppIconName,
} from './remote-app-icons/index.js'
const iconName: IconsIconName = iconsIconNames[0]
const icon = new IconsIcon()
icon.icon = iconName
const appIconName: AppIconName = appIconNames[0]
const appIcon = new AppIcon()
appIcon.icon = appIconName
const remoteAppIconName: RemoteAppIconName = remoteAppIconNames[0]
const remoteAppIcon = new RemoteAppIcon()
remoteAppIcon.icon = remoteAppIconName
const registeredIcon = document.createElement(iconsIconTagName)
registeredIcon.icon = 'check'
defineIconsIcon()
const registeredAppIcon = document.createElement(appIconTagName)
registeredAppIcon.icon = 'check'
const registeredRemoteAppIcon = document.createElement(remoteAppIconTagName)
registeredRemoteAppIcon.icon = 'check'
defineAppIcon()
defineRemoteAppIcon()
// @ts-expect-error Generated icon names form a literal union.
registeredIcon.icon = 'missing'
registeredAppIcon.icon = 'missing'
// @ts-expect-error Generated remote icon names form a literal union.
registeredRemoteAppIcon.icon = 'missing'

View File

@@ -1,20 +1,31 @@
import '@gromlab/svg-sprites/viewer/element'
import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
import { defineIconsIcon } from './sprite/index.js'
import appManifest from './app-icons/.svg-sprite/svg-sprite.manifest.js'
import { defineAppIcon } from './app-icons/index.js'
import remoteAppManifest from './remote-app-icons/.svg-sprite/svg-sprite.manifest.js'
import { defineRemoteAppIcon } from './remote-app-icons/index.js'
defineIconsIcon()
defineAppIcon()
defineRemoteAppIcon()
document.querySelector('#app').innerHTML = `
<h1>Lit + Vite</h1>
<icons-icon
<app-icon
data-testid="icon"
data-app="lit-vite"
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="lit-vite-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 viewer-title="Lit Vite Viewer"></gromlab-sprite-viewer>
`
document.querySelector('gromlab-sprite-viewer').sources = [spriteManifest]
document.querySelector('gromlab-sprite-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 @@
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: 'lit@vite',
source: 'remote',
input: manifestUrl,
}