Documentation ¶
Overview ¶
Package todo demonstrates a simple todo mvc app built with FUSS
Generated. DO NOT EDIT.
Package todo demonstrates a simple todo mvc app built with FUSS ¶
Package todo demonstrates a simple todo mvc app built with FUSS
Example (App) ¶
package main import ( "fmt" "github.com/dotchain/fuss/dom/html" "github.com/dotchain/fuss/todo" "github.com/yosssi/gohtml" ) func main() { app, close := todo.NewApp() root := app("root") // add a "Third task" via the input control html.SetValue(root.Children()[1].Children()[0].Children()[0], "Third task") fmt.Println(gohtml.Format(fmt.Sprint(root))) close() leaks := html.GetCurrentResources() if n := len(leaks); n > 0 { fmt.Println("Leaked", n, "resources\n", leaks) } }
Output: <div style="display: flex; flex-direction: column"> <div style="flex-shrink: 0"> <span> FUSS TODO </span> </div> <div style="overflow-y: auto; flex-grow: 1"> <div style="display: flex; flex-direction: column"> <input placeholder="Add a todo" type="text"/> <div style="display: flex; flex-direction: row"> <div tabindex="0"> <label style="border-radius: 4px; border-color: blue; border-width: 1px"> All </label> </div> <div tabindex="0"> <label style="border-radius: 4px; border-color: lightgrey; border-width: 1px"> Active </label> </div> <div tabindex="0"> <label style="border-radius: 4px; border-color: lightgrey; border-width: 1px"> Done </label> </div> </div> <div style="display: flex; flex-direction: column"> <div style="display: flex; flex-direction: row"> <input checked="" type="checkbox"/> <input type="text" value="First task"/> </div> <div style="display: flex; flex-direction: row"> <input type="checkbox"/> <input type="text" value="Second task"/> </div> <div style="display: flex; flex-direction: row"> <input type="checkbox"/> <input type="text" value="Third task"/> </div> </div> </div> </div> <div style="flex-shrink: 0"> <a href="https://github.com/dotchain/fuss"> <span> github </span> </a> </div> </div>
Example (RenderFilteredList) ¶
package main import ( "fmt" "github.com/dotchain/dot/streams" "github.com/dotchain/fuss/dom/html" "github.com/dotchain/fuss/todo" "github.com/dotchain/fuss/todo/controls" "github.com/yosssi/gohtml" ) func main() { todos := todo.TodoList{ {"one", false, "first task"}, {"two", true, "second task"}, } stream := &todo.TodoListStream{Stream: streams.New(), Value: todos} filter := &streams.S16{Stream: streams.New(), Value: controls.ShowDone} filteredList, close := todo.NewFilteredList() root := filteredList("root", filter, stream) fmt.Println(gohtml.Format(fmt.Sprint(root))) filter = filter.Update(controls.ShowActive) root = filteredList("root", filter, stream) fmt.Println(gohtml.Format(fmt.Sprint(root))) filter = filter.Update(controls.ShowAll) root = filteredList("root", filter, stream) fmt.Println(gohtml.Format(fmt.Sprint(root))) close() leaks := html.GetCurrentResources() if n := len(leaks); n > 0 { fmt.Println("Leaked", n, "resources\n", leaks) } }
Output: <div style="display: flex; flex-direction: column"> <div style="display: flex; flex-direction: row"> <input checked="" type="checkbox"/> <input type="text" value="second task"/> </div> </div> <div style="display: flex; flex-direction: column"> <div style="display: flex; flex-direction: row"> <input type="checkbox"/> <input type="text" value="first task"/> </div> </div> <div style="display: flex; flex-direction: column"> <div style="display: flex; flex-direction: row"> <input type="checkbox"/> <input type="text" value="first task"/> </div> <div style="display: flex; flex-direction: row"> <input checked="" type="checkbox"/> <input type="text" value="second task"/> </div> </div>
Example (RenderListView) ¶
package main import ( "fmt" "github.com/dotchain/dot/streams" "github.com/dotchain/fuss/dom/html" "github.com/dotchain/fuss/todo" "github.com/yosssi/gohtml" ) func main() { todos := todo.TodoList{ {"one", false, "first task"}, {"two", true, "second task"}, } stream := &todo.TodoListStream{Stream: streams.New(), Value: todos} listView, close := todo.NewListView() root := listView("root", stream) fmt.Println(gohtml.Format(fmt.Sprint(root))) // TODO: find a better way to work with private state in // test tools rather than mucking directly with HTML output // set filter = "Active" which should filter out the second task html.Click(root.Children()[1].Children()[1]) fmt.Println(gohtml.Format(fmt.Sprint(root))) close() leaks := html.GetCurrentResources() if n := len(leaks); n > 0 { fmt.Println("Leaked", n, "resources\n", leaks) } }
Output: <div style="display: flex; flex-direction: column"> <input placeholder="Add a todo" type="text"/> <div style="display: flex; flex-direction: row"> <div tabindex="0"> <label style="border-radius: 4px; border-color: blue; border-width: 1px"> All </label> </div> <div tabindex="0"> <label style="border-radius: 4px; border-color: lightgrey; border-width: 1px"> Active </label> </div> <div tabindex="0"> <label style="border-radius: 4px; border-color: lightgrey; border-width: 1px"> Done </label> </div> </div> <div style="display: flex; flex-direction: column"> <div style="display: flex; flex-direction: row"> <input type="checkbox"/> <input type="text" value="first task"/> </div> <div style="display: flex; flex-direction: row"> <input checked="" type="checkbox"/> <input type="text" value="second task"/> </div> </div> </div> <div style="display: flex; flex-direction: column"> <input placeholder="Add a todo" type="text"/> <div style="display: flex; flex-direction: row"> <div tabindex="0"> <label style="border-radius: 4px; border-color: lightgrey; border-width: 1px"> All </label> </div> <div tabindex="0"> <label style="border-radius: 4px; border-color: blue; border-width: 1px"> Active </label> </div> <div tabindex="0"> <label style="border-radius: 4px; border-color: lightgrey; border-width: 1px"> Done </label> </div> </div> <div style="display: flex; flex-direction: column"> <div style="display: flex; flex-direction: row"> <input type="checkbox"/> <input type="text" value="first task"/> </div> </div> </div>
Example (RenderTask) ¶
package main import ( "fmt" "github.com/dotchain/dot/streams" "github.com/dotchain/fuss/dom/html" "github.com/dotchain/fuss/todo" "github.com/yosssi/gohtml" ) func main() { item := &todo.TodoStream{Stream: streams.New(), Value: todo.Todo{Description: "first task"}} render, close := todo.NewTodo() root := render("root", item) fmt.Println(gohtml.Format(fmt.Sprint(root))) item.Complete().Update(true) item = item.Latest() root = render("root", item) fmt.Println(gohtml.Format(fmt.Sprint(root))) close() leaks := html.GetCurrentResources() if n := len(leaks); n > 0 { fmt.Println("Leaked", n, "resources\n", leaks) } }
Output: <div style="display: flex; flex-direction: row"> <input type="checkbox"/> <input type="text" value="first task"/> </div> <div style="display: flex; flex-direction: row"> <input checked="" type="checkbox"/> <input type="text" value="first task"/> </div>
Index ¶
- type AppFunc
- type CollabFunc
- type FilteredListFunc
- type ListViewFunc
- type Todo
- type TodoFunc
- type TodoList
- func (t TodoList) Apply(ctx changes.Context, c changes.Change) changes.Value
- func (t TodoList) ApplyCollection(ctx changes.Context, c changes.Change) changes.Collection
- func (t TodoList) Count() int
- func (t TodoList) Move(offset, count, distance int) TodoList
- func (t TodoList) Slice(offset, count int) changes.Collection
- func (t TodoList) Splice(offset, count int, insert ...Todo) TodoList
- type TodoListStream
- func (s *TodoListStream) Item(index int) *TodoStream
- func (s *TodoListStream) Latest() *TodoListStream
- func (s *TodoListStream) Move(offset, count, distance int) *TodoListStream
- func (s *TodoListStream) Next() (*TodoListStream, changes.Change)
- func (s *TodoListStream) Splice(offset, count int, replacement ...Todo) *TodoListStream
- func (s *TodoListStream) Update(val TodoList) *TodoListStream
- type TodoStream
Examples ¶
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
This section is empty.
Types ¶
type CollabFunc ¶
type CollabFunc = func(key interface{}, todos *TodoListStream) dom.Element
CollabFunc hosts a collaborative todo MVC app
func NewCollab ¶
func NewCollab() (update CollabFunc, closeAll func())
NewCollab is the constructor for CollabFunc
type FilteredListFunc ¶
type FilteredListFunc = func(key interface{}, filter *streams.S16, todos *TodoListStream) dom.Element
FilteredListFunc renders a list of filtered todos
Individual tasks can be modified underneath.
func NewFilteredList ¶
func NewFilteredList() (update FilteredListFunc, closeAll func())
NewFilteredList is the constructor for FilteredListFunc
type ListViewFunc ¶
type ListViewFunc = func(key interface{}, todos *TodoListStream) dom.Element
ListViewFunc renders aa filteredList with a filter to control the behavior
func NewListView ¶
func NewListView() (update ListViewFunc, closeAll func())
NewListView is the constructor for ListViewFunc
type Todo ¶
Todo represents an item in the TODO list.
func (Todo) SetComplete ¶
func (Todo) SetDescription ¶
type TodoFunc ¶
type TodoFunc = func(key interface{}, todoStream *TodoStream) dom.Element
TodoFunc is the shape of a control that renders a Todo item
type TodoList ¶
type TodoList []Todo
TodoList represents a collection of todos
func (TodoList) ApplyCollection ¶
type TodoListStream ¶
TodoListStream implements a stream of TodoList values
func (*TodoListStream) Item ¶
func (s *TodoListStream) Item(index int) *TodoStream
Item returns the sub item stream
func (*TodoListStream) Latest ¶
func (s *TodoListStream) Latest() *TodoListStream
Latest returns the latest entry in the stream
func (*TodoListStream) Move ¶
func (s *TodoListStream) Move(offset, count, distance int) *TodoListStream
Move shuffles Value[offset:offset+count] over by distance
func (*TodoListStream) Next ¶
func (s *TodoListStream) Next() (*TodoListStream, changes.Change)
Next returns the next entry in the stream if there is one
func (*TodoListStream) Splice ¶
func (s *TodoListStream) Splice(offset, count int, replacement ...Todo) *TodoListStream
Splice splices the items replacing Value[offset:offset+count] with replacement
func (*TodoListStream) Update ¶
func (s *TodoListStream) Update(val TodoList) *TodoListStream
Update replaces the current value with the new value
type TodoStream ¶
TodoStream implements a stream of Todo values
func (*TodoStream) Complete ¶
func (s *TodoStream) Complete() *streams.Bool
func (*TodoStream) Description ¶
func (s *TodoStream) Description() *streams.S16
func (*TodoStream) Latest ¶
func (s *TodoStream) Latest() *TodoStream
Latest returns the latest entry in the stream
func (*TodoStream) Next ¶
func (s *TodoStream) Next() (*TodoStream, changes.Change)
Next returns the next entry in the stream if there is one
func (*TodoStream) Update ¶
func (s *TodoStream) Update(val Todo) *TodoStream
Update replaces the current value with the new value