From d2bf53a4ade4bf283fdd1b40786fa913ae547b09 Mon Sep 17 00:00:00 2001 From: Hayleigh Thompson Date: Sun, 18 Feb 2024 11:08:06 +0000 Subject: :memo: Update references from 'lustre/try' to 'lustre dev'. --- examples/01-hello-world/README.md | 31 ++++--------------------- examples/01-hello-world/src/app.gleam | 24 +++++++++---------- examples/02-interactivity/README.md | 20 +++++++++++++++- examples/02-interactivity/src/app.gleam | 8 +++---- examples/03-controlled-inputs/src/app.gleam | 8 +++---- examples/04-custom-event-handlers/src/app.gleam | 8 +++---- examples/05-http-requests/src/app.gleam | 8 +++---- examples/06-custom-effects/src/app.gleam | 8 +++---- 8 files changed, 54 insertions(+), 61 deletions(-) (limited to 'examples') diff --git a/examples/01-hello-world/README.md b/examples/01-hello-world/README.md index cd9c068..c82b34d 100644 --- a/examples/01-hello-world/README.md +++ b/examples/01-hello-world/README.md @@ -52,30 +52,10 @@ import lustre/element/html.{div, p} ... ``` -## Starting a Lustre application - -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! - ## Seeing the result Lustre ships with a very simple development server to help you look through these -examples. You can run `gleam run -m lustre/try` in any of these examples to start +examples. You can run `gleam run -m lustre try` in any of these examples to start this development server and head over to `localhost:1234` to see what it produces. If you're coming from a more mature Web development setup, you should know that @@ -83,9 +63,9 @@ this preview server is _not_ a replacement for a more robust development setup! While we work on building this into Lustre we recommend using [vite](https://vitejs.dev) with the [vite-gleam](https://www.npmjs.com/package/vite-gleam) plugin. -### Enabling lustre_ui +### Enabling lustre/ui -[Lustre_ui](https://hexdocs.pm/lustre_ui/) is a separate package published by us +[`lustre/ui`](https://hexdocs.pm/lustre_ui/) is a separate package published by us to provide a collection of robust styled elements for folks that want to get working with Lustre ASAP. Each of these examples have been written to use elements from that package. @@ -94,11 +74,8 @@ The lustre/try preview server can be configured to include the lustre_ui stylesh by passing the `--include-styles` flag: ```sh -$ gleam run -m lustre/try -- --include-styles +$ gleam run -m lustre try --include-styles ``` -Note that the first `--` is necessary so the Gleam binary knows this is a flag -that should be passed to lustre/try! - It's not necessary to use lustre_ui to use Lustre or to check out any of these examples, but the option is there if you want it. diff --git a/examples/01-hello-world/src/app.gleam b/examples/01-hello-world/src/app.gleam index 5d2b50a..3e11f5b 100644 --- a/examples/01-hello-world/src/app.gleam +++ b/examples/01-hello-world/src/app.gleam @@ -2,26 +2,24 @@ import lustre import lustre/attribute import lustre/element import lustre/element/html -// 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 pub fn main() { let styles = [#("width", "100vw"), #("height", "100vh"), #("padding", "1rem")] - let app = - lustre.element(ui.centre( - [attribute.style(styles)], - html.div([], [ - html.h1([], [element.text("Hello, world.")]), - html.h2([], [element.text("Welcome to Lustre.")]), - ]), - )) - let assert Ok(_) = lustre.start(app, "#app", Nil) + lustre.element(ui.centre( + [attribute.style(styles)], + html.div([], [ + html.h1([], [element.text("Hello, world.")]), + html.h2([], [element.text("Welcome to Lustre.")]), + ]), + )) } 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 diff --git a/examples/03-controlled-inputs/src/app.gleam b/examples/03-controlled-inputs/src/app.gleam index babef7a..5c8381d 100644 --- a/examples/03-controlled-inputs/src/app.gleam +++ b/examples/03-controlled-inputs/src/app.gleam @@ -4,13 +4,13 @@ import lustre import lustre/attribute import lustre/element.{type Element} 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 try --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 import lustre/ui/aside diff --git a/examples/04-custom-event-handlers/src/app.gleam b/examples/04-custom-event-handlers/src/app.gleam index 7bbb979..fe7c6c3 100644 --- a/examples/04-custom-event-handlers/src/app.gleam +++ b/examples/04-custom-event-handlers/src/app.gleam @@ -6,13 +6,13 @@ import lustre import lustre/attribute import lustre/element.{type Element} 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 import lustre/ui/aside diff --git a/examples/05-http-requests/src/app.gleam b/examples/05-http-requests/src/app.gleam index 0abd9dc..cd9aa0b 100644 --- a/examples/05-http-requests/src/app.gleam +++ b/examples/05-http-requests/src/app.gleam @@ -12,13 +12,13 @@ import lustre/event // // https://hexdocs.pm/lustre_http/index.html import lustre_http.{type HttpError} -// 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 import lustre/ui/aside diff --git a/examples/06-custom-effects/src/app.gleam b/examples/06-custom-effects/src/app.gleam index 289de5d..60af59e 100644 --- a/examples/06-custom-effects/src/app.gleam +++ b/examples/06-custom-effects/src/app.gleam @@ -4,13 +4,13 @@ import lustre/attribute import lustre/effect.{type Effect} import lustre/element.{type Element} 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 -- cgit v1.2.3