feat(editor): implement embedded template system (TASK-009)

- Add ProjectTemplate TypeScript interfaces for type-safe templates
- Implement EmbeddedTemplateProvider for bundled templates
- Create Hello World template (Router + Home page + Text)
- Update LocalProjectsModel to use embedded templates by default
- Remove programmatic project creation workaround
- Fix: Add required fields (id, comments, metadata) per TASK-010
- Fix: Correct node type 'PageRouter' → 'Router'
- Add comprehensive developer documentation

Benefits:
- No more path resolution issues (__dirname/process.cwd())
- Works identically in dev and production
- Type-safe template definitions
- Easy to add new templates

Closes TASK-009 (Phase 3 - Editor UX Overhaul)
This commit is contained in:
Tara West
2026-01-09 12:25:16 +01:00
parent a104a3a8d0
commit 6aa45320e9
7 changed files with 685 additions and 51 deletions

View File

@@ -1,9 +1,9 @@
# TASK-009: Template System Refactoring
**Status**: 📋 Planned
**Status**: 🟢 Complete (Backend)
**Priority**: Medium
**Complexity**: Medium
**Estimated Effort**: 2-3 days
**Actual Effort**: 1 day (Backend implementation)
## Context
@@ -244,12 +244,100 @@ class TemplateManager {
- Failed attempt: `packages/noodl-editor/src/editor/src/utils/forge/template/providers/local-template-provider.ts`
- Template registry: `packages/noodl-editor/src/editor/src/utils/forge/index.ts`
## Implementation Summary (January 9, 2026)
### ✅ What Was Completed
**Phase 1-3: Backend Implementation (Complete)**
1. **Type System Created**
- `ProjectTemplate.ts` - Complete TypeScript interfaces for templates
- Comprehensive type definitions for components, nodes, connections, and settings
2. **EmbeddedTemplateProvider Implemented**
- Provider that handles `embedded://` protocol
- Templates stored as TypeScript objects, bundled by webpack
- No file I/O dependencies, works identically in dev and production
3. **Hello World Template Created**
- Structure: App → PageRouter → Page "/Home" → Text "Hello World!"
- Clean and minimal, demonstrates Page Router usage
- Located in `models/template/templates/hello-world.template.ts`
4. **Template Registry Integration**
- `EmbeddedTemplateProvider` registered with highest priority
- Backward compatible with existing HTTP/Noodl Docs providers
5. **LocalProjectsModel Updated**
- Removed programmatic project creation workaround
- Default template now uses `embedded://hello-world`
- Maintains backward compatibility with external templates
6. **Documentation**
- Complete developer guide in `models/template/README.md`
- Instructions for creating custom templates
- Architecture overview and best practices
### 📁 Files Created
```
packages/noodl-editor/src/editor/src/models/template/
├── ProjectTemplate.ts # Type definitions
├── EmbeddedTemplateProvider.ts # Provider implementation
├── README.md # Developer documentation
└── templates/
└── hello-world.template.ts # Default template
```
### 📝 Files Modified
- `utils/forge/index.ts` - Registered EmbeddedTemplateProvider
- `utils/LocalProjectsModel.ts` - Updated newProject() to use embedded templates
### 🎯 Benefits Achieved
✅ No more `__dirname` or `process.cwd()` path resolution issues
✅ Templates work identically in development and production builds
✅ Type-safe template definitions with full IDE support
✅ Easy to add new templates - just create a TypeScript file
✅ Maintains backward compatibility with external template URLs
### ⏳ Remaining Work (Future Tasks)
- **UI for Template Selection**: Gallery/dialog to choose templates when creating projects
- **Additional Templates**: Blank, Dashboard, E-commerce templates
- **Template Export**: Allow users to save their projects as templates
- **Unit Tests**: Test suite for EmbeddedTemplateProvider
- **Template Validation**: Verify template structure before project creation
### 🚀 Usage
```typescript
// Create project with embedded template (automatic default)
LocalProjectsModel.instance.newProject(callback, {
name: 'My Project'
// Uses 'embedded://hello-world' by default
});
// Create project with specific template
LocalProjectsModel.instance.newProject(callback, {
name: 'My Project',
projectTemplate: 'embedded://hello-world'
});
```
## Related Tasks
- None yet (this is the first comprehensive template system task)
- **TASK-009-UI**: Template selection gallery (future)
- **TASK-009-EXPORT**: Template export functionality (future)
---
**Created**: January 8, 2026
**Last Updated**: January 8, 2026
**Assignee**: TBD
**Last Updated**: January 9, 2026
**Implementation**: January 9, 2026 (Backend complete)