diff options
| author | Hayleigh Thompson <me@hayleigh.dev> | 2023-12-22 01:37:39 +0000 |
|---|---|---|
| committer | Hayleigh Thompson <me@hayleigh.dev> | 2023-12-22 11:01:21 +0000 |
| commit | ff3a5e7ce450f1007ae39a47f4e1b431da04a23d (patch) | |
| tree | e355b8c8cbc5c662b8f700360672d43ae1dce519 /examples | |
| parent | ec7b40fc801e5f5af372f7b0b6524ee0bfcf8d3c (diff) | |
| download | lustre-ff3a5e7ce450f1007ae39a47f4e1b431da04a23d.tar.gz lustre-ff3a5e7ce450f1007ae39a47f4e1b431da04a23d.zip | |
:recycle: Refactor example apps to use lustre/try instead of vite.
Diffstat (limited to 'examples')
22 files changed, 118 insertions, 151 deletions
diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..2c601ea --- /dev/null +++ b/examples/README.md @@ -0,0 +1,26 @@ +# Lustre examples + +Each of these examples is a complete Gleam project that contains a Lustre app +that demos or tests a particular feature of Lustre. To run any of them, navigate +to the example's directory and first run: + +```sh +$ gleam build +``` + +Then serve the app using `lustre/try`: + +```sh +$ gleam run -m lustre/try +``` + +If you do not specify a target, this will attempt to serve the app using an Erlang +HTTP server. If you'd prefer to serve using Node, you can specify the JavaScript +target instead: + +```sh +$ gleam run -m lustre/try --target javascript +``` + +Or you may additionally supply the `--runtime deno` flag to serve using Deno rather +than Node. diff --git a/examples/components.html b/examples/components.html deleted file mode 100644 index f4b4530..0000000 --- a/examples/components.html +++ /dev/null @@ -1,17 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>lustre | components</title> - - <script type="module"> - import { main } from "../../build/dev/javascript/lustre/examples/components.mjs"; - - document.addEventListener("DOMContentLoaded", main); - </script> - </head> - <body> - <div data-lustre-app></div> - </body> -</html> diff --git a/examples/components/gleam.toml b/examples/components/gleam.toml new file mode 100644 index 0000000..131d773 --- /dev/null +++ b/examples/components/gleam.toml @@ -0,0 +1,7 @@ +name = "components" +version = "1.0.0" +target = "javascript" + +[dependencies] +gleam_stdlib = "~> 0.34" +lustre = { path = "../../" }
\ No newline at end of file diff --git a/examples/components/manifest.toml b/examples/components/manifest.toml new file mode 100644 index 0000000..715dadc --- /dev/null +++ b/examples/components/manifest.toml @@ -0,0 +1,11 @@ +# This file was generated by Gleam +# You typically do not need to edit this file + +packages = [ + { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" }, + { name = "lustre", version = "3.0.12", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../.." }, +] + +[requirements] +gleam_stdlib = { version = "~> 0.34" } +lustre = { path = "../../" } diff --git a/examples/components.gleam b/examples/components/src/components.gleam index e813708..85fc583 100644 --- a/examples/components.gleam +++ b/examples/components/src/components.gleam @@ -4,7 +4,7 @@ import gleam/dynamic import gleam/function import gleam/int import gleam/list -import gleam/map +import gleam/dict import gleam/result import lustre import lustre/attribute @@ -22,7 +22,7 @@ pub fn main() { counter_init, counter_update, counter_view, - map.from_list([ + dict.from_list([ #( "count", fn(attr) { diff --git a/examples/counter.html b/examples/counter.html deleted file mode 100644 index 2b120fd..0000000 --- a/examples/counter.html +++ /dev/null @@ -1,17 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>lustre | counter</title> - - <script type="module"> - import { main } from "../../build/dev/javascript/lustre/examples/counter.mjs"; - - document.addEventListener("DOMContentLoaded", main); - </script> - </head> - <body> - <div data-lustre-app></div> - </body> -</html> diff --git a/examples/counter/gleam.toml b/examples/counter/gleam.toml new file mode 100644 index 0000000..2a5f0f5 --- /dev/null +++ b/examples/counter/gleam.toml @@ -0,0 +1,7 @@ +name = "counter" +version = "1.0.0" +target = "javascript" + +[dependencies] +gleam_stdlib = "~> 0.34" +lustre = { path = "../../" }
\ No newline at end of file diff --git a/examples/counter/manifest.toml b/examples/counter/manifest.toml new file mode 100644 index 0000000..715dadc --- /dev/null +++ b/examples/counter/manifest.toml @@ -0,0 +1,11 @@ +# This file was generated by Gleam +# You typically do not need to edit this file + +packages = [ + { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" }, + { name = "lustre", version = "3.0.12", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../.." }, +] + +[requirements] +gleam_stdlib = { version = "~> 0.34" } +lustre = { path = "../../" } diff --git a/examples/counter.gleam b/examples/counter/src/counter.gleam index 37af39a..37af39a 100644 --- a/examples/counter.gleam +++ b/examples/counter/src/counter.gleam diff --git a/examples/index.html b/examples/index.html deleted file mode 100644 index 70d4196..0000000 --- a/examples/index.html +++ /dev/null @@ -1,27 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>lustre | examples</title> - </head> - <body> - <menu> - <li> - <a href="input.html">input</a> - </li> - <li> - <a href="counter.html">counter</a> - </li> - <li> - <a href="nested.html">nested</a> - </li> - <li> - <a href="svg.html">svg</a> - </li> - <li> - <a href="components.html">components</a> - </li> - </menu> - </body> -</html> diff --git a/examples/input.html b/examples/input.html deleted file mode 100644 index 3bd6463..0000000 --- a/examples/input.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<html lang="en" class="h-full bg-gray-50"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>lustre | forms</title> - - <script src="https://cdn.tailwindcss.com"></script> - <style type="text/tailwindcss"> - @layer components { - .container { - @apply flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8; - } - - .card { - @apply mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]; - } - - .card > div { - @apply bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12 space-y-6; - } - - .debug { - @apply text-sm text-gray-400; - } - - .input label { - @apply block text-sm font-medium leading-6 text-gray-900; - } - - .input input { - @apply block w-full rounded-md border-0 p-1.5 mt-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6; - } - - .checkbox { - @apply h-4 w-4 rounded border-gray-300 text-pink-600 focus:ring-pink-600; - } - - .checkbox + label { - @apply ml-3 block text-sm leading-6 text-gray-900; - } - } - </style> - - <script type="module"> - import { main } from "../../build/dev/javascript/lustre/examples/input.mjs"; - - document.addEventListener("DOMContentLoaded", main); - </script> - </head> - <body class="h-full"> - <div data-lustre-app></div> - </body> -</html> diff --git a/examples/input/gleam.toml b/examples/input/gleam.toml new file mode 100644 index 0000000..5d891e8 --- /dev/null +++ b/examples/input/gleam.toml @@ -0,0 +1,7 @@ +name = "input" +version = "1.0.0" +target = "javascript" + +[dependencies] +gleam_stdlib = "~> 0.34" +lustre = { path = "../../" }
\ No newline at end of file diff --git a/examples/input/manifest.toml b/examples/input/manifest.toml new file mode 100644 index 0000000..715dadc --- /dev/null +++ b/examples/input/manifest.toml @@ -0,0 +1,11 @@ +# This file was generated by Gleam +# You typically do not need to edit this file + +packages = [ + { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" }, + { name = "lustre", version = "3.0.12", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../.." }, +] + +[requirements] +gleam_stdlib = { version = "~> 0.34" } +lustre = { path = "../../" } diff --git a/examples/input.gleam b/examples/input/src/input.gleam index 6425b0c..6425b0c 100644 --- a/examples/input.gleam +++ b/examples/input/src/input.gleam diff --git a/examples/nested.html b/examples/nested.html deleted file mode 100644 index 420b159..0000000 --- a/examples/nested.html +++ /dev/null @@ -1,17 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>lustre | nested</title> - - <script type="module"> - import { main } from "../../build/dev/javascript/lustre/examples/nested.mjs"; - - document.addEventListener("DOMContentLoaded", main); - </script> - </head> - <body> - <div data-lustre-app></div> - </body> -</html> diff --git a/examples/nested/gleam.toml b/examples/nested/gleam.toml new file mode 100644 index 0000000..dd00c99 --- /dev/null +++ b/examples/nested/gleam.toml @@ -0,0 +1,7 @@ +name = "nested" +version = "1.0.0" +target = "javascript" + +[dependencies] +gleam_stdlib = "~> 0.34" +lustre = { path = "../../" }
\ No newline at end of file diff --git a/examples/nested/manifest.toml b/examples/nested/manifest.toml new file mode 100644 index 0000000..715dadc --- /dev/null +++ b/examples/nested/manifest.toml @@ -0,0 +1,11 @@ +# This file was generated by Gleam +# You typically do not need to edit this file + +packages = [ + { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" }, + { name = "lustre", version = "3.0.12", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../.." }, +] + +[requirements] +gleam_stdlib = { version = "~> 0.34" } +lustre = { path = "../../" } diff --git a/examples/nested.gleam b/examples/nested/src/nested.gleam index 89e68f0..89e68f0 100644 --- a/examples/nested.gleam +++ b/examples/nested/src/nested.gleam diff --git a/examples/svg.html b/examples/svg.html deleted file mode 100644 index 12af526..0000000 --- a/examples/svg.html +++ /dev/null @@ -1,17 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>lustre | svg</title> - - <script type="module"> - import { main } from "../../build/dev/javascript/lustre/examples/svg.mjs"; - - document.addEventListener("DOMContentLoaded", main); - </script> - </head> - <body> - <div data-lustre-app></div> - </body> -</html> diff --git a/examples/svg/gleam.toml b/examples/svg/gleam.toml new file mode 100644 index 0000000..b755f57 --- /dev/null +++ b/examples/svg/gleam.toml @@ -0,0 +1,7 @@ +name = "svg" +version = "1.0.0" +target = "javascript" + +[dependencies] +gleam_stdlib = "~> 0.34" +lustre = { path = "../../" }
\ No newline at end of file diff --git a/examples/svg/manifest.toml b/examples/svg/manifest.toml new file mode 100644 index 0000000..715dadc --- /dev/null +++ b/examples/svg/manifest.toml @@ -0,0 +1,11 @@ +# This file was generated by Gleam +# You typically do not need to edit this file + +packages = [ + { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" }, + { name = "lustre", version = "3.0.12", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../.." }, +] + +[requirements] +gleam_stdlib = { version = "~> 0.34" } +lustre = { path = "../../" } diff --git a/examples/svg.gleam b/examples/svg/src/svg.gleam index 93be5e3..93be5e3 100644 --- a/examples/svg.gleam +++ b/examples/svg/src/svg.gleam |