Skip to content

feat: Migrate to Svelte 5 with proper Vite configuration and component architecture#5

Merged
jvalentini merged 6 commits into
masterfrom
feat/corporate-dystopia
Jan 2, 2026
Merged

feat: Migrate to Svelte 5 with proper Vite configuration and component architecture#5
jvalentini merged 6 commits into
masterfrom
feat/corporate-dystopia

Conversation

@jvalentini

@jvalentini jvalentini commented Jan 2, 2026

Copy link
Copy Markdown
Owner

Migration to Svelte 5 with Modern Component Architecture

This PR migrates the application from the previous implementation to Svelte 5 with proper Vite configuration and a well-structured component architecture.

Changes Made

Infrastructure & Build System

  • Added Vite configuration with proper Svelte 5 support and path aliases
  • Updated Svelte configuration for Vite integration
  • Fixed Bun dev server to use proper HTML imports for asset transformation
  • Added production build script with static asset handling

Component Architecture

  • Migrated to Svelte 5 with modern $state and $props syntax
  • Created modular component structure:
    • App.svelte - Main application component
    • VoiceInput.svelte - Speech recognition interface
    • TextInput.svelte - Text input with draft mode
    • Output.svelte - Sanitized output display
    • Settings.svelte - API key and mode configuration
    • CopyButton.svelte - Clipboard operations
    • Header.svelte - Application header
    • Tab.svelte - Navigation tabs

State Management

  • Implemented reactive state system using Svelte 5 $state
  • Added proper state persistence for API keys and user preferences
  • Created centralized state management in state.svelte.ts

Developer Experience

  • Added TypeScript support with proper type definitions
  • Updated linting configuration for Svelte 5 compatibility
  • Fixed import paths with proper $lib alias resolution
  • Added proper error handling and async state management

Testing & CI

  • Updated e2e tests for new component structure
  • Fixed test configuration for Bun runtime
  • Added proper server setup for testing environments

Technical Details

  • Framework: Svelte 5 (migrated from previous implementation)
  • Build Tool: Vite with Svelte plugin
  • Runtime: Bun (dev server and build)
  • State Management: Svelte 5 reactive state
  • Styling: CSS with custom properties for theming
  • TypeScript: Full type safety with modern syntax

Breaking Changes

  • Application now requires Svelte 5 runtime
  • Component structure has been completely refactored
  • State management API has changed to use Svelte 5 syntax

Benefits

  • Better performance with Svelte 5's improved reactivity
  • Cleaner component architecture with proper separation of concerns
  • Improved developer experience with modern tooling
  • Better maintainability with typed state management
  • Future-proof with latest Svelte ecosystem

Testing

  • All existing functionality preserved
  • Voice input, text processing, and AI mode working
  • Component interactions properly tested
  • Build process verified for production deployment

- Fix import path in main.ts to use correct $lib alias
- Add $lib path alias to vite.config.ts
- Specify svelte.config.js location in vite plugin
- Update HMR configuration for Svelte 5 (remove deprecated hot option)
- Fix TypeScript errors in test file (remove invalid mode property)
- Add Svelte components and state management
- Update dependencies and configuration files
- Add development mode detection
- In dev mode: use Bun's dev server with HMR support
- In prod mode: explicitly return 404 for /_bun/* paths
- Fixes failing e2e tests
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jan 2, 2026

Copy link
Copy Markdown

Deploying worksafe with  Cloudflare Pages  Cloudflare Pages

Latest commit: cf3ffd4
Status:⚡️  Build in progress...

View logs

- Use Bun's routes with HTML import to enable /_bun/asset/ transformation
- Remove custom fetch handler in dev mode to let Bun handle all requests
- This allows the HTML to be properly transformed with Bun asset paths
- Change from dynamic import to static import at top level
- Bun's routes requires HTMLBundle, not a Promise
- This allows proper /_bun/asset/ transformation
@jvalentini jvalentini changed the title feat: Fix speech capture for Brave browser feat: Migrate to Svelte 5 with proper Vite configuration and component architecture Jan 2, 2026
- Remove unused imports and variables from Svelte components
- Fix TypeScript unused variable warnings
- Clean up component code for better maintainability
- Ensure all linting rules pass for CI
Resolved conflicts in bun.lock by regenerating with bun install
@jvalentini
jvalentini merged commit 9f77f9a into master Jan 2, 2026
4 of 5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant