retold 4.0.1 → 4.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/settings.local.json +38 -1
- package/README.md +92 -2
- package/docs/README.md +7 -6
- package/docs/_sidebar.md +36 -21
- package/docs/_topbar.md +2 -2
- package/docs/architecture/comprehensions.md +282 -0
- package/docs/architecture/fluid-models.md +355 -0
- package/docs/architecture/module-architecture.md +234 -0
- package/docs/{modules.md → architecture/modules.md} +25 -22
- package/docs/cover.md +2 -2
- package/docs/css/docuserve.css +6 -6
- package/docs/examples/examples.md +71 -0
- package/docs/examples/todolist/todo-list-cli-client.md +178 -0
- package/docs/examples/todolist/todo-list-console-client.md +152 -0
- package/docs/examples/todolist/todo-list-model.md +114 -0
- package/docs/examples/todolist/todo-list-server.md +128 -0
- package/docs/examples/todolist/todo-list-web-client.md +177 -0
- package/docs/examples/todolist/todo-list.md +162 -0
- package/docs/getting-started.md +8 -7
- package/docs/index.html +4 -4
- package/docs/{meadow.md → modules/meadow.md} +4 -6
- package/docs/{orator.md → modules/orator.md} +1 -0
- package/docs/{pict.md → modules/pict.md} +30 -8
- package/docs/{utility.md → modules/utility.md} +0 -9
- package/docs/retold-catalog.json +1792 -231
- package/docs/retold-keyword-index.json +136439 -64616
- package/examples/todo-list/Dockerfile +45 -0
- package/examples/todo-list/README.md +394 -0
- package/examples/todo-list/cli-client/package-lock.json +418 -0
- package/examples/todo-list/cli-client/package.json +19 -0
- package/examples/todo-list/cli-client/source/TodoCLI-CLIProgram.js +30 -0
- package/examples/todo-list/cli-client/source/TodoCLI-Run.js +3 -0
- package/examples/todo-list/cli-client/source/commands/add/TodoCLI-Command-Add.js +74 -0
- package/examples/todo-list/cli-client/source/commands/complete/TodoCLI-Command-Complete.js +84 -0
- package/examples/todo-list/cli-client/source/commands/list/TodoCLI-Command-List.js +110 -0
- package/examples/todo-list/cli-client/source/commands/remove/TodoCLI-Command-Remove.js +49 -0
- package/examples/todo-list/cli-client/source/services/TodoCLI-Service-API.js +92 -0
- package/examples/todo-list/console-client/console-client.cjs +913 -0
- package/examples/todo-list/console-client/package-lock.json +426 -0
- package/examples/todo-list/console-client/package.json +19 -0
- package/examples/todo-list/console-client/views/PictView-TUI-Header.cjs +43 -0
- package/examples/todo-list/console-client/views/PictView-TUI-Layout.cjs +58 -0
- package/examples/todo-list/console-client/views/PictView-TUI-StatusBar.cjs +41 -0
- package/examples/todo-list/console-client/views/PictView-TUI-TaskList.cjs +104 -0
- package/examples/todo-list/docker-motd.sh +36 -0
- package/examples/todo-list/docker-run.sh +2 -0
- package/examples/todo-list/docker-shell.sh +2 -0
- package/examples/todo-list/model/MeadowSchema-Task.json +152 -0
- package/examples/todo-list/model/Task-Compiled.json +25 -0
- package/examples/todo-list/model/Task.mddl +15 -0
- package/examples/todo-list/model/data/seeded_todo_events.csv +1001 -0
- package/examples/todo-list/server/database-initialization-service.cjs +273 -0
- package/examples/todo-list/server/package-lock.json +6113 -0
- package/examples/todo-list/server/package.json +19 -0
- package/examples/todo-list/server/server.cjs +138 -0
- package/examples/todo-list/web-client/css/todolist-theme.css +235 -0
- package/examples/todo-list/web-client/generate-build-config.cjs +18 -0
- package/examples/todo-list/web-client/html/index.html +18 -0
- package/examples/todo-list/web-client/package-lock.json +12030 -0
- package/examples/todo-list/web-client/package.json +43 -0
- package/examples/todo-list/web-client/source/TodoList-Application-Config.json +12 -0
- package/examples/todo-list/web-client/source/TodoList-Application.cjs +383 -0
- package/examples/todo-list/web-client/source/providers/Provider-TaskData.cjs +243 -0
- package/examples/todo-list/web-client/source/providers/Router-Config.json +32 -0
- package/examples/todo-list/web-client/source/views/View-Layout.cjs +75 -0
- package/examples/todo-list/web-client/source/views/View-TaskForm.cjs +87 -0
- package/examples/todo-list/web-client/source/views/View-TaskList.cjs +127 -0
- package/examples/todo-list/web-client/source/views/calendar/View-MonthView.cjs +293 -0
- package/examples/todo-list/web-client/source/views/calendar/View-WeekView.cjs +149 -0
- package/examples/todo-list/web-client/source/views/calendar/View-YearView.cjs +226 -0
- package/modules/Include-Retold-Module-List.sh +2 -2
- package/package.json +5 -5
- package/docs/js/pict.min.js +0 -12
- package/docs/js/pict.min.js.map +0 -1
- package/docs/pict-docuserve.min.js +0 -58
- package/docs/pict-docuserve.min.js.map +0 -1
- /package/docs/{architecture.md → architecture/architecture.md} +0 -0
- /package/docs/{fable.md → modules/fable.md} +0 -0
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# Todo List: API Server
|
|
2
|
+
|
|
3
|
+
> Part of the [Todo List Application](examples/todolist/todo-list.md) example.
|
|
4
|
+
>
|
|
5
|
+
> **Source:** [`examples/todo-list/server/`](../examples/todo-list/server/)
|
|
6
|
+
|
|
7
|
+
The server demonstrates the standard Retold API assembly: Fable for dependency injection, Meadow for data access, Meadow Endpoints for automatic REST route generation, and Orator for the HTTP server. It also shows how to create a custom Fable service for database initialization and CSV seeding.
|
|
8
|
+
|
|
9
|
+
## Running
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
cd examples/todo-list/server
|
|
13
|
+
npm install
|
|
14
|
+
npm start
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
The server starts on **http://localhost:8086** and serves both the REST API and the web client's static files.
|
|
18
|
+
|
|
19
|
+
### Running with Docker
|
|
20
|
+
|
|
21
|
+
From the `examples/todo-list/` directory, run `./docker-run.sh` to build the Docker image and start the server. The web client is pre-built inside the image, so you can open **http://localhost:8086** immediately. See the [main quickstart](examples/todolist/todo-list.md) for details on the interactive shell.
|
|
22
|
+
|
|
23
|
+
## How It Works
|
|
24
|
+
|
|
25
|
+
```mermaid
|
|
26
|
+
graph TB
|
|
27
|
+
subgraph startup["Startup Sequence"]
|
|
28
|
+
direction TB
|
|
29
|
+
s1["1. Create Fable instance<br/><i>Settings, logging, SQLite config</i>"]
|
|
30
|
+
s2["2. Register service types<br/><i>Orator, SQLite provider, DB init service</i>"]
|
|
31
|
+
s3["3. Connect database<br/><i>Open or create todo.sqlite</i>"]
|
|
32
|
+
s4["4. Create tables<br/><i>From compiled Stricture DDL</i>"]
|
|
33
|
+
s5["5. Seed data<br/><i>CSV → Meadow doCreate (if empty)</i>"]
|
|
34
|
+
s6["6. Create Meadow DAL<br/><i>Task entity with schema</i>"]
|
|
35
|
+
s7["7. Create Meadow Endpoints<br/><i>Auto-generate REST routes</i>"]
|
|
36
|
+
s8["8. Start Orator<br/><i>HTTP server + static files</i>"]
|
|
37
|
+
|
|
38
|
+
s1 --> s2 --> s3 --> s4 --> s5 --> s6 --> s7 --> s8
|
|
39
|
+
end
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
The server file (`server.cjs`) is intentionally thin. Most of the behavior comes from Retold modules -- the server's job is to wire them together in the right order.
|
|
43
|
+
|
|
44
|
+
### Step 1-2: Fable and Service Registration
|
|
45
|
+
|
|
46
|
+
A Fable instance is created with settings for the product name, API port, and SQLite file path. Service types are registered for the HTTP server (Orator + Restify), the SQLite connection provider, and the custom database initialization service.
|
|
47
|
+
|
|
48
|
+
### Step 3-5: Database Setup
|
|
49
|
+
|
|
50
|
+
The `DatabaseInitializationService` is a custom Fable service (extending `fable-serviceproviderbase`) that handles three tasks:
|
|
51
|
+
|
|
52
|
+
1. **Connect** -- Ensures the `data/` directory exists and opens the SQLite file through `meadow-connection-sqlite`
|
|
53
|
+
2. **Create tables** -- Passes the compiled Stricture model to the provider's `createTables()` method, which generates SQLite DDL
|
|
54
|
+
3. **Seed data** -- Checks if the table is empty; if so, reads the CSV file, parses it, and inserts each row through the Meadow DAL using `doCreate()` queued with Fable's Anticipate service
|
|
55
|
+
|
|
56
|
+
Because seeding goes through the Meadow DAL, every record gets automatic GUID generation, audit timestamps, and default values.
|
|
57
|
+
|
|
58
|
+
### Step 6-7: Entity and Endpoints
|
|
59
|
+
|
|
60
|
+
A Meadow DAL instance is created for the Task entity, configured with the schema from `MeadowSchema-Task.json`. Meadow Endpoints then wraps this DAL to generate the full REST API automatically.
|
|
61
|
+
|
|
62
|
+
### Step 8: HTTP Server
|
|
63
|
+
|
|
64
|
+
Orator initializes with Restify, connects the auto-generated endpoints, adds a static file route pointing to `../web-client/dist/`, and starts listening.
|
|
65
|
+
|
|
66
|
+
## API Endpoints
|
|
67
|
+
|
|
68
|
+
Meadow Endpoints auto-generates these routes from the Task entity:
|
|
69
|
+
|
|
70
|
+
| Method | Endpoint | Description |
|
|
71
|
+
|--------|----------|-------------|
|
|
72
|
+
| GET | `/1.0/Tasks/{Begin}/{Cap}` | List tasks with pagination |
|
|
73
|
+
| GET | `/1.0/Tasks/FilteredTo/{Filter}/{Begin}/{Cap}` | List with sort, search, filter |
|
|
74
|
+
| GET | `/1.0/Task/{IDTask}` | Read a single task |
|
|
75
|
+
| POST | `/1.0/Task` | Create a task |
|
|
76
|
+
| PUT | `/1.0/Task` | Update a task |
|
|
77
|
+
| DELETE | `/1.0/Task/{IDTask}` | Soft-delete a task |
|
|
78
|
+
| GET | `/1.0/Tasks/Count` | Total record count |
|
|
79
|
+
| GET | `/1.0/Tasks/Count/FilteredTo/{Filter}` | Filtered record count |
|
|
80
|
+
|
|
81
|
+
### FilteredTo Query Syntax
|
|
82
|
+
|
|
83
|
+
The FilteredTo URL segment accepts tilde-delimited filter stanzas that the server parses into SQL through FoxHound. This is how all three clients request sorted, filtered, and paginated data.
|
|
84
|
+
|
|
85
|
+
**Sort stanza:**
|
|
86
|
+
|
|
87
|
+
```
|
|
88
|
+
FSF~{Column}~{Direction}~0
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Example: `FSF~DueDate~DESC~0` sorts by DueDate descending.
|
|
92
|
+
|
|
93
|
+
**Filter stanzas:**
|
|
94
|
+
|
|
95
|
+
```
|
|
96
|
+
FBV~{Column}~{Operator}~{Value} (AND)
|
|
97
|
+
FBVOR~{Column}~{Operator}~{Value} (OR)
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Common operators: `EQ` (equals), `LK` (LIKE), `GT` (greater than), `LT` (less than), `IN` (IS NULL), `NN` (IS NOT NULL).
|
|
101
|
+
|
|
102
|
+
**Combined example:**
|
|
103
|
+
|
|
104
|
+
```
|
|
105
|
+
/1.0/Tasks/FilteredTo/FBV~Name~LK~%25garden%25~FBVOR~Description~LK~%25garden%25~FSF~DueDate~DESC~0/0/50
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
This searches for tasks where Name or Description contains "garden", sorted by DueDate descending, returning the first 50 results. The `%25` is the URL-encoded `%` wildcard for the LIKE operator.
|
|
109
|
+
|
|
110
|
+
## Dependencies
|
|
111
|
+
|
|
112
|
+
| Module | Role |
|
|
113
|
+
|--------|------|
|
|
114
|
+
| `fable` | Dependency injection, configuration, logging |
|
|
115
|
+
| `orator` | HTTP server abstraction |
|
|
116
|
+
| `orator-serviceserver-restify` | Restify implementation for Orator |
|
|
117
|
+
| `meadow` | Data access layer (ORM) |
|
|
118
|
+
| `meadow-endpoints` | Auto-generated REST routes |
|
|
119
|
+
| `meadow-connection-sqlite` | SQLite connection provider |
|
|
120
|
+
| `fable-serviceproviderbase` | Base class for DatabaseInitializationService |
|
|
121
|
+
|
|
122
|
+
## Files
|
|
123
|
+
|
|
124
|
+
| File | Purpose |
|
|
125
|
+
|------|---------|
|
|
126
|
+
| `server.cjs` | Main entry point -- wires Fable, Orator, Meadow, and SQLite together |
|
|
127
|
+
| `database-initialization-service.cjs` | Custom Fable service for table creation and CSV seeding |
|
|
128
|
+
| `data/todo.sqlite` | SQLite database file (auto-created on first run) |
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
# Todo List: Web Client
|
|
2
|
+
|
|
3
|
+
> Part of the [Todo List Application](examples/todolist/todo-list.md) example.
|
|
4
|
+
>
|
|
5
|
+
> **Source:** [`examples/todo-list/web-client/`](../examples/todo-list/web-client/)
|
|
6
|
+
|
|
7
|
+
The web client is a browser-based Pict Application with hash routing, data providers, and six views. It demonstrates the standard Pict patterns for building a single-page application: views render templates into DOM containers, a provider manages API communication, and the application class coordinates lifecycle and shared state.
|
|
8
|
+
|
|
9
|
+
## Running
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
cd examples/todo-list/web-client
|
|
13
|
+
npm install
|
|
14
|
+
npm run build
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Then open **http://localhost:8086** in a browser (the API server serves the built files).
|
|
18
|
+
|
|
19
|
+
The build step uses Quackage to browserify the application source into `dist/`, then copies the HTML shell and CSS theme alongside it.
|
|
20
|
+
|
|
21
|
+
### Running with Docker
|
|
22
|
+
|
|
23
|
+
From the `examples/todo-list/` directory, run `./docker-run.sh` to build the Docker image and start the server. The web client is already built inside the image -- just open **http://localhost:8086** in a browser. See the [main quickstart](examples/todolist/todo-list.md) for more options.
|
|
24
|
+
|
|
25
|
+
## Application Structure
|
|
26
|
+
|
|
27
|
+
```mermaid
|
|
28
|
+
graph TB
|
|
29
|
+
subgraph app["TodoList-Application"]
|
|
30
|
+
state["AppData.TodoList<br/><i>Tasks, ListState, CalendarState</i>"]
|
|
31
|
+
end
|
|
32
|
+
|
|
33
|
+
subgraph providers["Providers"]
|
|
34
|
+
taskdata["Provider-TaskData<br/><i>API fetch, query URL builder</i>"]
|
|
35
|
+
router["PictRouter<br/><i>Hash-based SPA routing</i>"]
|
|
36
|
+
end
|
|
37
|
+
|
|
38
|
+
subgraph views["Views"]
|
|
39
|
+
layout["View-Layout<br/><i>Nav bar + content outlet</i>"]
|
|
40
|
+
list["View-TaskList<br/><i>Sortable table, search, pagination</i>"]
|
|
41
|
+
form["View-TaskForm<br/><i>Add / edit form</i>"]
|
|
42
|
+
week["View-WeekView<br/><i>Seven-day calendar grid</i>"]
|
|
43
|
+
month["View-MonthView<br/><i>Month grid with day cells</i>"]
|
|
44
|
+
year["View-YearView<br/><i>Twelve month overview</i>"]
|
|
45
|
+
end
|
|
46
|
+
|
|
47
|
+
app --- taskdata
|
|
48
|
+
app --- router
|
|
49
|
+
router --> layout
|
|
50
|
+
layout --> list
|
|
51
|
+
layout --> form
|
|
52
|
+
layout --> week
|
|
53
|
+
layout --> month
|
|
54
|
+
layout --> year
|
|
55
|
+
taskdata --> list
|
|
56
|
+
taskdata --> form
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Application Class
|
|
60
|
+
|
|
61
|
+
`TodoList-Application.cjs` extends `pict-application` and is the central coordinator. In its constructor it registers all views, the data provider, and the router. In `onAfterInitializeAsync` it initializes the shared state object (`AppData.TodoList`) and triggers the first data load.
|
|
62
|
+
|
|
63
|
+
The shared state holds:
|
|
64
|
+
|
|
65
|
+
- **Tasks** -- the current page of task records from the API
|
|
66
|
+
- **ListState** -- sort column, sort direction, search text, pagination bounds
|
|
67
|
+
- **CalendarState** -- anchor date and pre-computed row data for week/month/year views
|
|
68
|
+
|
|
69
|
+
The application class also provides action methods called from view templates: `addTask()`, `editTask(id)`, `deleteTask(id)`, `saveTask()`, `changeSortOrder(value)`, `searchTasks()`, `clearSearch()`, `showCalendarView(id)`, `calendarNavigate(unit, delta)`, and `calendarToday(unit)`.
|
|
70
|
+
|
|
71
|
+
## Data Provider
|
|
72
|
+
|
|
73
|
+
`Provider-TaskData.cjs` extends `pict-provider` and encapsulates all API communication. Its key methods:
|
|
74
|
+
|
|
75
|
+
- **`buildReadsURL()`** -- constructs a Meadow FilteredTo URL from the current ListState (sort, search, pagination). This is where the FBV/FBVOR/FSF filter stanzas are assembled.
|
|
76
|
+
- **`loadTasks(callback)`** -- fetches the task list, total count, and (when searching) filtered count in a single `Promise.all` batch
|
|
77
|
+
- **`loadAllTasks(callback)`** -- fetches every task sorted by date for the calendar views
|
|
78
|
+
- **`createTask(data, callback)`** -- POST to `/1.0/Task`
|
|
79
|
+
- **`updateTask(data, callback)`** -- PUT to `/1.0/Task`
|
|
80
|
+
- **`deleteTask(id, callback)`** -- DELETE to `/1.0/Task/:id`
|
|
81
|
+
|
|
82
|
+
## Routing
|
|
83
|
+
|
|
84
|
+
`Router-Config.json` defines the hash routes:
|
|
85
|
+
|
|
86
|
+
| Route | View | Description |
|
|
87
|
+
|-------|------|-------------|
|
|
88
|
+
| `/TaskList` | TodoList-TaskList | Task list (default) |
|
|
89
|
+
| `/TaskForm` | TodoList-TaskForm | New task form |
|
|
90
|
+
| `/TaskForm/:id` | TodoList-TaskForm | Edit task form |
|
|
91
|
+
| `/WeekView` | TodoList-WeekView | Week calendar |
|
|
92
|
+
| `/MonthView` | TodoList-MonthView | Month calendar |
|
|
93
|
+
| `/YearView` | TodoList-YearView | Year calendar |
|
|
94
|
+
|
|
95
|
+
Navigation links in the layout view set `window.location.hash`, which the Pict Router picks up and renders the corresponding view into the content outlet.
|
|
96
|
+
|
|
97
|
+
## Views
|
|
98
|
+
|
|
99
|
+
### View-Layout
|
|
100
|
+
|
|
101
|
+
The root container. Renders a navigation bar with links to the task list and calendar views, plus a `#TodoList-Content` div that child views render into. The nav bar uses the Sagebrush color theme.
|
|
102
|
+
|
|
103
|
+
View-specific CSS: nav bar styling only (background, link colors, separator).
|
|
104
|
+
|
|
105
|
+
### View-TaskList
|
|
106
|
+
|
|
107
|
+
The main task list with:
|
|
108
|
+
|
|
109
|
+
- A toolbar with search input, sort dropdown, record count display, and add button
|
|
110
|
+
- A data table with Name, Due Date, Hours, Status, and Actions columns
|
|
111
|
+
- Per-row Edit and Delete action buttons
|
|
112
|
+
- Status badges color-coded by task state
|
|
113
|
+
- TemplateSet iteration (`{~Each:...~}`) to render rows from the Tasks array
|
|
114
|
+
|
|
115
|
+
View-specific CSS: button sizing overrides for toolbar and action columns.
|
|
116
|
+
|
|
117
|
+
### View-TaskForm
|
|
118
|
+
|
|
119
|
+
A form for creating and editing tasks. Fields: Name, Description, DueDate (date picker), LengthInHours, Status (dropdown). The form reads from `AppData.TodoList.SelectedTask` and calls `saveTask()` on submit.
|
|
120
|
+
|
|
121
|
+
### View-WeekView
|
|
122
|
+
|
|
123
|
+
A seven-day calendar grid anchored to the current week. Shows task counts per day with navigation buttons (previous/next week, today). All calendar views use `AppData.TodoList.AllTasks` and compute their display data client-side from the full task set.
|
|
124
|
+
|
|
125
|
+
### View-MonthView
|
|
126
|
+
|
|
127
|
+
A full month grid with 7 columns (Sun-Sat). Each day cell shows the number of complete and open tasks. Days outside the current month are dimmed.
|
|
128
|
+
|
|
129
|
+
View-specific CSS: month grid layout, cell styling, day number positioning.
|
|
130
|
+
|
|
131
|
+
### View-YearView
|
|
132
|
+
|
|
133
|
+
Twelve month cards arranged in a 4x3 grid, each showing the task count for that month. Below the grid, a summary table lists statistics. The current month is highlighted.
|
|
134
|
+
|
|
135
|
+
View-specific CSS: year grid layout, card styling, current-month border.
|
|
136
|
+
|
|
137
|
+
## CSS Architecture
|
|
138
|
+
|
|
139
|
+
Shared styles live in `css/todolist-theme.css` -- a plain CSS file loaded via `<link>` in `index.html` and copied to `dist/css/` by the build. This file contains the Sagebrush color theme, base typography, buttons, table styling, form styling, status badges, and shared calendar styles.
|
|
140
|
+
|
|
141
|
+
View-specific styles stay in each view's configuration as inline `/*css*/` tagged template strings. Pict injects these into the page when the view renders. Only styles unique to a single view live here -- anything shared goes in the theme file.
|
|
142
|
+
|
|
143
|
+
## Build System
|
|
144
|
+
|
|
145
|
+
The web client uses Quackage (the Retold build tool) to bundle and copy files:
|
|
146
|
+
|
|
147
|
+
- `npm run build` runs `npx quack build && npx quack copy`
|
|
148
|
+
- Quackage reads `.gulpfile-quackage-config.json` for the browserify entry point and output path
|
|
149
|
+
- The `copyFiles` array in `package.json` maps `html/*` and `css/*` to `dist/`, and copies `pict.min.js` from `node_modules`
|
|
150
|
+
|
|
151
|
+
## Dependencies
|
|
152
|
+
|
|
153
|
+
| Module | Role |
|
|
154
|
+
|--------|------|
|
|
155
|
+
| `pict` | Core view and template engine |
|
|
156
|
+
| `pict-application` | Application lifecycle and service container |
|
|
157
|
+
| `pict-view` | View base class |
|
|
158
|
+
| `pict-provider` | Data provider base class |
|
|
159
|
+
| `pict-router` | Hash-based client-side routing |
|
|
160
|
+
| `quackage` (dev) | Build tool (Gulp wrapper for browserify + copy) |
|
|
161
|
+
|
|
162
|
+
## Files
|
|
163
|
+
|
|
164
|
+
| File | Purpose |
|
|
165
|
+
|------|---------|
|
|
166
|
+
| `source/TodoList-Application.cjs` | Application class -- registers views, providers, router; manages shared state |
|
|
167
|
+
| `source/TodoList-Application-Config.json` | Pict application settings (main viewport, auto-solve, lazy render) |
|
|
168
|
+
| `source/providers/Provider-TaskData.cjs` | Data provider -- API fetch, FilteredTo URL builder, CRUD methods |
|
|
169
|
+
| `source/providers/Router-Config.json` | Route table mapping hash paths to views |
|
|
170
|
+
| `source/views/View-Layout.cjs` | Root layout with navigation bar and content outlet |
|
|
171
|
+
| `source/views/View-TaskList.cjs` | Paginated task table with search, sort, and inline actions |
|
|
172
|
+
| `source/views/View-TaskForm.cjs` | Create / edit form |
|
|
173
|
+
| `source/views/calendar/View-WeekView.cjs` | Week calendar grid |
|
|
174
|
+
| `source/views/calendar/View-MonthView.cjs` | Month calendar grid |
|
|
175
|
+
| `source/views/calendar/View-YearView.cjs` | Year overview with month cards |
|
|
176
|
+
| `css/todolist-theme.css` | Shared Sagebrush theme stylesheet |
|
|
177
|
+
| `html/index.html` | HTML shell -- loads Pict, the app bundle, and the theme CSS |
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
# Todo List Application
|
|
2
|
+
|
|
3
|
+
A complete full-stack example demonstrating the Retold module suite. A single REST API server backed by SQLite is consumed by three separate clients: a browser-based Pict application, a terminal UI built on blessed, and a non-interactive command-line tool.
|
|
4
|
+
|
|
5
|
+
> **Source:** [`examples/todo-list/`](../examples/todo-list/)
|
|
6
|
+
|
|
7
|
+
## Architecture
|
|
8
|
+
|
|
9
|
+
```mermaid
|
|
10
|
+
graph TB
|
|
11
|
+
subgraph model["Shared Data Model"]
|
|
12
|
+
mddl["Task.mddl<br/><i>Stricture MicroDDL</i>"]
|
|
13
|
+
compiled["Task-Compiled.json<br/><i>DDL for table creation</i>"]
|
|
14
|
+
schema["MeadowSchema-Task.json<br/><i>ORM schema, types, defaults</i>"]
|
|
15
|
+
csv["seeded_todo_events.csv<br/><i>1,000 sample tasks</i>"]
|
|
16
|
+
mddl --> compiled
|
|
17
|
+
mddl --> schema
|
|
18
|
+
end
|
|
19
|
+
|
|
20
|
+
subgraph server["API Server"]
|
|
21
|
+
orator["Orator<br/><i>HTTP server (Restify)</i>"]
|
|
22
|
+
endpoints["Meadow Endpoints<br/><i>Auto-generated REST CRUD</i>"]
|
|
23
|
+
dal["Meadow DAL<br/><i>Task entity ORM</i>"]
|
|
24
|
+
dbinit["DatabaseInitializationService<br/><i>Table creation + CSV seeding</i>"]
|
|
25
|
+
sqlite[("todo.sqlite")]
|
|
26
|
+
static["Static file server<br/><i>Serves web-client/dist/</i>"]
|
|
27
|
+
|
|
28
|
+
orator --- endpoints
|
|
29
|
+
endpoints --- dal
|
|
30
|
+
dal --- sqlite
|
|
31
|
+
dbinit --> dal
|
|
32
|
+
orator --- static
|
|
33
|
+
end
|
|
34
|
+
|
|
35
|
+
compiled --> dbinit
|
|
36
|
+
schema --> dal
|
|
37
|
+
csv --> dbinit
|
|
38
|
+
|
|
39
|
+
subgraph web["Web Client"]
|
|
40
|
+
wapp["Pict Application<br/><i>Views, providers, routing</i>"]
|
|
41
|
+
end
|
|
42
|
+
|
|
43
|
+
subgraph console["Console Client"]
|
|
44
|
+
capp["blessed TUI<br/><i>pict-terminalui bridge</i>"]
|
|
45
|
+
end
|
|
46
|
+
|
|
47
|
+
subgraph cli["CLI Client"]
|
|
48
|
+
cliapp["pict-service-commandlineutility<br/><i>Commander.js commands</i>"]
|
|
49
|
+
end
|
|
50
|
+
|
|
51
|
+
wapp -- "fetch()" --> orator
|
|
52
|
+
static -- "HTML + JS + CSS" --> web
|
|
53
|
+
capp -- "http.request()" --> orator
|
|
54
|
+
cliapp -- "http.request()" --> orator
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
All four components share a single [Task data model](examples/todolist/todo-list-model.md) defined in Stricture MicroDDL. The server creates the SQLite table from the compiled DDL, seeds it with sample data through the Meadow DAL, and auto-generates REST endpoints with Meadow Endpoints. Each client speaks to the server over HTTP using the same query DSL for sorting, filtering, and pagination.
|
|
58
|
+
|
|
59
|
+
## Quickstart
|
|
60
|
+
|
|
61
|
+
### Prerequisites
|
|
62
|
+
|
|
63
|
+
- Node.js 18+
|
|
64
|
+
|
|
65
|
+
### 1. Start the API Server
|
|
66
|
+
|
|
67
|
+
```bash
|
|
68
|
+
cd examples/todo-list/server
|
|
69
|
+
npm install
|
|
70
|
+
npm start
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
The server starts on **http://localhost:8086**. On first run it creates a SQLite database, builds the Task table from compiled Stricture DDL, and seeds 1,000 sample tasks from a CSV file. Every seed record passes through the Meadow DAL, so GUIDs, audit timestamps, and default values are applied automatically.
|
|
74
|
+
|
|
75
|
+
See [API Server](examples/todolist/todo-list-server.md) for details.
|
|
76
|
+
|
|
77
|
+
### 2. Build and Open the Web Client
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
cd examples/todo-list/web-client
|
|
81
|
+
npm install
|
|
82
|
+
npm run build
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Open **http://localhost:8086** in a browser. The server serves the built client as static files. The web client includes a sortable task list with search and pagination, an add/edit form, and week/month/year calendar views.
|
|
86
|
+
|
|
87
|
+
See [Web Client](examples/todolist/todo-list-web-client.md) for details.
|
|
88
|
+
|
|
89
|
+
### 3. Run the Console Client
|
|
90
|
+
|
|
91
|
+
```bash
|
|
92
|
+
cd examples/todo-list/console-client
|
|
93
|
+
npm install
|
|
94
|
+
npm start
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
A full-screen terminal UI. Use arrow keys to navigate, Enter to view a task, E to edit, S to pick a sort order, / to search, Q to quit.
|
|
98
|
+
|
|
99
|
+
See [Console Client](examples/todolist/todo-list-console-client.md) for details.
|
|
100
|
+
|
|
101
|
+
### 4. Use the CLI Client
|
|
102
|
+
|
|
103
|
+
```bash
|
|
104
|
+
cd examples/todo-list/cli-client
|
|
105
|
+
npm install
|
|
106
|
+
npx todo list
|
|
107
|
+
npx todo add "Water the plants" --due 2026-03-15 --hours 0.5
|
|
108
|
+
npx todo complete 42
|
|
109
|
+
npx todo remove 42
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
See [CLI Client](examples/todolist/todo-list-cli-client.md) for details.
|
|
113
|
+
|
|
114
|
+
### Running with Docker
|
|
115
|
+
|
|
116
|
+
If you have Docker installed you can skip the per-component setup entirely. From the `examples/todo-list/` directory:
|
|
117
|
+
|
|
118
|
+
**Start the server** (also serves the web client):
|
|
119
|
+
|
|
120
|
+
```bash
|
|
121
|
+
./docker-run.sh
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
Open **http://localhost:8086** in a browser. The image builds all four components, so the web client is already compiled.
|
|
125
|
+
|
|
126
|
+
**Interactive shell** (for the CLI and console client):
|
|
127
|
+
|
|
128
|
+
```bash
|
|
129
|
+
./docker-shell.sh
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
A help banner shows available commands on login. Start the server in the background, then use the CLI or console TUI:
|
|
133
|
+
|
|
134
|
+
```bash
|
|
135
|
+
node server/server.cjs &
|
|
136
|
+
cd /app/cli-client && npx todo list
|
|
137
|
+
node /app/console-client/console-client.cjs
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## Components
|
|
141
|
+
|
|
142
|
+
| Component | Retold Modules | Description |
|
|
143
|
+
|-----------|---------------|-------------|
|
|
144
|
+
| [Data Model](examples/todolist/todo-list-model.md) | Stricture, Meadow | Task entity defined once, shared by all components |
|
|
145
|
+
| [API Server](examples/todolist/todo-list-server.md) | Fable, Orator, Meadow, Meadow Endpoints, meadow-connection-sqlite | REST API with auto-generated CRUD and static file serving |
|
|
146
|
+
| [Web Client](examples/todolist/todo-list-web-client.md) | Pict, pict-application, pict-view, pict-provider, pict-router, Quackage | Browser SPA with views, providers, hash routing, and calendar views |
|
|
147
|
+
| [Console Client](examples/todolist/todo-list-console-client.md) | Pict, pict-application, pict-view, pict-terminalui, blessed | Full-screen terminal UI with modal dialogs |
|
|
148
|
+
| [CLI Client](examples/todolist/todo-list-cli-client.md) | pict-service-commandlineutility, fable-serviceproviderbase | Non-interactive commands for list, add, remove, complete |
|
|
149
|
+
|
|
150
|
+
## How the Pieces Connect
|
|
151
|
+
|
|
152
|
+
The server is the single source of truth. It owns the database and exposes a REST API. No client accesses the database directly.
|
|
153
|
+
|
|
154
|
+
All three clients build query URLs using the same Meadow FilteredTo syntax:
|
|
155
|
+
|
|
156
|
+
```
|
|
157
|
+
/1.0/Tasks/FilteredTo/FBV~Name~LK~%25search%25~FSF~DueDate~DESC~0/0/50
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
This URL encodes a LIKE search on the Name column, a descending sort by DueDate, and pagination from record 0 with a cap of 50. The server parses these filter stanzas and generates the corresponding SQL through FoxHound.
|
|
161
|
+
|
|
162
|
+
The web client fetches data with the browser `fetch()` API. The console and CLI clients use Node.js `http.request()`. All three receive the same JSON responses and use the same API contract.
|
package/docs/getting-started.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Getting Started
|
|
2
2
|
|
|
3
|
-
This guide walks through building a Retold application step by step, adding one layer at a time. See the [Architecture](architecture.md) page for a full description of the layer model.
|
|
3
|
+
This guide walks through building a Retold application step by step, adding one layer at a time. See the [Architecture](architecture/architecture.md) page for a full description of the layer model.
|
|
4
4
|
|
|
5
5
|
> **Working examples:** Each step below has a corresponding runnable example in
|
|
6
6
|
> [`examples/quickstart/`](../examples/quickstart/). Clone the repo and follow
|
|
@@ -264,9 +264,10 @@ Supporting the application stack are utility modules like **Manyfest** (schema-d
|
|
|
264
264
|
|
|
265
265
|
## Next Steps
|
|
266
266
|
|
|
267
|
-
- **[Architecture](architecture.md)** — Understand the layer model in depth
|
|
268
|
-
- **[
|
|
269
|
-
- **[
|
|
270
|
-
- **[
|
|
271
|
-
- **[
|
|
272
|
-
- **[
|
|
267
|
+
- **[Architecture](architecture/architecture.md)** — Understand the layer model in depth
|
|
268
|
+
- **[Examples](examples/examples.md)** — Complete runnable applications, including the [Todo List](examples/todolist/todo-list.md) full-stack example with four clients
|
|
269
|
+
- **[Fable](modules/fable.md)** — Deep dive into the core ecosystem and service provider pattern
|
|
270
|
+
- **[Meadow](modules/meadow.md)** — Data access, FoxHound queries, and Stricture schemas
|
|
271
|
+
- **[Orator](modules/orator.md)** — Server configuration, lifecycle hooks, and middleware
|
|
272
|
+
- **[Pict](modules/pict.md)** — Views, templates, providers, and application lifecycle
|
|
273
|
+
- **[All Modules](modules/modules.md)** — Every repository in the Retold suite
|
package/docs/index.html
CHANGED
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
<!-- PICT Dynamic View CSS Container -->
|
|
16
16
|
<style id="PICT-CSS"></style>
|
|
17
17
|
|
|
18
|
-
<!-- Load the PICT library -->
|
|
19
|
-
<script src="
|
|
18
|
+
<!-- Load the PICT library from jsDelivr CDN -->
|
|
19
|
+
<script src="https://cdn.jsdelivr.net/npm/pict@1/dist/pict.min.js" type="text/javascript"></script>
|
|
20
20
|
<!-- Bootstrap the Application -->
|
|
21
21
|
<script type="text/javascript">
|
|
22
22
|
//< | Generic data lake behaviors and services | `parime` |
|
|
191
191
|
| [retold-harness](/meadow/retold-harness/) | Pre-built API harness with a bookstore demo (8 entities, 10,000+ records) | `retold-harness` |
|
|
192
192
|
| [meadow-integration](/meadow/meadow-integration/) | Data integration tools for CSV import and schema mapping | `meadow-integration` |
|
|
193
|
-
| [meadow-graph-client](/meadow/meadow-graph-client/) | Client for pulling related record sets from relational database graphs | `meadow-graph-client` |
|
|
194
193
|
|
|
195
194
|
## All Meadow Modules
|
|
196
195
|
|
|
197
196
|
| Module | Description |
|
|
198
197
|
|--------|-------------|
|
|
199
|
-
| [meadow](/meadow/meadow/) | Provider-agnostic data broker and ORM |
|
|
200
|
-
| [foxhound](/meadow/foxhound/) | Fluent query DSL with multi-dialect SQL generation |
|
|
201
198
|
| [stricture](/meadow/stricture/) | MicroDDL schema definition and code generation |
|
|
199
|
+
| [foxhound](/meadow/foxhound/) | Fluent query DSL with multi-dialect SQL generation |
|
|
200
|
+
| [bibliograph](/meadow/bibliograph/) | Record-level change tracking |
|
|
201
|
+
| [meadow](/meadow/meadow/) | Provider-agnostic data broker and ORM |
|
|
202
|
+
| [parime](/meadow/parime/) | Data lake behaviors |
|
|
202
203
|
| [meadow-endpoints](/meadow/meadow-endpoints/) | Automatic RESTful CRUD endpoint generation |
|
|
203
204
|
| [meadow-connection-mysql](/meadow/meadow-connection-mysql/) | MySQL connection provider |
|
|
204
205
|
| [meadow-connection-mssql](/meadow/meadow-connection-mssql/) | MSSQL connection provider |
|
|
205
206
|
| [meadow-connection-sqlite](/meadow/meadow-connection-sqlite/) | SQLite connection provider |
|
|
206
207
|
| [retold-data-service](/meadow/retold-data-service/) | All-in-one schema-to-REST-API service |
|
|
207
208
|
| [retold-harness](/meadow/retold-harness/) | Demo API harness with bookstore dataset |
|
|
208
|
-
| [bibliograph](/meadow/bibliograph/) | Record-level change tracking |
|
|
209
|
-
| [parime](/meadow/parime/) | Data lake behaviors |
|
|
210
209
|
| [meadow-integration](/meadow/meadow-integration/) | Data integration and CSV import |
|
|
211
|
-
| [meadow-graph-client](/meadow/meadow-graph-client/) | Relational graph record fetching |
|
|
@@ -162,3 +162,4 @@ This gives you a full REST API with Create, Read, Reads, Update, Delete, Undelet
|
|
|
162
162
|
| [orator-http-proxy](/orator/orator-http-proxy/) | HTTP reverse proxy pass-through |
|
|
163
163
|
| [tidings](/orator/tidings/) | Reporting scaffolding for HTML/PDF output |
|
|
164
164
|
| [orator-endpoint](/orator/orator-endpoint/) | Reusable endpoint base class |
|
|
165
|
+
| [orator-conversion](/orator/orator-conversion/) | File format conversion endpoints |
|
|
@@ -6,6 +6,8 @@ Pict provides a non-opinionated set of Model-View-Controller tools for building
|
|
|
6
6
|
|
|
7
7
|
Pict does not impose opinions about what MVC means. It provides discrete tools — Views, Templates, Providers, and an Application class — that you can use individually or compose together.
|
|
8
8
|
|
|
9
|
+
*Pict is a subclass of Fable*, so does everything fable does.
|
|
10
|
+
|
|
9
11
|
- **Views** manage lifecycle (initialize, render, marshal data) and render templates into target containers
|
|
10
12
|
- **Templates** are text with expressions that resolve against application state
|
|
11
13
|
- **Providers** fetch and manage data for views
|
|
@@ -177,10 +179,25 @@ Toast UI Grid integration for tabular data display. Provides spreadsheet-like da
|
|
|
177
179
|
|
|
178
180
|
### [Pict-Section-Content](/pict/pict-section-content/)
|
|
179
181
|
|
|
180
|
-
|
|
182
|
+
Markdown parsing and content rendering with Mermaid diagrams and KaTeX math equations. Provides a reusable provider for markdown-to-HTML conversion and a styled view with post-render hooks.
|
|
181
183
|
|
|
182
184
|
**npm:** `pict-section-content`
|
|
183
185
|
|
|
186
|
+
---
|
|
187
|
+
|
|
188
|
+
### [Pict-Section-Flow](/pict/pict-section-flow/)
|
|
189
|
+
|
|
190
|
+
Flow diagram section for visual workflow and process representations.
|
|
191
|
+
|
|
192
|
+
**npm:** `pict-section-flow`
|
|
193
|
+
|
|
194
|
+
## Application Modules
|
|
195
|
+
|
|
196
|
+
| Module | Purpose | npm |
|
|
197
|
+
|--------|---------|-----|
|
|
198
|
+
| [pict-docuserve](/pict/pict-docuserve/) | Single-page documentation viewer built on Pict with catalog navigation and search | `pict-docuserve` |
|
|
199
|
+
| [pict-nonlinearconfig](/pict/pict-nonlinearconfig/) | Nonlinear configuration manager | `pict-nonlinearconfig` |
|
|
200
|
+
|
|
184
201
|
## Supporting Modules
|
|
185
202
|
|
|
186
203
|
| Module | Purpose | npm |
|
|
@@ -191,23 +208,28 @@ Content display sections for rendering static or dynamic content blocks.
|
|
|
191
208
|
| [cryptbrau](/pict/cryptbrau/) | Simple in-browser symmetric encryption | `cryptbrau` |
|
|
192
209
|
| [pict-serviceproviderbase](/pict/pict-serviceproviderbase/) | Base classes for Pict services with pre-initialization support | `pict-serviceproviderbase` |
|
|
193
210
|
| [pict-service-commandlineutility](/pict/pict-service-commandlineutility/) | CLI utility tools built on Commander | `pict-service-commandlineutility` |
|
|
211
|
+
| [pict-terminalui](/pict/pict-terminalui/) | Blessed-based terminal interface for Pict views | `pict-terminalui` |
|
|
194
212
|
|
|
195
213
|
## All Pict Modules
|
|
196
214
|
|
|
197
215
|
| Module | Description |
|
|
198
216
|
|--------|-------------|
|
|
199
217
|
| [pict](/pict/pict/) | Core MVC module with template engine |
|
|
200
|
-
| [pict-view](/pict/pict-view/) | View base class with full lifecycle |
|
|
201
218
|
| [pict-template](/pict/pict-template/) | Custom template handler base class |
|
|
219
|
+
| [pict-view](/pict/pict-view/) | View base class with full lifecycle |
|
|
202
220
|
| [pict-provider](/pict/pict-provider/) | Data provider base class |
|
|
203
221
|
| [pict-application](/pict/pict-application/) | Application lifecycle management |
|
|
204
|
-
| [pict-
|
|
222
|
+
| [pict-panel](/pict/pict-panel/) | Hot-loadable control panel |
|
|
223
|
+
| [pict-nonlinearconfig](/pict/pict-nonlinearconfig/) | Nonlinear configuration manager |
|
|
224
|
+
| [pict-section-flow](/pict/pict-section-flow/) | Flow diagram section |
|
|
225
|
+
| [pict-docuserve](/pict/pict-docuserve/) | Single-page documentation viewer |
|
|
226
|
+
| [cryptbrau](/pict/cryptbrau/) | In-browser symmetric encryption |
|
|
227
|
+
| [informary](/pict/informary/) | Browser form marshaling with undo/redo |
|
|
228
|
+
| [pict-service-commandlineutility](/pict/pict-service-commandlineutility/) | CLI utility tools |
|
|
205
229
|
| [pict-section-recordset](/pict/pict-section-recordset/) | CRUD record management views |
|
|
230
|
+
| [pict-section-content](/pict/pict-section-content/) | Markdown parsing and content rendering |
|
|
231
|
+
| [pict-section-form](/pict/pict-section-form/) | Configuration-driven dynamic forms |
|
|
206
232
|
| [pict-section-tuigrid](/pict/pict-section-tuigrid/) | Toast UI Grid tabular data |
|
|
207
|
-
| [pict-section-content](/pict/pict-section-content/) | Content display sections |
|
|
208
|
-
| [pict-panel](/pict/pict-panel/) | Hot-loadable control panel |
|
|
209
233
|
| [pict-router](/pict/pict-router/) | Hash-based URL routing |
|
|
210
|
-
| [informary](/pict/informary/) | Browser form marshaling with undo/redo |
|
|
211
|
-
| [cryptbrau](/pict/cryptbrau/) | In-browser symmetric encryption |
|
|
212
234
|
| [pict-serviceproviderbase](/pict/pict-serviceproviderbase/) | Pict service base classes |
|
|
213
|
-
| [pict-
|
|
235
|
+
| [pict-terminalui](/pict/pict-terminalui/) | Blessed-based terminal interface |
|
|
@@ -38,14 +38,6 @@ npx quack coverage # Generate coverage report
|
|
|
38
38
|
|
|
39
39
|
---
|
|
40
40
|
|
|
41
|
-
### [Choreographic](/utility/choreographic/)
|
|
42
|
-
|
|
43
|
-
Scaffolding for single-run data processing scripts. Provides pre-packaged application services — file reading/writing, logging, and organized output folders — for tasks like data migration, report generation, and batch processing.
|
|
44
|
-
|
|
45
|
-
**npm:** `choreographic` · **Version:** 1.0.x
|
|
46
|
-
|
|
47
|
-
---
|
|
48
|
-
|
|
49
41
|
### [Ultravisor](/utility/ultravisor/)
|
|
50
42
|
|
|
51
43
|
Process supervision tool for running commands on schedule with LLM integration. Supports distributed nodes, global state, and flexible task types (shell, browser, HTTP, database).
|
|
@@ -59,5 +51,4 @@ Process supervision tool for running commands on schedule with LLM integration.
|
|
|
59
51
|
| [indoctrinate](/utility/indoctrinate/) | Documentation scaffolding with content cataloging and cross-module search |
|
|
60
52
|
| [manyfest](/utility/manyfest/) | JSON manifest for data description, validation, and address-based access |
|
|
61
53
|
| [quackage](/utility/quackage/) | Build tool for browser bundles, testing, and packaging |
|
|
62
|
-
| [choreographic](/utility/choreographic/) | Scaffolding for single-run data processing scripts |
|
|
63
54
|
| [ultravisor](/utility/ultravisor/) | Process supervision with scheduled tasks and LLM integration |
|