diff options
Diffstat (limited to 'examples/02-interactivity')
| -rw-r--r-- | examples/02-interactivity/README.md | 20 | ||||
| -rw-r--r-- | examples/02-interactivity/src/app.gleam | 8 |
2 files changed, 23 insertions, 5 deletions
diff --git a/examples/02-interactivity/README.md b/examples/02-interactivity/README.md index 5cfbf4f..bae2f9a 100644 --- a/examples/02-interactivity/README.md +++ b/examples/02-interactivity/README.md @@ -120,6 +120,24 @@ of _view functions_. ## Creating a dynamic Lustre application In the previous example we used the `lustre.element` function to construct a -static Lustre app. To construct a simple interactive app we can use `lustre.simple` +static Lustre app. To introduce the basic MVU loop, we can use `lustre.simple` instead. From now on we'll see that all the different ways to construct a Lustre application all take the same three `init`, `update`, and `view` functions. + +Starting a Lustre application with `lustre.start` requires three things: + +- A configured `Application` (that's what we used `lustre.element` for). + +- A [CSS selector](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) + to locate the DOM node to mount the application on to. As in other frameworks, + it's common to use an element with the id "app": for that you'd write the + selector as `#app`. + +- Some initial data to pass to the application's `init` function. Because applications + constructed with `lustre.element` are not dynamic there's nothing meaningful + to pass in here, so we just use `Nil`. + +Starting an application could fail for a number of reasons, so this function +returns a `Result`. The `Ok` value is a function you can use to send messages to +your running application from the outside world: we'll see more of that in later +examples! diff --git a/examples/02-interactivity/src/app.gleam b/examples/02-interactivity/src/app.gleam index d4b5eb6..efbed9f 100644 --- a/examples/02-interactivity/src/app.gleam +++ b/examples/02-interactivity/src/app.gleam @@ -4,13 +4,13 @@ import lustre/attribute import lustre/element.{type Element} import lustre/element/html import lustre/event -// These examples are written with lustre_ui in mind. They'll work regardless, -// but to see what lustre_ui can do make sure to run each of these examples with +// These examples are written with `lustre/ui` in mind. They'll work regardless, +// but to see what `lustre/ui` can do make sure to run each of these examples with // the `--include-styles` flag: // -// $ gleam run -m lustre/try -- --include-styles +// $ gleam run -m lustre dev --include-styles // -// In your own apps, make sure to add the `lustre_ui` dependency and include the +// In your own apps, make sure to add the `lustre/ui` dependency and include the // stylesheet somewhere. import lustre/ui |