feat: add Alpine.js framework and update build configuration
Add Alpine.js reactive framework for client-side state management, replacing (window as any) pattern with modern component-based architecture. Build configuration changes: - package.json: Update build scripts to use main.ts as entry point - Change from web/src/*.ts glob to web/src/main.ts - Update all build:ts scripts to use --outfile instead of --outdir - Add build and dev scripts for complete build process - Build now produces single main.js bundle (~120-150KB minified) Alpine.js setup: - web/src/alpine.ts: Create Alpine initialization module - Extend Window interface with Alpine type declaration - Initialize Alpine and attach to window for DevTools - Re-export Alpine for other modules to register globals/components Frontend module updates: - web/src/main.ts: Import alpine.ts last to initialize framework - web/src/toast.ts: Add Alpine import (ready for migration to Alpine.global()) Architecture: - Alpine.js for client-side state (modals, dropdowns, theme switching) - HTMX for server calls (existing pattern, unchanged) - Hybrid approach: Alpine reactive components + HTMX form submissions Next steps (see esbuild-setup.md for detailed guide): - Migrate TypeScript files from (window as any) to Alpine.global() - Update 27 templates to use @click instead of onclick - Add x-data/x-show for stateful UI components Note: web/src/docs.ts has pending changes with Lunr imports that need separate handling (data files don't exist yet - backend API search planned, see DOCS_SEARCH_IMPLEMENTATION.md)
This commit is contained in:
@@ -22,3 +22,4 @@ import "./theme";
|
||||
import "./toast";
|
||||
import "./woodPanelingInit";
|
||||
import "./woodPaneling";
|
||||
import "./alpine";
|
||||
|
||||
Reference in New Issue
Block a user