feat: standalone mode

2026-07-22 04:40:17 +03:00 · 2026-07-14 08:34:45 +03:00
parent 3dd385bfda
commit c596f9f1c3
64 changed files with 1341 additions and 2755 deletions
--- a/integration/apps/standalone-webpack/index.html
+++ b/integration/apps/standalone-webpack/index.html
@@ -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>Standalone Webpack sprite fixture</title>
+  </head>
+  <body>
+    <main id="app"></main>
+  </body>
+</html>
--- a/integration/apps/standalone-webpack/package.json
+++ b/integration/apps/standalone-webpack/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@svg-sprites-fixtures/standalone-webpack",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "sprites": "svg-sprites src/sprite/svg-sprite.config.ts",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run sprites && webpack --mode production",
+    "dev": "npm run sprites && webpack serve --mode development"
+  },
+  "devDependencies": {
+    "@gromlab/svg-sprites": "file:../../..",
+    "html-webpack-plugin": "5.6.7",
+    "ts-loader": "9.6.2",
+    "typescript": "6.0.2",
+    "webpack": "5.108.4",
+    "webpack-cli": "7.2.1",
+    "webpack-dev-server": "5.2.2"
+  }
+}
--- a/integration/apps/standalone-webpack/src/main.ts
+++ b/integration/apps/standalone-webpack/src/main.ts
@@ -0,0 +1,20 @@
+import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
+import { getIconsIconHref, iconsSpriteUrl } from './sprite'
+
+const check = spriteManifest.icons.find((icon) => icon.name === 'check')
+if (!check || spriteManifest.spriteUrl !== iconsSpriteUrl) {
+  throw new Error('Generated Webpack facade and manifest disagree.')
+}
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+  <h1>Standalone + Webpack</h1>
+  <svg
+    data-testid="icon"
+    data-app="standalone-webpack"
+    viewBox="${check.viewBox ?? '0 0 24 24'}"
+    aria-label="Check icon"
+    style="width:64px;height:64px;color:#16a34a;--icon-color-1:#16a34a"
+  >
+    <use href="${getIconsIconHref('check')}"></use>
+  </svg>
+`
--- a/integration/apps/standalone-webpack/src/sprite/.gitignore
+++ b/integration/apps/standalone-webpack/src/sprite/.gitignore
@@ -0,0 +1,2 @@
+# @generated by @gromlab/svg-sprites. Do not edit.
+/.svg-sprite/
--- a/integration/apps/standalone-webpack/src/sprite/index.ts
+++ b/integration/apps/standalone-webpack/src/sprite/index.ts
@@ -0,0 +1,7 @@
+export {
+  getIconsIconHref,
+  iconsIconIds,
+  iconsIconNames,
+  iconsSpriteUrl,
+} from './.svg-sprite/index.js'
+export type { IconsIconName } from './.svg-sprite/index.js'
--- a/integration/apps/standalone-webpack/src/sprite/svg-sprite.config.ts
+++ b/integration/apps/standalone-webpack/src/sprite/svg-sprite.config.ts
@@ -0,0 +1,8 @@
+import { defineSpriteConfig } from '@gromlab/svg-sprites'
+
+export default defineSpriteConfig({
+  mode: 'standalone@webpack',
+  name: 'icons',
+  inputFiles: ['../../../../fixtures/icons/check.svg'],
+  generatedNotice: false,
+})
--- a/integration/apps/standalone-webpack/tsconfig.json
+++ b/integration/apps/standalone-webpack/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM"],
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}
--- a/integration/apps/standalone-webpack/webpack.config.js
+++ b/integration/apps/standalone-webpack/webpack.config.js
@@ -0,0 +1,31 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+
+const root = path.dirname(fileURLToPath(import.meta.url))
+
+export default {
+  entry: './src/main.ts',
+  output: {
+    path: path.join(root, 'dist'),
+    filename: 'assets/app.[contenthash].js',
+    assetModuleFilename: 'assets/[name].[contenthash][ext]',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: 'ts-loader',
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({ template: './index.html' }),
+  ],
+}