refactor: update deps and remove single-file bundling

- update vite to 8.0.8, typescript to 6.0.2, and minor dependency patches
- replace vite-plugin-singlefile with prettier plugins for formatting
- remove custom SVG URL replacement plugin
- adjust tsconfig paths to use relative "./src/*" alias
- refactor UI components to use array syntax for element children

BREAKING CHANGE: Removal of vite-plugin-singlefile changes output from inline single HTML file to standard bundled assets. Users relying on the single-file output will need to adjust their deployment workflow.

Author: crashmax-dev

package.json

@@ -11,15 +11,16 @@
   },
   "devDependencies": {
     "@crashmax/prettier-config": "5.0.2",
-    "@types/node": "22.7.5",
-    "sass-embedded": "1.79.5",
-    "typescript": "5.6.3",
-    "vite": "5.4.9",
-    "vite-plugin-singlefile": "2.0.2"
+    "@ianvs/prettier-plugin-sort-imports": "4.7.1",
+    "@types/node": "22.19.17",
+    "prettier-plugin-multiline-arrays": "^4.1.5",
+    "sass-embedded": "1.99.0",
+    "typescript": "6.0.2",
+    "vite": "8.0.8"
   },
   "dependencies": {
-    "@zero-dependency/dom": "1.8.4",
+    "@zero-dependency/dom": "1.8.5",
     "@zero-dependency/storage": "1.3.4",
-    "@zero-dependency/utils": "1.7.7"
+    "@zero-dependency/utils": "1.7.8"
   }
 }

pnpm-lock.yaml

@@ -1,8 +1,6 @@
 import { el } from '@zero-dependency/dom'
 
-export const credits = el(
-  'div',
-  { className: 'credits' },
+export const credits = el('div', { className: 'credits' }, [
   'Сделано с',
   el('span', { className: 'heart' }, '❤️'),
   'от',
@@ -23,4 +21,4 @@ export const credits = el(
     },
     'VS_Code'
   )
-)
+])

src/credits.ts

@@ -31,14 +31,10 @@ const resetButton = el(
   'Сбросить прогресс'
 )
 
-export const header = el(
-  'header',
-  { className: 'header' },
+export const header = el('header', { className: 'header' }, [
   el('h1', { className: 'title' }, 'SFX Game Quiz'),
-  el(
-    'div',
-    { className: 'controls' },
-    el('label', { className: 'volume-label' }, 'Громкость', volumeRange),
+  el('div', { className: 'controls' }, [
+    el('label', { className: 'volume-label' }, ['Громкость', volumeRange]),
     resetButton
-  )
-)
+  ])
+])

src/header.ts

@@ -19,19 +19,26 @@ export function render() {
 
   for (const [index, game] of Object.entries(GAMES)) {
     const gameIndex = Number(index)
-    const gameItem = el('div', { className: 'grid-item' })
+    const gameItem = el('label', {
+      htmlFor: `game-${gameIndex}`,
+      className: 'grid-item'
+    })
 
     const buttonIcon = el('img', { src: PlayIcon })
     const buttonPlay = el(
       'button',
       {
         className: 'play-button',
-        onclick: () => audioPlayer.play(buttonIcon, game)
+        onclick: () => {
+          gameItem.focus()
+          audioPlayer.play(buttonIcon, game)
+        }
       },
       buttonIcon
     )
 
     const input = el('input', {
+      id: `game-${gameIndex}`,
       className: 'input',
       placeholder: `Игра #${gameIndex + 1}`,
       oninput: (event) => {

src/render.ts

@@ -12,9 +12,8 @@
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
-    "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"],
+      "@/*": ["./src/*"],
     },
 
     /* Linting */

tsconfig.json

@@ -1,16 +1,10 @@
 import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vite'
-import { viteSingleFile } from 'vite-plugin-singlefile'
-import type { Plugin } from 'vite'
 
 export default defineConfig({
   define: {
     __BUILD_DATE__: JSON.stringify(new Date().toISOString())
   },
-  plugins: [
-    viteSingleFile(),
-    replaceSvgUrl()
-  ],
   build: {
     target: 'esnext',
     minify: true,
@@ -22,25 +16,3 @@ export default defineConfig({
     }
   }
 })
-
-function replaceSvgUrl(): Plugin {
-  const svgUrl = 'http://www.w3.org/2000/svg'
-  const svgUrlRegexp = new RegExp(svgUrl, 'g')
-  const svgUrlBase64 = btoa(svgUrl)
-  const svgUrlVariable = `const __SVG_URL__ = atob('${svgUrlBase64}');`
-
-  return {
-    name: 'vite:replace-svg-url',
-    apply: 'build',
-    generateBundle(_, bundle) {
-      for (const bundleIndex in bundle) {
-        const file = bundle[bundleIndex]
-        if (file.type === 'chunk') {
-          file.code =
-            svgUrlVariable +
-            file.code.replaceAll(svgUrlRegexp, `"+__SVG_URL__+"`)
-        }
-      }
-    }
-  }
-}