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 | |
| parent | ec7b40fc801e5f5af372f7b0b6524ee0bfcf8d3c (diff) | |
| download | lustre-ff3a5e7ce450f1007ae39a47f4e1b431da04a23d.tar.gz lustre-ff3a5e7ce450f1007ae39a47f4e1b431da04a23d.zip | |
:recycle: Refactor example apps to use lustre/try instead of vite.
25 files changed, 118 insertions, 365 deletions
@@ -4,6 +4,3 @@ build erl_crash.dump .vscode - -node_modules -dist
\ No newline at end of file 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 diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 7a63f7a..0000000 --- a/package-lock.json +++ /dev/null @@ -1,201 +0,0 @@ -{ - "name": "lib", - "lockfileVersion": 3, - "requires": true, - "packages": { - "": { - "devDependencies": { - "vite": "^4.4.2" - } - }, - "node_modules/@esbuild/darwin-arm64": { - "version": "0.18.11", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/esbuild": { - "version": "0.18.11", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "bin": { - "esbuild": "bin/esbuild" - }, - "engines": { - "node": ">=12" - }, - "optionalDependencies": { - "@esbuild/android-arm": "0.18.11", - "@esbuild/android-arm64": "0.18.11", - "@esbuild/android-x64": "0.18.11", - "@esbuild/darwin-arm64": "0.18.11", - "@esbuild/darwin-x64": "0.18.11", - "@esbuild/freebsd-arm64": "0.18.11", - "@esbuild/freebsd-x64": "0.18.11", - "@esbuild/linux-arm": "0.18.11", - "@esbuild/linux-arm64": "0.18.11", - "@esbuild/linux-ia32": "0.18.11", - "@esbuild/linux-loong64": "0.18.11", - "@esbuild/linux-mips64el": "0.18.11", - "@esbuild/linux-ppc64": "0.18.11", - "@esbuild/linux-riscv64": "0.18.11", - "@esbuild/linux-s390x": "0.18.11", - "@esbuild/linux-x64": "0.18.11", - "@esbuild/netbsd-x64": "0.18.11", - "@esbuild/openbsd-x64": "0.18.11", - "@esbuild/sunos-x64": "0.18.11", - "@esbuild/win32-arm64": "0.18.11", - "@esbuild/win32-ia32": "0.18.11", - "@esbuild/win32-x64": "0.18.11" - } - }, - "node_modules/fsevents": { - "version": "2.3.2", - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, - "node_modules/nanoid": { - "version": "3.3.6", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "bin": { - "nanoid": "bin/nanoid.cjs" - }, - "engines": { - "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" - } - }, - "node_modules/picocolors": { - "version": "1.0.0", - "dev": true, - "license": "ISC" - }, - "node_modules/postcss": { - "version": "8.4.25", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "nanoid": "^3.3.6", - "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" - }, - "engines": { - "node": "^10 || ^12 || >=14" - } - }, - "node_modules/rollup": { - "version": "3.26.2", - "dev": true, - "license": "MIT", - "bin": { - "rollup": "dist/bin/rollup" - }, - "engines": { - "node": ">=14.18.0", - "npm": ">=8.0.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/source-map-js": { - "version": "1.0.2", - "dev": true, - "license": "BSD-3-Clause", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/vite": { - "version": "4.4.2", - "dev": true, - "license": "MIT", - "dependencies": { - "esbuild": "^0.18.10", - "postcss": "^8.4.24", - "rollup": "^3.25.2" - }, - "bin": { - "vite": "bin/vite.js" - }, - "engines": { - "node": "^14.18.0 || >=16.0.0" - }, - "funding": { - "url": "https://github.com/vitejs/vite?sponsor=1" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - }, - "peerDependencies": { - "@types/node": ">= 14", - "less": "*", - "lightningcss": "^1.21.0", - "sass": "*", - "stylus": "*", - "sugarss": "*", - "terser": "^5.4.0" - }, - "peerDependenciesMeta": { - "@types/node": { - "optional": true - }, - "less": { - "optional": true - }, - "lightningcss": { - "optional": true - }, - "sass": { - "optional": true - }, - "stylus": { - "optional": true - }, - "sugarss": { - "optional": true - }, - "terser": { - "optional": true - } - } - } - } -} diff --git a/package.json b/package.json deleted file mode 100644 index 828b817..0000000 --- a/package.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "private": true, - "type": "module", - "scripts": { - "dev": "gleam build && vite serve ./examples" - }, - "devDependencies": { - "vite": "^4.4.2" - } -} |