Skip to content

v2.0.0 - Complete Stack Modernization 🚀

Latest
Latest

Choose a tag to compare

View all tags
@CybotTM CybotTM released this 22 Oct 09:24
v2.0.0
395af73

Release Notes: v2.0.0 - Complete Stack Modernization

Release Date: October 22, 2025
Previous Version: v1.1.1
Breaking Changes: Yes - Major version upgrade

🚀 Overview

Version 2.0.0 represents a complete modernization of the TimeTracker UI stack, bringing it from legacy technologies (Vue 2, webpack 3, Node 14) to cutting-edge modern frameworks (Vue 3, Vite 7, Node 22 LTS).

This release includes 79% code reduction (12,397 lines removed) while maintaining all functionality and adding significant improvements to performance, security, and accessibility.

⚡ Performance Improvements

Development Experience

  • Dev server startup: 8 seconds → 250ms (32x faster!)
  • Hot Module Replacement: Slow → Instant updates
  • Build time: 22 seconds → 6 seconds (4x faster!)

Production Performance

  • Bundle optimization: Modern tree-shaking and code splitting
  • Faster runtime: Vue 3's improved reactivity system
  • Smaller bundles: Optimized chunking strategy
  • Better caching: Content-hash based asset naming

🔒 Security Enhancements

Vulnerabilities Resolved

  • ✅ All CVEs fixed: Updated from axios 0.27.2 (known vulnerabilities) to 1.12.2
  • ✅ Vue 2 ReDoS vulnerability resolved with Vue 3.5.22 upgrade
  • ✅ Zero npm audit findings (was 141 vulnerabilities)
  • ✅ All EOL packages removed (Vue 2, ESLint 4, deprecated webpack plugins)

Dependency Updates

  • All packages updated to latest stable versions
  • No deprecated dependencies
  • All actively maintained packages

💥 Breaking Changes

Build System

  • Requires Node 22+ LTS (was Node 14-16)

    • Update .nvmrc to use Node 22
    • CI/CD must use Node 22 or higher

  • Migrated to pnpm (was npm)

    • Use pnpm install instead of npm install
    • Use pnpm dev, pnpm build, etc.
    • Faster installs, better workspace support

  • webpack removed, Vite adopted

    • All webpack config files deleted (build/, config/ directories)
    • New vite.config.js for configuration
    • Different dev server behavior (HMR, proxy)

Frontend Framework

  • Vue 2 → Vue 3 - Complete API changes

    • Composition API used throughout
    • <script setup> syntax in all components
    • Filters removed (replaced with functions)
    • Global Vue instance → createApp()

  • Vuex → Pinia

    • State management completely rewritten
    • store/ directory → stores/ directory
    • Different API for accessing state/actions

  • Vue Router 3 → Vue Router 4

    • new Router() → createRouter()
    • createWebHashHistory() for hash mode

UI Framework

  • Bootstrap 4 → Bootstrap 5

    • No jQuery dependency
    • Different class names (text-right → text-end)
    • alert-* → table-* for table cells

  • bootstrap-vue removed

    • All components replaced with native Bootstrap 5
    • Different component APIs

Dependencies Removed (62 packages)

All webpack ecosystem packages:

  • webpack, webpack-dev-server, webpack-merge
  • All webpack loaders and plugins
  • extract-text-webpack-plugin
  • uglifyjs-webpack-plugin
  • copy-webpack-plugin
  • html-webpack-plugin (v2)
  • friendly-errors-webpack-plugin

All Babel 6 packages:

  • babel-core, babel-loader, babel-eslint
  • babel-preset-env, babel-preset-stage-2
  • All babel plugins

Vue 2 ecosystem:

  • bootstrap-vue
  • vue-template-compiler
  • vuex, vuex-persistedstate
  • vue-moment

Deprecated/EOL packages:

  • node-sass (replaced with sass)
  • ESLint 4 and old plugins
  • 30+ deprecated transitive dependencies

✨ New Features & Improvements

Accessibility (WCAG 2.2 AA)

  • ✅ WCAG 2.2 AA compliant login form

    • ARIA labels and descriptions
    • Screen reader support
    • Keyboard navigation
    • High contrast mode support
    • Visible focus indicators

  • ✅ Password manager support

    • autocomplete="username" attribute
    • autocomplete="current-password" attribute
    • Proper name attributes
    • Fixed input ID typo

  • ✅ Loading states

    • Spinner on login button during authentication
    • Disabled state when fields empty
    • Better user feedback

