From 4ff9aa2dd83b15cd47d31ba92c21a4c8dde9fec4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Levi=20Ara=C3=BAjo?= <levi.araujo@shiftinc.com.br>
Date: Sun, 11 Oct 2026 18:32:26 -0300
Subject: [PATCH] feat(web): make version dynamic from package.json

- Add generate-version.ts script to read version from root package.json
- Create version.ts at build time via predev/prebuild hooks
- Configure @/ alias in tsconfig and vite.config
- Update Hero and Header components to use dynamic VERSION import
- Version now syncs automatically with package.json on build
---
 web/package.json                    | 3 ++-
 web/scripts/generate-version.ts     | 6 ++++++
 web/src/components/Header/index.tsx | 3 ++-
 web/src/components/Hero/index.tsx   | 3 ++-
 web/src/version.ts                  | 1 +
 web/tsconfig.json                   | 4 +++-
 web/vite.config.ts                  | 5 +++++
 7 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 web/scripts/generate-version.ts
 create mode 100644 web/src/version.ts

diff --git a/web/package.json b/web/package.json
index c344a90..46c6b51 100644
--- a/web/package.json
+++ b/web/package.json
@@ -6,7 +6,8 @@
   "description": "Documentation site for Funcio, with runnable examples, deployed to GitHub Pages.",
   "scripts": {
     "dev": "vite",
-    "prebuild": "npm --prefix .. run build",
+    "predev": "tsx scripts/generate-version.ts",
+    "prebuild": "tsx scripts/generate-version.ts && npm --prefix .. run build",
     "pretypecheck": "npm --prefix .. run build",
     "build": "npm run verify && tsc --noEmit -p tsconfig.json && npm run lint && vite build",
     "postbuild": "tsx scripts/generate-sitemap.ts && tsx scripts/update-version.ts",
diff --git a/web/scripts/generate-version.ts b/web/scripts/generate-version.ts
new file mode 100644
index 0000000..c43f1ac
--- /dev/null
+++ b/web/scripts/generate-version.ts
@@ -0,0 +1,6 @@
+import { readFileSync, writeFileSync } from 'fs'
+import { resolve } from 'path'
+
+const pkg = JSON.parse(readFileSync(resolve('../package.json'), 'utf-8'))
+writeFileSync(resolve('src/version.ts'), `export const VERSION = "${pkg.version}"`)
+console.log(`Generated version.ts with ${pkg.version}`)
\ No newline at end of file
diff --git a/web/src/components/Header/index.tsx b/web/src/components/Header/index.tsx
index e2d820d..76a71e8 100644
--- a/web/src/components/Header/index.tsx
+++ b/web/src/components/Header/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useTheme } from '../../hooks/useTheme'
+import { VERSION } from '@/version'
 
 import { Button } from '../Button'
 import { Logo } from '../Logo'
@@ -29,7 +30,7 @@ export const Header = () => {
         <a className={styles.brand} href="#top">
           <Logo size={24} />
           <span>Funcio</span>
-          <span className={styles.version}>0.0.32</span>
+          <span className={styles.version}>{VERSION}</span>
         </a>
 
         <nav className={`${styles.nav} ${open ? styles.open : ''}`} aria-label="Sections">
diff --git a/web/src/components/Hero/index.tsx b/web/src/components/Hero/index.tsx
index 69ba027..ab681a4 100644
--- a/web/src/components/Hero/index.tsx
+++ b/web/src/components/Hero/index.tsx
@@ -1,4 +1,5 @@
 import { heroExample } from '../../content'
+import { VERSION } from '@/version'
 
 import { Button } from '../Button'
 import { Install } from '../Install'
@@ -11,7 +12,7 @@ export const Hero = () => (
 
     <p className={styles.eyebrow}>
       <span className={styles.dot} aria-hidden="true" />
-      v0.0.32 · MIT · 0 dependencies
+      v{VERSION} · MIT · 0 dependencies
     </p>
 
     <h1 className={styles.title}>
diff --git a/web/src/version.ts b/web/src/version.ts
new file mode 100644
index 0000000..ecae2f7
--- /dev/null
+++ b/web/src/version.ts
@@ -0,0 +1 @@
+export const VERSION = "0.1.0"
\ No newline at end of file
diff --git a/web/tsconfig.json b/web/tsconfig.json
index e0a32ec..7b8f20f 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "baseUrl": ".",
     "lib": ["ES2021", "DOM", "DOM.Iterable", "WebWorker"],
     "module": "ESNext",
     "moduleResolution": "Bundler",
@@ -21,7 +22,8 @@
     "noEmit": true,
 
     "paths": {
-      "funcio": ["../lib/main.d.ts"]
+      "funcio": ["../lib/main.d.ts"],
+      "@/*": ["src/*"]
     }
   },
   "include": ["src", "scripts", "vite.config.ts"]
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 80de1ed..27a3793 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -19,6 +19,11 @@ const cssModule = (): Plugin => ({
 export default defineConfig({
   base: process.env.BASE_PATH ?? '/funcio/',
   plugins: [cssModule(), react()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
   build: {
     outDir: 'dist',
     target: 'es2020',