feat: complete code cleanup and create feature parity plan
Major Architecture Improvements: - Separate JavaScript library (lib/) with proper build system - Go CLI with embedded library using go:embed - Hot reload development with Air integration - Library + CLI build pipeline with npm run build Code Cleanup: - Remove obsolete assets (insertr-cli/assets/editor/) - Clean up package.json metadata and dependencies - Update .gitignore for new architecture - Remove unused 'marked' dependency New Documentation: - Add comprehensive TODO.md with feature gap analysis - Document critical gaps between prototype and current library - Create phased implementation plan for feature parity - Update DEVELOPMENT.md with hot reload workflow - Add LIBRARY.md documenting new architecture Hot Reload System: - Air watches both Go CLI and JavaScript library - Library changes trigger: rebuild → copy → CLI rebuild → serve - Seamless development experience across full stack Next Steps: - Current library is basic proof-of-concept (prompt() editing) - Archived prototype has production-ready features - Phase 1 focuses on professional forms and authentication - Phase 2 adds validation and content persistence
This commit is contained in:
133
DEVELOPMENT.md
133
DEVELOPMENT.md
@@ -2,30 +2,52 @@
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Full-Stack Development (Recommended)
|
||||
1. **Install dependencies**:
|
||||
```bash
|
||||
npm install
|
||||
npm install # Root project dependencies
|
||||
cd lib && npm install # Library dependencies
|
||||
```
|
||||
|
||||
2. **Start development server**:
|
||||
2. **Start hot reload development**:
|
||||
```bash
|
||||
npm run dev
|
||||
cd insertr-cli && air # Starts server with library hot reload
|
||||
```
|
||||
This will start live-server on http://localhost:3000 and automatically open the demo site.
|
||||
- Watches both Go CLI changes AND JavaScript library changes
|
||||
- Automatically rebuilds library → CLI → serves enhanced content
|
||||
- Visit http://localhost:3000 to see results
|
||||
|
||||
3. **Alternative commands**:
|
||||
```bash
|
||||
npm run dev:about # Open about page directly
|
||||
npm run serve # Alias for npm run dev
|
||||
```
|
||||
### Library-Only Development
|
||||
```bash
|
||||
cd lib && npm run watch # Just develop the JavaScript library
|
||||
```
|
||||
|
||||
### Legacy Frontend Development
|
||||
```bash
|
||||
npm run dev # Legacy live-server (demo-site only)
|
||||
```
|
||||
|
||||
## Development Workflow
|
||||
|
||||
### Frontend Development (Current Phase)
|
||||
### Hot Reload Development (Current Phase)
|
||||
|
||||
**🔥 NEW**: Full-stack hot reload with Air integration!
|
||||
|
||||
- **Library Source**: `lib/src/` - Independent JavaScript library
|
||||
- **CLI Integration**: `insertr-cli/` - Go CLI with embedded library
|
||||
- **Demo Site**: `demo-site/` - Test website for enhancement
|
||||
- **Automatic Rebuilds**: Changes to JS library trigger full rebuild cycle
|
||||
|
||||
#### How Hot Reload Works:
|
||||
1. Edit JavaScript in `lib/src/`
|
||||
2. Air detects changes → Rebuilds library → Copies to CLI → Rebuilds CLI
|
||||
3. Enhanced development server serves updated content
|
||||
4. Manual browser refresh shows changes
|
||||
|
||||
### Legacy Frontend Development
|
||||
|
||||
- **Demo Site**: `demo-site/` contains the prototype website
|
||||
- **Core Library**: `demo-site/insertr/insertr.js` - the main Insertr library
|
||||
- **Styling**: `demo-site/insertr/insertr.css` - edit interface styles
|
||||
- **Core Library**: `demo-site/insertr/insertr.js` - the old prototype library
|
||||
- **Mock API**: `demo-site/mock-api/content.json` - sample backend data structure
|
||||
|
||||
### Testing the Three User Types
|
||||
@@ -36,9 +58,15 @@
|
||||
|
||||
### Making Changes
|
||||
|
||||
#### Modern Development (lib/ + insertr-cli/)
|
||||
- **Library Changes**: Edit `lib/src/**/*.js` → Air automatically rebuilds everything
|
||||
- **CLI Changes**: Edit Go files in `insertr-cli/` → Air rebuilds and restarts server
|
||||
- **Demo Content**: Edit `demo-site/*.html` → Air serves enhanced versions
|
||||
- **Hot Reload**: Changes trigger full rebuild cycle (library → CLI → enhanced content)
|
||||
|
||||
#### Legacy Development (demo-site/)
|
||||
- **Live Reload**: The server automatically refreshes when you save changes
|
||||
- **JavaScript**: Edit `demo-site/insertr/insertr.js` to modify core functionality
|
||||
- **Styling**: Edit `demo-site/insertr/insertr.css` for UI changes
|
||||
- **JavaScript**: Edit `demo-site/insertr/insertr.js` for prototype functionality
|
||||
- **Content**: Edit HTML files to test different content structures
|
||||
|
||||
### Adding New Features
|
||||
@@ -51,40 +79,67 @@
|
||||
|
||||
```
|
||||
insertr/
|
||||
├── INITIAL.md # Project requirements and research
|
||||
├── DEVELOPMENT.md # This file
|
||||
├── package.json # Node.js project configuration
|
||||
├── .gitignore # Git ignore rules
|
||||
├── LIBRARY.md # Library architecture documentation
|
||||
├── package.json # Root project configuration
|
||||
│
|
||||
├── demo-site/ # Frontend prototype
|
||||
├── lib/ # 🆕 Independent JavaScript Library
|
||||
│ ├── src/
|
||||
│ │ ├── core/
|
||||
│ │ │ ├── insertr.js # Core library functionality
|
||||
│ │ │ ├── editor.js # Visual editing interface
|
||||
│ │ │ └── api-client.js # Content API client
|
||||
│ │ └── index.js # Library entry point
|
||||
│ ├── dist/
|
||||
│ │ ├── insertr.js # Built library (development)
|
||||
│ │ └── insertr.min.js # Built library (production)
|
||||
│ ├── package.json # Library dependencies
|
||||
│ └── rollup.config.js # Build configuration
|
||||
│
|
||||
├── insertr-cli/ # 🆕 Go CLI with Embedded Library
|
||||
│ ├── pkg/content/
|
||||
│ │ ├── assets/ # Embedded library files (auto-copied)
|
||||
│ │ ├── library.go # Go embed declarations
|
||||
│ │ ├── enhancer.go # HTML enhancement orchestrator
|
||||
│ │ ├── injector.go # Content injection logic
|
||||
│ │ └── ...
|
||||
│ ├── scripts/
|
||||
│ │ └── rebuild-library.sh # Air helper script
|
||||
│ ├── .air.toml # Hot reload configuration
|
||||
│ └── insertr # Built CLI executable
|
||||
│
|
||||
├── demo-site/ # Test website for enhancement
|
||||
│ ├── index.html # Demo homepage
|
||||
│ ├── about.html # Demo about page
|
||||
│ ├── README.md # Demo usage instructions
|
||||
│ │
|
||||
│ ├── assets/ # Demo site assets
|
||||
│ │ └── style.css # Demo site styling
|
||||
│ │
|
||||
│ ├── insertr/ # Core Insertr library
|
||||
│ │ ├── insertr.js # Main library file
|
||||
│ │ ├── insertr.css # Edit interface styles
|
||||
│ │ └── components/ # Future: reusable edit components
|
||||
│ │
|
||||
│ └── mock-api/ # Backend planning
|
||||
│ └── content.json # Sample data structure
|
||||
│ └── assets/style.css # Demo site styling
|
||||
│
|
||||
└── backend/ # Future: Go backend
|
||||
├── main.go # Future: HTTP server
|
||||
├── api/ # Future: REST endpoints
|
||||
└── storage/ # Future: file-based storage
|
||||
└── scripts/
|
||||
└── build.js # Integrated build script
|
||||
```
|
||||
|
||||
## Development Scripts
|
||||
|
||||
- `npm run dev` - Start development server with live reload
|
||||
- `npm run dev:about` - Start server opening about page
|
||||
- `npm run build` - Future: Bundle library for distribution
|
||||
- `npm run test` - Future: Run tests
|
||||
- `npm run lint` - Future: Code linting
|
||||
### Root Scripts
|
||||
- `npm run build` - Build library + CLI with embedded assets
|
||||
- `npm run dev` - Legacy live-server (demo-site only)
|
||||
|
||||
### Library Scripts (cd lib/)
|
||||
- `npm run build` - Build library to dist/
|
||||
- `npm run watch` - Watch and rebuild library on changes
|
||||
|
||||
### CLI Scripts (cd insertr-cli/)
|
||||
- `air` - 🔥 Hot reload server (library + CLI + enhanced content)
|
||||
- `go build -o insertr` - Manual CLI build
|
||||
- `./insertr enhance <dir>` - Enhance static site
|
||||
- `./insertr servedev <dir>` - Development server with enhancement
|
||||
|
||||
### Hot Reload Workflow
|
||||
```bash
|
||||
cd insertr-cli && air # Start hot reload development
|
||||
# Edit lib/src/**/*.js # Air detects → rebuilds → serves
|
||||
# Edit cmd/**/*.go # Air detects → rebuilds → serves
|
||||
# Edit ../demo-site/ # Air serves enhanced versions
|
||||
```
|
||||
|
||||
## Testing Different Scenarios
|
||||
|
||||
|
||||
Reference in New Issue
Block a user