diff options
author | Hayleigh Thompson <me@hayleigh.dev> | 2024-02-18 11:08:06 +0000 |
---|---|---|
committer | Hayleigh Thompson <me@hayleigh.dev> | 2024-02-18 11:08:06 +0000 |
commit | d2bf53a4ade4bf283fdd1b40786fa913ae547b09 (patch) | |
tree | 9e3d11a56f8985bbc267e464555ef914356f100e /examples/02-interactivity | |
parent | 15c562113f61e6088e4414f7236270cd5c9fe51c (diff) | |
download | lustre-d2bf53a4ade4bf283fdd1b40786fa913ae547b09.tar.gz lustre-d2bf53a4ade4bf283fdd1b40786fa913ae547b09.zip |
:memo: Update references from 'lustre/try' to 'lustre dev'.
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 |