diff options
| -rw-r--r-- | src/lustre.ffi.mjs | 21 |
1 files changed, 11 insertions, 10 deletions
diff --git a/src/lustre.ffi.mjs b/src/lustre.ffi.mjs index 74923d1..fa022d1 100644 --- a/src/lustre.ffi.mjs +++ b/src/lustre.ffi.mjs @@ -1,6 +1,10 @@ import { innerHTML, createTree } from "./runtime.ffi.mjs"; import { Ok, Error, List } from "./gleam.mjs"; -import { Some, Option } from "../gleam_stdlib/gleam/option.mjs"; +import { + Some, + None, + map as option_map, +} from "../gleam_stdlib/gleam/option.mjs"; // RUNTIME --------------------------------------------------------------------- @@ -39,12 +43,12 @@ export class App { this.#commands = cmds[0].toArray(); this.#didUpdate = true; - window.requestAnimationFrame(this.#tick.bind(this)); + window.requestAnimationFrame(() => this.#tick()); return new Ok((msg) => this.dispatch(msg)); } dispatch(msg) { - if (!this.#willUpdate) window.requestAnimationFrame(this.#tick.bind(this)); + if (!this.#willUpdate) window.requestAnimationFrame(() => this.#tick()); this.#queue.push(msg); this.#willUpdate = true; @@ -52,11 +56,7 @@ export class App { #render() { const node = this.#__render(this.#state); - const tree = createTree( - map(node, (msg) => { - if (msg instanceof Some) this.dispatch(msg[0]); - }) - ); + const tree = createTree(map(node, (msg) => this.dispatch(msg))); innerHTML(this.#root, tree); } @@ -101,7 +101,8 @@ export const node = (tag, attrs, children) => export const text = (content) => content; export const attr = (key, value) => { if (value instanceof List) return [key, value.toArray()]; - if (value instanceof Option) return [key, value?.[0]]; + if (value instanceof Some) return [key, value[0]]; + if (value instanceof None) return [key, undefined]; return [key, value]; }; @@ -115,7 +116,7 @@ export const map = (node, f) => ({ // If the attribute is an event handler, wrap it in a function that // transforms if (key.startsWith("on") && typeof value === "function") { - attrs[key] = (e) => f(value(e)); + attrs[key] = (e) => option_map(value(e), f); } else { attrs[key] = value; } |