Showing
2 changed files
with
0 additions
and
261 deletions
mogwai-list/Cargo.toml
deleted
100644 → 0
1 | -[package] | ||
2 | -name = "mogwai-list" | ||
3 | -version = "0.0.0" | ||
4 | -authors = ["Georg Hopp <georg@steffers.org>"] | ||
5 | -workspace = ".." | ||
6 | -edition = "2018" | ||
7 | - | ||
8 | -[lib] | ||
9 | -crate-type = ["cdylib", "rlib"] | ||
10 | - | ||
11 | -[features] | ||
12 | -default = ["console_error_panic_hook"] | ||
13 | - | ||
14 | -[dependencies] | ||
15 | -artshop-common = { path = "../common" } | ||
16 | -katex = { version = "0.4", default-features = false, features = ["wasm-js"] } | ||
17 | -pulldown-cmark = "0.9" | ||
18 | -console_log = "^0.1" | ||
19 | -log = "^0.4" | ||
20 | -serde = { version = "^1.0", features = ["derive"] } | ||
21 | -serde_json = "^1.0" | ||
22 | -wasm-bindgen = "^0.2" | ||
23 | -wasm-bindgen-futures = "^0.4" | ||
24 | - | ||
25 | -# The `console_error_panic_hook` crate provides better debugging of panics by | ||
26 | -# logging them with `console.error`. This is great for development, but requires | ||
27 | -# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for | ||
28 | -# code size when deploying. | ||
29 | -console_error_panic_hook = { version = "0.1.6", optional = true } | ||
30 | -wee_alloc = { version = "0.4.2", optional = true } | ||
31 | -js-sys = "^0.3" | ||
32 | - | ||
33 | -[dependencies.mogwai] | ||
34 | -version = "^0.5" | ||
35 | - | ||
36 | -[dependencies.web-sys] | ||
37 | -version = "^0.3" | ||
38 | -features = [ | ||
39 | - "Document", | ||
40 | - "DomParser", | ||
41 | - "Headers", | ||
42 | - "HtmlElement", | ||
43 | - "HtmlInputElement", | ||
44 | - "MouseEvent", | ||
45 | - "Node", | ||
46 | - "Request", | ||
47 | - "RequestInit", | ||
48 | - "RequestMode", | ||
49 | - "Response", | ||
50 | - "SupportedType", | ||
51 | - "Window", | ||
52 | -] | ||
53 | - | ||
54 | -[dev-dependencies] | ||
55 | -wasm-bindgen-test = "0.2" |
mogwai-list/src/lib.rs
deleted
100644 → 0
1 | -#![allow(unused_braces)] | ||
2 | -use log::Level; | ||
3 | -use mogwai::{futures, prelude::*}; | ||
4 | -use std::panic; | ||
5 | -use wasm_bindgen::prelude::*; | ||
6 | - | ||
7 | -/// An item widget. | ||
8 | -/// Keeps track of clicks. | ||
9 | -#[derive(Clone, Debug)] | ||
10 | -struct Item { | ||
11 | - id: usize, | ||
12 | - clicks: Model<u32>, | ||
13 | -} | ||
14 | - | ||
15 | -/// An item's update messages. | ||
16 | -#[derive(Clone)] | ||
17 | -enum ItemMsg { | ||
18 | - /// The user clicked | ||
19 | - Click, | ||
20 | - /// The user requested this item be removed | ||
21 | - Remove, | ||
22 | -} | ||
23 | - | ||
24 | -/// One item's logic loop. | ||
25 | -async fn item_logic( | ||
26 | - id: usize, | ||
27 | - clicks: Model<u32>, | ||
28 | - mut from_view: broadcast::Receiver<ItemMsg>, | ||
29 | - to_list: broadcast::Sender<ListMsg>, | ||
30 | -) { | ||
31 | - loop { | ||
32 | - match from_view.recv().await { | ||
33 | - Ok(ItemMsg::Click) => { | ||
34 | - clicks.visit_mut(|c| *c += 1).await; | ||
35 | - } | ||
36 | - Ok(ItemMsg::Remove) => { | ||
37 | - to_list.broadcast(ListMsg::RemoveItem(id)).await.unwrap(); | ||
38 | - break; | ||
39 | - } | ||
40 | - Err(_) => break, | ||
41 | - } | ||
42 | - } | ||
43 | - log::info!("item {} logic loop is done", id); | ||
44 | -} | ||
45 | - | ||
46 | -// ANCHOR: item_view | ||
47 | -fn item_view( | ||
48 | - clicks: impl Stream<Item = u32> + Sendable, | ||
49 | - to_logic: broadcast::Sender<ItemMsg>, | ||
50 | -) -> ViewBuilder<Dom> { | ||
51 | - builder! { | ||
52 | - <li> | ||
53 | - <button | ||
54 | - style:cursor="pointer" | ||
55 | - on:click=to_logic.sink().contra_map(|_| ItemMsg::Click)> | ||
56 | - "Increment" | ||
57 | - </button> | ||
58 | - <button | ||
59 | - style:cursor="pointer" | ||
60 | - on:click=to_logic.sink().contra_map(|_| ItemMsg::Remove)> | ||
61 | - "Remove" | ||
62 | - </button> | ||
63 | - " " | ||
64 | - <span> | ||
65 | - { | ||
66 | - ("", clicks.map(|clicks| match clicks { | ||
67 | - 1 => "1 click".to_string(), | ||
68 | - n => format!("{} clicks", n), | ||
69 | - })) | ||
70 | - } | ||
71 | - </span> | ||
72 | - </li> | ||
73 | - } | ||
74 | -} | ||
75 | -// ANCHOR_END: item_view | ||
76 | - | ||
77 | -/// Create a new item component. | ||
78 | -fn item(id: usize, clicks: Model<u32>, to_list: broadcast::Sender<ListMsg>) -> Component<Dom> { | ||
79 | - let (tx, rx) = broadcast::bounded(1); | ||
80 | - Component::from(item_view(clicks.stream(), tx)).with_logic(item_logic(id, clicks, rx, to_list)) | ||
81 | -} | ||
82 | - | ||
83 | -#[derive(Clone)] | ||
84 | -enum ListMsg { | ||
85 | - /// Create a new item | ||
86 | - NewItem, | ||
87 | - /// Remove the item with the given id | ||
88 | - RemoveItem(usize), | ||
89 | -} | ||
90 | - | ||
91 | -// ANCHOR: list_logic_coms | ||
92 | -/// Launch the logic loop of our list of items. | ||
93 | -async fn list_logic( | ||
94 | - input: broadcast::Receiver<ListMsg>, | ||
95 | - tx_patch_children: mpmc::Sender<ListPatch<ViewBuilder<Dom>>>, | ||
96 | -) { | ||
97 | - // Set up our communication from items to this logic loop by | ||
98 | - // * creating a list patch model | ||
99 | - // * creating a channel to go from item to list logic (aka here) | ||
100 | - // * creating a side-effect stream (for_each) that runs for each item patch | ||
101 | - // * map patches of Item to patches of builders and send that to our view | ||
102 | - // through tx_patch_children | ||
103 | - let mut items: ListPatchModel<Item> = ListPatchModel::new(); | ||
104 | - let (to_list, from_items) = broadcast::bounded::<ListMsg>(1); | ||
105 | - let to_list = to_list.clone(); | ||
106 | - let all_item_patches = items.stream().map(move |patch| { | ||
107 | - log::info!("mapping patch for item: {:?}", patch); | ||
108 | - let to_list = to_list.clone(); | ||
109 | - patch.map(move |Item { id, clicks }: Item| { | ||
110 | - let to_list = to_list.clone(); | ||
111 | - let component = item(id, clicks, to_list); | ||
112 | - let builder: ViewBuilder<Dom> = component.into(); | ||
113 | - builder | ||
114 | - }) | ||
115 | - }).for_each(move |patch| { | ||
116 | - let tx_patch_children = tx_patch_children.clone(); | ||
117 | - async move { | ||
118 | - tx_patch_children.send(patch).await.unwrap(); | ||
119 | - } | ||
120 | - }); | ||
121 | - mogwai::spawn(all_item_patches); | ||
122 | - // ANCHOR_END: list_logic_coms | ||
123 | - // ANCHOR: list_logic_loop | ||
124 | - // Combine the input from our view with the input from our items | ||
125 | - let mut input = futures::stream::select_all(vec![input, from_items]); | ||
126 | - let mut next_id = 0; | ||
127 | - loop { | ||
128 | - match input.next().await { | ||
129 | - Some(ListMsg::NewItem) => { | ||
130 | - log::info!("creating a new item"); | ||
131 | - let item: Item = Item { | ||
132 | - id: next_id, | ||
133 | - clicks: Model::new(0), | ||
134 | - }; | ||
135 | - next_id += 1; | ||
136 | - // patch our items easily and _item_patch_stream's for_each runs automatically, | ||
137 | - // keeping the list of item views in sync | ||
138 | - items.list_patch_push(item); | ||
139 | - } | ||
140 | - Some(ListMsg::RemoveItem(id)) => { | ||
141 | - log::info!("removing item: {}", id); | ||
142 | - let mut may_index = None; | ||
143 | - 'find_item_by_id: for (item, index) in items.read().await.iter().zip(0..) { | ||
144 | - if item.id == id { | ||
145 | - may_index = Some(index); | ||
146 | - break 'find_item_by_id; | ||
147 | - } | ||
148 | - } | ||
149 | - | ||
150 | - if let Some(index) = may_index { | ||
151 | - // patch our items to remove the item at the index | ||
152 | - let _ = items.list_patch_remove(index); | ||
153 | - } | ||
154 | - } | ||
155 | - _ => { | ||
156 | - log::error!("Leaving list logic loop - this shouldn't happen"); | ||
157 | - break; | ||
158 | - }, | ||
159 | - } | ||
160 | - } | ||
161 | - // ANCHOR_END: list_logic_loop | ||
162 | -} | ||
163 | - | ||
164 | -// ANCHOR: list_view | ||
165 | -fn list_view<T>(to_logic: broadcast::Sender<ListMsg>, children: T) -> ViewBuilder<Dom> | ||
166 | -where | ||
167 | - T: Stream<Item = ListPatch<ViewBuilder<Dom>>> + Sendable, | ||
168 | -{ | ||
169 | - builder! { | ||
170 | - <fieldset> | ||
171 | - <legend>"A List of Gizmos"</legend> | ||
172 | - <button style:cursor="pointer" on:click=to_logic.sink().contra_map(|_| ListMsg::NewItem)> | ||
173 | - "Create a new item" | ||
174 | - </button> | ||
175 | - <fieldset> | ||
176 | - <legend>"Items"</legend> | ||
177 | - <ol patch:children=children> | ||
178 | - </ol> | ||
179 | - </fieldset> | ||
180 | - </fieldset> | ||
181 | - } | ||
182 | -} | ||
183 | -// ANCHOR_END: list_view | ||
184 | - | ||
185 | -/// Create our list component. | ||
186 | -fn list() -> Component<Dom> { | ||
187 | - let (logic_tx, logic_rx) = broadcast::bounded(1); | ||
188 | - let (item_patch_tx, item_patch_rx) = mpmc::bounded(1); | ||
189 | - Component::from(list_view(logic_tx, item_patch_rx)) | ||
190 | - .with_logic(list_logic(logic_rx, item_patch_tx)) | ||
191 | -} | ||
192 | - | ||
193 | -#[wasm_bindgen] | ||
194 | -pub fn main(parent_id: Option<String>) -> Result<(), JsValue> { | ||
195 | - panic::set_hook(Box::new(console_error_panic_hook::hook)); | ||
196 | - console_log::init_with_level(Level::Trace).unwrap(); | ||
197 | - let component = list(); | ||
198 | - let view = component.build().unwrap(); | ||
199 | - | ||
200 | - if let Some(id) = parent_id { | ||
201 | - let parent = mogwai::utils::document().get_element_by_id(&id).unwrap(); | ||
202 | - view.run_in_container(&parent) | ||
203 | - } else { | ||
204 | - view.run() | ||
205 | - } | ||
206 | -} |
Please
register
or
login
to post a comment