diff options
| -rw-r--r-- | examples/01-hello-world/README.md | 4 | ||||
| -rw-r--r-- | examples/01-hello-world/src/app.gleam | 4 | ||||
| -rw-r--r-- | examples/02-interactivity/src/app.gleam | 4 | ||||
| -rw-r--r-- | examples/03-controlled-inputs/src/app.gleam | 4 | ||||
| -rw-r--r-- | examples/04-custom-event-handlers/src/app.gleam | 4 | ||||
| -rw-r--r-- | examples/05-http-requests/src/app.gleam | 4 | ||||
| -rw-r--r-- | examples/06-custom-effects/src/app.gleam | 4 | ||||
| -rw-r--r-- | pages/guide/02-state-management.md | 28 | ||||
| -rw-r--r-- | pages/reference/cli.md | 4 | ||||
| -rw-r--r-- | src/lustre/cli/dev.gleam | 2 |
10 files changed, 45 insertions, 17 deletions
diff --git a/examples/01-hello-world/README.md b/examples/01-hello-world/README.md index aabaab2..c7b5bbc 100644 --- a/examples/01-hello-world/README.md +++ b/examples/01-hello-world/README.md @@ -71,10 +71,10 @@ with Lustre ASAP. Each of these examples have been written to use elements from that package. Lustre's development server can be configured to include the `lustre/ui` stylesheet -by passing the `--include-styles` flag: +by passing the `--use-lustre-ui` flag: ```sh -$ gleam run -m lustre dev --include-styles +$ gleam run -m lustre dev --use-lustre-ui ``` It's not necessary to use `lustre/ui` to use Lustre or to check out any of these diff --git a/examples/01-hello-world/src/app.gleam b/examples/01-hello-world/src/app.gleam index 3e11f5b..37ea96c 100644 --- a/examples/01-hello-world/src/app.gleam +++ b/examples/01-hello-world/src/app.gleam @@ -4,9 +4,9 @@ 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 -// the `--include-styles` flag: +// the `--use-lustre-ui` flag: // -// $ gleam run -m lustre dev --include-styles +// $ gleam run -m lustre dev --use-lustre-ui // // In your own apps, make sure to add the `lustre/ui` dependency and include the // stylesheet somewhere. diff --git a/examples/02-interactivity/src/app.gleam b/examples/02-interactivity/src/app.gleam index efbed9f..72d3a58 100644 --- a/examples/02-interactivity/src/app.gleam +++ b/examples/02-interactivity/src/app.gleam @@ -6,9 +6,9 @@ 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 -// the `--include-styles` flag: +// the `--use-lustre-ui` flag: // -// $ gleam run -m lustre dev --include-styles +// $ gleam run -m lustre dev --use-lustre-ui // // In your own apps, make sure to add the `lustre/ui` dependency and include the // stylesheet somewhere. diff --git a/examples/03-controlled-inputs/src/app.gleam b/examples/03-controlled-inputs/src/app.gleam index 5c8381d..2d43170 100644 --- a/examples/03-controlled-inputs/src/app.gleam +++ b/examples/03-controlled-inputs/src/app.gleam @@ -6,9 +6,9 @@ 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 -// the `--include-styles` flag: +// the `--use-lustre-ui` flag: // -// $ gleam run -m lustre try --include-styles +// $ gleam run -m lustre try --use-lustre-ui // // In your own apps, make sure to add the `lustre/ui` dependency and include the // stylesheet somewhere. diff --git a/examples/04-custom-event-handlers/src/app.gleam b/examples/04-custom-event-handlers/src/app.gleam index fe7c6c3..35a6831 100644 --- a/examples/04-custom-event-handlers/src/app.gleam +++ b/examples/04-custom-event-handlers/src/app.gleam @@ -8,9 +8,9 @@ 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 -// the `--include-styles` flag: +// the `--use-lustre-ui` flag: // -// $ gleam run -m lustre dev --include-styles +// $ gleam run -m lustre dev --use-lustre-ui // // In your own apps, make sure to add the `lustre/ui` dependency and include the // stylesheet somewhere. diff --git a/examples/05-http-requests/src/app.gleam b/examples/05-http-requests/src/app.gleam index cd9aa0b..9fd518c 100644 --- a/examples/05-http-requests/src/app.gleam +++ b/examples/05-http-requests/src/app.gleam @@ -14,9 +14,9 @@ import lustre/event 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 -// the `--include-styles` flag: +// the `--use-lustre-ui` flag: // -// $ gleam run -m lustre dev --include-styles +// $ gleam run -m lustre dev --use-lustre-ui // // In your own apps, make sure to add the `lustre/ui` dependency and include the // stylesheet somewhere. diff --git a/examples/06-custom-effects/src/app.gleam b/examples/06-custom-effects/src/app.gleam index 60af59e..7ee0096 100644 --- a/examples/06-custom-effects/src/app.gleam +++ b/examples/06-custom-effects/src/app.gleam @@ -6,9 +6,9 @@ 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 -// the `--include-styles` flag: +// the `--use-lustre-ui` flag: // -// $ gleam run -m lustre dev --include-styles +// $ gleam run -m lustre dev --use-lustre-ui // // In your own apps, make sure to add the `lustre/ui` dependency and include the // stylesheet somewhere. diff --git a/pages/guide/02-state-management.md b/pages/guide/02-state-management.md index e525f5f..2c9b641 100644 --- a/pages/guide/02-state-management.md +++ b/pages/guide/02-state-management.md @@ -18,6 +18,34 @@ The MVU architecture is an example of _unidirectional data flow_: - The UI re-renders based on the new state. +```text + +--------+ + | | + | update | + | | + +--------+ + ^ | + | | + Msg | | Model + | | + | v ++------+ +------------------------+ +| | Model | | +| init |------------------------>| Lustre Runtime | +| | | | ++------+ +------------------------+ + ^ | + | | + Msg | | Model + | | + | v + +--------+ + | | + | view | + | | + +--------+ +``` + This is in contrast to _bidirectional_ approaches to state management, where the UI can modify state directly. For some developers this can be a difficult idea to get used to, but it brings a number of benefits: diff --git a/pages/reference/cli.md b/pages/reference/cli.md index 7959959..d02106e 100644 --- a/pages/reference/cli.md +++ b/pages/reference/cli.md @@ -142,7 +142,7 @@ Flags: - `--host` - The host to serve the project on. Defaults to `0.0.0.0` and is accessible on localhosts and any other devices on the same network. -- `--include-styles` - Include the stylesheet from +- `--use-lustre-ui` - Include the stylesheet from [lustre/ui](https://hexdocs.pm/lustre_ui/). This is mainly used in the example projects, but you may use this option to quickly experiment with the library yourself. @@ -150,7 +150,7 @@ Flags: Example: ```sh -gleam run -m lustre dev --port=8080 --include-styles +gleam run -m lustre dev --port=8080 --use-lustre-ui ``` ## Getting help diff --git a/src/lustre/cli/dev.gleam b/src/lustre/cli/dev.gleam index d1bee68..3b24dc9 100644 --- a/src/lustre/cli/dev.gleam +++ b/src/lustre/cli/dev.gleam @@ -96,7 +96,7 @@ pub fn run() -> Command(Nil) { |> flag.default(default) |> flag.description(description) }) - |> glint.flag("include-styles", { + |> glint.flag("use-lustre-ui", { let description = "" let default = False |