From 310a775794515185f3f5f771a330cfd30cbd6133 Mon Sep 17 00:00:00 2001 From: Hayleigh Thompson Date: Sat, 21 May 2022 05:24:48 +0100 Subject: :rocket: Deploy docs to GitHub Pages. --- docs/lustre.html | 128 ++++++++++++++++++++++--------------------------------- 1 file changed, 50 insertions(+), 78 deletions(-) (limited to 'docs/lustre.html') diff --git a/docs/lustre.html b/docs/lustre.html index 5c851e8..5bd99b1 100644 --- a/docs/lustre.html +++ b/docs/lustre.html @@ -214,16 +214,10 @@

Types

@@ -263,56 +257,52 @@
-

- - Attribute - -

- - -
-
-
-
pub type Attribute(action) =
-  attribute.Attribute(action)
- - -
-
- -
-
-
-
pub type Cmd(action) =
-  cmd.Cmd(action)
- - -
-
- -
-
-

- - Element - -

- - -
-
-
-
pub type Element(action) =
-  element.Element(action)
+

An App describes a Lustre application: what state it holds and what kind +of actions get dispatched to update that state. The only useful thing you can +do with an App is pass it to start.

+

You can construct an App from the two constructors exposed in this module: +basic and application. Although you can’t do +anything but start them, the constructors are separated in case +you want to set up an application but defer starting it until some later point +in time.

+
                                      ┌────────┐
+                                      │        │
+                                      │ update │
+                                      │        │
+                                      └──────┬─┘
+                                        ▲    │
+                                        │    │ #(State, Action)
+                                 Action │    │
+                                        │    │
+                                        │    ▼
+  ┌──────┐                    ┌─────────┴──────────────┐
+  │      │  #(State, Action)  │                        │
+  │ init ├───────────────────►│     Lustre Runtime     │
+  │      │                    │                        │
+  └──────┘                    └──────────────┬─────────┘
+                                        ▲    │
+                                        │    │ State
+                                 Action │    │
+                                        │    ▼
+                                      ┌─┴──────┐
+                                      │        │
+                                      │ render │
+                                      │        │
+                                      └────────┘
+
+

Someone please PR the Gleam docs generator to fix the monospace font, +thanks! 💖

+
+
pub opaque type App(state, action)
@@ -358,24 +348,6 @@
-
-
-

- - Program - -

- - -
-
-
-
pub opaque type Program(state, action)
- - -
-
- @@ -400,10 +372,10 @@
pub fn application(init: #(a, Cmd(b)), update: fn(a, b) ->
-    #(a, Cmd(b)), render: fn(a) -> Element(b)) -> Program(a, b)
+ #(a, Cmd(b)), render: fn(a) -> Element(b)) -> App(a, b)

Create a more complex application mimicing TEA – the Elm architecture. We start with some initial state, a function to update that state, and then -a render function to derive our program’s view from that state.

+a render function to derive our app’s view from that state.

Events produced by elements are passed a dispatch function that can be used to emit actions that trigger your update function to be called and trigger a rerender.

@@ -420,11 +392,11 @@ trigger a rerender.

-
pub fn basic(element: Element(a)) -> Program(Nil, a)
-

Create a basic lustre program that just renders some element on the page. +

pub fn basic(element: Element(a)) -> App(Nil, a)
+

Create a basic lustre app that just renders some element on the page. Note that this doesn’t mean the content is static! With element.stateful you can still create components with local state.

-

Basic lustre programs don’t have any global application state and so the +

Basic lustre apps don’t have any global application state and so the plumbing is a lot simpler. If you find yourself passing lot’s state of state around, you might want to consider using application instead.

@@ -440,15 +412,15 @@ around, you might want to consider using application instead.

-
pub fn start(program: Program(a, b), selector: String) -> Result(
+    
pub fn start(app: App(a, b), selector: String) -> Result(
   fn(b) -> Nil,
   Error,
 )
-

Once you have created a program with either basic or application, you -need to actually start it! This function will mount your program to the DOM +

Once you have created a app with either basic or application, you +need to actually start it! This function will mount your app to the DOM node that matches the query selector you provide.

If everything mounted OK, we’ll get back a dispatch function that you can -call to send actions to your program and trigger an update.

+call to send actions to your app and trigger an update.

-- cgit v1.2.3