Developer Experience

  • ✅ Automated setup script: ./setup-dev.sh
  • ✅ pnpm workspace for monorepo support
  • ✅ Modern ESLint 9 flat config
  • ✅ Instant HMR with Vite
  • ✅ Better error messages from Vite

Infrastructure

  • ✅ GitHub Actions updated to latest versions

    • actions/checkout@v5
    • github/codeql-action@v4
    • docker/* actions at v6

  • ✅ Enhanced Dependabot

    • Daily npm/pnpm updates
    • PR limits configured
    • Versioning strategy set

  • ✅ Docker optimization

    • Node 22-alpine base image
    • pnpm for faster builds
    • Latest netresearch/node-webserver runtime

📦 Technology Stack (v2.0.0)

Frontend

Package Version Previous
Vue 3.5.22 2.7.16
Vue Router 4.6.3 3.6.5
Pinia 3.0.3 (Vuex 3.6.2)
Bootstrap 5.3.8 4.6.2
axios 1.12.2 0.27.2
dayjs 1.11.18 (vue-moment 4.1.0)

Build & Tooling

Package Version Previous
Vite 7.1.11 (webpack 3.12.0)
ESLint 9.38.0 4.19.1
Sass 1.93.2 1.45.0
pnpm 10.18+ (npm 6)

Runtime

Package Version Previous
Node.js 22.21.0 LTS 14.21.3

📝 Migration Guide

For Developers

1. Update Node.js:

nvm install 22
nvm use 22

2. Install pnpm:

corepack enable

3. Clean install:

rm -rf node_modules package-lock.json
pnpm install

4. Update scripts:

# Old
npm run dev
npm run build

# New
pnpm dev
pnpm build

5. Environment variables:

# Required for development
TIMETRACKER_URL=https://your-backend.com pnpm dev

For CI/CD

Update GitHub Actions:

# Use Node 22
- uses: actions/setup-node@v4
  with:
    node-version: '22'

# Enable pnpm
- run: corepack enable

# Install with pnpm
- run: pnpm install --frozen-lockfile

Update Docker builds:

  • Base image: node:22-alpine
  • Use corepack for pnpm
  • Run pnpm build instead of npm run build

For Deployments

Docker:

# Build (uses pnpm internally)
docker build -t timetracker-ui .

# Run (same as before)
docker run -d -p 8080:8080 \
  -e TIMETRACKER_URL=https://your-backend.com \
  timetracker-ui

Environment:

  • Node 22+ required
  • TIMETRACKER_URL must be set
  • config.json still needed in static/

🐛 Bug Fixes

Authentication

  • Fixed login flow to load user data after authentication
  • Fixed blank page after successful login
  • Improved error handling and logging
  • Added loading states

API Communication

  • Fixed baseURL preservation in request retries
  • Added proxy error handling (no more crashes)
  • Better 502 error messages when backend unavailable

Build System

  • Sass deprecation warnings suppressed
  • ESLint template literal bugs fixed
  • Docker build reproducibility ensured
  • Proper config.json handling in Vite

UI

  • Restored color coding for time tracking (green/yellow/red)
  • Fixed Bootstrap 5 table classes
  • Proper form accessibility
  • Fixed password input ID typo

📊 Code Statistics

53 files changed
├── Deleted: 25 files (webpack/babel configs)
├── Added: 13 files (Vite, Pinia, composables)
├── Modified: 15 files (components, stores)
│
├── Lines removed: 15,698
├── Lines added: 3,301
└── Net reduction: -12,397 lines (79% smaller!)

Files Deleted

  • build/ directory (7 webpack config files)
  • config/ directory (3 environment files)
  • .babelrc, .eslintrc.js, .postcssrc.js
  • src/store/ (Vuex modules)
  • package-lock.json (npm)

Files Added

  • vite.config.js (Vite configuration)
  • eslint.config.js (ESLint 9 flat config)
  • .pnpmrc (pnpm configuration)
  • pnpm-workspace.yaml (workspace config)
  • pnpm-lock.yaml (lockfile)
  • src/stores/ (6 Pinia stores)
  • src/composables/useDayjs.js

⚠️ Known Issues & Limitations

None!

All known issues from v1.1.1 have been resolved:

  • ✅ Security vulnerabilities fixed
  • ✅ Deprecated packages removed
  • ✅ EOL frameworks updated
  • ✅ Build warnings eliminated

🙏 Acknowledgments

This major version represents a complete rewrite of the build system and framework layer while preserving all user-facing functionality. The migration ensures long-term maintainability and sets the foundation for future enhancements.

📚 Additional Resources

🔗 Links

Full Changelog: v1.1.1...v2.0.0

Assets 2
Loading