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:
2026-07-15 16:56:44 +03:00
parent e54ab4991c
commit 8b3365f957
378 changed files with 21188 additions and 650 deletions

View File

@@ -0,0 +1,33 @@
{
"name": "@svg-sprites-fixtures/angular-webpack",
"private": true,
"version": "0.0.0",
"scripts": {
"sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
"typecheck": "ngc -p tsconfig.json --noEmit",
"build": "npm run sprites && webpack --mode production",
"dev": "npm run sprites && webpack serve --mode development"
},
"dependencies": {
"@angular/common": "21.2.18",
"@angular/compiler": "21.2.18",
"@angular/core": "21.2.18",
"@angular/platform-browser": "21.2.18",
"rxjs": "7.8.2",
"tslib": "2.8.1",
"zone.js": "0.16.2"
},
"devDependencies": {
"@angular/compiler-cli": "21.2.18",
"@babel/core": "7.28.6",
"@gromlab/svg-sprites": "file:../../..",
"@ngtools/webpack": "21.2.18",
"babel-loader": "10.0.0",
"html-webpack-plugin": "5.6.6",
"raw-loader": "4.0.2",
"typescript": "5.9.3",
"webpack": "5.105.4",
"webpack-cli": "6.0.1",
"webpack-dev-server": "5.2.3"
}
}

View File

@@ -0,0 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Angular Webpack sprite fixture</title>
</head>
<body>
<app-root></app-root>
</body>
</html>

View File

@@ -0,0 +1,37 @@
import '@gromlab/svg-sprites/viewer/element'
import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'
import { bootstrapApplication } from '@angular/platform-browser'
import { IconsIcon } from './sprite'
import './type-probe'
@Component({
selector: 'app-root',
standalone: true,
imports: [IconsIcon],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<main>
<h1>Angular + Webpack</h1>
<icons-icon
data-testid="icon"
data-app="angular-webpack"
icon="check"
aria-label="Check icon"
style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
/>
<gromlab-sprite-viewer
[sources]="viewerSources"
viewer-title="Angular Webpack Viewer"
/>
</main>
`,
})
class AppComponent {
readonly viewerSources = [
() => import('./sprite/.svg-sprite/svg-sprite.manifest.js'),
]
}
bootstrapApplication(AppComponent).catch((error: unknown) => console.error(error))

View File

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

View File

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

View File

@@ -0,0 +1,6 @@
export default {
mode: 'angular@webpack',
name: 'icons',
input: '../../../../fixtures/icons/check.svg',
generatedNotice: false,
}

View File

@@ -0,0 +1,8 @@
import type { IconsIconName } from './sprite'
const validIcon: IconsIconName = 'check'
void validIcon
// @ts-expect-error generated icon names are a closed union
const invalidIcon: IconsIconName = 'missing'
void invalidIcon

View File

@@ -0,0 +1,17 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ES2022",
"moduleResolution": "bundler",
"lib": ["ES2022", "DOM"],
"strict": true,
"experimentalDecorators": true,
"useDefineForClassFields": false,
"skipLibCheck": true
},
"angularCompilerOptions": {
"strictTemplates": true
},
"files": ["src/main.ts", "src/type-probe.ts"],
"include": ["src/**/*.d.ts"]
}

View File

@@ -0,0 +1,42 @@
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { AngularWebpackPlugin } from '@ngtools/webpack'
import linkerPlugin from '@angular/compiler-cli/linker/babel'
import HtmlWebpackPlugin from 'html-webpack-plugin'
const rootDir = path.dirname(fileURLToPath(import.meta.url))
export default {
entry: path.join(rootDir, 'src/main.ts'),
output: {
path: path.join(rootDir, 'dist'),
filename: 'app.[contenthash].js',
clean: true,
assetModuleFilename: 'assets/[name].[contenthash][ext]',
},
resolve: { extensions: ['.ts', '.js'] },
module: {
rules: [
{ test: /\.ts$/, loader: '@ngtools/webpack' },
{
test: /\.[cm]?js$/,
exclude: /@babel(?:\/|\\)runtime/,
use: {
loader: 'babel-loader',
options: {
compact: false,
plugins: [linkerPlugin],
},
},
},
{ test: /\.css$/, use: 'raw-loader' },
{ test: /\.svg$/, type: 'asset/resource' },
],
},
plugins: [
new AngularWebpackPlugin({ tsconfig: path.join(rootDir, 'tsconfig.json') }),
new HtmlWebpackPlugin({ template: path.join(rootDir, 'src/index.html') }),
],
devServer: { host: '127.0.0.1', static: path.join(rootDir, 'dist') },
}