implement a multi-file template interpreter
This commit is contained in:
57
examples/react-app-generator/readme.md
Normal file
57
examples/react-app-generator/readme.md
Normal file
@ -0,0 +1,57 @@
|
||||
# React App Generator Example
|
||||
|
||||
This example demonstrates how to use Masonry's multi-file template generation to create a complete React application with components, pages, and API integration.
|
||||
|
||||
## What This Example Does
|
||||
|
||||
This template generator creates:
|
||||
- **React Pages** - One file per page definition (public and admin layouts)
|
||||
- **React Components** - Individual component files for each component/section
|
||||
- **API Client** - Generated API functions for each entity
|
||||
- **Type Definitions** - TypeScript interfaces for entities
|
||||
- **Routing** - React Router setup based on page definitions
|
||||
|
||||
## Files Generated
|
||||
|
||||
The manifest defines outputs that generate:
|
||||
- `src/pages/` - Page components based on layout type
|
||||
- `src/components/` - Individual component files
|
||||
- `src/api/` - API client functions per entity
|
||||
- `src/types/` - TypeScript interfaces per entity
|
||||
- `src/router.tsx` - React Router configuration
|
||||
- `package.json` - Project dependencies
|
||||
|
||||
## How to Use
|
||||
|
||||
1. **Create a Masonry file** (see `blog-app.masonry` example)
|
||||
2. **Run the generator**:
|
||||
```bash
|
||||
../../masonry.exe generate-multi \
|
||||
--input blog-app.masonry \
|
||||
--template-dir templates \
|
||||
--manifest manifest.yaml \
|
||||
--output-dir ./generated-app
|
||||
```
|
||||
3. **Install dependencies and run**:
|
||||
```bash
|
||||
cd generated-app
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## Template Features Demonstrated
|
||||
|
||||
- **Per-item iteration** - Generate one file per page, entity, component
|
||||
- **Conditional generation** - Different templates for admin vs public layouts
|
||||
- **Dynamic paths** - File paths based on item properties
|
||||
- **Nested template composition** - Components using other templates
|
||||
- **Template functions** - String manipulation, type conversion
|
||||
|
||||
## Extending This Example
|
||||
|
||||
You can extend this template by:
|
||||
- Adding more layout types (mobile, desktop, etc.)
|
||||
- Creating specialized component templates (forms, tables, etc.)
|
||||
- Adding test file generation
|
||||
- Including CSS module generation
|
||||
- Adding Docker/deployment configurations
|
Reference in New Issue
Block a user