mirror of
https://github.com/gromlab-ru/svg-sprites.git
synced 2026-07-22 04:40:17 +03:00
feat: добавить поддержку 20 framework exact modes
Добавлены exact modes: - vue@vite и vue@webpack - nuxt@vite и nuxt@webpack - svelte@vite, svelte@webpack и sveltekit@vite - angular@application и angular@webpack - astro@vite - solid@vite, solid@webpack и solid-start@vite - preact@vite и preact@webpack - qwik@vite - lit@vite и lit@webpack - alpine@vite и alpine@webpack Для каждого mode реализованы изолированный adapter, нативный framework-компонент, declarations, manifest, CSS и внешний asset URL. Добавлены production integration-стенды с генерацией, typecheck, сборкой и Playwright-проверкой рендера спрайта и Viewer. Обновлены Viewer, RU/EN-гайды, README, technical reference и AI skills. Итоговая матрица включает 29 exact modes. Проверки: - 48 unit-тестов - 29 integration E2E-тестов
This commit is contained in:
@@ -16,6 +16,26 @@ export const CLI_USAGE = [
|
||||
' standalone@webpack',
|
||||
' react@vite',
|
||||
' react@webpack',
|
||||
' vue@vite',
|
||||
' vue@webpack',
|
||||
' nuxt@vite',
|
||||
' nuxt@webpack',
|
||||
' svelte@vite',
|
||||
' svelte@webpack',
|
||||
' sveltekit@vite',
|
||||
' angular@application',
|
||||
' angular@webpack',
|
||||
' astro@vite',
|
||||
' solid@vite',
|
||||
' solid@webpack',
|
||||
' solid-start@vite',
|
||||
' preact@vite',
|
||||
' preact@webpack',
|
||||
' qwik@vite',
|
||||
' lit@vite',
|
||||
' lit@webpack',
|
||||
' alpine@vite',
|
||||
' alpine@webpack',
|
||||
' next@app/turbopack',
|
||||
' next@app/webpack',
|
||||
' next@pages/turbopack',
|
||||
|
||||
@@ -21,6 +21,26 @@ const MODES = new Set<SpriteMode>([
|
||||
'standalone@webpack',
|
||||
'react@vite',
|
||||
'react@webpack',
|
||||
'vue@vite',
|
||||
'vue@webpack',
|
||||
'nuxt@vite',
|
||||
'nuxt@webpack',
|
||||
'svelte@vite',
|
||||
'svelte@webpack',
|
||||
'sveltekit@vite',
|
||||
'angular@application',
|
||||
'angular@webpack',
|
||||
'astro@vite',
|
||||
'solid@vite',
|
||||
'solid@webpack',
|
||||
'solid-start@vite',
|
||||
'preact@vite',
|
||||
'preact@webpack',
|
||||
'qwik@vite',
|
||||
'lit@vite',
|
||||
'lit@webpack',
|
||||
'alpine@vite',
|
||||
'alpine@webpack',
|
||||
'next@app/turbopack',
|
||||
'next@app/webpack',
|
||||
'next@pages/turbopack',
|
||||
|
||||
@@ -5,6 +5,7 @@ import type {
|
||||
ReactAssetTarget,
|
||||
StandaloneAssetTarget,
|
||||
SpriteMode,
|
||||
SpriteAssetTarget,
|
||||
} from '../targets/types.js'
|
||||
import type { ResolvedSpriteConfig, SpriteFolder } from '../types.js'
|
||||
|
||||
@@ -38,7 +39,11 @@ export type StandaloneModeResultMetadata = {
|
||||
readonly target: StandaloneAssetTarget
|
||||
}
|
||||
|
||||
export type ModeResultMetadata = ReactModeResultMetadata | NextModeResultMetadata | StandaloneModeResultMetadata
|
||||
export type FrameworkModeResultMetadata = {
|
||||
readonly target: SpriteAssetTarget
|
||||
}
|
||||
|
||||
export type ModeResultMetadata = FrameworkModeResultMetadata | NextModeResultMetadata
|
||||
|
||||
export type OutputPlan = {
|
||||
readonly files: readonly GeneratedFile[]
|
||||
|
||||
11
src/index.ts
11
src/index.ts
@@ -21,14 +21,25 @@ export type {
|
||||
NextAssetTarget,
|
||||
NextBundler,
|
||||
NextRouter,
|
||||
AlpineSpriteMode,
|
||||
AngularAssetTarget,
|
||||
AngularSpriteMode,
|
||||
AstroSpriteMode,
|
||||
LitSpriteMode,
|
||||
NuxtSpriteMode,
|
||||
PreactSpriteMode,
|
||||
QwikSpriteMode,
|
||||
ReactAssetTarget,
|
||||
ReactSpriteMode,
|
||||
SolidSpriteMode,
|
||||
StandaloneAssetTarget,
|
||||
StandaloneSpriteMode,
|
||||
StaticAssetTarget,
|
||||
SvelteSpriteMode,
|
||||
SpriteAssetTarget,
|
||||
SpriteMode,
|
||||
ViteAssetTarget,
|
||||
VueSpriteMode,
|
||||
WebpackAssetTarget,
|
||||
} from './targets/types.js'
|
||||
export type {
|
||||
|
||||
@@ -1,13 +1,33 @@
|
||||
import type { ModeAdapter } from './core/mode-adapter.js'
|
||||
import { alpineViteAdapter } from './modes/alpine-vite/adapter.js'
|
||||
import { alpineWebpackAdapter } from './modes/alpine-webpack/adapter.js'
|
||||
import { angularApplicationAdapter } from './modes/angular-application/adapter.js'
|
||||
import { angularWebpackAdapter } from './modes/angular-webpack/adapter.js'
|
||||
import { astroViteAdapter } from './modes/astro-vite/adapter.js'
|
||||
import { litViteAdapter } from './modes/lit-vite/adapter.js'
|
||||
import { litWebpackAdapter } from './modes/lit-webpack/adapter.js'
|
||||
import { nextAppTurbopackAdapter } from './modes/next-app-turbopack/adapter.js'
|
||||
import { nextAppWebpackAdapter } from './modes/next-app-webpack/adapter.js'
|
||||
import { nextPagesTurbopackAdapter } from './modes/next-pages-turbopack/adapter.js'
|
||||
import { nextPagesWebpackAdapter } from './modes/next-pages-webpack/adapter.js'
|
||||
import { nuxtViteAdapter } from './modes/nuxt-vite/adapter.js'
|
||||
import { nuxtWebpackAdapter } from './modes/nuxt-webpack/adapter.js'
|
||||
import { preactViteAdapter } from './modes/preact-vite/adapter.js'
|
||||
import { preactWebpackAdapter } from './modes/preact-webpack/adapter.js'
|
||||
import { qwikViteAdapter } from './modes/qwik-vite/adapter.js'
|
||||
import { reactViteAdapter } from './modes/react-vite/adapter.js'
|
||||
import { reactWebpackAdapter } from './modes/react-webpack/adapter.js'
|
||||
import { standaloneAdapter } from './modes/standalone/adapter.js'
|
||||
import { standaloneViteAdapter } from './modes/standalone-vite/adapter.js'
|
||||
import { standaloneWebpackAdapter } from './modes/standalone-webpack/adapter.js'
|
||||
import { solidStartViteAdapter } from './modes/solid-start-vite/adapter.js'
|
||||
import { solidViteAdapter } from './modes/solid-vite/adapter.js'
|
||||
import { solidWebpackAdapter } from './modes/solid-webpack/adapter.js'
|
||||
import { svelteViteAdapter } from './modes/svelte-vite/adapter.js'
|
||||
import { svelteWebpackAdapter } from './modes/svelte-webpack/adapter.js'
|
||||
import { sveltekitViteAdapter } from './modes/sveltekit-vite/adapter.js'
|
||||
import { vueViteAdapter } from './modes/vue-vite/adapter.js'
|
||||
import { vueWebpackAdapter } from './modes/vue-webpack/adapter.js'
|
||||
import type { SpriteMode } from './targets/types.js'
|
||||
|
||||
const modeRegistry: Record<SpriteMode, ModeAdapter> = {
|
||||
@@ -16,6 +36,26 @@ const modeRegistry: Record<SpriteMode, ModeAdapter> = {
|
||||
'standalone@webpack': standaloneWebpackAdapter,
|
||||
'react@vite': reactViteAdapter,
|
||||
'react@webpack': reactWebpackAdapter,
|
||||
'vue@vite': vueViteAdapter,
|
||||
'vue@webpack': vueWebpackAdapter,
|
||||
'nuxt@vite': nuxtViteAdapter,
|
||||
'nuxt@webpack': nuxtWebpackAdapter,
|
||||
'svelte@vite': svelteViteAdapter,
|
||||
'svelte@webpack': svelteWebpackAdapter,
|
||||
'sveltekit@vite': sveltekitViteAdapter,
|
||||
'angular@application': angularApplicationAdapter,
|
||||
'angular@webpack': angularWebpackAdapter,
|
||||
'astro@vite': astroViteAdapter,
|
||||
'solid@vite': solidViteAdapter,
|
||||
'solid@webpack': solidWebpackAdapter,
|
||||
'solid-start@vite': solidStartViteAdapter,
|
||||
'preact@vite': preactViteAdapter,
|
||||
'preact@webpack': preactWebpackAdapter,
|
||||
'qwik@vite': qwikViteAdapter,
|
||||
'lit@vite': litViteAdapter,
|
||||
'lit@webpack': litWebpackAdapter,
|
||||
'alpine@vite': alpineViteAdapter,
|
||||
'alpine@webpack': alpineWebpackAdapter,
|
||||
'next@app/turbopack': nextAppTurbopackAdapter,
|
||||
'next@app/webpack': nextAppWebpackAdapter,
|
||||
'next@pages/turbopack': nextPagesTurbopackAdapter,
|
||||
|
||||
25
src/modes/alpine-vite/adapter.ts
Normal file
25
src/modes/alpine-vite/adapter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const alpineViteAdapter: ModeAdapter<'alpine@vite'> = {
|
||||
mode: 'alpine@vite',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
|
||||
rootViewBox: false,
|
||||
})
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'vite' },
|
||||
}
|
||||
},
|
||||
}
|
||||
272
src/modes/alpine-vite/output.ts
Normal file
272
src/modes/alpine-vite/output.ts
Normal file
@@ -0,0 +1,272 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'alpine@vite'
|
||||
const TARGET = 'vite'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function markedSvg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const marker = enabled ? `${NOTICE} ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
|
||||
: `<!-- ${marker} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Icon names for the "${config.name}" SVG sprite.`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
const names = artifact.icons.map((icon) => icon.name)
|
||||
const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
|
||||
'',
|
||||
`export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const typeName = `${pascal(config.name)}IconName`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${typeName} = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function integration(config: ResolvedSpriteConfig): string {
|
||||
const prefix = camel(config.name)
|
||||
const directive = `${config.name}-icon`
|
||||
const magic = `${prefix}IconHref`
|
||||
const className = `${config.name}-icon`
|
||||
const styleId = `svg-sprites-${config.name}-alpine`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import integrationStyles from './alpine-integration.css?inline'",
|
||||
`import { ${prefix}IconIds } from '../icon-data.js'`,
|
||||
"import spriteUrl from '../sprite.svg?no-inline'",
|
||||
'',
|
||||
`export const ${prefix}IconDirective = ${JSON.stringify(directive)}`,
|
||||
`export const ${prefix}IconMagic = ${JSON.stringify(magic)}`,
|
||||
'',
|
||||
'function iconHref(icon) {',
|
||||
` const id = ${prefix}IconIds[icon]`,
|
||||
" return id ? spriteUrl + '#' + id : ''",
|
||||
'}',
|
||||
'',
|
||||
'function installStyles() {',
|
||||
` if (document.getElementById(${JSON.stringify(styleId)})) return`,
|
||||
" const style = document.createElement('style')",
|
||||
` style.id = ${JSON.stringify(styleId)}`,
|
||||
' style.textContent = integrationStyles',
|
||||
' document.head.append(style)',
|
||||
'}',
|
||||
'',
|
||||
`export const ${prefix}AlpinePlugin = (Alpine) => {`,
|
||||
' installStyles()',
|
||||
` Alpine.magic(${prefix}IconMagic, () => iconHref)`,
|
||||
'',
|
||||
` Alpine.directive(${prefix}IconDirective, (element, { expression }, { effect, evaluateLater }) => {`,
|
||||
" if (element.namespaceURI !== 'http://www.w3.org/2000/svg' || element.localName !== 'svg') {",
|
||||
` throw new Error('x-${directive} must be used on an <svg> element.')`,
|
||||
' }',
|
||||
'',
|
||||
` element.classList.add(${JSON.stringify(className)})`,
|
||||
" let use = Array.from(element.children).find((child) => child.localName === 'use' && child.hasAttribute('data-svg-sprites-icon'))",
|
||||
' if (!use) {',
|
||||
" use = document.createElementNS('http://www.w3.org/2000/svg', 'use')",
|
||||
" use.setAttribute('data-svg-sprites-icon', '')",
|
||||
' element.append(use)',
|
||||
' }',
|
||||
'',
|
||||
' const evaluateIcon = evaluateLater(expression)',
|
||||
' effect(() => {',
|
||||
' evaluateIcon((icon) => {',
|
||||
' const href = iconHref(icon)',
|
||||
" if (href) use.setAttribute('href', href)",
|
||||
" else use.removeAttribute('href')",
|
||||
' })',
|
||||
' })',
|
||||
' })',
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function integrationTypes(config: ResolvedSpriteConfig): string {
|
||||
const pascalName = pascal(config.name)
|
||||
const prefix = camel(config.name)
|
||||
const typeName = `${pascalName}IconName`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
`export type ${pascalName}AlpineDirectiveUtilities = {`,
|
||||
' effect(callback: () => void): void',
|
||||
' evaluateLater(expression: string): (receiver: (value: unknown) => void) => void',
|
||||
'}',
|
||||
`export type ${pascalName}AlpineApi = {`,
|
||||
' magic(name: string, callback: () => unknown): unknown',
|
||||
` directive(name: string, callback: (element: Element, directive: { expression: string }, utilities: ${pascalName}AlpineDirectiveUtilities) => void): unknown`,
|
||||
'}',
|
||||
`export type ${pascalName}AlpinePluginType = (Alpine: ${pascalName}AlpineApi) => void`,
|
||||
`export declare const ${prefix}IconDirective: ${JSON.stringify(`${config.name}-icon`)}`,
|
||||
`export declare const ${prefix}IconMagic: ${JSON.stringify(`${prefix}IconHref`)}`,
|
||||
`export declare const ${prefix}AlpinePlugin: ${pascalName}AlpinePluginType`,
|
||||
`export type { ${typeName} } from '../icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
`.${config.name}-icon {`,
|
||||
' display: inline-block;',
|
||||
' width: 1em;',
|
||||
' height: 1em;',
|
||||
' vertical-align: middle;',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${prefix}AlpinePlugin, ${prefix}IconDirective, ${prefix}IconMagic } from './alpine/alpine-integration.js'`,
|
||||
`export { ${prefix}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexTypes(config: ResolvedSpriteConfig): string {
|
||||
const pascalName = pascal(config.name)
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${prefix}AlpinePlugin, ${prefix}IconDirective, ${prefix}IconMagic } from './alpine/alpine-integration.js'`,
|
||||
`export type { ${pascalName}AlpineApi, ${pascalName}AlpineDirectiveUtilities, ${pascalName}AlpinePluginType } from './alpine/alpine-integration.js'`,
|
||||
`export { ${prefix}IconNames } from './icon-data.js'`,
|
||||
`export type { ${pascalName}IconName } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: {
|
||||
framework: 'alpine',
|
||||
pluginName: `${prefix}AlpinePlugin`,
|
||||
directive: `x-${config.name}-icon`,
|
||||
magic: `$${prefix}IconHref`,
|
||||
},
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import spriteUrl from './sprite.svg?no-inline'",
|
||||
'',
|
||||
`export const spriteManifest = ${source}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestTypes(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = {',
|
||||
' name: string',
|
||||
' id: string',
|
||||
' viewBox: string | null',
|
||||
' colors: readonly SpriteManifestColor[]',
|
||||
'}',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'alpine'; pluginName: string; directive: string; magic: string }",
|
||||
" mode: 'alpine@vite'",
|
||||
" target: 'vite'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'alpine', 'alpine-integration.js'), content: integration(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'alpine', 'alpine-integration.d.ts'), content: integrationTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'alpine', 'alpine-integration.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
|
||||
]
|
||||
}
|
||||
25
src/modes/alpine-webpack/adapter.ts
Normal file
25
src/modes/alpine-webpack/adapter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const alpineWebpackAdapter: ModeAdapter<'alpine@webpack'> = {
|
||||
mode: 'alpine@webpack',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
|
||||
rootViewBox: false,
|
||||
})
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'webpack' },
|
||||
}
|
||||
},
|
||||
}
|
||||
273
src/modes/alpine-webpack/output.ts
Normal file
273
src/modes/alpine-webpack/output.ts
Normal file
@@ -0,0 +1,273 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'alpine@webpack'
|
||||
const TARGET = 'webpack'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function markedSvg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const marker = enabled ? `${NOTICE} ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
|
||||
: `<!-- ${marker} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Icon names for the "${config.name}" SVG sprite.`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
const names = artifact.icons.map((icon) => icon.name)
|
||||
const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
|
||||
'',
|
||||
`export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const typeName = `${pascal(config.name)}IconName`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${typeName} = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function integration(config: ResolvedSpriteConfig): string {
|
||||
const prefix = camel(config.name)
|
||||
const directive = `${config.name}-icon`
|
||||
const magic = `${prefix}IconHref`
|
||||
const className = `${config.name}-icon`
|
||||
const styleId = `svg-sprites-${config.name}-alpine`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import integrationStyles from './alpine-integration.css?inline'",
|
||||
`import { ${prefix}IconIds } from '../icon-data.js'`,
|
||||
'',
|
||||
"const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
|
||||
'',
|
||||
`export const ${prefix}IconDirective = ${JSON.stringify(directive)}`,
|
||||
`export const ${prefix}IconMagic = ${JSON.stringify(magic)}`,
|
||||
'',
|
||||
'function iconHref(icon) {',
|
||||
` const id = ${prefix}IconIds[icon]`,
|
||||
" return id ? spriteUrl + '#' + id : ''",
|
||||
'}',
|
||||
'',
|
||||
'function installStyles() {',
|
||||
` if (document.getElementById(${JSON.stringify(styleId)})) return`,
|
||||
" const style = document.createElement('style')",
|
||||
` style.id = ${JSON.stringify(styleId)}`,
|
||||
' style.textContent = integrationStyles',
|
||||
' document.head.append(style)',
|
||||
'}',
|
||||
'',
|
||||
`export const ${prefix}AlpinePlugin = (Alpine) => {`,
|
||||
' installStyles()',
|
||||
` Alpine.magic(${prefix}IconMagic, () => iconHref)`,
|
||||
'',
|
||||
` Alpine.directive(${prefix}IconDirective, (element, { expression }, { effect, evaluateLater }) => {`,
|
||||
" if (element.namespaceURI !== 'http://www.w3.org/2000/svg' || element.localName !== 'svg') {",
|
||||
` throw new Error('x-${directive} must be used on an <svg> element.')`,
|
||||
' }',
|
||||
'',
|
||||
` element.classList.add(${JSON.stringify(className)})`,
|
||||
" let use = Array.from(element.children).find((child) => child.localName === 'use' && child.hasAttribute('data-svg-sprites-icon'))",
|
||||
' if (!use) {',
|
||||
" use = document.createElementNS('http://www.w3.org/2000/svg', 'use')",
|
||||
" use.setAttribute('data-svg-sprites-icon', '')",
|
||||
' element.append(use)',
|
||||
' }',
|
||||
'',
|
||||
' const evaluateIcon = evaluateLater(expression)',
|
||||
' effect(() => {',
|
||||
' evaluateIcon((icon) => {',
|
||||
' const href = iconHref(icon)',
|
||||
" if (href) use.setAttribute('href', href)",
|
||||
" else use.removeAttribute('href')",
|
||||
' })',
|
||||
' })',
|
||||
' })',
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function integrationTypes(config: ResolvedSpriteConfig): string {
|
||||
const pascalName = pascal(config.name)
|
||||
const prefix = camel(config.name)
|
||||
const typeName = `${pascalName}IconName`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
`export type ${pascalName}AlpineDirectiveUtilities = {`,
|
||||
' effect(callback: () => void): void',
|
||||
' evaluateLater(expression: string): (receiver: (value: unknown) => void) => void',
|
||||
'}',
|
||||
`export type ${pascalName}AlpineApi = {`,
|
||||
' magic(name: string, callback: () => unknown): unknown',
|
||||
` directive(name: string, callback: (element: Element, directive: { expression: string }, utilities: ${pascalName}AlpineDirectiveUtilities) => void): unknown`,
|
||||
'}',
|
||||
`export type ${pascalName}AlpinePluginType = (Alpine: ${pascalName}AlpineApi) => void`,
|
||||
`export declare const ${prefix}IconDirective: ${JSON.stringify(`${config.name}-icon`)}`,
|
||||
`export declare const ${prefix}IconMagic: ${JSON.stringify(`${prefix}IconHref`)}`,
|
||||
`export declare const ${prefix}AlpinePlugin: ${pascalName}AlpinePluginType`,
|
||||
`export type { ${typeName} } from '../icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
`.${config.name}-icon {`,
|
||||
' display: inline-block;',
|
||||
' width: 1em;',
|
||||
' height: 1em;',
|
||||
' vertical-align: middle;',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${prefix}AlpinePlugin, ${prefix}IconDirective, ${prefix}IconMagic } from './alpine/alpine-integration.js'`,
|
||||
`export { ${prefix}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexTypes(config: ResolvedSpriteConfig): string {
|
||||
const pascalName = pascal(config.name)
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${prefix}AlpinePlugin, ${prefix}IconDirective, ${prefix}IconMagic } from './alpine/alpine-integration.js'`,
|
||||
`export type { ${pascalName}AlpineApi, ${pascalName}AlpineDirectiveUtilities, ${pascalName}AlpinePluginType } from './alpine/alpine-integration.js'`,
|
||||
`export { ${prefix}IconNames } from './icon-data.js'`,
|
||||
`export type { ${pascalName}IconName } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: {
|
||||
framework: 'alpine',
|
||||
pluginName: `${prefix}AlpinePlugin`,
|
||||
directive: `x-${config.name}-icon`,
|
||||
magic: `$${prefix}IconHref`,
|
||||
},
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"const spriteUrl = new URL('./sprite.svg', import.meta.url).href",
|
||||
'',
|
||||
`export const spriteManifest = ${source}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestTypes(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = {',
|
||||
' name: string',
|
||||
' id: string',
|
||||
' viewBox: string | null',
|
||||
' colors: readonly SpriteManifestColor[]',
|
||||
'}',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'alpine'; pluginName: string; directive: string; magic: string }",
|
||||
" mode: 'alpine@webpack'",
|
||||
" target: 'webpack'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'alpine', 'alpine-integration.js'), content: integration(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'alpine', 'alpine-integration.d.ts'), content: integrationTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'alpine', 'alpine-integration.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
|
||||
]
|
||||
}
|
||||
36
src/modes/angular-application/adapter.ts
Normal file
36
src/modes/angular-application/adapter.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapterContext, OutputPlan } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
type AngularApplicationOutputPlan = Omit<OutputPlan, 'result'> & {
|
||||
readonly result: { readonly target: 'application' }
|
||||
}
|
||||
|
||||
type AngularApplicationAdapter = {
|
||||
readonly mode: 'angular@application'
|
||||
generate(context: ModeAdapterContext): Promise<AngularApplicationOutputPlan>
|
||||
}
|
||||
|
||||
export const angularApplicationAdapter: AngularApplicationAdapter = {
|
||||
mode: 'angular@application',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(
|
||||
context.prepared.folder,
|
||||
context.config.transform,
|
||||
{ rootViewBox: false },
|
||||
)
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.ts',
|
||||
},
|
||||
result: { target: 'application' },
|
||||
}
|
||||
},
|
||||
}
|
||||
242
src/modes/angular-application/output.ts
Normal file
242
src/modes/angular-application/output.ts
Normal file
@@ -0,0 +1,242 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'angular@application'
|
||||
const TARGET = 'application'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const NOTICE = 'АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function svg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const marker = enabled ? `${NOTICE}\n ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
|
||||
: `<!-- ${marker} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${prefix}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
|
||||
'',
|
||||
`export const ${prefix}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${componentName}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const typeName = `${componentName}Name`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'/// <reference path="../assets.d.ts" />',
|
||||
"import { ChangeDetectionStrategy, Component, input } from '@angular/core'",
|
||||
`import type { ${typeName} } from '../icon-data.js'`,
|
||||
`import { ${ids} } from '../icon-data.js'`,
|
||||
"import spriteUrl from '../sprite.svg'",
|
||||
'',
|
||||
'@Component({',
|
||||
` selector: '${config.name}-icon',`,
|
||||
' standalone: true,',
|
||||
" template: '<svg class=\"root\" focusable=\"false\"><use [attr.href]=\"href\"></use></svg>',",
|
||||
" styleUrl: './angular-component.css',",
|
||||
' changeDetection: ChangeDetectionStrategy.OnPush,',
|
||||
'})',
|
||||
`export class ${componentName} {`,
|
||||
` readonly icon = input.required<${typeName}>()`,
|
||||
'',
|
||||
' get href(): string {',
|
||||
` return spriteUrl + '#' + ${ids}[this.icon()]`,
|
||||
' }',
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const typeName = `${componentName}Name`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import type * as i0 from '@angular/core'",
|
||||
"import type { InputSignal } from '@angular/core'",
|
||||
`import type { ${typeName} } from '../icon-data.js'`,
|
||||
'',
|
||||
`export declare class ${componentName} {`,
|
||||
` readonly icon: InputSignal<${typeName}>`,
|
||||
' get href(): string',
|
||||
` static ɵfac: i0.ɵɵFactoryDeclaration<${componentName}, never>`,
|
||||
` static ɵcmp: i0.ɵɵComponentDeclaration<${componentName}, '${config.name}-icon', never, { icon: { alias: 'icon'; required: true; isSignal: true } }, {}, never, never, true, never>`,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${pascal(config.name)}Icon } from './angular/angular-component'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${pascal(config.name)}IconName } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${componentName} } from './angular/angular-component'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${componentName}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function assetDeclarations(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"declare module '*.svg' {",
|
||||
' const url: string',
|
||||
' export default url',
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
':host {',
|
||||
' display: inline-flex;',
|
||||
'}',
|
||||
'',
|
||||
'.root {',
|
||||
' width: 100%;',
|
||||
' height: 100%;',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: {
|
||||
framework: 'angular',
|
||||
componentName: `${pascal(config.name)}Icon`,
|
||||
selector: `${config.name}-icon`,
|
||||
},
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import spriteUrl from './sprite.svg'",
|
||||
'',
|
||||
`export const spriteManifest = ${source}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestDeclarations(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'angular'; componentName: string; selector: string }",
|
||||
" mode: 'angular@application'",
|
||||
" target: 'application'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.ts'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'assets.d.ts'), content: assetDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'angular', 'angular-component.ts'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'angular', 'angular-component.d.ts'), content: componentDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'angular', 'angular-component.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
|
||||
]
|
||||
}
|
||||
36
src/modes/angular-webpack/adapter.ts
Normal file
36
src/modes/angular-webpack/adapter.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapterContext, OutputPlan } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
type AngularWebpackOutputPlan = Omit<OutputPlan, 'result'> & {
|
||||
readonly result: { readonly target: 'webpack' }
|
||||
}
|
||||
|
||||
type AngularWebpackAdapter = {
|
||||
readonly mode: 'angular@webpack'
|
||||
generate(context: ModeAdapterContext): Promise<AngularWebpackOutputPlan>
|
||||
}
|
||||
|
||||
export const angularWebpackAdapter: AngularWebpackAdapter = {
|
||||
mode: 'angular@webpack',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(
|
||||
context.prepared.folder,
|
||||
context.config.transform,
|
||||
{ rootViewBox: false },
|
||||
)
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.ts',
|
||||
},
|
||||
result: { target: 'webpack' },
|
||||
}
|
||||
},
|
||||
}
|
||||
230
src/modes/angular-webpack/output.ts
Normal file
230
src/modes/angular-webpack/output.ts
Normal file
@@ -0,0 +1,230 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'angular@webpack'
|
||||
const TARGET = 'webpack'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const NOTICE = 'АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function svg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const marker = enabled ? `${NOTICE}\n ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
|
||||
: `<!-- ${marker} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${prefix}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
|
||||
'',
|
||||
`export const ${prefix}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${componentName}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const typeName = `${componentName}Name`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { ChangeDetectionStrategy, Component, input } from '@angular/core'",
|
||||
`import type { ${typeName} } from '../icon-data.js'`,
|
||||
`import { ${ids} } from '../icon-data.js'`,
|
||||
'',
|
||||
"const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
|
||||
'',
|
||||
'@Component({',
|
||||
` selector: '${config.name}-icon',`,
|
||||
' standalone: true,',
|
||||
" template: '<svg class=\"root\" focusable=\"false\"><use [attr.href]=\"href\"></use></svg>',",
|
||||
" styleUrl: './angular-component.css',",
|
||||
' changeDetection: ChangeDetectionStrategy.OnPush,',
|
||||
'})',
|
||||
`export class ${componentName} {`,
|
||||
` readonly icon = input.required<${typeName}>()`,
|
||||
'',
|
||||
' get href(): string {',
|
||||
` return spriteUrl + '#' + ${ids}[this.icon()]`,
|
||||
' }',
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const typeName = `${componentName}Name`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import type * as i0 from '@angular/core'",
|
||||
"import type { InputSignal } from '@angular/core'",
|
||||
`import type { ${typeName} } from '../icon-data.js'`,
|
||||
'',
|
||||
`export declare class ${componentName} {`,
|
||||
` readonly icon: InputSignal<${typeName}>`,
|
||||
' get href(): string',
|
||||
` static ɵfac: i0.ɵɵFactoryDeclaration<${componentName}, never>`,
|
||||
` static ɵcmp: i0.ɵɵComponentDeclaration<${componentName}, '${config.name}-icon', never, { icon: { alias: 'icon'; required: true; isSignal: true } }, {}, never, never, true, never>`,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${pascal(config.name)}Icon } from './angular/angular-component'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${pascal(config.name)}IconName } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${componentName} } from './angular/angular-component'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${componentName}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
':host {',
|
||||
' display: inline-flex;',
|
||||
'}',
|
||||
'',
|
||||
'.root {',
|
||||
' width: 100%;',
|
||||
' height: 100%;',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: {
|
||||
framework: 'angular',
|
||||
componentName: `${pascal(config.name)}Icon`,
|
||||
selector: `${config.name}-icon`,
|
||||
},
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"const spriteUrl = new URL('./sprite.svg', import.meta.url).href",
|
||||
'',
|
||||
`export const spriteManifest = ${source}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestDeclarations(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'angular'; componentName: string; selector: string }",
|
||||
" mode: 'angular@webpack'",
|
||||
" target: 'webpack'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.ts'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'angular', 'angular-component.ts'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'angular', 'angular-component.d.ts'), content: componentDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'angular', 'angular-component.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
|
||||
]
|
||||
}
|
||||
36
src/modes/astro-vite/adapter.ts
Normal file
36
src/modes/astro-vite/adapter.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapterContext, OutputPlan } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
type AstroViteOutputPlan = Omit<OutputPlan, 'result'> & {
|
||||
readonly result: { readonly target: 'vite' }
|
||||
}
|
||||
|
||||
type AstroViteAdapter = {
|
||||
readonly mode: 'astro@vite'
|
||||
generate(context: ModeAdapterContext): Promise<AstroViteOutputPlan>
|
||||
}
|
||||
|
||||
export const astroViteAdapter: AstroViteAdapter = {
|
||||
mode: 'astro@vite',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(
|
||||
context.prepared.folder,
|
||||
context.config.transform,
|
||||
{ rootViewBox: false },
|
||||
)
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'vite' },
|
||||
}
|
||||
},
|
||||
}
|
||||
238
src/modes/astro-vite/output.ts
Normal file
238
src/modes/astro-vite/output.ts
Normal file
@@ -0,0 +1,238 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'astro@vite'
|
||||
const TARGET = 'vite'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const NOTICE = 'АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function astroHeader(enabled: boolean): string {
|
||||
return enabled
|
||||
? `<!--\n ${NOTICE}\n ${GENERATED_MARKER}.\n-->`
|
||||
: `<!-- ${GENERATED_MARKER}. Do not edit. -->`
|
||||
}
|
||||
|
||||
function svg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const marker = enabled ? `${NOTICE}\n ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
|
||||
: `<!-- ${marker} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${prefix}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
|
||||
'',
|
||||
`export const ${prefix}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${componentName}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
const rootClass = `${config.name}-icon-root`
|
||||
const wrapClass = `${config.name}-icon-wrap`
|
||||
return [
|
||||
'---',
|
||||
`import './astro-component.css'`,
|
||||
`import { ${ids} } from '../icon-data.js'`,
|
||||
"import spriteUrl from '../sprite.svg?no-inline'",
|
||||
'',
|
||||
'const { icon, wrapped = false, class: className, ...attributes } = Astro.props',
|
||||
`const href = spriteUrl + '#' + ${ids}[icon]`,
|
||||
'---',
|
||||
astroHeader(config.generatedNotice),
|
||||
'{',
|
||||
' wrapped ? (',
|
||||
` <span {...attributes} class:list={['${wrapClass}', className]}>`,
|
||||
' <svg focusable="false"><use href={href}></use></svg>',
|
||||
' </span>',
|
||||
' ) : (',
|
||||
` <svg {...attributes} class:list={['${rootClass}', className]} focusable="false">`,
|
||||
' <use href={href}></use>',
|
||||
' </svg>',
|
||||
' )',
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const typeName = `${componentName}Name`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import type { HTMLAttributes } from 'astro/types'",
|
||||
`import type { ${typeName} } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${componentName}Style = HTMLAttributes<'svg'>['style']`,
|
||||
`type ${componentName}BaseProps = { icon: ${typeName} }`,
|
||||
`type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & HTMLAttributes<'svg'>`,
|
||||
`type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & HTMLAttributes<'span'>`,
|
||||
`export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
|
||||
`declare const ${componentName}: (props: ${componentName}Props) => any`,
|
||||
`export default ${componentName}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { default as ${pascal(config.name)}Icon } from './astro/astro-component.astro'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { default as ${componentName} } from './astro/astro-component.astro'`,
|
||||
`export type { ${componentName}Props, ${componentName}Style } from './astro/astro-component.astro'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${componentName}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
`.${config.name}-icon-root {`,
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
`.${config.name}-icon-wrap {`,
|
||||
' display: inline-flex;',
|
||||
'}',
|
||||
'',
|
||||
`.${config.name}-icon-wrap svg {`,
|
||||
' width: 100%;',
|
||||
' height: 100%;',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: {
|
||||
framework: 'astro',
|
||||
componentName: `${pascal(config.name)}Icon`,
|
||||
},
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import spriteUrl from './sprite.svg?no-inline'",
|
||||
'',
|
||||
`export const spriteManifest = ${source}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestDeclarations(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'astro'; componentName: string }",
|
||||
" mode: 'astro@vite'",
|
||||
" target: 'vite'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'astro', 'astro-component.astro'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'astro', 'astro-component.astro.d.ts'), content: componentDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'astro', 'astro-component.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
|
||||
]
|
||||
}
|
||||
25
src/modes/lit-vite/adapter.ts
Normal file
25
src/modes/lit-vite/adapter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const litViteAdapter: ModeAdapter<'lit@vite'> = {
|
||||
mode: 'lit@vite',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
|
||||
rootViewBox: false,
|
||||
})
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'vite' },
|
||||
}
|
||||
},
|
||||
}
|
||||
258
src/modes/lit-vite/output.ts
Normal file
258
src/modes/lit-vite/output.ts
Normal file
@@ -0,0 +1,258 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'lit@vite'
|
||||
const TARGET = 'vite'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function markedSvg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const marker = enabled ? `${NOTICE} ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
|
||||
: `<!-- ${marker} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Icon names for the "${config.name}" SVG sprite.`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
const names = artifact.icons.map((icon) => icon.name)
|
||||
const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
|
||||
'',
|
||||
`export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${component}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const className = `${pascal(config.name)}Icon`
|
||||
const prefix = camel(config.name)
|
||||
const tagName = `${config.name}-icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { LitElement, html, nothing, unsafeCSS } from 'lit'",
|
||||
"import componentStyles from './lit-component.css?inline'",
|
||||
`import { ${prefix}IconIds } from '../icon-data.js'`,
|
||||
"import spriteUrl from '../sprite.svg?no-inline'",
|
||||
'',
|
||||
`export const ${prefix}IconTagName = ${JSON.stringify(tagName)}`,
|
||||
'',
|
||||
`export class ${className} extends LitElement {`,
|
||||
' static properties = {',
|
||||
" icon: { type: String },",
|
||||
' }',
|
||||
'',
|
||||
' static styles = unsafeCSS(componentStyles)',
|
||||
'',
|
||||
" icon = ''",
|
||||
'',
|
||||
' render() {',
|
||||
` const id = ${prefix}IconIds[this.icon]`,
|
||||
' if (!id) return nothing',
|
||||
'',
|
||||
" const href = spriteUrl + '#' + id",
|
||||
' return html`<svg class="root" part="svg" aria-hidden="true"><use href=${href}></use></svg>`',
|
||||
' }',
|
||||
'}',
|
||||
'',
|
||||
`export function define${className}() {`,
|
||||
` if (!customElements.get(${prefix}IconTagName)) {`,
|
||||
` customElements.define(${prefix}IconTagName, ${className})`,
|
||||
' }',
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentTypes(config: ResolvedSpriteConfig): string {
|
||||
const className = `${pascal(config.name)}Icon`
|
||||
const prefix = camel(config.name)
|
||||
const tagName = `${config.name}-icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { LitElement } from 'lit'",
|
||||
`import type { ${className}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export declare const ${prefix}IconTagName: ${JSON.stringify(tagName)}`,
|
||||
`export declare class ${className} extends LitElement {`,
|
||||
` icon: ${className}Name | ''`,
|
||||
'}',
|
||||
`export declare function define${className}(): void`,
|
||||
'',
|
||||
'declare global {',
|
||||
' interface HTMLElementTagNameMap {',
|
||||
` ${JSON.stringify(tagName)}: ${className}`,
|
||||
' }',
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
':host {',
|
||||
' display: inline-flex;',
|
||||
' width: 1em;',
|
||||
' height: 1em;',
|
||||
' vertical-align: middle;',
|
||||
'}',
|
||||
'',
|
||||
'.root {',
|
||||
' width: 100%;',
|
||||
' height: 100%;',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
const className = `${pascal(config.name)}Icon`
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${className}, define${className}, ${prefix}IconTagName } from './lit/lit-component.js'`,
|
||||
`export { ${prefix}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexTypes(config: ResolvedSpriteConfig): string {
|
||||
const className = `${pascal(config.name)}Icon`
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${className}, define${className}, ${prefix}IconTagName } from './lit/lit-component.js'`,
|
||||
`export { ${prefix}IconNames } from './icon-data.js'`,
|
||||
`export type { ${className}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const className = `${pascal(config.name)}Icon`
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: {
|
||||
framework: 'lit',
|
||||
componentName: className,
|
||||
tagName: `${config.name}-icon`,
|
||||
defineFunction: `define${className}`,
|
||||
},
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import spriteUrl from './sprite.svg?no-inline'",
|
||||
'',
|
||||
`export const spriteManifest = ${source}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestTypes(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = {',
|
||||
' name: string',
|
||||
' id: string',
|
||||
' viewBox: string | null',
|
||||
' colors: readonly SpriteManifestColor[]',
|
||||
'}',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'lit'; componentName: string; tagName: string; defineFunction: string }",
|
||||
" mode: 'lit@vite'",
|
||||
" target: 'vite'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'lit', 'lit-component.js'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'lit', 'lit-component.d.ts'), content: componentTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'lit', 'lit-component.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
|
||||
]
|
||||
}
|
||||
25
src/modes/lit-webpack/adapter.ts
Normal file
25
src/modes/lit-webpack/adapter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const litWebpackAdapter: ModeAdapter<'lit@webpack'> = {
|
||||
mode: 'lit@webpack',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
|
||||
rootViewBox: false,
|
||||
})
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'webpack' },
|
||||
}
|
||||
},
|
||||
}
|
||||
259
src/modes/lit-webpack/output.ts
Normal file
259
src/modes/lit-webpack/output.ts
Normal file
@@ -0,0 +1,259 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'lit@webpack'
|
||||
const TARGET = 'webpack'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function markedSvg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const marker = enabled ? `${NOTICE} ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
|
||||
: `<!-- ${marker} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Icon names for the "${config.name}" SVG sprite.`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
const names = artifact.icons.map((icon) => icon.name)
|
||||
const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
|
||||
'',
|
||||
`export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${component}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const className = `${pascal(config.name)}Icon`
|
||||
const prefix = camel(config.name)
|
||||
const tagName = `${config.name}-icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { LitElement, html, nothing, unsafeCSS } from 'lit'",
|
||||
"import componentStyles from './lit-component.css?inline'",
|
||||
`import { ${prefix}IconIds } from '../icon-data.js'`,
|
||||
'',
|
||||
"const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
|
||||
'',
|
||||
`export const ${prefix}IconTagName = ${JSON.stringify(tagName)}`,
|
||||
'',
|
||||
`export class ${className} extends LitElement {`,
|
||||
' static properties = {',
|
||||
" icon: { type: String },",
|
||||
' }',
|
||||
'',
|
||||
' static styles = unsafeCSS(componentStyles)',
|
||||
'',
|
||||
" icon = ''",
|
||||
'',
|
||||
' render() {',
|
||||
` const id = ${prefix}IconIds[this.icon]`,
|
||||
' if (!id) return nothing',
|
||||
'',
|
||||
" const href = spriteUrl + '#' + id",
|
||||
' return html`<svg class="root" part="svg" aria-hidden="true"><use href=${href}></use></svg>`',
|
||||
' }',
|
||||
'}',
|
||||
'',
|
||||
`export function define${className}() {`,
|
||||
` if (!customElements.get(${prefix}IconTagName)) {`,
|
||||
` customElements.define(${prefix}IconTagName, ${className})`,
|
||||
' }',
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentTypes(config: ResolvedSpriteConfig): string {
|
||||
const className = `${pascal(config.name)}Icon`
|
||||
const prefix = camel(config.name)
|
||||
const tagName = `${config.name}-icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { LitElement } from 'lit'",
|
||||
`import type { ${className}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export declare const ${prefix}IconTagName: ${JSON.stringify(tagName)}`,
|
||||
`export declare class ${className} extends LitElement {`,
|
||||
` icon: ${className}Name | ''`,
|
||||
'}',
|
||||
`export declare function define${className}(): void`,
|
||||
'',
|
||||
'declare global {',
|
||||
' interface HTMLElementTagNameMap {',
|
||||
` ${JSON.stringify(tagName)}: ${className}`,
|
||||
' }',
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
':host {',
|
||||
' display: inline-flex;',
|
||||
' width: 1em;',
|
||||
' height: 1em;',
|
||||
' vertical-align: middle;',
|
||||
'}',
|
||||
'',
|
||||
'.root {',
|
||||
' width: 100%;',
|
||||
' height: 100%;',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
const className = `${pascal(config.name)}Icon`
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${className}, define${className}, ${prefix}IconTagName } from './lit/lit-component.js'`,
|
||||
`export { ${prefix}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexTypes(config: ResolvedSpriteConfig): string {
|
||||
const className = `${pascal(config.name)}Icon`
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${className}, define${className}, ${prefix}IconTagName } from './lit/lit-component.js'`,
|
||||
`export { ${prefix}IconNames } from './icon-data.js'`,
|
||||
`export type { ${className}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const className = `${pascal(config.name)}Icon`
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: {
|
||||
framework: 'lit',
|
||||
componentName: className,
|
||||
tagName: `${config.name}-icon`,
|
||||
defineFunction: `define${className}`,
|
||||
},
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"const spriteUrl = new URL('./sprite.svg', import.meta.url).href",
|
||||
'',
|
||||
`export const spriteManifest = ${source}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestTypes(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = {',
|
||||
' name: string',
|
||||
' id: string',
|
||||
' viewBox: string | null',
|
||||
' colors: readonly SpriteManifestColor[]',
|
||||
'}',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'lit'; componentName: string; tagName: string; defineFunction: string }",
|
||||
" mode: 'lit@webpack'",
|
||||
" target: 'webpack'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'lit', 'lit-component.js'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'lit', 'lit-component.d.ts'), content: componentTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'lit', 'lit-component.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
|
||||
]
|
||||
}
|
||||
25
src/modes/nuxt-vite/adapter.ts
Normal file
25
src/modes/nuxt-vite/adapter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const nuxtViteAdapter: ModeAdapter<'nuxt@vite'> = {
|
||||
mode: 'nuxt@vite',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
|
||||
rootViewBox: false,
|
||||
})
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'vite' },
|
||||
}
|
||||
},
|
||||
}
|
||||
241
src/modes/nuxt-vite/output.ts
Normal file
241
src/modes/nuxt-vite/output.ts
Normal file
@@ -0,0 +1,241 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'nuxt@vite'
|
||||
const TARGET = 'vite'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function markedSvg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const marker = enabled ? `${NOTICE}\n ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
|
||||
: `<!-- ${marker} -->\n${content}`
|
||||
}
|
||||
|
||||
function docs(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `SVG sprite icon names for "${config.name}".`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
const names = artifact.icons.map((icon) => icon.name)
|
||||
const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...docs(config),
|
||||
`export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
|
||||
'',
|
||||
`export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { defineComponent, h } from 'vue'",
|
||||
"import styles from './vue-component.module.css'",
|
||||
`import { ${ids} } from '../icon-data.js'`,
|
||||
"import spriteUrl from '../sprite.svg?no-inline'",
|
||||
'',
|
||||
`export const ${componentName} = defineComponent({`,
|
||||
` name: '${componentName}',`,
|
||||
' inheritAttrs: false,',
|
||||
' props: {',
|
||||
" icon: { type: String, required: true },",
|
||||
" wrapped: { type: Boolean, default: false },",
|
||||
' },',
|
||||
' setup(props, { attrs }) {',
|
||||
' return () => {',
|
||||
` const href = spriteUrl + '#' + ${ids}[props.icon]`,
|
||||
' if (props.wrapped) {',
|
||||
" return h('span', { ...attrs, class: [styles.wrap, attrs.class] }, [",
|
||||
" h('svg', null, [h('use', { href })]),",
|
||||
' ])',
|
||||
' }',
|
||||
" return h('svg', { ...attrs, class: [styles.root, attrs.class] }, [",
|
||||
" h('use', { href }),",
|
||||
' ])',
|
||||
' }',
|
||||
' },',
|
||||
'})',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...docs(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${componentName}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import type { CSSProperties, DefineComponent, HTMLAttributes, SVGAttributes } from 'vue'",
|
||||
`import type { ${componentName}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${componentName}Style = CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
|
||||
`type ${componentName}BaseProps = { icon: ${componentName}Name }`,
|
||||
`type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & Omit<SVGAttributes, 'style'> & { style?: ${componentName}Style }`,
|
||||
`type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & Omit<HTMLAttributes, 'style'> & { style?: ${componentName}Style }`,
|
||||
`export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
|
||||
`export declare const ${componentName}: DefineComponent<${componentName}Props>`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${pascal(config.name)}Icon } from './vue/vue-component.js'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${componentName} } from './vue/vue-component.js'`,
|
||||
`export type { ${componentName}Props, ${componentName}Style } from './vue/vue-component.js'`,
|
||||
`export { ${names} } from './icon-data.js'`,
|
||||
`export type { ${componentName}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
'.root {',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
'.wrap {',
|
||||
' display: inline-flex;',
|
||||
'}',
|
||||
'',
|
||||
'.wrap svg {',
|
||||
' width: 100%;',
|
||||
' height: 100%;',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: { framework: 'vue', componentName: `${pascal(config.name)}Icon` },
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import spriteUrl from './sprite.svg?no-inline'",
|
||||
'',
|
||||
`export const spriteManifest = ${source}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestDeclarations(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = {',
|
||||
' name: string',
|
||||
' id: string',
|
||||
' viewBox: string | null',
|
||||
' colors: readonly SpriteManifestColor[]',
|
||||
'}',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'vue'; componentName: string }",
|
||||
" mode: 'nuxt@vite'",
|
||||
" target: 'vite'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.js'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.d.ts'), content: componentDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.module.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
|
||||
]
|
||||
}
|
||||
25
src/modes/nuxt-webpack/adapter.ts
Normal file
25
src/modes/nuxt-webpack/adapter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const nuxtWebpackAdapter: ModeAdapter<'nuxt@webpack'> = {
|
||||
mode: 'nuxt@webpack',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
|
||||
rootViewBox: false,
|
||||
})
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'webpack' },
|
||||
}
|
||||
},
|
||||
}
|
||||
241
src/modes/nuxt-webpack/output.ts
Normal file
241
src/modes/nuxt-webpack/output.ts
Normal file
@@ -0,0 +1,241 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'nuxt@webpack'
|
||||
const TARGET = 'webpack'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function markedSvg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const marker = enabled ? `${NOTICE}\n ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
|
||||
: `<!-- ${marker} -->\n${content}`
|
||||
}
|
||||
|
||||
function docs(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `SVG sprite icon names for "${config.name}".`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
const names = artifact.icons.map((icon) => icon.name)
|
||||
const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...docs(config),
|
||||
`export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
|
||||
'',
|
||||
`export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { defineComponent, h } from 'vue'",
|
||||
"import styles from './vue-component.module.css'",
|
||||
`import { ${ids} } from '../icon-data.js'`,
|
||||
"import spriteUrl from '../sprite.svg'",
|
||||
'',
|
||||
`export const ${componentName} = defineComponent({`,
|
||||
` name: '${componentName}',`,
|
||||
' inheritAttrs: false,',
|
||||
' props: {',
|
||||
" icon: { type: String, required: true },",
|
||||
" wrapped: { type: Boolean, default: false },",
|
||||
' },',
|
||||
' setup(props, { attrs }) {',
|
||||
' return () => {',
|
||||
` const href = spriteUrl + '#' + ${ids}[props.icon]`,
|
||||
' if (props.wrapped) {',
|
||||
" return h('span', { ...attrs, class: [styles.wrap, attrs.class] }, [",
|
||||
" h('svg', null, [h('use', { href })]),",
|
||||
' ])',
|
||||
' }',
|
||||
" return h('svg', { ...attrs, class: [styles.root, attrs.class] }, [",
|
||||
" h('use', { href }),",
|
||||
' ])',
|
||||
' }',
|
||||
' },',
|
||||
'})',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...docs(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${componentName}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import type { CSSProperties, DefineComponent, HTMLAttributes, SVGAttributes } from 'vue'",
|
||||
`import type { ${componentName}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${componentName}Style = CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
|
||||
`type ${componentName}BaseProps = { icon: ${componentName}Name }`,
|
||||
`type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & Omit<SVGAttributes, 'style'> & { style?: ${componentName}Style }`,
|
||||
`type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & Omit<HTMLAttributes, 'style'> & { style?: ${componentName}Style }`,
|
||||
`export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
|
||||
`export declare const ${componentName}: DefineComponent<${componentName}Props>`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${pascal(config.name)}Icon } from './vue/vue-component.js'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${componentName} } from './vue/vue-component.js'`,
|
||||
`export type { ${componentName}Props, ${componentName}Style } from './vue/vue-component.js'`,
|
||||
`export { ${names} } from './icon-data.js'`,
|
||||
`export type { ${componentName}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
'.root {',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
'.wrap {',
|
||||
' display: inline-flex;',
|
||||
'}',
|
||||
'',
|
||||
'.wrap svg {',
|
||||
' width: 100%;',
|
||||
' height: 100%;',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: { framework: 'vue', componentName: `${pascal(config.name)}Icon` },
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import spriteUrl from './sprite.svg'",
|
||||
'',
|
||||
`export const spriteManifest = ${source}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestDeclarations(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = {',
|
||||
' name: string',
|
||||
' id: string',
|
||||
' viewBox: string | null',
|
||||
' colors: readonly SpriteManifestColor[]',
|
||||
'}',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'vue'; componentName: string }",
|
||||
" mode: 'nuxt@webpack'",
|
||||
" target: 'webpack'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.js'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.d.ts'), content: componentDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.module.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
|
||||
]
|
||||
}
|
||||
25
src/modes/preact-vite/adapter.ts
Normal file
25
src/modes/preact-vite/adapter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const preactViteAdapter: ModeAdapter<'preact@vite'> = {
|
||||
mode: 'preact@vite',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
|
||||
rootViewBox: false,
|
||||
})
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'vite' },
|
||||
}
|
||||
},
|
||||
}
|
||||
188
src/modes/preact-vite/output.ts
Normal file
188
src/modes/preact-vite/output.ts
Normal file
@@ -0,0 +1,188 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function svg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const notice = enabled
|
||||
? `АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. ${GENERATED_MARKER}.`
|
||||
: `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${notice} -->\n`)
|
||||
: `<!-- ${notice} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const name = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${name}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
|
||||
'',
|
||||
`export const ${name}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${component}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { h } from 'preact'",
|
||||
"import styles from './preact-component.module.css'",
|
||||
`import { ${ids} } from '../icon-data.js'`,
|
||||
"import spriteUrl from '../sprite.svg?no-inline'",
|
||||
'',
|
||||
`/** Иконка из SVG-спрайта «${config.name}». */`,
|
||||
`export const ${componentName} = (props) => {`,
|
||||
' const { icon, wrapped, class: classValue, className, ...rest } = props',
|
||||
` const href = spriteUrl + '#' + ${ids}[icon]`,
|
||||
' const classes = [wrapped ? styles.wrap : styles.root, classValue, className].filter(Boolean).join(\' \')',
|
||||
'',
|
||||
' if (wrapped) {',
|
||||
" return h('span', { ...rest, class: classes }, h('svg', null, h('use', { href })))",
|
||||
' }',
|
||||
" return h('svg', { ...rest, class: classes }, h('use', { href }))",
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentTypes(config: ResolvedSpriteConfig): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import type { FunctionalComponent, JSX } from 'preact'",
|
||||
`import type { ${component}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${component}Style = JSX.CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
|
||||
`type ${component}BaseProps = { icon: ${component}Name }`,
|
||||
`type ${component}SvgProps = ${component}BaseProps & { wrapped?: false } & Omit<JSX.SVGAttributes<SVGSVGElement>, 'style'> & { style?: ${component}Style }`,
|
||||
`type ${component}WrappedProps = ${component}BaseProps & { wrapped: true } & Omit<JSX.HTMLAttributes<HTMLSpanElement>, 'style'> & { style?: ${component}Style }`,
|
||||
`export type ${component}Props = ${component}SvgProps | ${component}WrappedProps`,
|
||||
`export declare const ${component}: FunctionalComponent<${component}Props>`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${pascal(config.name)}Icon } from './preact/preact-component.js'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexTypes(config: ResolvedSpriteConfig): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${component} } from './preact/preact-component.js'`,
|
||||
`export type { ${component}Props, ${component}Style } from './preact/preact-component.js'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${component}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [header(config.generatedNotice), '', '.root {', ...transition, '}', '', '.wrap {', ' display: inline-flex;', '}', '', '.wrap svg {', ' width: 100%;', ' height: 100%;', ...transition, '}', ''].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: { framework: 'preact', componentName: `${pascal(config.name)}Icon` },
|
||||
mode: 'preact@vite',
|
||||
target: 'vite',
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [header(config.generatedNotice), "import spriteUrl from './sprite.svg?no-inline'", '', `export const spriteManifest = ${source}`, '', 'export default spriteManifest', ''].join('\n')
|
||||
}
|
||||
|
||||
function manifestTypes(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
|
||||
'export type SpriteManifest = {',
|
||||
" schemaVersion: 1; generator: '@gromlab/svg-sprites'; name: string; description?: string",
|
||||
" usage: { framework: 'preact'; componentName: string }",
|
||||
" mode: 'preact@vite'; target: 'vite'; format: 'stack' | 'symbol'",
|
||||
' iconCount: number; spriteUrl: string; icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'preact', 'preact-component.js'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'preact', 'preact-component.d.ts'), content: componentTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'preact', 'preact-component.module.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
|
||||
]
|
||||
}
|
||||
25
src/modes/preact-webpack/adapter.ts
Normal file
25
src/modes/preact-webpack/adapter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const preactWebpackAdapter: ModeAdapter<'preact@webpack'> = {
|
||||
mode: 'preact@webpack',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
|
||||
rootViewBox: false,
|
||||
})
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'webpack' },
|
||||
}
|
||||
},
|
||||
}
|
||||
189
src/modes/preact-webpack/output.ts
Normal file
189
src/modes/preact-webpack/output.ts
Normal file
@@ -0,0 +1,189 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function svg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const notice = enabled
|
||||
? `АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. ${GENERATED_MARKER}.`
|
||||
: `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${notice} -->\n`)
|
||||
: `<!-- ${notice} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const name = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${name}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
|
||||
'',
|
||||
`export const ${name}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${component}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { h } from 'preact'",
|
||||
"import styles from './preact-component.module.css'",
|
||||
`import { ${ids} } from '../icon-data.js'`,
|
||||
'',
|
||||
"const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
|
||||
'',
|
||||
`/** Иконка из SVG-спрайта «${config.name}». */`,
|
||||
`export const ${componentName} = (props) => {`,
|
||||
' const { icon, wrapped, class: classValue, className, ...rest } = props',
|
||||
` const href = spriteUrl + '#' + ${ids}[icon]`,
|
||||
' const classes = [wrapped ? styles.wrap : styles.root, classValue, className].filter(Boolean).join(\' \')',
|
||||
'',
|
||||
' if (wrapped) {',
|
||||
" return h('span', { ...rest, class: classes }, h('svg', null, h('use', { href })))",
|
||||
' }',
|
||||
" return h('svg', { ...rest, class: classes }, h('use', { href }))",
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentTypes(config: ResolvedSpriteConfig): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import type { FunctionalComponent, JSX } from 'preact'",
|
||||
`import type { ${component}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${component}Style = JSX.CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
|
||||
`type ${component}BaseProps = { icon: ${component}Name }`,
|
||||
`type ${component}SvgProps = ${component}BaseProps & { wrapped?: false } & Omit<JSX.SVGAttributes<SVGSVGElement>, 'style'> & { style?: ${component}Style }`,
|
||||
`type ${component}WrappedProps = ${component}BaseProps & { wrapped: true } & Omit<JSX.HTMLAttributes<HTMLSpanElement>, 'style'> & { style?: ${component}Style }`,
|
||||
`export type ${component}Props = ${component}SvgProps | ${component}WrappedProps`,
|
||||
`export declare const ${component}: FunctionalComponent<${component}Props>`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${pascal(config.name)}Icon } from './preact/preact-component.js'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexTypes(config: ResolvedSpriteConfig): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${component} } from './preact/preact-component.js'`,
|
||||
`export type { ${component}Props, ${component}Style } from './preact/preact-component.js'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${component}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [header(config.generatedNotice), '', '.root {', ...transition, '}', '', '.wrap {', ' display: inline-flex;', '}', '', '.wrap svg {', ' width: 100%;', ' height: 100%;', ...transition, '}', ''].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: { framework: 'preact', componentName: `${pascal(config.name)}Icon` },
|
||||
mode: 'preact@webpack',
|
||||
target: 'webpack',
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [header(config.generatedNotice), "const spriteUrl = new URL('./sprite.svg', import.meta.url).href", '', `export const spriteManifest = ${source}`, '', 'export default spriteManifest', ''].join('\n')
|
||||
}
|
||||
|
||||
function manifestTypes(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
|
||||
'export type SpriteManifest = {',
|
||||
" schemaVersion: 1; generator: '@gromlab/svg-sprites'; name: string; description?: string",
|
||||
" usage: { framework: 'preact'; componentName: string }",
|
||||
" mode: 'preact@webpack'; target: 'webpack'; format: 'stack' | 'symbol'",
|
||||
' iconCount: number; spriteUrl: string; icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'preact', 'preact-component.js'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'preact', 'preact-component.d.ts'), content: componentTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'preact', 'preact-component.module.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
|
||||
]
|
||||
}
|
||||
25
src/modes/qwik-vite/adapter.ts
Normal file
25
src/modes/qwik-vite/adapter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const qwikViteAdapter: ModeAdapter<'qwik@vite'> = {
|
||||
mode: 'qwik@vite',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
|
||||
rootViewBox: false,
|
||||
})
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'vite' },
|
||||
}
|
||||
},
|
||||
}
|
||||
192
src/modes/qwik-vite/output.ts
Normal file
192
src/modes/qwik-vite/output.ts
Normal file
@@ -0,0 +1,192 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function svg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const notice = enabled
|
||||
? `АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. ${GENERATED_MARKER}.`
|
||||
: `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${notice} -->\n`)
|
||||
: `<!-- ${notice} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const name = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${name}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
|
||||
'',
|
||||
`export const ${name}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${component}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { component$ } from '@builder.io/qwik'",
|
||||
"import styles from './qwik-component.module.css'",
|
||||
`import { ${ids} } from '../icon-data.js'`,
|
||||
"import spriteUrl from '../sprite.svg?no-inline'",
|
||||
'',
|
||||
`/** SSR-safe иконка из SVG-спрайта «${config.name}». */`,
|
||||
`export const ${componentName} = component$((props) => {`,
|
||||
' const { icon, wrapped, class: classValue, ...rest } = props',
|
||||
` const href = spriteUrl + '#' + ${ids}[icon]`,
|
||||
' const classes = [wrapped ? styles.wrap : styles.root, classValue]',
|
||||
'',
|
||||
' if (wrapped) {',
|
||||
' return (',
|
||||
' <span {...rest} class={classes}>',
|
||||
' <svg><use href={href} /></svg>',
|
||||
' </span>',
|
||||
' )',
|
||||
' }',
|
||||
' return <svg {...rest} class={classes}><use href={href} /></svg>',
|
||||
'})',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentTypes(config: ResolvedSpriteConfig): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import type { Component, CSSProperties, QwikIntrinsicElements } from '@builder.io/qwik'",
|
||||
`import type { ${component}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${component}Style = CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
|
||||
`type ${component}BaseProps = { icon: ${component}Name }`,
|
||||
`type ${component}SvgProps = ${component}BaseProps & { wrapped?: false } & Omit<QwikIntrinsicElements['svg'], 'style'> & { style?: ${component}Style }`,
|
||||
`type ${component}WrappedProps = ${component}BaseProps & { wrapped: true } & Omit<QwikIntrinsicElements['span'], 'style'> & { style?: ${component}Style }`,
|
||||
`export type ${component}Props = ${component}SvgProps | ${component}WrappedProps`,
|
||||
`export declare const ${component}: Component<${component}Props>`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${pascal(config.name)}Icon } from './qwik/qwik-component.jsx'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexTypes(config: ResolvedSpriteConfig): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${component} } from './qwik/qwik-component.jsx'`,
|
||||
`export type { ${component}Props, ${component}Style } from './qwik/qwik-component.jsx'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${component}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [header(config.generatedNotice), '', '.root {', ...transition, '}', '', '.wrap {', ' display: inline-flex;', '}', '', '.wrap svg {', ' width: 100%;', ' height: 100%;', ...transition, '}', ''].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: { framework: 'qwik', componentName: `${pascal(config.name)}Icon`, ssr: true },
|
||||
mode: 'qwik@vite',
|
||||
target: 'vite',
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [header(config.generatedNotice), "import spriteUrl from './sprite.svg?no-inline'", '', `export const spriteManifest = ${source}`, '', 'export default spriteManifest', ''].join('\n')
|
||||
}
|
||||
|
||||
function manifestTypes(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
|
||||
'export type SpriteManifest = {',
|
||||
" schemaVersion: 1; generator: '@gromlab/svg-sprites'; name: string; description?: string",
|
||||
" usage: { framework: 'qwik'; componentName: string; ssr: true }",
|
||||
" mode: 'qwik@vite'; target: 'vite'; format: 'stack' | 'symbol'",
|
||||
' iconCount: number; spriteUrl: string; icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'qwik', 'qwik-component.jsx'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'qwik', 'qwik-component.d.ts'), content: componentTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'qwik', 'qwik-component.module.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
|
||||
]
|
||||
}
|
||||
25
src/modes/solid-start-vite/adapter.ts
Normal file
25
src/modes/solid-start-vite/adapter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const solidStartViteAdapter: ModeAdapter<'solid-start@vite'> = {
|
||||
mode: 'solid-start@vite',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
|
||||
rootViewBox: false,
|
||||
})
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'vite' },
|
||||
}
|
||||
},
|
||||
}
|
||||
197
src/modes/solid-start-vite/output.ts
Normal file
197
src/modes/solid-start-vite/output.ts
Normal file
@@ -0,0 +1,197 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function svg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const notice = enabled
|
||||
? `АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. ${GENERATED_MARKER}.`
|
||||
: `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${notice} -->\n`)
|
||||
: `<!-- ${notice} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const name = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${name}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
|
||||
'',
|
||||
`export const ${name}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${component}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { Show, splitProps } from 'solid-js'",
|
||||
"import styles from './solid-component.module.css'",
|
||||
`import { ${ids} } from '../icon-data.js'`,
|
||||
"import spriteUrl from '../sprite.svg?no-inline'",
|
||||
'',
|
||||
`/** SSR-safe иконка из SVG-спрайта «${config.name}». */`,
|
||||
`export const ${componentName} = (props) => {`,
|
||||
" const [local, rest] = splitProps(props, ['icon', 'wrapped', 'class'])",
|
||||
` const href = () => spriteUrl + '#' + ${ids}[local.icon]`,
|
||||
'',
|
||||
' return (',
|
||||
' <Show',
|
||||
' when={local.wrapped}',
|
||||
' fallback={',
|
||||
' <svg {...rest} class={[styles.root, local.class].filter(Boolean).join(\' \')}>',
|
||||
' <use href={href()} />',
|
||||
' </svg>',
|
||||
' }',
|
||||
' >',
|
||||
' <span {...rest} class={[styles.wrap, local.class].filter(Boolean).join(\' \')}>',
|
||||
' <svg><use href={href()} /></svg>',
|
||||
' </span>',
|
||||
' </Show>',
|
||||
' )',
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentTypes(config: ResolvedSpriteConfig): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import type { Component, JSX } from 'solid-js'",
|
||||
`import type { ${component}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${component}Style = JSX.CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
|
||||
`type ${component}BaseProps = { icon: ${component}Name }`,
|
||||
`type ${component}SvgProps = ${component}BaseProps & { wrapped?: false } & Omit<JSX.SvgSVGAttributes<SVGSVGElement>, 'style'> & { style?: ${component}Style }`,
|
||||
`type ${component}WrappedProps = ${component}BaseProps & { wrapped: true } & Omit<JSX.HTMLAttributes<HTMLSpanElement>, 'style'> & { style?: ${component}Style }`,
|
||||
`export type ${component}Props = ${component}SvgProps | ${component}WrappedProps`,
|
||||
`export declare const ${component}: Component<${component}Props>`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${pascal(config.name)}Icon } from './solid/solid-component.jsx'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexTypes(config: ResolvedSpriteConfig): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${component} } from './solid/solid-component.jsx'`,
|
||||
`export type { ${component}Props, ${component}Style } from './solid/solid-component.jsx'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${component}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [header(config.generatedNotice), '', '.root {', ...transition, '}', '', '.wrap {', ' display: inline-flex;', '}', '', '.wrap svg {', ' width: 100%;', ' height: 100%;', ...transition, '}', ''].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: { framework: 'solid-start', componentName: `${pascal(config.name)}Icon`, ssr: true },
|
||||
mode: 'solid-start@vite',
|
||||
target: 'vite',
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [header(config.generatedNotice), "import spriteUrl from './sprite.svg?no-inline'", '', `export const spriteManifest = ${source}`, '', 'export default spriteManifest', ''].join('\n')
|
||||
}
|
||||
|
||||
function manifestTypes(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
|
||||
'export type SpriteManifest = {',
|
||||
" schemaVersion: 1; generator: '@gromlab/svg-sprites'; name: string; description?: string",
|
||||
" usage: { framework: 'solid-start'; componentName: string; ssr: true }",
|
||||
" mode: 'solid-start@vite'; target: 'vite'; format: 'stack' | 'symbol'",
|
||||
' iconCount: number; spriteUrl: string; icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.jsx'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.d.ts'), content: componentTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.module.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
|
||||
]
|
||||
}
|
||||
25
src/modes/solid-vite/adapter.ts
Normal file
25
src/modes/solid-vite/adapter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const solidViteAdapter: ModeAdapter<'solid@vite'> = {
|
||||
mode: 'solid@vite',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
|
||||
rootViewBox: false,
|
||||
})
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'vite' },
|
||||
}
|
||||
},
|
||||
}
|
||||
197
src/modes/solid-vite/output.ts
Normal file
197
src/modes/solid-vite/output.ts
Normal file
@@ -0,0 +1,197 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function svg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const notice = enabled
|
||||
? `АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. ${GENERATED_MARKER}.`
|
||||
: `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${notice} -->\n`)
|
||||
: `<!-- ${notice} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const name = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${name}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
|
||||
'',
|
||||
`export const ${name}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${component}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { Show, splitProps } from 'solid-js'",
|
||||
"import styles from './solid-component.module.css'",
|
||||
`import { ${ids} } from '../icon-data.js'`,
|
||||
"import spriteUrl from '../sprite.svg?no-inline'",
|
||||
'',
|
||||
`/** Иконка из SVG-спрайта «${config.name}». */`,
|
||||
`export const ${componentName} = (props) => {`,
|
||||
" const [local, rest] = splitProps(props, ['icon', 'wrapped', 'class'])",
|
||||
` const href = () => spriteUrl + '#' + ${ids}[local.icon]`,
|
||||
'',
|
||||
' return (',
|
||||
' <Show',
|
||||
' when={local.wrapped}',
|
||||
' fallback={',
|
||||
' <svg {...rest} class={[styles.root, local.class].filter(Boolean).join(\' \')}>',
|
||||
' <use href={href()} />',
|
||||
' </svg>',
|
||||
' }',
|
||||
' >',
|
||||
' <span {...rest} class={[styles.wrap, local.class].filter(Boolean).join(\' \')}>',
|
||||
' <svg><use href={href()} /></svg>',
|
||||
' </span>',
|
||||
' </Show>',
|
||||
' )',
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentTypes(config: ResolvedSpriteConfig): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import type { Component, JSX } from 'solid-js'",
|
||||
`import type { ${component}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${component}Style = JSX.CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
|
||||
`type ${component}BaseProps = { icon: ${component}Name }`,
|
||||
`type ${component}SvgProps = ${component}BaseProps & { wrapped?: false } & Omit<JSX.SvgSVGAttributes<SVGSVGElement>, 'style'> & { style?: ${component}Style }`,
|
||||
`type ${component}WrappedProps = ${component}BaseProps & { wrapped: true } & Omit<JSX.HTMLAttributes<HTMLSpanElement>, 'style'> & { style?: ${component}Style }`,
|
||||
`export type ${component}Props = ${component}SvgProps | ${component}WrappedProps`,
|
||||
`export declare const ${component}: Component<${component}Props>`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${pascal(config.name)}Icon } from './solid/solid-component.jsx'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexTypes(config: ResolvedSpriteConfig): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${component} } from './solid/solid-component.jsx'`,
|
||||
`export type { ${component}Props, ${component}Style } from './solid/solid-component.jsx'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${component}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [header(config.generatedNotice), '', '.root {', ...transition, '}', '', '.wrap {', ' display: inline-flex;', '}', '', '.wrap svg {', ' width: 100%;', ' height: 100%;', ...transition, '}', ''].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: { framework: 'solid', componentName: `${pascal(config.name)}Icon` },
|
||||
mode: 'solid@vite',
|
||||
target: 'vite',
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [header(config.generatedNotice), "import spriteUrl from './sprite.svg?no-inline'", '', `export const spriteManifest = ${source}`, '', 'export default spriteManifest', ''].join('\n')
|
||||
}
|
||||
|
||||
function manifestTypes(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
|
||||
'export type SpriteManifest = {',
|
||||
" schemaVersion: 1; generator: '@gromlab/svg-sprites'; name: string; description?: string",
|
||||
" usage: { framework: 'solid'; componentName: string }",
|
||||
" mode: 'solid@vite'; target: 'vite'; format: 'stack' | 'symbol'",
|
||||
' iconCount: number; spriteUrl: string; icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.jsx'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.d.ts'), content: componentTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.module.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
|
||||
]
|
||||
}
|
||||
25
src/modes/solid-webpack/adapter.ts
Normal file
25
src/modes/solid-webpack/adapter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const solidWebpackAdapter: ModeAdapter<'solid@webpack'> = {
|
||||
mode: 'solid@webpack',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
|
||||
rootViewBox: false,
|
||||
})
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'webpack' },
|
||||
}
|
||||
},
|
||||
}
|
||||
198
src/modes/solid-webpack/output.ts
Normal file
198
src/modes/solid-webpack/output.ts
Normal file
@@ -0,0 +1,198 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function svg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const notice = enabled
|
||||
? `АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. ${GENERATED_MARKER}.`
|
||||
: `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${notice} -->\n`)
|
||||
: `<!-- ${notice} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const name = camel(config.name)
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${name}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
|
||||
'',
|
||||
`export const ${name}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconTypes(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${component}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { Show, splitProps } from 'solid-js'",
|
||||
"import styles from './solid-component.module.css'",
|
||||
`import { ${ids} } from '../icon-data.js'`,
|
||||
'',
|
||||
"const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
|
||||
'',
|
||||
`/** Иконка из SVG-спрайта «${config.name}». */`,
|
||||
`export const ${componentName} = (props) => {`,
|
||||
" const [local, rest] = splitProps(props, ['icon', 'wrapped', 'class'])",
|
||||
` const href = () => spriteUrl + '#' + ${ids}[local.icon]`,
|
||||
'',
|
||||
' return (',
|
||||
' <Show',
|
||||
' when={local.wrapped}',
|
||||
' fallback={',
|
||||
' <svg {...rest} class={[styles.root, local.class].filter(Boolean).join(\' \')}>',
|
||||
' <use href={href()} />',
|
||||
' </svg>',
|
||||
' }',
|
||||
' >',
|
||||
' <span {...rest} class={[styles.wrap, local.class].filter(Boolean).join(\' \')}>',
|
||||
' <svg><use href={href()} /></svg>',
|
||||
' </span>',
|
||||
' </Show>',
|
||||
' )',
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentTypes(config: ResolvedSpriteConfig): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import type { Component, JSX } from 'solid-js'",
|
||||
`import type { ${component}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${component}Style = JSX.CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
|
||||
`type ${component}BaseProps = { icon: ${component}Name }`,
|
||||
`type ${component}SvgProps = ${component}BaseProps & { wrapped?: false } & Omit<JSX.SvgSVGAttributes<SVGSVGElement>, 'style'> & { style?: ${component}Style }`,
|
||||
`type ${component}WrappedProps = ${component}BaseProps & { wrapped: true } & Omit<JSX.HTMLAttributes<HTMLSpanElement>, 'style'> & { style?: ${component}Style }`,
|
||||
`export type ${component}Props = ${component}SvgProps | ${component}WrappedProps`,
|
||||
`export declare const ${component}: Component<${component}Props>`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${pascal(config.name)}Icon } from './solid/solid-component.jsx'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexTypes(config: ResolvedSpriteConfig): string {
|
||||
const component = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${component} } from './solid/solid-component.jsx'`,
|
||||
`export type { ${component}Props, ${component}Style } from './solid/solid-component.jsx'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${component}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [header(config.generatedNotice), '', '.root {', ...transition, '}', '', '.wrap {', ' display: inline-flex;', '}', '', '.wrap svg {', ' width: 100%;', ' height: 100%;', ...transition, '}', ''].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: { framework: 'solid', componentName: `${pascal(config.name)}Icon` },
|
||||
mode: 'solid@webpack',
|
||||
target: 'webpack',
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [header(config.generatedNotice), "const spriteUrl = new URL('./sprite.svg', import.meta.url).href", '', `export const spriteManifest = ${source}`, '', 'export default spriteManifest', ''].join('\n')
|
||||
}
|
||||
|
||||
function manifestTypes(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = { name: string; id: string; viewBox: string | null; colors: readonly SpriteManifestColor[] }',
|
||||
'export type SpriteManifest = {',
|
||||
" schemaVersion: 1; generator: '@gromlab/svg-sprites'; name: string; description?: string",
|
||||
" usage: { framework: 'solid'; componentName: string }",
|
||||
" mode: 'solid@webpack'; target: 'webpack'; format: 'stack' | 'symbol'",
|
||||
' iconCount: number; spriteUrl: string; icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconTypes(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.jsx'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.d.ts'), content: componentTypes(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'solid', 'solid-component.module.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestTypes(config) },
|
||||
]
|
||||
}
|
||||
27
src/modes/svelte-vite/adapter.ts
Normal file
27
src/modes/svelte-vite/adapter.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const svelteViteAdapter: ModeAdapter<'svelte@vite'> = {
|
||||
mode: 'svelte@vite',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(
|
||||
context.prepared.folder,
|
||||
context.config.transform,
|
||||
{ rootViewBox: false },
|
||||
)
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'vite' },
|
||||
}
|
||||
},
|
||||
}
|
||||
229
src/modes/svelte-vite/output.ts
Normal file
229
src/modes/svelte-vite/output.ts
Normal file
@@ -0,0 +1,229 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'svelte@vite'
|
||||
const TARGET = 'vite'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const NOTICE = 'АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function jsHeader(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function markupHeader(enabled: boolean): string {
|
||||
return enabled
|
||||
? `<!-- ${NOTICE}\n ${GENERATED_MARKER}. -->`
|
||||
: `<!-- ${GENERATED_MARKER}. Do not edit. -->`
|
||||
}
|
||||
|
||||
function svg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const marker = enabled ? `${NOTICE}\n ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
|
||||
: `<!-- ${marker} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${prefix}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
|
||||
'',
|
||||
`export const ${prefix}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
markupHeader(config.generatedNotice),
|
||||
'<script>',
|
||||
` import { ${ids} } from '../icon-data.js'`,
|
||||
" import spriteUrl from '../sprite.svg?no-inline'",
|
||||
'',
|
||||
' let { icon, wrapped = false, class: className, ...attributes } = $props()',
|
||||
` const href = $derived(spriteUrl + '#' + ${ids}[icon])`,
|
||||
'</script>',
|
||||
'',
|
||||
'{#if wrapped}',
|
||||
' <span {...attributes} class={["wrap", className]}><svg aria-hidden="true"><use {href}></use></svg></span>',
|
||||
'{:else}',
|
||||
' <svg {...attributes} class={["root", className]}><use {href}></use></svg>',
|
||||
'{/if}',
|
||||
'',
|
||||
'<style>',
|
||||
' .root {',
|
||||
...transition,
|
||||
' }',
|
||||
'',
|
||||
' .wrap {',
|
||||
' display: inline-flex;',
|
||||
' }',
|
||||
'',
|
||||
' .wrap svg {',
|
||||
' width: 100%;',
|
||||
' height: 100%;',
|
||||
...transition,
|
||||
' }',
|
||||
'</style>',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${componentName}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
"import type { Component } from 'svelte'",
|
||||
"import type { ClassValue, HTMLAttributes, SVGAttributes } from 'svelte/elements'",
|
||||
`import type { ${componentName}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${componentName}Style = string`,
|
||||
`type ${componentName}BaseProps = { icon: ${componentName}Name; class?: ClassValue; style?: ${componentName}Style }`,
|
||||
`type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & Omit<SVGAttributes<SVGSVGElement>, 'class' | 'style'>`,
|
||||
`type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'style'>`,
|
||||
`export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
|
||||
`declare const ${componentName}: Component<${componentName}Props>`,
|
||||
`export default ${componentName}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
`export { default as ${pascal(config.name)}Icon } from './svelte/svelte-component.svelte'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
`export { default as ${componentName} } from './svelte/svelte-component.svelte'`,
|
||||
`export type { ${componentName}Props, ${componentName}Style } from './svelte/svelte-component.svelte'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${componentName}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: { framework: 'svelte', componentName: `${pascal(config.name)}Icon` },
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
"import spriteUrl from './sprite.svg?no-inline'",
|
||||
'',
|
||||
`export const spriteManifest = ${source}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestDeclarations(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = {',
|
||||
' variable: `--icon-color-${number}`',
|
||||
' fallback: string',
|
||||
'}',
|
||||
'export type SpriteManifestIcon = {',
|
||||
' name: string',
|
||||
' id: string',
|
||||
' viewBox: string | null',
|
||||
' colors: readonly SpriteManifestColor[]',
|
||||
'}',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'svelte'; componentName: string }",
|
||||
" mode: 'svelte@vite'",
|
||||
" target: 'vite'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svelte', 'svelte-component.svelte'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svelte', 'svelte-component.svelte.d.ts'), content: componentDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
|
||||
]
|
||||
}
|
||||
27
src/modes/svelte-webpack/adapter.ts
Normal file
27
src/modes/svelte-webpack/adapter.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const svelteWebpackAdapter: ModeAdapter<'svelte@webpack'> = {
|
||||
mode: 'svelte@webpack',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(
|
||||
context.prepared.folder,
|
||||
context.config.transform,
|
||||
{ rootViewBox: false },
|
||||
)
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'webpack' },
|
||||
}
|
||||
},
|
||||
}
|
||||
229
src/modes/svelte-webpack/output.ts
Normal file
229
src/modes/svelte-webpack/output.ts
Normal file
@@ -0,0 +1,229 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'svelte@webpack'
|
||||
const TARGET = 'webpack'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const NOTICE = 'АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function jsHeader(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function markupHeader(enabled: boolean): string {
|
||||
return enabled
|
||||
? `<!-- ${NOTICE}\n ${GENERATED_MARKER}. -->`
|
||||
: `<!-- ${GENERATED_MARKER}. Do not edit. -->`
|
||||
}
|
||||
|
||||
function svg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const marker = enabled ? `${NOTICE}\n ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
|
||||
: `<!-- ${marker} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${prefix}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
|
||||
'',
|
||||
`export const ${prefix}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
markupHeader(config.generatedNotice),
|
||||
'<script>',
|
||||
` import { ${ids} } from '../icon-data.js'`,
|
||||
'',
|
||||
" const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
|
||||
' let { icon, wrapped = false, class: className, ...attributes } = $props()',
|
||||
` const href = $derived(spriteUrl + '#' + ${ids}[icon])`,
|
||||
'</script>',
|
||||
'',
|
||||
'{#if wrapped}',
|
||||
' <span {...attributes} class={["wrap", className]}><svg aria-hidden="true"><use {href}></use></svg></span>',
|
||||
'{:else}',
|
||||
' <svg {...attributes} class={["root", className]}><use {href}></use></svg>',
|
||||
'{/if}',
|
||||
'',
|
||||
'<style>',
|
||||
' .root {',
|
||||
...transition,
|
||||
' }',
|
||||
'',
|
||||
' .wrap {',
|
||||
' display: inline-flex;',
|
||||
' }',
|
||||
'',
|
||||
' .wrap svg {',
|
||||
' width: 100%;',
|
||||
' height: 100%;',
|
||||
...transition,
|
||||
' }',
|
||||
'</style>',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${componentName}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
"import type { Component } from 'svelte'",
|
||||
"import type { ClassValue, HTMLAttributes, SVGAttributes } from 'svelte/elements'",
|
||||
`import type { ${componentName}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${componentName}Style = string`,
|
||||
`type ${componentName}BaseProps = { icon: ${componentName}Name; class?: ClassValue; style?: ${componentName}Style }`,
|
||||
`type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & Omit<SVGAttributes<SVGSVGElement>, 'class' | 'style'>`,
|
||||
`type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'style'>`,
|
||||
`export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
|
||||
`declare const ${componentName}: Component<${componentName}Props>`,
|
||||
`export default ${componentName}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
`export { default as ${pascal(config.name)}Icon } from './svelte/svelte-component.svelte'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
`export { default as ${componentName} } from './svelte/svelte-component.svelte'`,
|
||||
`export type { ${componentName}Props, ${componentName}Style } from './svelte/svelte-component.svelte'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${componentName}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: { framework: 'svelte', componentName: `${pascal(config.name)}Icon` },
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
"const spriteUrl = new URL('./sprite.svg', import.meta.url).href",
|
||||
'',
|
||||
`export const spriteManifest = ${source}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestDeclarations(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = {',
|
||||
' variable: `--icon-color-${number}`',
|
||||
' fallback: string',
|
||||
'}',
|
||||
'export type SpriteManifestIcon = {',
|
||||
' name: string',
|
||||
' id: string',
|
||||
' viewBox: string | null',
|
||||
' colors: readonly SpriteManifestColor[]',
|
||||
'}',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'svelte'; componentName: string }",
|
||||
" mode: 'svelte@webpack'",
|
||||
" target: 'webpack'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svelte', 'svelte-component.svelte'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svelte', 'svelte-component.svelte.d.ts'), content: componentDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
|
||||
]
|
||||
}
|
||||
27
src/modes/sveltekit-vite/adapter.ts
Normal file
27
src/modes/sveltekit-vite/adapter.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const sveltekitViteAdapter: ModeAdapter<'sveltekit@vite'> = {
|
||||
mode: 'sveltekit@vite',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(
|
||||
context.prepared.folder,
|
||||
context.config.transform,
|
||||
{ rootViewBox: false },
|
||||
)
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'vite' },
|
||||
}
|
||||
},
|
||||
}
|
||||
229
src/modes/sveltekit-vite/output.ts
Normal file
229
src/modes/sveltekit-vite/output.ts
Normal file
@@ -0,0 +1,229 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'sveltekit@vite'
|
||||
const TARGET = 'vite'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const NOTICE = 'АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ. Не редактируйте вручную.'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function jsHeader(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function markupHeader(enabled: boolean): string {
|
||||
return enabled
|
||||
? `<!-- ${NOTICE}\n ${GENERATED_MARKER}. -->`
|
||||
: `<!-- ${GENERATED_MARKER}. Do not edit. -->`
|
||||
}
|
||||
|
||||
function svg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const marker = enabled ? `${NOTICE}\n ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
|
||||
: `<!-- ${marker} -->\n${content}`
|
||||
}
|
||||
|
||||
function description(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `Имена иконок SVG-спрайта «${config.name}».`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export const ${prefix}IconNames = ${JSON.stringify(artifact.icons.map((icon) => icon.name), null, 2)}`,
|
||||
'',
|
||||
`export const ${prefix}IconIds = ${JSON.stringify(Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id])), null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
markupHeader(config.generatedNotice),
|
||||
'<script>',
|
||||
` import { ${ids} } from '../icon-data.js'`,
|
||||
" import spriteUrl from '../sprite.svg?no-inline'",
|
||||
'',
|
||||
' let { icon, wrapped = false, class: className, ...attributes } = $props()',
|
||||
` const href = $derived(spriteUrl + '#' + ${ids}[icon])`,
|
||||
'</script>',
|
||||
'',
|
||||
'{#if wrapped}',
|
||||
' <span {...attributes} class={["wrap", className]}><svg aria-hidden="true"><use {href}></use></svg></span>',
|
||||
'{:else}',
|
||||
' <svg {...attributes} class={["root", className]}><use {href}></use></svg>',
|
||||
'{/if}',
|
||||
'',
|
||||
'<style>',
|
||||
' .root {',
|
||||
...transition,
|
||||
' }',
|
||||
'',
|
||||
' .wrap {',
|
||||
' display: inline-flex;',
|
||||
' }',
|
||||
'',
|
||||
' .wrap svg {',
|
||||
' width: 100%;',
|
||||
' height: 100%;',
|
||||
...transition,
|
||||
' }',
|
||||
'</style>',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
'',
|
||||
...description(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${componentName}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
"import type { Component } from 'svelte'",
|
||||
"import type { ClassValue, HTMLAttributes, SVGAttributes } from 'svelte/elements'",
|
||||
`import type { ${componentName}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${componentName}Style = string`,
|
||||
`type ${componentName}BaseProps = { icon: ${componentName}Name; class?: ClassValue; style?: ${componentName}Style }`,
|
||||
`type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & Omit<SVGAttributes<SVGSVGElement>, 'class' | 'style'>`,
|
||||
`type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'style'>`,
|
||||
`export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
|
||||
`declare const ${componentName}: Component<${componentName}Props>`,
|
||||
`export default ${componentName}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
`export { default as ${pascal(config.name)}Icon } from './svelte/svelte-component.svelte'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
`export { default as ${componentName} } from './svelte/svelte-component.svelte'`,
|
||||
`export type { ${componentName}Props, ${componentName}Style } from './svelte/svelte-component.svelte'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
`export type { ${componentName}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: { framework: 'svelte', componentName: `${pascal(config.name)}Icon` },
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
"import spriteUrl from './sprite.svg?no-inline'",
|
||||
'',
|
||||
`export const spriteManifest = ${source}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestDeclarations(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
jsHeader(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = {',
|
||||
' variable: `--icon-color-${number}`',
|
||||
' fallback: string',
|
||||
'}',
|
||||
'export type SpriteManifestIcon = {',
|
||||
' name: string',
|
||||
' id: string',
|
||||
' viewBox: string | null',
|
||||
' colors: readonly SpriteManifestColor[]',
|
||||
'}',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'svelte'; componentName: string }",
|
||||
" mode: 'sveltekit@vite'",
|
||||
" target: 'vite'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: svg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svelte', 'svelte-component.svelte'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svelte', 'svelte-component.svelte.d.ts'), content: componentDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
|
||||
]
|
||||
}
|
||||
27
src/modes/vue-vite/adapter.ts
Normal file
27
src/modes/vue-vite/adapter.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const vueViteAdapter: ModeAdapter<'vue@vite'> = {
|
||||
mode: 'vue@vite',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(
|
||||
context.prepared.folder,
|
||||
context.config.transform,
|
||||
{ rootViewBox: false },
|
||||
)
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'vite' },
|
||||
}
|
||||
},
|
||||
}
|
||||
301
src/modes/vue-vite/output.ts
Normal file
301
src/modes/vue-vite/output.ts
Normal file
@@ -0,0 +1,301 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'vue@vite'
|
||||
const TARGET = 'vite'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const GENERATED_NOTICE = [
|
||||
'----------------------------------------------------------------------',
|
||||
'## АВТОМАТИЧЕСКИ СГЕНЕРИРОВАННЫЙ ФАЙЛ ##',
|
||||
'## ##',
|
||||
'## Не редактируйте вручную: изменения будут перезаписаны. ##',
|
||||
'## Для изменений перегенерируйте SVG-спрайт. ##',
|
||||
'## ##',
|
||||
'## Генератор: @gromlab/svg-sprites ##',
|
||||
'## Репозиторий: https://github.com/gromlab-ru/svg-sprites ##',
|
||||
'----------------------------------------------------------------------',
|
||||
]
|
||||
|
||||
function toPascalCase(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function toCamelCase(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function blockHeader(enabled: boolean): string {
|
||||
if (!enabled) return `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
return ['/*', ...GENERATED_NOTICE.map((line) => ` * ${line}`), ' */'].join('\n')
|
||||
}
|
||||
|
||||
function svgHeader(enabled: boolean): string {
|
||||
if (!enabled) return `<!-- ${GENERATED_MARKER}. Do not edit. -->`
|
||||
return ['<!--', ...GENERATED_NOTICE.slice(1, -1).map((line) => ` ${line}`), '-->'].join('\n')
|
||||
}
|
||||
|
||||
function formatSvg(content: string): string {
|
||||
let depth = 0
|
||||
const lines = content.replace(/></g, '>\n<').split('\n')
|
||||
const formatted = lines.map((line) => {
|
||||
const trimmed = line.trim()
|
||||
const tags = trimmed.match(/<[^>]+>/g) ?? []
|
||||
const startsWithClosingTag = trimmed.startsWith('</')
|
||||
if (startsWithClosingTag) depth = Math.max(0, depth - 1)
|
||||
const formattedLine = `${' '.repeat(depth)}${trimmed}`
|
||||
|
||||
for (const tag of tags) {
|
||||
if (tag.startsWith('</')) {
|
||||
if (!startsWithClosingTag) depth = Math.max(0, depth - 1)
|
||||
} else if (!tag.startsWith('<?') && !tag.startsWith('<!') && !tag.endsWith('/>')) {
|
||||
depth += 1
|
||||
}
|
||||
}
|
||||
return formattedLine
|
||||
})
|
||||
return `${formatted.join('\n')}\n`
|
||||
}
|
||||
|
||||
function markedSvg(bytes: Uint8Array, notice: boolean): string {
|
||||
const svg = formatSvg(new TextDecoder().decode(bytes))
|
||||
const header = svgHeader(notice)
|
||||
return svg.startsWith('<?xml')
|
||||
? svg.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n${header}\n`)
|
||||
: `${header}\n${svg}`
|
||||
}
|
||||
|
||||
function descriptionComment(name: string, description?: string): string[] {
|
||||
const text = description ?? `Имена иконок SVG-спрайта «${name}».`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function generateIconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const camelName = toCamelCase(config.name)
|
||||
const names = artifact.icons.map((icon) => icon.name)
|
||||
const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
|
||||
return [
|
||||
blockHeader(config.generatedNotice),
|
||||
'',
|
||||
...descriptionComment(config.name, config.description),
|
||||
`export const ${camelName}IconNames = ${JSON.stringify(names, null, 2)}`,
|
||||
'',
|
||||
`export const ${camelName}IconIds = ${JSON.stringify(ids, null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function generateComponent(config: ResolvedSpriteConfig): string {
|
||||
const pascalName = toPascalCase(config.name)
|
||||
const camelName = toCamelCase(config.name)
|
||||
return [
|
||||
blockHeader(config.generatedNotice),
|
||||
"import { defineComponent, h } from 'vue'",
|
||||
"import styles from './vue-component.module.css'",
|
||||
`import { ${camelName}IconIds } from '../icon-data.js'`,
|
||||
"import spriteUrl from '../sprite.svg?no-inline'",
|
||||
'',
|
||||
`/** Иконка из SVG-спрайта «${config.name}». */`,
|
||||
`export const ${pascalName}Icon = defineComponent({`,
|
||||
` name: '${pascalName}Icon',`,
|
||||
' inheritAttrs: false,',
|
||||
' props: {',
|
||||
" icon: { type: String, required: true },",
|
||||
" wrapped: { type: Boolean, default: false },",
|
||||
' },',
|
||||
' setup(props, { attrs }) {',
|
||||
' return () => {',
|
||||
` const href = spriteUrl + '#' + ${camelName}IconIds[props.icon]`,
|
||||
'',
|
||||
' if (props.wrapped) {',
|
||||
" return h('span', {",
|
||||
' ...attrs,',
|
||||
' class: [styles.wrap, attrs.class],',
|
||||
" }, [h('svg', null, [h('use', { href })])])",
|
||||
' }',
|
||||
'',
|
||||
" return h('svg', {",
|
||||
' ...attrs,',
|
||||
' class: [styles.root, attrs.class],',
|
||||
" }, [h('use', { href })])",
|
||||
' }',
|
||||
' },',
|
||||
'})',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function generateIconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const pascalName = toPascalCase(config.name)
|
||||
const camelName = toCamelCase(config.name)
|
||||
const tuple = artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`).join('\n')
|
||||
const ids = artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`).join('\n')
|
||||
return [
|
||||
blockHeader(config.generatedNotice),
|
||||
'',
|
||||
...descriptionComment(config.name, config.description),
|
||||
`export declare const ${camelName}IconNames: readonly [`,
|
||||
tuple,
|
||||
']',
|
||||
'',
|
||||
`export type ${pascalName}IconName = typeof ${camelName}IconNames[number]`,
|
||||
`export declare const ${camelName}IconIds: {`,
|
||||
ids,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function generateComponentDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const pascalName = toPascalCase(config.name)
|
||||
return [
|
||||
blockHeader(config.generatedNotice),
|
||||
"import type { CSSProperties, DefineComponent, HTMLAttributes, SVGAttributes } from 'vue'",
|
||||
`import type { ${pascalName}IconName } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${pascalName}IconStyle = CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
|
||||
'',
|
||||
`type ${pascalName}IconBaseProps = { icon: ${pascalName}IconName }`,
|
||||
`type ${pascalName}IconSvgProps = ${pascalName}IconBaseProps & { wrapped?: false } & Omit<SVGAttributes, 'style'> & { style?: ${pascalName}IconStyle }`,
|
||||
`type ${pascalName}IconWrappedProps = ${pascalName}IconBaseProps & { wrapped: true } & Omit<HTMLAttributes, 'style'> & { style?: ${pascalName}IconStyle }`,
|
||||
`export type ${pascalName}IconProps = ${pascalName}IconSvgProps | ${pascalName}IconWrappedProps`,
|
||||
'',
|
||||
`export declare const ${pascalName}Icon: DefineComponent<${pascalName}IconProps>`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function generateIndexDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const pascalName = toPascalCase(config.name)
|
||||
const camelName = toCamelCase(config.name)
|
||||
return [
|
||||
blockHeader(config.generatedNotice),
|
||||
`export { ${pascalName}Icon } from './vue/vue-component.js'`,
|
||||
`export type { ${pascalName}IconProps, ${pascalName}IconStyle } from './vue/vue-component.js'`,
|
||||
`export { ${camelName}IconNames } from './icon-data.js'`,
|
||||
`export type { ${pascalName}IconName } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function generateIndex(config: ResolvedSpriteConfig): string {
|
||||
const pascalName = toPascalCase(config.name)
|
||||
const camelName = toCamelCase(config.name)
|
||||
return [
|
||||
blockHeader(config.generatedNotice),
|
||||
`export { ${pascalName}Icon } from './vue/vue-component.js'`,
|
||||
`export { ${camelName}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function generateStyles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
blockHeader(config.generatedNotice),
|
||||
'',
|
||||
'.root {',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
'.wrap {',
|
||||
' display: inline-flex;',
|
||||
'}',
|
||||
'',
|
||||
'.wrap svg {',
|
||||
' width: 100%;',
|
||||
' height: 100%;',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact) {
|
||||
return {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: {
|
||||
framework: 'vue',
|
||||
componentName: `${toPascalCase(config.name)}Icon`,
|
||||
},
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
}
|
||||
|
||||
function generateManifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const serialized = JSON.stringify(manifestData(config, artifact), null, 2)
|
||||
.replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
blockHeader(config.generatedNotice),
|
||||
"import spriteUrl from './sprite.svg?no-inline'",
|
||||
'',
|
||||
`export const spriteManifest = ${serialized}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function generateManifestDeclarations(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
blockHeader(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = {',
|
||||
' variable: `--icon-color-${number}`',
|
||||
' fallback: string',
|
||||
'}',
|
||||
'export type SpriteManifestIcon = {',
|
||||
' name: string',
|
||||
' id: string',
|
||||
' viewBox: string | null',
|
||||
' colors: readonly SpriteManifestColor[]',
|
||||
'}',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'vue'; componentName: string }",
|
||||
" mode: 'vue@vite'",
|
||||
" target: 'vite'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(
|
||||
config: ResolvedSpriteConfig,
|
||||
artifact: CompiledSpriteArtifact,
|
||||
): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: generateIndex(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: generateIndexDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: generateIconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: generateIconDeclarations(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.js'), content: generateComponent(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.d.ts'), content: generateComponentDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.module.css'), content: generateStyles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: generateManifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: generateManifestDeclarations(config) },
|
||||
]
|
||||
}
|
||||
25
src/modes/vue-webpack/adapter.ts
Normal file
25
src/modes/vue-webpack/adapter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { compileSpriteContent } from '../../compiler.js'
|
||||
import { createCompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import type { ModeAdapter } from '../../core/mode-adapter.js'
|
||||
import { generateOutputFiles } from './output.js'
|
||||
|
||||
export const vueWebpackAdapter: ModeAdapter<'vue@webpack'> = {
|
||||
mode: 'vue@webpack',
|
||||
async generate(context) {
|
||||
const bytes = await compileSpriteContent(context.prepared.folder, context.config.transform, {
|
||||
rootViewBox: false,
|
||||
})
|
||||
const artifact = createCompiledSpriteArtifact(bytes, context.prepared.iconNames, 'stack')
|
||||
|
||||
return {
|
||||
files: generateOutputFiles(context.config, artifact),
|
||||
paths: {
|
||||
generatedDir: '.svg-sprite',
|
||||
sprite: '.svg-sprite/sprite.svg',
|
||||
manifest: '.svg-sprite/svg-sprite.manifest.js',
|
||||
entry: '.svg-sprite/index.js',
|
||||
},
|
||||
result: { target: 'webpack' },
|
||||
}
|
||||
},
|
||||
}
|
||||
242
src/modes/vue-webpack/output.ts
Normal file
242
src/modes/vue-webpack/output.ts
Normal file
@@ -0,0 +1,242 @@
|
||||
import path from 'node:path'
|
||||
import type { CompiledSpriteArtifact } from '../../core/compiled-artifact.js'
|
||||
import { GENERATED_MARKER } from '../../core/generated-markers.js'
|
||||
import type { GeneratedFile } from '../../core/mode-adapter.js'
|
||||
import type { ResolvedSpriteConfig } from '../../types.js'
|
||||
|
||||
const MODE = 'vue@webpack'
|
||||
const TARGET = 'webpack'
|
||||
const OUTPUT_DIR = '.svg-sprite'
|
||||
const NOTICE = 'AUTOMATICALLY GENERATED FILE. Do not edit manually.'
|
||||
|
||||
function pascal(value: string): string {
|
||||
return value.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
|
||||
}
|
||||
|
||||
function camel(value: string): string {
|
||||
return value.replace(/-([a-z0-9])/g, (_, char: string) => char.toUpperCase())
|
||||
}
|
||||
|
||||
function header(enabled: boolean): string {
|
||||
return enabled
|
||||
? `/*\n * ${NOTICE}\n * ${GENERATED_MARKER}.\n */`
|
||||
: `/* ${GENERATED_MARKER}. Do not edit. */`
|
||||
}
|
||||
|
||||
function markedSvg(bytes: Uint8Array, enabled: boolean): string {
|
||||
const marker = enabled ? `${NOTICE}\n ${GENERATED_MARKER}.` : `${GENERATED_MARKER}. Do not edit.`
|
||||
const content = new TextDecoder().decode(bytes)
|
||||
return content.startsWith('<?xml')
|
||||
? content.replace(/^(<\?xml[^?]*\?>)\s*/, `$1\n<!-- ${marker} -->\n`)
|
||||
: `<!-- ${marker} -->\n${content}`
|
||||
}
|
||||
|
||||
function docs(config: ResolvedSpriteConfig): string[] {
|
||||
const text = config.description ?? `SVG sprite icon names for "${config.name}".`
|
||||
return ['/**', ...text.split(/\r?\n/).map((line) => ` * ${line.replace(/\*\//g, '* /')}`), ' */']
|
||||
}
|
||||
|
||||
function iconData(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const prefix = camel(config.name)
|
||||
const names = artifact.icons.map((icon) => icon.name)
|
||||
const ids = Object.fromEntries(artifact.icons.map((icon) => [icon.name, icon.id]))
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...docs(config),
|
||||
`export const ${prefix}IconNames = ${JSON.stringify(names, null, 2)}`,
|
||||
'',
|
||||
`export const ${prefix}IconIds = ${JSON.stringify(ids, null, 2)}`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function component(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import { defineComponent, h } from 'vue'",
|
||||
"import styles from './vue-component.module.css'",
|
||||
`import { ${ids} } from '../icon-data.js'`,
|
||||
'',
|
||||
"const spriteUrl = new URL('../sprite.svg', import.meta.url).href",
|
||||
'',
|
||||
`export const ${componentName} = defineComponent({`,
|
||||
` name: '${componentName}',`,
|
||||
' inheritAttrs: false,',
|
||||
' props: {',
|
||||
" icon: { type: String, required: true },",
|
||||
" wrapped: { type: Boolean, default: false },",
|
||||
' },',
|
||||
' setup(props, { attrs }) {',
|
||||
' return () => {',
|
||||
` const href = spriteUrl + '#' + ${ids}[props.icon]`,
|
||||
' if (props.wrapped) {',
|
||||
" return h('span', { ...attrs, class: [styles.wrap, attrs.class] }, [",
|
||||
" h('svg', null, [h('use', { href })]),",
|
||||
' ])',
|
||||
' }',
|
||||
" return h('svg', { ...attrs, class: [styles.root, attrs.class] }, [",
|
||||
" h('use', { href }),",
|
||||
' ])',
|
||||
' }',
|
||||
' },',
|
||||
'})',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function iconDeclarations(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
const ids = `${camel(config.name)}IconIds`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
...docs(config),
|
||||
`export declare const ${names}: readonly [`,
|
||||
...artifact.icons.map((icon) => ` ${JSON.stringify(icon.name)},`),
|
||||
']',
|
||||
`export type ${componentName}Name = typeof ${names}[number]`,
|
||||
`export declare const ${ids}: {`,
|
||||
...artifact.icons.map((icon) => ` readonly ${JSON.stringify(icon.name)}: ${JSON.stringify(icon.id)}`),
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function componentDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"import type { CSSProperties, DefineComponent, HTMLAttributes, SVGAttributes } from 'vue'",
|
||||
`import type { ${componentName}Name } from '../icon-data.js'`,
|
||||
'',
|
||||
`export type ${componentName}Style = CSSProperties & Partial<Record<\`--icon-color-\${number}\`, string | number>>`,
|
||||
`type ${componentName}BaseProps = { icon: ${componentName}Name }`,
|
||||
`type ${componentName}SvgProps = ${componentName}BaseProps & { wrapped?: false } & Omit<SVGAttributes, 'style'> & { style?: ${componentName}Style }`,
|
||||
`type ${componentName}WrappedProps = ${componentName}BaseProps & { wrapped: true } & Omit<HTMLAttributes, 'style'> & { style?: ${componentName}Style }`,
|
||||
`export type ${componentName}Props = ${componentName}SvgProps | ${componentName}WrappedProps`,
|
||||
`export declare const ${componentName}: DefineComponent<${componentName}Props>`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function index(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${pascal(config.name)}Icon } from './vue/vue-component.js'`,
|
||||
`export { ${camel(config.name)}IconNames } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function indexDeclarations(config: ResolvedSpriteConfig): string {
|
||||
const componentName = `${pascal(config.name)}Icon`
|
||||
const names = `${camel(config.name)}IconNames`
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
`export { ${componentName} } from './vue/vue-component.js'`,
|
||||
`export type { ${componentName}Props, ${componentName}Style } from './vue/vue-component.js'`,
|
||||
`export { ${names} } from './icon-data.js'`,
|
||||
`export type { ${componentName}Name } from './icon-data.js'`,
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function styles(config: ResolvedSpriteConfig): string {
|
||||
const transition = config.transform.addTransition
|
||||
? [' transition-property: fill, stroke, color;', ' transition-duration: 0.3s;', ' transition-timing-function: ease;']
|
||||
: []
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
'.root {',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
'.wrap {',
|
||||
' display: inline-flex;',
|
||||
'}',
|
||||
'',
|
||||
'.wrap svg {',
|
||||
' width: 100%;',
|
||||
' height: 100%;',
|
||||
...transition,
|
||||
'}',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifest(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): string {
|
||||
const data = {
|
||||
schemaVersion: 1,
|
||||
generator: '@gromlab/svg-sprites',
|
||||
name: config.name,
|
||||
...(config.description === undefined ? {} : { description: config.description }),
|
||||
usage: { framework: 'vue', componentName: `${pascal(config.name)}Icon` },
|
||||
mode: MODE,
|
||||
target: TARGET,
|
||||
format: artifact.format,
|
||||
iconCount: artifact.icons.length,
|
||||
spriteUrl: '__SPRITE_URL__',
|
||||
icons: artifact.icons,
|
||||
}
|
||||
const source = JSON.stringify(data, null, 2).replace('"__SPRITE_URL__"', 'spriteUrl')
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
"const spriteUrl = new URL('./sprite.svg', import.meta.url).href",
|
||||
'',
|
||||
`export const spriteManifest = ${source}`,
|
||||
'',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
function manifestDeclarations(config: ResolvedSpriteConfig): string {
|
||||
return [
|
||||
header(config.generatedNotice),
|
||||
'',
|
||||
'export type SpriteManifestColor = { variable: `--icon-color-${number}`; fallback: string }',
|
||||
'export type SpriteManifestIcon = {',
|
||||
' name: string',
|
||||
' id: string',
|
||||
' viewBox: string | null',
|
||||
' colors: readonly SpriteManifestColor[]',
|
||||
'}',
|
||||
'export type SpriteManifest = {',
|
||||
' schemaVersion: 1',
|
||||
" generator: '@gromlab/svg-sprites'",
|
||||
' name: string',
|
||||
' description?: string',
|
||||
" usage: { framework: 'vue'; componentName: string }",
|
||||
" mode: 'vue@webpack'",
|
||||
" target: 'webpack'",
|
||||
" format: 'stack' | 'symbol'",
|
||||
' iconCount: number',
|
||||
' spriteUrl: string',
|
||||
' icons: readonly SpriteManifestIcon[]',
|
||||
'}',
|
||||
'',
|
||||
'export declare const spriteManifest: SpriteManifest',
|
||||
'export default spriteManifest',
|
||||
'',
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
export function generateOutputFiles(config: ResolvedSpriteConfig, artifact: CompiledSpriteArtifact): GeneratedFile[] {
|
||||
return [
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.js'), content: index(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'index.d.ts'), content: indexDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'sprite.svg'), content: markedSvg(artifact.bytes, config.generatedNotice) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.js'), content: iconData(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'icon-data.d.ts'), content: iconDeclarations(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.js'), content: component(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.d.ts'), content: componentDeclarations(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'vue', 'vue-component.module.css'), content: styles(config) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.js'), content: manifest(config, artifact) },
|
||||
{ path: path.posix.join(OUTPUT_DIR, 'svg-sprite.manifest.d.ts'), content: manifestDeclarations(config) },
|
||||
]
|
||||
}
|
||||
@@ -37,6 +37,23 @@ export type ReactAssetTarget = ViteAssetTarget | WebpackAssetTarget
|
||||
/** Полный ключ React mode, используемый конфигом, CLI и manifest. */
|
||||
export type ReactSpriteMode = `react@${ReactAssetTarget}`
|
||||
|
||||
/** Среда сборки Vue sprite-модуля. */
|
||||
export type VueAssetTarget = ViteAssetTarget
|
||||
|
||||
/** Полный ключ Vue mode, используемый конфигом, CLI и manifest. */
|
||||
export type VueSpriteMode = `vue@${ViteAssetTarget | WebpackAssetTarget}`
|
||||
|
||||
export type NuxtSpriteMode = `nuxt@${ViteAssetTarget | WebpackAssetTarget}`
|
||||
export type SvelteSpriteMode = `svelte@${ViteAssetTarget | WebpackAssetTarget}` | 'sveltekit@vite'
|
||||
export type AngularAssetTarget = 'application' | WebpackAssetTarget
|
||||
export type AngularSpriteMode = `angular@${AngularAssetTarget}`
|
||||
export type AstroSpriteMode = 'astro@vite'
|
||||
export type SolidSpriteMode = `solid@${ViteAssetTarget | WebpackAssetTarget}` | 'solid-start@vite'
|
||||
export type PreactSpriteMode = `preact@${ViteAssetTarget | WebpackAssetTarget}`
|
||||
export type QwikSpriteMode = 'qwik@vite'
|
||||
export type LitSpriteMode = `lit@${ViteAssetTarget | WebpackAssetTarget}`
|
||||
export type AlpineSpriteMode = `alpine@${ViteAssetTarget | WebpackAssetTarget}`
|
||||
|
||||
/** Среда standalone sprite-модуля. */
|
||||
export type StandaloneAssetTarget = StaticAssetTarget | ViteAssetTarget | WebpackAssetTarget
|
||||
|
||||
@@ -44,10 +61,23 @@ export type StandaloneAssetTarget = StaticAssetTarget | ViteAssetTarget | Webpac
|
||||
export type StandaloneSpriteMode = 'standalone' | `standalone@${ViteAssetTarget | WebpackAssetTarget}`
|
||||
|
||||
/** Любая среда, для которой может быть сгенерирован React sprite-модуль. */
|
||||
export type SpriteAssetTarget = ReactAssetTarget | NextAssetTarget | StaticAssetTarget
|
||||
export type SpriteAssetTarget = ReactAssetTarget | NextAssetTarget | StaticAssetTarget | AngularAssetTarget
|
||||
|
||||
/** Режим генерации sprite-модуля. */
|
||||
export type SpriteMode = ReactSpriteMode | NextAssetTarget | StandaloneSpriteMode
|
||||
export type SpriteMode =
|
||||
| ReactSpriteMode
|
||||
| VueSpriteMode
|
||||
| NuxtSpriteMode
|
||||
| SvelteSpriteMode
|
||||
| AngularSpriteMode
|
||||
| AstroSpriteMode
|
||||
| SolidSpriteMode
|
||||
| PreactSpriteMode
|
||||
| QwikSpriteMode
|
||||
| LitSpriteMode
|
||||
| AlpineSpriteMode
|
||||
| NextAssetTarget
|
||||
| StandaloneSpriteMode
|
||||
|
||||
/** Фрагменты кода, необходимые компоненту для получения URL SVG asset. */
|
||||
export type SpriteAssetUrlCode = {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import type { SpriteViewerManifest, SpriteViewerManifestIcon } from './types.js'
|
||||
|
||||
export type SpriteViewerTab = 'react' | 'vue' | 'svg' | 'img' | 'css'
|
||||
import type { SpriteViewerManifestUsage } from './types.js'
|
||||
|
||||
export type SpriteViewerTab = SpriteViewerManifestUsage['framework'] | 'svg' | 'img' | 'css'
|
||||
export type SpriteViewerCodeLanguage = 'tsx' | 'html' | 'css'
|
||||
|
||||
const COMMON_TABS: ReadonlyArray<{ id: SpriteViewerTab; label: string }> = [
|
||||
@@ -9,7 +11,21 @@ const COMMON_TABS: ReadonlyArray<{ id: SpriteViewerTab; label: string }> = [
|
||||
{ id: 'css', label: 'CSS' },
|
||||
]
|
||||
|
||||
function usageForManifest(manifest: SpriteViewerManifest): { framework: 'react' | 'vue'; componentName: string } | null {
|
||||
const FRAMEWORK_LABELS: Record<SpriteViewerManifestUsage['framework'], string> = {
|
||||
react: 'React',
|
||||
vue: 'Vue',
|
||||
svelte: 'Svelte',
|
||||
angular: 'Angular',
|
||||
astro: 'Astro',
|
||||
solid: 'Solid',
|
||||
'solid-start': 'SolidStart',
|
||||
preact: 'Preact',
|
||||
qwik: 'Qwik',
|
||||
lit: 'Lit',
|
||||
alpine: 'Alpine',
|
||||
}
|
||||
|
||||
function usageForManifest(manifest: SpriteViewerManifest): SpriteViewerManifestUsage | null {
|
||||
if (manifest.usage) return manifest.usage
|
||||
if (manifest.componentName) return { framework: 'react', componentName: manifest.componentName }
|
||||
return null
|
||||
@@ -18,12 +34,12 @@ function usageForManifest(manifest: SpriteViewerManifest): { framework: 'react'
|
||||
export function tabsForManifest(manifest: SpriteViewerManifest): ReadonlyArray<{ id: SpriteViewerTab; label: string }> {
|
||||
const usage = usageForManifest(manifest)
|
||||
const frameworkTab = usage
|
||||
? [{ id: usage.framework, label: usage.framework === 'react' ? 'React' : 'Vue' } as const]
|
||||
? [{ id: usage.framework, label: FRAMEWORK_LABELS[usage.framework] }]
|
||||
: []
|
||||
const tabs = [...frameworkTab, ...COMMON_TABS]
|
||||
return manifest.format === 'stack'
|
||||
? tabs
|
||||
: tabs.filter((tab) => tab.id === 'react' || tab.id === 'vue' || tab.id === 'svg')
|
||||
: tabs.filter((tab) => tab.id !== 'img' && tab.id !== 'css')
|
||||
}
|
||||
|
||||
export function viewBoxSize(viewBox: string | null): string | null {
|
||||
@@ -96,11 +112,32 @@ export function generateViewerCode(options: {
|
||||
const href = `${manifest.spriteUrl}#${icon.id}`
|
||||
const overrides = styleLines(colorOverrides)
|
||||
|
||||
if (tab === 'react' || tab === 'vue') {
|
||||
if (!['svg', 'img', 'css'].includes(tab)) {
|
||||
const usage = usageForManifest(manifest)
|
||||
if (!usage) throw new Error(`The ${tab} code tab requires component metadata.`)
|
||||
|
||||
if (tab === 'vue') {
|
||||
if (usage.framework === 'alpine') {
|
||||
return {
|
||||
code: `<svg ${usage.directive}=${JSON.stringify(JSON.stringify(icon.name))}></svg>`,
|
||||
language: 'html',
|
||||
}
|
||||
}
|
||||
|
||||
if (usage.framework === 'lit') {
|
||||
return {
|
||||
code: `<${usage.tagName} icon=${JSON.stringify(icon.name)}></${usage.tagName}>`,
|
||||
language: 'html',
|
||||
}
|
||||
}
|
||||
|
||||
if (usage.framework === 'angular') {
|
||||
return {
|
||||
code: `<${usage.selector} icon=${JSON.stringify(icon.name)}></${usage.selector}>`,
|
||||
language: 'html',
|
||||
}
|
||||
}
|
||||
|
||||
if (usage.framework === 'vue') {
|
||||
const style = Object.entries(colorOverrides)
|
||||
.map(([variable, color]) => `${JSON.stringify(variable)}: ${JSON.stringify(color)}`)
|
||||
.join(', ')
|
||||
|
||||
@@ -437,7 +437,7 @@ class GromlabSpriteViewerElement extends LitElement {
|
||||
cssColor: this._cssColor,
|
||||
})
|
||||
const dimensions = viewBoxSize(icon.viewBox)
|
||||
const colorsVisible = activeTab === 'react' || activeTab === 'vue' || activeTab === 'svg'
|
||||
const colorsVisible = activeTab !== 'img' && activeTab !== 'css'
|
||||
|
||||
return html`
|
||||
<dialog
|
||||
|
||||
@@ -12,10 +12,21 @@ export type SpriteViewerManifestIcon = {
|
||||
colors: readonly SpriteViewerManifestColor[]
|
||||
}
|
||||
|
||||
export type SpriteViewerManifestUsage = {
|
||||
framework: 'react' | 'vue'
|
||||
componentName: string
|
||||
}
|
||||
export type SpriteViewerComponentFramework =
|
||||
| 'react'
|
||||
| 'vue'
|
||||
| 'svelte'
|
||||
| 'astro'
|
||||
| 'solid'
|
||||
| 'solid-start'
|
||||
| 'preact'
|
||||
| 'qwik'
|
||||
|
||||
export type SpriteViewerManifestUsage =
|
||||
| { framework: SpriteViewerComponentFramework; componentName: string; ssr?: boolean }
|
||||
| { framework: 'angular'; componentName: string; selector: string }
|
||||
| { framework: 'lit'; componentName: string; tagName: string; defineFunction: string }
|
||||
| { framework: 'alpine'; pluginName: string; directive: string; magic: string }
|
||||
|
||||
/** Нормализованный manifest, который может отобразить framework-neutral Viewer. */
|
||||
export type SpriteViewerManifest = {
|
||||
|
||||
Reference in New Issue
Block a user