diff options
author | Hayleigh Thompson <me@hayleigh.dev> | 2022-05-21 05:24:48 +0100 |
---|---|---|
committer | Hayleigh Thompson <me@hayleigh.dev> | 2022-05-21 05:24:48 +0100 |
commit | 310a775794515185f3f5f771a330cfd30cbd6133 (patch) | |
tree | 56d72851a430ce9245778980bf2d2d883c40d47d | |
parent | c7453b4c9701c7b253da57aaa9bcafb8e5442341 (diff) | |
download | lustre-310a775794515185f3f5f771a330cfd30cbd6133.tar.gz lustre-310a775794515185f3f5f771a330cfd30cbd6133.zip |
:rocket: Deploy docs to GitHub Pages.
-rw-r--r-- | docs/index.html | 14 | ||||
-rw-r--r-- | docs/lustre.html | 128 |
2 files changed, 56 insertions, 86 deletions
diff --git a/docs/index.html b/docs/index.html index e21d25a..ff58606 100644 --- a/docs/index.html +++ b/docs/index.html @@ -215,9 +215,8 @@ <main class="content"> <h1>Lustre</h1> -<blockquote> <p>A framework for building create web apps – powered by Gleam and React!</p> -</blockquote> +<hr /> <p><a href="https://hex.pm/packages/lustre"><img src="https://img.shields.io/hexpm/v/lustre" alt="Package Version" /></a> <a href="https://hexdocs.pm/lustre/"><img src="https://img.shields.io/badge/hex-docs-ffaff3" alt="Hex Docs" /></a></p> <pre><code class="language-gleam">import gleam/int @@ -250,16 +249,15 @@ fn render (state) { ]) } </code></pre> -<blockquote> -<p>❗️ This package relies on Gleam’s JavaScript FFI and will not work if your are -targeting Erlang.</p> -</blockquote> +<hr /> +<p>❗️ This package relies on Gleam’s JavaScript FFI and is intended to be run in +the browser. <strong>It will not work if your are targetting Node.js or Erlang.</strong></p> <hr /> <h2>Installation</h2> <p>If available on Hex, this package can be added to your Gleam project:</p> <pre><code class="language-sh">gleam add lustre </code></pre> -<p>and its documentation can be found at <a href="https://hexdocs.pm/eval">https://hexdocs.pm/eval</a>. You will also +<p>and its documentation can be found at <a href="https://hexdocs.pm/lustre">https://hexdocs.pm/lustre</a>. You will also need to install <code>react</code> and <code>react-dom</code> from npm:</p> <pre><code class="language-sh">npm i react react-dom </code></pre> @@ -271,7 +269,7 @@ npm start </code></pre> <p>This sets up <code>chokidar</code> to watch our gleam source code and runs the compiler whenever we make a change. It also starts a server that will serve the examples -located in <code>test/examples/</code>.</p> +located in <code>test/example/</code>.</p> </main> 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 @@ <h2>Types</h2> <ul> - <li><a href="#Attribute">Attribute</a></li> - - <li><a href="#Cmd">Cmd</a></li> - - <li><a href="#Element">Element</a></li> + <li><a href="#App">App</a></li> <li><a href="#Error">Error</a></li> - <li><a href="#Program">Program</a></li> - </ul> @@ -263,56 +257,52 @@ <div class="member"> <div class="member-name"> - <h2 id="Attribute"> - <a href="#Attribute"> - Attribute - </a> - </h2> - - - </div> - <div class="custom-type-constructors"> - <div class="rendered-markdown"></div> - <pre><code class="hljs gleam">pub type Attribute(action) = - attribute.Attribute(action)</code></pre> - - - </div> - </div> - - <div class="member"> - <div class="member-name"> - <h2 id="Cmd"> - <a href="#Cmd"> - Cmd + <h2 id="App"> + <a href="#App"> + App </a> </h2> </div> <div class="custom-type-constructors"> - <div class="rendered-markdown"></div> - <pre><code class="hljs gleam">pub type Cmd(action) = - cmd.Cmd(action)</code></pre> - - - </div> - </div> - - <div class="member"> - <div class="member-name"> - <h2 id="Element"> - <a href="#Element"> - Element - </a> - </h2> - - - </div> - <div class="custom-type-constructors"> - <div class="rendered-markdown"></div> - <pre><code class="hljs gleam">pub type Element(action) = - element.Element(action)</code></pre> + <div class="rendered-markdown"><p>An <code>App</code> 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 <code>App</code> is pass it to <a href="#start"><code>start</code></a>.</p> +<p>You can construct an <code>App</code> from the two constructors exposed in this module: +<a href="#basic"><code>basic</code></a> and <a href="#application"><code>application</code></a>. Although you can’t do +anything but <a href="#start"><code>start</code></a> them, the constructors are separated in case +you want to set up an application but defer starting it until some later point +in time.</p> +<pre><code> ┌────────┐ + │ │ + │ update │ + │ │ + └──────┬─┘ + ▲ │ + │ │ #(State, Action) + Action │ │ + │ │ + │ ▼ + ┌──────┐ ┌─────────┴──────────────┐ + │ │ #(State, Action) │ │ + │ init ├───────────────────►│ Lustre Runtime │ + │ │ │ │ + └──────┘ └──────────────┬─────────┘ + ▲ │ + │ │ State + Action │ │ + │ ▼ + ┌─┴──────┐ + │ │ + │ render │ + │ │ + └────────┘ +</code></pre> +<p><small>Someone please PR the Gleam docs generator to fix the monospace font, +thanks! 💖</small></p> +</div> + <pre><code class="hljs gleam">pub opaque type App(state, action)</code></pre> </div> @@ -358,24 +348,6 @@ </div> </div> - <div class="member"> - <div class="member-name"> - <h2 id="Program"> - <a href="#Program"> - Program - </a> - </h2> - - - </div> - <div class="custom-type-constructors"> - <div class="rendered-markdown"></div> - <pre><code class="hljs gleam">pub opaque type Program(state, action)</code></pre> - - - </div> - </div> - </section> @@ -400,10 +372,10 @@ </div> <pre><code class="hljs gleam">pub fn application(init: #(a, Cmd(b)), update: fn(a, b) -> - #(a, Cmd(b)), render: fn(a) -> Element(b)) -> Program(a, b)</code></pre> + #(a, Cmd(b)), render: fn(a) -> Element(b)) -> App(a, b)</code></pre> <div class="rendered-markdown"><p>Create a more complex application mimicing TEA – the Elm architecture. We start with some initial <code>state</code>, a function to update that state, and then -a render function to derive our program’s view from that state.</p> +a render function to derive our app’s view from that state.</p> <p>Events produced by elements are passed a <code>dispatch</code> function that can be used to emit actions that trigger your <code>update</code> function to be called and trigger a rerender.</p> @@ -420,11 +392,11 @@ trigger a rerender.</p> </div> - <pre><code class="hljs gleam">pub fn basic(element: Element(a)) -> Program(Nil, a)</code></pre> - <div class="rendered-markdown"><p>Create a basic lustre program that just renders some element on the page. + <pre><code class="hljs gleam">pub fn basic(element: Element(a)) -> App(Nil, a)</code></pre> + <div class="rendered-markdown"><p>Create a basic lustre app that just renders some element on the page. Note that this doesn’t mean the content is static! With <code>element.stateful</code> you can still create components with local state.</p> -<p>Basic lustre programs don’t have any <em>global</em> application state and so the +<p>Basic lustre apps don’t have any <em>global</em> 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 <code>application</code> instead.</p> </div> @@ -440,15 +412,15 @@ around, you might want to consider using <code>application</code> instead.</p> </div> - <pre><code class="hljs gleam">pub fn start(program: Program(a, b), selector: String) -> Result( + <pre><code class="hljs gleam">pub fn start(app: App(a, b), selector: String) -> Result( fn(b) -> Nil, Error, )</code></pre> - <div class="rendered-markdown"><p>Once you have created a program with either <code>basic</code> or <code>application</code>, you -need to actually start it! This function will mount your program to the DOM + <div class="rendered-markdown"><p>Once you have created a app with either <code>basic</code> or <code>application</code>, you +need to actually start it! This function will mount your app to the DOM node that matches the query selector you provide.</p> <p>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. </p> +call to send actions to your app and trigger an update. </p> </div> </div> |