[Issue #5] Todo list example #16

HugoNijhuis · 2026-01-09T16:01:49Z

HugoNijhuis commented

2026-01-09 16:01:49 +00:00

Summary

Add a todo list example that demonstrates core Iris reactive patterns.

Changes

Add examples/todo/main.go with a complete todo list application
Demonstrates Signal holding a slice/list of todos
Shows adding and removing items dynamically via signals
Component composition pattern (inputRow, todoList, todoItem functions)
Input handling with TextInput and Enter key support
Conditional rendering (empty state message, strikethrough for completed items)

Patterns Demonstrated

Signal with slice: reactive.NewSignal([]Todo{}) for managing a list
Component composition: Separate functions for todoItem, todoList, inputRow
Effects for list rendering: Using reactive.NewEffect to re-render when todos change
Event handling: Checkbox toggle, delete button, Enter key on input
Conditional styling: Strikethrough and color change for completed items

Closes #5

## Summary Add a todo list example that demonstrates core Iris reactive patterns. ## Changes - Add `examples/todo/main.go` with a complete todo list application - Demonstrates Signal holding a slice/list of todos - Shows adding and removing items dynamically via signals - Component composition pattern (inputRow, todoList, todoItem functions) - Input handling with TextInput and Enter key support - Conditional rendering (empty state message, strikethrough for completed items) ## Patterns Demonstrated - **Signal with slice**: `reactive.NewSignal([]Todo{})` for managing a list - **Component composition**: Separate functions for `todoItem`, `todoList`, `inputRow` - **Effects for list rendering**: Using `reactive.NewEffect` to re-render when todos change - **Event handling**: Checkbox toggle, delete button, Enter key on input - **Conditional styling**: Strikethrough and color change for completed items Closes #5

HugoNijhuis added 1 commit 2026-01-09 16:01:50 +00:00

Add todo list example

CI / build (pull_request) Successful in 27s

Details

a85ae91023

This example demonstrates Iris reactive patterns:
- Signal holding a slice/list of todos
- Adding and removing items dynamically
- Component composition (inputRow, todoList, todoItem)
- Input handling with TextInput and Enter key support
- Conditional rendering (empty state, strikethrough for completed)

Closes #5

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

HugoNijhuis commented

2026-01-09 16:08:47 +00:00

Code Review

Summary

Comprehensive todo list example demonstrating reactive list management, component composition, and event handling. Well-structured with good separation of concerns.

Issue: Internal Package Import

The example imports git.flowmade.one/flowmade-one/iris/internal/element (line 9). This is problematic:

Users copying examples shouldn't depend on internal APIs
Internal packages may change without notice
Examples should demonstrate the public API

Affected Code

Line 145-148: Raw checkbox element

checkbox := element.NewElement("input")
checkbox.Attr("type", "checkbox")

Line 155-158: Raw span element

text := element.NewElement("span")
text.Set("textContent", todo.Text)

Suggested Fix

Either:

Add public components - Create ui.Checkbox and use ui.Text with styling support
Export element creation - If needed, expose element creation through the public ui package

For now, consider if the checkbox functionality can be achieved with existing ui components, or flag that this example requires framework additions.

Other Notes

Component composition pattern is excellent
Effect-based re-rendering is a good demonstration
Helper functions (toggleTodo, deleteTodo) are clean

Please remove the internal package dependency before merging.

## Code Review ### Summary Comprehensive todo list example demonstrating reactive list management, component composition, and event handling. Well-structured with good separation of concerns. ### Issue: Internal Package Import The example imports `git.flowmade.one/flowmade-one/iris/internal/element` (line 9). This is problematic: 1. Users copying examples shouldn't depend on internal APIs 2. Internal packages may change without notice 3. Examples should demonstrate the public API ### Affected Code **Line 145-148**: Raw checkbox element ```go checkbox := element.NewElement("input") checkbox.Attr("type", "checkbox") ``` **Line 155-158**: Raw span element ```go text := element.NewElement("span") text.Set("textContent", todo.Text) ``` ### Suggested Fix Either: 1. **Add public components** - Create `ui.Checkbox` and use `ui.Text` with styling support 2. **Export element creation** - If needed, expose element creation through the public `ui` package For now, consider if the checkbox functionality can be achieved with existing `ui` components, or flag that this example requires framework additions. ### Other Notes - Component composition pattern is excellent - Effect-based re-rendering is a good demonstration - Helper functions (toggleTodo, deleteTodo) are clean Please remove the internal package dependency before merging.

HugoNijhuis added 1 commit 2026-01-09 16:24:16 +00:00

Remove internal package import from todo example

CI / build (pull_request) Successful in 28s

Details

2b2b8978d8

Replace direct internal/element usage with public ui package
components to ensure examples only use the public API:

- Add ui.RawCheckbox for plain checkbox without label wrapper
- Add ui.Span for span elements with text content
- Add View.TextDecoration modifier for strikethrough styling
- Update todo example to use these public components

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

HugoNijhuis commented

2026-01-09 16:29:53 +00:00

Code Review - Approved

Comprehensive todo list example demonstrating reactive list management, component composition, and event handling.

Highlights

Clean component composition pattern (inputRow, todoList, todoItem)
Signal-based state management for todos and input
Effect-based re-rendering when todos change
Good helper functions (toggleTodo, deleteTodo)

Previous Feedback

Internal package import removed. Added public API components:

ui.RawCheckbox for plain checkbox input
ui.Span for span elements
View.TextDecoration modifier

LGTM - merging.

## Code Review - Approved Comprehensive todo list example demonstrating reactive list management, component composition, and event handling. ### Highlights - Clean component composition pattern (`inputRow`, `todoList`, `todoItem`) - Signal-based state management for todos and input - Effect-based re-rendering when todos change - Good helper functions (`toggleTodo`, `deleteTodo`) ### Previous Feedback Internal package import removed. Added public API components: - `ui.RawCheckbox` for plain checkbox input - `ui.Span` for span elements - `View.TextDecoration` modifier LGTM - merging.

HugoNijhuis merged commit 9642fd008e into main

2026-01-09 16:29:58 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: flowmade-one/iris#16