feat: Новый кросс платформенный вьювер

integration/apps/next-app-turbopack/app/page.tsx

@@ -1,4 +1,5 @@
 import { IconsIcon } from '../src/sprite'
+import { AppSpriteViewer } from './sprite-viewer'
 
 export default function Page() {
   return (
@@ -13,6 +14,7 @@ export default function Page() {
         height={64}
         style={{ '--icon-color-1': '#16a34a' }}
       />
+      <AppSpriteViewer />
     </main>
   )
 }

integration/apps/next-app-turbopack/app/sprite-viewer.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { SpriteViewer } from '@gromlab/svg-sprites/react'
+
+const viewerSources = [
+  () => import('../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
+] as const
+
+export function AppSpriteViewer() {
+  return <SpriteViewer sources={viewerSources} title="Next App Turbopack Viewer" style={{ marginTop: 32 }} />
+}

integration/apps/next-app-turbopack/next.config.mjs

@@ -1,10 +1,10 @@
 import path from 'node:path'
 
-const integrationRoot = path.resolve(import.meta.dirname, '../..')
+const repositoryRoot = path.resolve(import.meta.dirname, '../../..')
 
 export default {
-  outputFileTracingRoot: integrationRoot,
+  outputFileTracingRoot: repositoryRoot,
   turbopack: {
-    root: integrationRoot,
+    root: repositoryRoot,
   },
 }

integration/apps/next-app-webpack/app/page.tsx

@@ -1,4 +1,5 @@
 import { IconsIcon } from '../src/sprite'
+import { AppSpriteViewer } from './sprite-viewer'
 
 export default function Page() {
   return (
@@ -13,6 +14,7 @@ export default function Page() {
         height={64}
         style={{ '--icon-color-1': '#16a34a' }}
       />
+      <AppSpriteViewer />
     </main>
   )
 }

integration/apps/next-app-webpack/app/sprite-viewer.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { SpriteViewer } from '@gromlab/svg-sprites/react'
+
+const viewerSources = [
+  () => import('../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
+] as const
+
+export function AppSpriteViewer() {
+  return <SpriteViewer sources={viewerSources} title="Next App Webpack Viewer" style={{ marginTop: 32 }} />
+}

integration/apps/next-app-webpack/next.config.mjs

@@ -1,10 +1,10 @@
 import path from 'node:path'
 
-const integrationRoot = path.resolve(import.meta.dirname, '../..')
+const repositoryRoot = path.resolve(import.meta.dirname, '../../..')
 
 export default {
-  outputFileTracingRoot: integrationRoot,
+  outputFileTracingRoot: repositoryRoot,
   turbopack: {
-    root: integrationRoot,
+    root: repositoryRoot,
   },
 }

integration/apps/next-pages-turbopack/next.config.mjs

@@ -1,10 +1,10 @@
 import path from 'node:path'
 
-const integrationRoot = path.resolve(import.meta.dirname, '../..')
+const repositoryRoot = path.resolve(import.meta.dirname, '../../..')
 
 export default {
-  outputFileTracingRoot: integrationRoot,
+  outputFileTracingRoot: repositoryRoot,
   turbopack: {
-    root: integrationRoot,
+    root: repositoryRoot,
   },
 }

integration/apps/next-pages-turbopack/pages/index.tsx

@@ -1,5 +1,10 @@
+import { SpriteViewer } from '@gromlab/svg-sprites/react'
 import { IconsIcon } from '../src/sprite'
 
+const viewerSources = [
+  () => import('../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
+] as const
+
 export default function Page() {
   return (
     <main>
@@ -13,6 +18,7 @@ export default function Page() {
         height={64}
         style={{ '--icon-color-1': '#16a34a' }}
       />
+      <SpriteViewer sources={viewerSources} title="Next Pages Turbopack Viewer" style={{ marginTop: 32 }} />
     </main>
   )
 }

integration/apps/next-pages-webpack/next.config.mjs

@@ -1,10 +1,16 @@
 import path from 'node:path'
 
+const repositoryRoot = path.resolve(import.meta.dirname, '../../..')
 const integrationRoot = path.resolve(import.meta.dirname, '../..')
 
 export default {
-  outputFileTracingRoot: integrationRoot,
+  outputFileTracingRoot: repositoryRoot,
   turbopack: {
-    root: integrationRoot,
+    root: repositoryRoot,
+  },
+  webpack(config) {
+    config.resolve.alias.react = path.resolve(integrationRoot, 'node_modules/react')
+    config.resolve.alias['react-dom'] = path.resolve(integrationRoot, 'node_modules/react-dom')
+    return config
   },
 }

integration/apps/next-pages-webpack/pages/index.tsx

@@ -1,5 +1,10 @@
+import { SpriteViewer } from '@gromlab/svg-sprites/react'
 import { IconsIcon } from '../src/sprite'
 
+const viewerSources = [
+  () => import('../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
+] as const
+
 export default function Page() {
   return (
     <main>
@@ -13,6 +18,7 @@ export default function Page() {
         height={64}
         style={{ '--icon-color-1': '#16a34a' }}
       />
+      <SpriteViewer sources={viewerSources} title="Next Pages Webpack Viewer" style={{ marginTop: 32 }} />
     </main>
   )
 }

integration/apps/react-vite/src/main.tsx

@@ -1,9 +1,14 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { SpriteViewer } from '@gromlab/svg-sprites/react'
 
 import { IconsIcon } from './sprite'
 import './style.css'
 
+const viewerSources = [
+  () => import('./sprite/.svg-sprite/svg-sprite.manifest.js'),
+] as const
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <main>
@@ -17,6 +22,7 @@ createRoot(document.getElementById('root')!).render(
         height={64}
         style={{ '--icon-color-1': '#16a34a' }}
       />
+      <SpriteViewer sources={viewerSources} title="React Vite Viewer" style={{ marginTop: 32 }} />
     </main>
   </StrictMode>,
 )

integration/apps/react-vite/vite.config.ts

@@ -3,4 +3,7 @@ import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+  },
 })

integration/apps/react-webpack/src/main.tsx

@@ -1,9 +1,14 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { SpriteViewer } from '@gromlab/svg-sprites/react'
 
 import { IconsIcon } from './sprite'
 import './style.css'
 
+const viewerSources = [
+  () => import('./sprite/.svg-sprite/svg-sprite.manifest.js'),
+] as const
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <main>
@@ -17,6 +22,7 @@ createRoot(document.getElementById('root')!).render(
         height={64}
         style={{ '--icon-color-1': '#16a34a' }}
       />
+      <SpriteViewer sources={viewerSources} title="React Webpack Viewer" style={{ marginTop: 32 }} />
     </main>
   </StrictMode>,
 )

integration/apps/react-webpack/webpack.config.js

@@ -15,6 +15,10 @@ export default {
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
+    alias: {
+      react: path.resolve(root, '../../node_modules/react'),
+      'react-dom': path.resolve(root, '../../node_modules/react-dom'),
+    },
   },
   module: {
     rules: [

integration/apps/standalone-vite/src/main.ts

@@ -1,3 +1,5 @@
+import '@gromlab/svg-sprites/viewer/element'
+import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
 import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
 import { getIconsIconHref, iconsSpriteUrl } from './sprite'
 import './style.css'
@@ -17,4 +19,9 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   >
     <use href="${getIconsIconHref('check')}"></use>
   </svg>
+  <gromlab-sprite-viewer></gromlab-sprite-viewer>
 `
+
+const viewer = document.querySelector<SpriteViewerElement>('gromlab-sprite-viewer')!
+viewer.viewerTitle = 'Standalone Vite Viewer'
+viewer.sources = [spriteManifest]

integration/apps/standalone-webpack/src/main.ts

@@ -1,3 +1,5 @@
+import '@gromlab/svg-sprites/viewer/element'
+import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
 import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
 import { getIconsIconHref, iconsSpriteUrl } from './sprite'
 
@@ -17,4 +19,9 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   >
     <use href="${getIconsIconHref('check')}"></use>
   </svg>
+  <gromlab-sprite-viewer></gromlab-sprite-viewer>
 `
+
+const viewer = document.querySelector<SpriteViewerElement>('gromlab-sprite-viewer')!
+viewer.viewerTitle = 'Standalone Webpack Viewer'
+viewer.sources = [spriteManifest]

integration/apps/standalone/build.mjs

@@ -3,6 +3,10 @@ import fs from 'node:fs'
 fs.rmSync(new URL('./dist/', import.meta.url), { recursive: true, force: true })
 fs.mkdirSync(new URL('./dist/app-icons/', import.meta.url), { recursive: true })
 fs.copyFileSync(new URL('./index.html', import.meta.url), new URL('./dist/index.html', import.meta.url))
+fs.copyFileSync(
+  new URL('../../../dist/viewer-element.js', import.meta.url),
+  new URL('./dist/viewer-element.js', import.meta.url),
+)
 fs.copyFileSync(
   new URL('./src/sprite/.svg-sprite/sprite.svg', import.meta.url),
   new URL('./dist/app-icons/sprite.svg', import.meta.url),

integration/apps/standalone/index.html

@@ -7,6 +7,7 @@
     <style>
       body { margin: 0; padding: 40px; font-family: system-ui, sans-serif; }
       [data-testid="icon"] { width: 64px; height: 64px; color: #16a34a; --icon-color-1: #16a34a; }
+      gromlab-sprite-viewer { margin-top: 32px; }
     </style>
   </head>
   <body>
@@ -15,6 +16,12 @@
       <svg data-testid="icon" data-app="standalone" viewBox="0 0 24 24" aria-label="Check icon">
         <use href="/app-icons/sprite.svg#check"></use>
       </svg>
+      <gromlab-sprite-viewer
+        viewer-title="Standalone Viewer"
+        manifest-url="/app-icons/manifest.json"
+        sprite-url="/app-icons/sprite.svg"
+      ></gromlab-sprite-viewer>
     </main>
+    <script type="module" src="/viewer-element.js"></script>
   </body>
 </html>