john-okeefe
e45b893eb3
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)
29 lines
1.1 KiB
JSON
29 lines
1.1 KiB
JSON
{
|
|
"name": "bookhoard",
|
|
"version": "1.0.0",
|
|
"description": "A self-hosted ebook management system",
|
|
"scripts": {
|
|
"build:css": "tailwindcss -i ./web/static/input.css -o ./web/static/style.css --watch",
|
|
"build:css:prod": "tailwindcss -i ./web/static/input.css -o ./web/static/style.css --minify",
|
|
"build:ts": "esbuild web/src/main.ts --bundle --outfile=web/static/main.js --sourcemap --target=es2020 --minify",
|
|
"build:ts:dev": "esbuild web/src/main.ts --bundle --outfile=web/static/main.js --sourcemap --target=es2020",
|
|
"build:ts:watch": "esbuild web/src/main.ts --bundle --outfile=web/static/main.js --sourcemap --target=es2020 --watch",
|
|
"build": "npm run build:ts && npm run build:css:prod",
|
|
"dev": "npm run build:ts:dev && npm run build:css"
|
|
},
|
|
"dependencies": {
|
|
"alpinejs": "^3.15.8",
|
|
"lunr": "^2.3.9",
|
|
"htmx.org": "^2.0.8",
|
|
"highlight.js": "^11.11.1"
|
|
},
|
|
"devDependencies": {
|
|
"@tailwindcss/forms": "^0.5.11",
|
|
"@tailwindcss/typography": "^0.5.19",
|
|
"autoprefixer": "^10.4.27",
|
|
"tailwindcss": "^3.4.19",
|
|
"typescript": "^5.9.3",
|
|
"esbuild": "^0.27.3"
|
|
}
|
|
}
|