├── .gitignore
├── Cargo.lock
├── Cargo.toml
├── README.md
├── app.rs
├── attribute_value.rs
├── client
    ├── element.rs
    ├── fragment.rs
    ├── mod.rs
    ├── node.rs
    ├── signal.rs
    ├── signal_vec.rs
    └── text.rs
├── component.rs
├── dehydrate.rs
├── elements
    ├── html.rs
    ├── macro
    │   ├── Cargo.toml
    │   ├── element.rs
    │   └── lib.rs
    ├── mathml.rs
    ├── mod.rs
    └── svg.rs
├── examples
    └── counter
    │   ├── .gitignore
    │   ├── Cargo.toml
    │   ├── README.md
    │   ├── index.html
    │   └── main.rs
├── hydrate.rs
├── lib.rs
├── macro
    ├── Cargo.toml
    ├── builder.rs
    ├── children.rs
    ├── lib.rs
    └── new.rs
├── option_string_value.rs
├── rustfmt.toml
├── server
    ├── element.rs
    ├── fragment.rs
    ├── mod.rs
    ├── node.rs
    ├── signal.rs
    ├── signal_vec.rs
    └── text.rs
└── string_value.rs


/.gitignore:
--------------------------------------------------------------------------------
1 | /target
2 | 


--------------------------------------------------------------------------------
/Cargo.lock:
--------------------------------------------------------------------------------
  1 | # This file is automatically @generated by Cargo.
  2 | # It is not intended for manual editing.
  3 | version = 3
  4 | 
  5 | [[package]]
  6 | name = "bumpalo"
  7 | version = "3.9.1"
  8 | source = "registry+https://github.com/rust-lang/crates.io-index"
  9 | checksum = "a4a45a46ab1f2412e53d3a0ade76ffad2025804294569aae387231a0cd6e0899"
 10 | 
 11 | [[package]]
 12 | name = "cfg-if"
 13 | version = "1.0.0"
 14 | source = "registry+https://github.com/rust-lang/crates.io-index"
 15 | checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
 16 | 
 17 | [[package]]
 18 | name = "discard"
 19 | version = "1.0.4"
 20 | source = "registry+https://github.com/rust-lang/crates.io-index"
 21 | checksum = "212d0f5754cb6769937f4501cc0e67f4f4483c8d2c3e1e922ee9edbe4ab4c7c0"
 22 | 
 23 | [[package]]
 24 | name = "futures"
 25 | version = "0.3.21"
 26 | source = "registry+https://github.com/rust-lang/crates.io-index"
 27 | checksum = "f73fe65f54d1e12b726f517d3e2135ca3125a437b6d998caf1962961f7172d9e"
 28 | dependencies = [
 29 |  "futures-channel",
 30 |  "futures-core",
 31 |  "futures-executor",
 32 |  "futures-io",
 33 |  "futures-sink",
 34 |  "futures-task",
 35 |  "futures-util",
 36 | ]
 37 | 
 38 | [[package]]
 39 | name = "futures-channel"
 40 | version = "0.3.21"
 41 | source = "registry+https://github.com/rust-lang/crates.io-index"
 42 | checksum = "c3083ce4b914124575708913bca19bfe887522d6e2e6d0952943f5eac4a74010"
 43 | dependencies = [
 44 |  "futures-core",
 45 |  "futures-sink",
 46 | ]
 47 | 
 48 | [[package]]
 49 | name = "futures-core"
 50 | version = "0.3.21"
 51 | source = "registry+https://github.com/rust-lang/crates.io-index"
 52 | checksum = "0c09fd04b7e4073ac7156a9539b57a484a8ea920f79c7c675d05d289ab6110d3"
 53 | 
 54 | [[package]]
 55 | name = "futures-executor"
 56 | version = "0.3.21"
 57 | source = "registry+https://github.com/rust-lang/crates.io-index"
 58 | checksum = "9420b90cfa29e327d0429f19be13e7ddb68fa1cccb09d65e5706b8c7a749b8a6"
 59 | dependencies = [
 60 |  "futures-core",
 61 |  "futures-task",
 62 |  "futures-util",
 63 | ]
 64 | 
 65 | [[package]]
 66 | name = "futures-io"
 67 | version = "0.3.21"
 68 | source = "registry+https://github.com/rust-lang/crates.io-index"
 69 | checksum = "fc4045962a5a5e935ee2fdedaa4e08284547402885ab326734432bed5d12966b"
 70 | 
 71 | [[package]]
 72 | name = "futures-macro"
 73 | version = "0.3.21"
 74 | source = "registry+https://github.com/rust-lang/crates.io-index"
 75 | checksum = "33c1e13800337f4d4d7a316bf45a567dbcb6ffe087f16424852d97e97a91f512"
 76 | dependencies = [
 77 |  "proc-macro2",
 78 |  "quote",
 79 |  "syn",
 80 | ]
 81 | 
 82 | [[package]]
 83 | name = "futures-signals"
 84 | version = "0.3.28"
 85 | source = "registry+https://github.com/rust-lang/crates.io-index"
 86 | checksum = "633f5e17d6fb8d3cfa0710087d0cbe708d07cc416ca6c4682ce876aa7839c09d"
 87 | dependencies = [
 88 |  "discard",
 89 |  "futures-channel",
 90 |  "futures-core",
 91 |  "futures-util",
 92 |  "log",
 93 |  "pin-project",
 94 |  "serde",
 95 | ]
 96 | 
 97 | [[package]]
 98 | name = "futures-sink"
 99 | version = "0.3.21"
100 | source = "registry+https://github.com/rust-lang/crates.io-index"
101 | checksum = "21163e139fa306126e6eedaf49ecdb4588f939600f0b1e770f4205ee4b7fa868"
102 | 
103 | [[package]]
104 | name = "futures-task"
105 | version = "0.3.21"
106 | source = "registry+https://github.com/rust-lang/crates.io-index"
107 | checksum = "57c66a976bf5909d801bbef33416c41372779507e7a6b3a5e25e4749c58f776a"
108 | 
109 | [[package]]
110 | name = "futures-util"
111 | version = "0.3.21"
112 | source = "registry+https://github.com/rust-lang/crates.io-index"
113 | checksum = "d8b7abd5d659d9b90c8cba917f6ec750a74e2dc23902ef9cd4cc8c8b22e6036a"
114 | dependencies = [
115 |  "futures-channel",
116 |  "futures-core",
117 |  "futures-io",
118 |  "futures-macro",
119 |  "futures-sink",
120 |  "futures-task",
121 |  "memchr",
122 |  "pin-project-lite",
123 |  "pin-utils",
124 |  "slab",
125 | ]
126 | 
127 | [[package]]
128 | name = "heck"
129 | version = "0.3.3"
130 | source = "registry+https://github.com/rust-lang/crates.io-index"
131 | checksum = "6d621efb26863f0e9924c6ac577e8275e5e6b77455db64ffa6c65c904e9e132c"
132 | dependencies = [
133 |  "unicode-segmentation",
134 | ]
135 | 
136 | [[package]]
137 | name = "itoa"
138 | version = "1.0.2"
139 | source = "registry+https://github.com/rust-lang/crates.io-index"
140 | checksum = "112c678d4050afce233f4f2852bb2eb519230b3cf12f33585275537d7e41578d"
141 | 
142 | [[package]]
143 | name = "js-sys"
144 | version = "0.3.50"
145 | source = "registry+https://github.com/rust-lang/crates.io-index"
146 | checksum = "2d99f9e3e84b8f67f846ef5b4cbbc3b1c29f6c759fcbce6f01aa0e73d932a24c"
147 | dependencies = [
148 |  "wasm-bindgen",
149 | ]
150 | 
151 | [[package]]
152 | name = "lazy_static"
153 | version = "1.4.0"
154 | source = "registry+https://github.com/rust-lang/crates.io-index"
155 | checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
156 | 
157 | [[package]]
158 | name = "log"
159 | version = "0.4.17"
160 | source = "registry+https://github.com/rust-lang/crates.io-index"
161 | checksum = "abb12e687cfb44aa40f41fc3978ef76448f9b6038cad6aef4259d3c095a2382e"
162 | dependencies = [
163 |  "cfg-if",
164 | ]
165 | 
166 | [[package]]
167 | name = "memchr"
168 | version = "2.5.0"
169 | source = "registry+https://github.com/rust-lang/crates.io-index"
170 | checksum = "2dffe52ecf27772e601905b7522cb4ef790d2cc203488bbd0e2fe85fcb74566d"
171 | 
172 | [[package]]
173 | name = "pin-project"
174 | version = "1.0.10"
175 | source = "registry+https://github.com/rust-lang/crates.io-index"
176 | checksum = "58ad3879ad3baf4e44784bc6a718a8698867bb991f8ce24d1bcbe2cfb4c3a75e"
177 | dependencies = [
178 |  "pin-project-internal",
179 | ]
180 | 
181 | [[package]]
182 | name = "pin-project-internal"
183 | version = "1.0.10"
184 | source = "registry+https://github.com/rust-lang/crates.io-index"
185 | checksum = "744b6f092ba29c3650faf274db506afd39944f48420f6c86b17cfe0ee1cb36bb"
186 | dependencies = [
187 |  "proc-macro2",
188 |  "quote",
189 |  "syn",
190 | ]
191 | 
192 | [[package]]
193 | name = "pin-project-lite"
194 | version = "0.2.9"
195 | source = "registry+https://github.com/rust-lang/crates.io-index"
196 | checksum = "e0a7ae3ac2f1173085d398531c705756c94a4c56843785df85a60c1a0afac116"
197 | 
198 | [[package]]
199 | name = "pin-utils"
200 | version = "0.1.0"
201 | source = "registry+https://github.com/rust-lang/crates.io-index"
202 | checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
203 | 
204 | [[package]]
205 | name = "pinwheel"
206 | version = "0.2.0"
207 | dependencies = [
208 |  "futures",
209 |  "futures-signals",
210 |  "pin-project",
211 |  "pinwheel_elements_macro",
212 |  "pinwheel_macro",
213 |  "serde",
214 |  "serde_json",
215 |  "tracing",
216 |  "wasm-bindgen",
217 |  "wasm-bindgen-futures",
218 |  "web-sys",
219 | ]
220 | 
221 | [[package]]
222 | name = "pinwheel_counter"
223 | version = "0.0.0"
224 | dependencies = [
225 |  "pinwheel",
226 |  "wasm-bindgen",
227 |  "web-sys",
228 | ]
229 | 
230 | [[package]]
231 | name = "pinwheel_elements_macro"
232 | version = "0.2.0"
233 | dependencies = [
234 |  "heck",
235 |  "proc-macro2",
236 |  "quote",
237 |  "syn",
238 | ]
239 | 
240 | [[package]]
241 | name = "pinwheel_macro"
242 | version = "0.2.1"
243 | dependencies = [
244 |  "heck",
245 |  "proc-macro2",
246 |  "quote",
247 |  "syn",
248 | ]
249 | 
250 | [[package]]
251 | name = "proc-macro2"
252 | version = "1.0.38"
253 | source = "registry+https://github.com/rust-lang/crates.io-index"
254 | checksum = "9027b48e9d4c9175fa2218adf3557f91c1137021739951d4932f5f8268ac48aa"
255 | dependencies = [
256 |  "unicode-xid",
257 | ]
258 | 
259 | [[package]]
260 | name = "quote"
261 | version = "1.0.18"
262 | source = "registry+https://github.com/rust-lang/crates.io-index"
263 | checksum = "a1feb54ed693b93a84e14094943b84b7c4eae204c512b7ccb95ab0c66d278ad1"
264 | dependencies = [
265 |  "proc-macro2",
266 | ]
267 | 
268 | [[package]]
269 | name = "ryu"
270 | version = "1.0.10"
271 | source = "registry+https://github.com/rust-lang/crates.io-index"
272 | checksum = "f3f6f92acf49d1b98f7a81226834412ada05458b7364277387724a237f062695"
273 | 
274 | [[package]]
275 | name = "serde"
276 | version = "1.0.137"
277 | source = "registry+https://github.com/rust-lang/crates.io-index"
278 | checksum = "61ea8d54c77f8315140a05f4c7237403bf38b72704d031543aa1d16abbf517d1"
279 | 
280 | [[package]]
281 | name = "serde_json"
282 | version = "1.0.81"
283 | source = "registry+https://github.com/rust-lang/crates.io-index"
284 | checksum = "9b7ce2b32a1aed03c558dc61a5cd328f15aff2dbc17daad8fb8af04d2100e15c"
285 | dependencies = [
286 |  "itoa",
287 |  "ryu",
288 |  "serde",
289 | ]
290 | 
291 | [[package]]
292 | name = "slab"
293 | version = "0.4.6"
294 | source = "registry+https://github.com/rust-lang/crates.io-index"
295 | checksum = "eb703cfe953bccee95685111adeedb76fabe4e97549a58d16f03ea7b9367bb32"
296 | 
297 | [[package]]
298 | name = "syn"
299 | version = "1.0.94"
300 | source = "registry+https://github.com/rust-lang/crates.io-index"
301 | checksum = "a07e33e919ebcd69113d5be0e4d70c5707004ff45188910106854f38b960df4a"
302 | dependencies = [
303 |  "proc-macro2",
304 |  "quote",
305 |  "unicode-xid",
306 | ]
307 | 
308 | [[package]]
309 | name = "tracing"
310 | version = "0.1.34"
311 | source = "registry+https://github.com/rust-lang/crates.io-index"
312 | checksum = "5d0ecdcb44a79f0fe9844f0c4f33a342cbcbb5117de8001e6ba0dc2351327d09"
313 | dependencies = [
314 |  "cfg-if",
315 |  "pin-project-lite",
316 |  "tracing-attributes",
317 |  "tracing-core",
318 | ]
319 | 
320 | [[package]]
321 | name = "tracing-attributes"
322 | version = "0.1.21"
323 | source = "registry+https://github.com/rust-lang/crates.io-index"
324 | checksum = "cc6b8ad3567499f98a1db7a752b07a7c8c7c7c34c332ec00effb2b0027974b7c"
325 | dependencies = [
326 |  "proc-macro2",
327 |  "quote",
328 |  "syn",
329 | ]
330 | 
331 | [[package]]
332 | name = "tracing-core"
333 | version = "0.1.26"
334 | source = "registry+https://github.com/rust-lang/crates.io-index"
335 | checksum = "f54c8ca710e81886d498c2fd3331b56c93aa248d49de2222ad2742247c60072f"
336 | dependencies = [
337 |  "lazy_static",
338 | ]
339 | 
340 | [[package]]
341 | name = "unicode-segmentation"
342 | version = "1.9.0"
343 | source = "registry+https://github.com/rust-lang/crates.io-index"
344 | checksum = "7e8820f5d777f6224dc4be3632222971ac30164d4a258d595640799554ebfd99"
345 | 
346 | [[package]]
347 | name = "unicode-xid"
348 | version = "0.2.3"
349 | source = "registry+https://github.com/rust-lang/crates.io-index"
350 | checksum = "957e51f3646910546462e67d5f7599b9e4fb8acdd304b087a6494730f9eebf04"
351 | 
352 | [[package]]
353 | name = "wasm-bindgen"
354 | version = "0.2.73"
355 | source = "registry+https://github.com/rust-lang/crates.io-index"
356 | checksum = "83240549659d187488f91f33c0f8547cbfef0b2088bc470c116d1d260ef623d9"
357 | dependencies = [
358 |  "cfg-if",
359 |  "wasm-bindgen-macro",
360 | ]
361 | 
362 | [[package]]
363 | name = "wasm-bindgen-backend"
364 | version = "0.2.73"
365 | source = "registry+https://github.com/rust-lang/crates.io-index"
366 | checksum = "ae70622411ca953215ca6d06d3ebeb1e915f0f6613e3b495122878d7ebec7dae"
367 | dependencies = [
368 |  "bumpalo",
369 |  "lazy_static",
370 |  "log",
371 |  "proc-macro2",
372 |  "quote",
373 |  "syn",
374 |  "wasm-bindgen-shared",
375 | ]
376 | 
377 | [[package]]
378 | name = "wasm-bindgen-futures"
379 | version = "0.4.23"
380 | source = "registry+https://github.com/rust-lang/crates.io-index"
381 | checksum = "81b8b767af23de6ac18bf2168b690bed2902743ddf0fb39252e36f9e2bfc63ea"
382 | dependencies = [
383 |  "cfg-if",
384 |  "js-sys",
385 |  "wasm-bindgen",
386 |  "web-sys",
387 | ]
388 | 
389 | [[package]]
390 | name = "wasm-bindgen-macro"
391 | version = "0.2.73"
392 | source = "registry+https://github.com/rust-lang/crates.io-index"
393 | checksum = "3e734d91443f177bfdb41969de821e15c516931c3c3db3d318fa1b68975d0f6f"
394 | dependencies = [
395 |  "quote",
396 |  "wasm-bindgen-macro-support",
397 | ]
398 | 
399 | [[package]]
400 | name = "wasm-bindgen-macro-support"
401 | version = "0.2.73"
402 | source = "registry+https://github.com/rust-lang/crates.io-index"
403 | checksum = "d53739ff08c8a68b0fdbcd54c372b8ab800b1449ab3c9d706503bc7dd1621b2c"
404 | dependencies = [
405 |  "proc-macro2",
406 |  "quote",
407 |  "syn",
408 |  "wasm-bindgen-backend",
409 |  "wasm-bindgen-shared",
410 | ]
411 | 
412 | [[package]]
413 | name = "wasm-bindgen-shared"
414 | version = "0.2.73"
415 | source = "registry+https://github.com/rust-lang/crates.io-index"
416 | checksum = "d9a543ae66aa233d14bb765ed9af4a33e81b8b58d1584cf1b47ff8cd0b9e4489"
417 | 
418 | [[package]]
419 | name = "web-sys"
420 | version = "0.3.50"
421 | source = "registry+https://github.com/rust-lang/crates.io-index"
422 | checksum = "a905d57e488fec8861446d3393670fb50d27a262344013181c2cdf9fff5481be"
423 | dependencies = [
424 |  "js-sys",
425 |  "wasm-bindgen",
426 | ]
427 | 


--------------------------------------------------------------------------------
/Cargo.toml:
--------------------------------------------------------------------------------
  1 | [workspace]
  2 | members = [
  3 |   "macro",
  4 |   "elements/macro",
  5 |   "examples/counter",
  6 | ]
  7 | 
  8 | [package]
  9 | authors = ["Tangram <root@tangram.dev"]
 10 | description = "Build web applications with Rust."
 11 | documentation = "https://docs.rs/pinwheel"
 12 | edition = "2021"
 13 | homepage = "https://github.com/tangramdotdev/pinwheel"
 14 | license = "MIT"
 15 | name = "pinwheel"
 16 | publish = true
 17 | repository = "https://github.com/tangramdotdev/pinwheel"
 18 | rust-version = "1.56"
 19 | version = "0.2.0"
 20 | 
 21 | [lib]
 22 | path = "lib.rs"
 23 | 
 24 | [dependencies]
 25 | futures = "0.3"
 26 | futures-signals = "0.3"
 27 | pin-project = "1"
 28 | pinwheel_elements_macro = { version = "0.2", path = "elements/macro" }
 29 | pinwheel_macro = { version = "0.2", path = "macro" }
 30 | serde = "1"
 31 | serde_json = "1"
 32 | tracing = "0.1"
 33 | wasm-bindgen = "0.2"
 34 | wasm-bindgen-futures = "0.4"
 35 | 
 36 | [dependencies.web-sys]
 37 | version = "0.3"
 38 | features = [
 39 |   "Comment",
 40 |   "CssStyleDeclaration",
 41 |   "Document",
 42 |   "DocumentFragment",
 43 |   "DomStringMap",
 44 |   "DomTokenList",
 45 |   "Element",
 46 |   "HtmlElement",
 47 |   "Node",
 48 |   "Text",
 49 |   "Window",
 50 | 
 51 |   "Event",
 52 |   "CompositionEvent",
 53 |   "FocusEvent",
 54 |   "InputEvent",
 55 |   "KeyboardEvent",
 56 |   "MouseEvent",
 57 |   "TouchEvent",
 58 | 
 59 |   "HtmlAnchorElement",
 60 |   "HtmlAreaElement",
 61 |   "HtmlAudioElement",
 62 |   "HtmlBaseElement",
 63 |   "HtmlBodyElement",
 64 |   "HtmlBrElement",
 65 |   "HtmlButtonElement",
 66 |   "HtmlCanvasElement",
 67 |   "HtmlDListElement",
 68 |   "HtmlDataElement",
 69 |   "HtmlDataListElement",
 70 |   "HtmlDetailsElement",
 71 |   "HtmlDialogElement",
 72 |   "HtmlDirectoryElement",
 73 |   "HtmlDivElement",
 74 |   "HtmlEmbedElement",
 75 |   "HtmlFieldSetElement",
 76 |   "HtmlFontElement",
 77 |   "HtmlFormElement",
 78 |   "HtmlFrameElement",
 79 |   "HtmlFrameSetElement",
 80 |   "HtmlHeadElement",
 81 |   "HtmlHeadingElement",
 82 |   "HtmlHrElement",
 83 |   "HtmlHtmlElement",
 84 |   "HtmlIFrameElement",
 85 |   "HtmlImageElement",
 86 |   "HtmlInputElement",
 87 |   "HtmlLabelElement",
 88 |   "HtmlLegendElement",
 89 |   "HtmlLiElement",
 90 |   "HtmlLinkElement",
 91 |   "HtmlMapElement",
 92 |   "HtmlMediaElement",
 93 |   "HtmlMenuElement",
 94 |   "HtmlMenuItemElement",
 95 |   "HtmlMetaElement",
 96 |   "HtmlMeterElement",
 97 |   "HtmlModElement",
 98 |   "HtmlOListElement",
 99 |   "HtmlObjectElement",
100 |   "HtmlOptGroupElement",
101 |   "HtmlOptionElement",
102 |   "HtmlOutputElement",
103 |   "HtmlParagraphElement",
104 |   "HtmlParamElement",
105 |   "HtmlPictureElement",
106 |   "HtmlPreElement",
107 |   "HtmlProgressElement",
108 |   "HtmlQuoteElement",
109 |   "HtmlScriptElement",
110 |   "HtmlSelectElement",
111 |   "HtmlSlotElement",
112 |   "HtmlSourceElement",
113 |   "HtmlSpanElement",
114 |   "HtmlStyleElement",
115 |   "HtmlTableCaptionElement",
116 |   "HtmlTableCellElement",
117 |   "HtmlTableColElement",
118 |   "HtmlTableElement",
119 |   "HtmlTableRowElement",
120 |   "HtmlTableSectionElement",
121 |   "HtmlTemplateElement",
122 |   "HtmlTextAreaElement",
123 |   "HtmlTimeElement",
124 |   "HtmlTitleElement",
125 |   "HtmlTrackElement",
126 |   "HtmlUListElement",
127 |   "HtmlUnknownElement",
128 |   "HtmlVideoElement",
129 | ]
130 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Pinwheel
  2 | 
  3 | Pinwheel is a library for writing web user interfaces with Rust.
  4 | 
  5 | ## Example
  6 | 
  7 | The example below increments the value in a `<p>` each time a `<button>` is pressed.
  8 | 
  9 | ```rust
 10 | let body = dom::window().unwrap().document().unwrap().body().unwrap().into();
 11 | let count = Mutable::new(0);
 12 | let on_click = {
 13 |   let count = count.clone();
 14 |   move |_| {
 15 |     count.replace_with(|count| *count + 1);
 16 |   }
 17 | };
 18 | let count_text = count.signal().map(|count| p().child(count.to_string()));
 19 | let increment_button = button().onclick(on_click).child("Increment");
 20 | let counter = div()
 21 |   .style(style::DISPLAY, "grid")
 22 |   .style(style::JUSTIFY_CONTENT, "start")
 23 |   .child_signal(count_text)
 24 |   .child(increment_button);
 25 | App::new(body, counter).forget();
 26 | ```
 27 | 
 28 | ## Features
 29 | 
 30 | ### Fine-Grained Reactivity
 31 | 
 32 | Pinwheel uses the [futures-signals](https://lib.rs/futures-signals) crate to update exactly the right DOM nodes as your application's state changes. No virtual DOM required!
 33 | 
 34 | ### Isomorphic Rendering
 35 | 
 36 | When compiled for the browser, Pinwheel renders by creating DOM nodes. On the server, it renders by writing HTML to a string.
 37 | 
 38 | ```rust
 39 | let root = p().child("Hello, World!");
 40 | 
 41 | // On the server...
 42 | assert_eq!(root.to_string(), "<p>Hello, World!</p>");
 43 | 
 44 | // On the client...
 45 | App::new(dom_node, root).forget();
 46 | ```
 47 | 
 48 | ### Partial Hydration
 49 | 
 50 | After server rendering, make a subset of your app interactive on the client. In the example below, `dynamic_component` will render on the server and the client, but `static_component` will render only on the server.
 51 | 
 52 | ```rust
 53 | let root = p().child("Hello, World!");
 54 | 
 55 | // On the server...
 56 | let html = div()
 57 |   .child(static_component)
 58 |   .child(Dehydrate::new("hydration_id", dynamic_component))
 59 |   .to_string();
 60 | 
 61 | // On the client...
 62 | hydrate("hydration_id");
 63 | ```
 64 | 
 65 | ### Macro-free Builders
 66 | 
 67 | Pinwheel provides statically typed builders for DOM elements with no macros, so you get all the benefits of `rustfmt` formatting and `rust-analyzer` autocomplete.
 68 | 
 69 | ```rust
 70 | let count_p = count.signal().map(|count| p().child(count.to_string()));
 71 | let increment_button = button().onclick(on_click).child("Increment");
 72 | let root = div()
 73 |   .style(style::DISPLAY, "grid")
 74 |   .style(style::JUSTIFY_CONTENT, "start")
 75 |   .child_signal(count_p)
 76 |   .child(increment_button);
 77 | ```
 78 | 
 79 | ### Components
 80 | 
 81 | Organize your application into self-contained components.
 82 | 
 83 | ```rust
 84 | use pinwheel::prelude::*;
 85 | 
 86 | struct Alert {
 87 |   title: String,
 88 |   color: Option<String>,
 89 |   children: Vec<Node>,
 90 | }
 91 | 
 92 | impl Component for Alert {
 93 |   fn into_node(self) -> Node {
 94 |     div()
 95 |       .style(style::BACKGROUND_COLOR, self.color)
 96 |       .child(h1().child(self.title))
 97 |       .children(self.children)
 98 |       .into_node()
 99 |   }
100 | }
101 | ```
102 | 
103 | ### Component Builders
104 | 
105 | Components frequently have a few required fields and many optional fields. Pinwheel provides a derive macro to make using these components easy.
106 | 
107 | ```rust
108 | #[derive(ComponentBuilder)]
109 | struct Alert {
110 |   // required field
111 |   title: String,
112 |   // optional field
113 |   #[optional]
114 |   color: Option<String>,
115 |   #[children]
116 |   children: Vec<Node>,
117 | }
118 | ```
119 | 
120 | Now, you can make an alert with the builder pattern.
121 | 
122 | ```rust
123 | Alert::new("Alert!")
124 |   .color("green".to_owned())
125 |   .child("An alert occurred!")
126 | ```
127 | 


--------------------------------------------------------------------------------
/app.rs:
--------------------------------------------------------------------------------
 1 | use super::Node;
 2 | use wasm_bindgen::JsCast;
 3 | use web_sys as dom;
 4 | 
 5 | pub struct App {
 6 | 	node: Node,
 7 | }
 8 | 
 9 | impl App {
10 | 	pub fn new(dom_node: dom::Node, node: impl Into<Node>) -> App {
11 | 		let mut node = node.into();
12 | 		dom_node.unchecked_ref::<dom::Element>().set_inner_html("");
13 | 		node.insert_before(&dom_node, None);
14 | 		App { node }
15 | 	}
16 | 
17 | 	pub fn forget(self) {
18 | 		std::mem::forget(self)
19 | 	}
20 | }
21 | 
22 | impl Drop for App {
23 | 	fn drop(&mut self) {
24 | 		self.node.remove();
25 | 	}
26 | }
27 | 


--------------------------------------------------------------------------------
/attribute_value.rs:
--------------------------------------------------------------------------------
 1 | use std::borrow::Cow;
 2 | 
 3 | #[derive(Clone)]
 4 | pub enum AttributeValue {
 5 | 	Bool(Option<bool>),
 6 | 	String(Option<Cow<'static, str>>),
 7 | }
 8 | 
 9 | pub trait IntoAttributeValue {
10 | 	fn into_attribute_value(self) -> AttributeValue;
11 | }
12 | 
13 | impl IntoAttributeValue for bool {
14 | 	fn into_attribute_value(self) -> AttributeValue {
15 | 		AttributeValue::Bool(Some(self))
16 | 	}
17 | }
18 | 
19 | impl IntoAttributeValue for Option<bool> {
20 | 	fn into_attribute_value(self) -> AttributeValue {
21 | 		AttributeValue::Bool(self)
22 | 	}
23 | }
24 | 
25 | impl IntoAttributeValue for Cow<'static, str> {
26 | 	fn into_attribute_value(self) -> AttributeValue {
27 | 		AttributeValue::String(Some(self))
28 | 	}
29 | }
30 | 
31 | impl IntoAttributeValue for String {
32 | 	fn into_attribute_value(self) -> AttributeValue {
33 | 		AttributeValue::String(Some(Cow::Owned(self)))
34 | 	}
35 | }
36 | 
37 | impl IntoAttributeValue for &'static str {
38 | 	fn into_attribute_value(self) -> AttributeValue {
39 | 		AttributeValue::String(Some(Cow::Borrowed(self)))
40 | 	}
41 | }
42 | 
43 | impl IntoAttributeValue for Option<Cow<'static, str>> {
44 | 	fn into_attribute_value(self) -> AttributeValue {
45 | 		AttributeValue::String(self)
46 | 	}
47 | }
48 | 
49 | impl IntoAttributeValue for Option<String> {
50 | 	fn into_attribute_value(self) -> AttributeValue {
51 | 		AttributeValue::String(self.map(Cow::Owned))
52 | 	}
53 | }
54 | 
55 | impl IntoAttributeValue for Option<&'static str> {
56 | 	fn into_attribute_value(self) -> AttributeValue {
57 | 		AttributeValue::String(self.map(Cow::Borrowed))
58 | 	}
59 | }
60 | 


--------------------------------------------------------------------------------
/client/element.rs:
--------------------------------------------------------------------------------
  1 | use super::{node::Node, signal::SignalNode, signal_vec::SignalVecNode, Handle};
  2 | use crate::{
  3 | 	attribute_value::{AttributeValue, IntoAttributeValue},
  4 | 	option_string_value::{IntoOptionStringValue, OptionStringValue},
  5 | 	string_value::IntoStringValue,
  6 | };
  7 | use futures::{future::abortable, prelude::*};
  8 | use futures_signals::signal::{Signal, SignalExt};
  9 | use futures_signals::signal_vec::SignalVec;
 10 | use std::{borrow::Cow, future::ready, rc::Rc};
 11 | use wasm_bindgen::{prelude::*, JsCast};
 12 | use wasm_bindgen_futures::spawn_local;
 13 | use web_sys as dom;
 14 | 
 15 | pub struct Element {
 16 | 	pub(crate) element: dom::Element,
 17 | 	pub(crate) handles: Vec<Handle>,
 18 | 	pub(crate) events: Vec<Event>,
 19 | 	pub(crate) children: Vec<Node>,
 20 | }
 21 | 
 22 | pub enum Namespace {
 23 | 	Html,
 24 | 	Svg,
 25 | 	MathMl,
 26 | }
 27 | 
 28 | #[derive(PartialEq)]
 29 | pub enum HtmlElementKind {
 30 | 	Void,
 31 | 	Template,
 32 | 	RawText,
 33 | 	EscapableRawText,
 34 | 	Foreign,
 35 | 	Normal,
 36 | }
 37 | 
 38 | pub struct Event {
 39 | 	element: dom::Element,
 40 | 	name: Cow<'static, str>,
 41 | 	closure: Rc<Closure<dyn 'static + FnMut(JsValue)>>,
 42 | }
 43 | 
 44 | impl Element {
 45 | 	pub fn new(tag: &'static str, namespace: Namespace, _kind: Option<HtmlElementKind>) -> Element {
 46 | 		let document = dom::window().unwrap().document().unwrap();
 47 | 		let namespace = match namespace {
 48 | 			Namespace::Html => None,
 49 | 			Namespace::Svg => Some("http://www.w3.org/2000/svg"),
 50 | 			Namespace::MathMl => Some("http://www.w3.org/1998/Math/MathML"),
 51 | 		};
 52 | 		let element = match namespace {
 53 | 			None => document.create_element(tag).unwrap(),
 54 | 			Some(namespace) => document.create_element_ns(Some(namespace), tag).unwrap(),
 55 | 		};
 56 | 		Element {
 57 | 			element,
 58 | 			handles: Vec::new(),
 59 | 			events: Vec::new(),
 60 | 			children: Vec::new(),
 61 | 		}
 62 | 	}
 63 | 
 64 | 	pub fn future<F>(mut self, f: impl FnOnce(&Element) -> F) -> Element
 65 | 	where
 66 | 		F: 'static + Future<Output = ()>,
 67 | 	{
 68 | 		let (future, handle) = abortable(f(&self));
 69 | 		spawn_local(future.map(|_| ()));
 70 | 		let handle = Handle(handle);
 71 | 		self.handles.push(handle);
 72 | 		self
 73 | 	}
 74 | 
 75 | 	pub fn attribute<T>(self, name: impl Into<Cow<'static, str>>, value: T) -> Element
 76 | 	where
 77 | 		T: IntoAttributeValue,
 78 | 	{
 79 | 		let name = name.into();
 80 | 		Self::set_attribute(&self.element, &name, value);
 81 | 		self
 82 | 	}
 83 | 
 84 | 	pub fn attribute_signal<T, S>(mut self, name: impl Into<Cow<'static, str>>, value: S) -> Element
 85 | 	where
 86 | 		T: IntoAttributeValue,
 87 | 		S: 'static + Unpin + Signal<Item = T>,
 88 | 	{
 89 | 		let name = name.into();
 90 | 		let element = self.element.clone();
 91 | 		let (future, handle) = abortable(value.for_each(move |value| {
 92 | 			Self::set_attribute(&element, &name, value);
 93 | 			ready(())
 94 | 		}));
 95 | 		spawn_local(future.map(|_| ()));
 96 | 		let handle = Handle(handle);
 97 | 		self.handles.push(handle);
 98 | 		self
 99 | 	}
100 | 
101 | 	fn set_attribute(element: &dom::Element, name: &str, value: impl IntoAttributeValue) {
102 | 		match value.into_attribute_value() {
103 | 			AttributeValue::Bool(value) => {
104 | 				if value.unwrap_or(false) {
105 | 					element.set_attribute(&name, "").unwrap();
106 | 				} else {
107 | 					element.remove_attribute(&name).unwrap();
108 | 				}
109 | 			}
110 | 			AttributeValue::String(value) => {
111 | 				if let Some(value) = value {
112 | 					element.set_attribute(&name, &value).unwrap();
113 | 				} else {
114 | 					element.remove_attribute(&name).unwrap();
115 | 				}
116 | 			}
117 | 		};
118 | 	}
119 | 
120 | 	pub fn class<T>(self, value: T) -> Element
121 | 	where
122 | 		T: IntoOptionStringValue,
123 | 	{
124 | 		let value = value.into_option_string_value();
125 | 		Self::set_class(&self.element, &value, None);
126 | 		self
127 | 	}
128 | 
129 | 	pub fn class_signal<S, T>(mut self, value: S) -> Element
130 | 	where
131 | 		S: 'static + Unpin + Signal<Item = T>,
132 | 		T: IntoOptionStringValue,
133 | 	{
134 | 		let element = self.element.clone();
135 | 		let mut previous_value = None;
136 | 		let (future, handle) = abortable(value.for_each(move |value| {
137 | 			let value = value.into_option_string_value();
138 | 			Self::set_class(&element, &value, previous_value.as_ref());
139 | 			previous_value = Some(value);
140 | 			ready(())
141 | 		}));
142 | 		spawn_local(future.map(|_| ()));
143 | 		let handle = Handle(handle);
144 | 		self.handles.push(handle);
145 | 		self
146 | 	}
147 | 
148 | 	fn set_class(
149 | 		element: &dom::Element,
150 | 		value: &OptionStringValue,
151 | 		previous_value: Option<&OptionStringValue>,
152 | 	) {
153 | 		if let Some(previous_value) = previous_value.and_then(|value| value.0.as_ref()) {
154 | 			for class in previous_value.split(' ') {
155 | 				element.class_list().remove_1(&class).unwrap();
156 | 			}
157 | 		}
158 | 		if let Some(value) = value.0.as_ref() {
159 | 			for class in value.split(' ') {
160 | 				element.class_list().add_1(&class).unwrap();
161 | 			}
162 | 		}
163 | 	}
164 | 
165 | 	pub fn style<T>(self, name: impl Into<Cow<'static, str>>, value: T) -> Element
166 | 	where
167 | 		T: IntoOptionStringValue,
168 | 	{
169 | 		let name = name.into();
170 | 		Self::set_style(&self.element, &name, value);
171 | 		self
172 | 	}
173 | 
174 | 	pub fn style_signal<S, T>(mut self, name: impl Into<Cow<'static, str>>, value: S) -> Element
175 | 	where
176 | 		S: 'static + Unpin + Signal<Item = T>,
177 | 		T: IntoOptionStringValue,
178 | 	{
179 | 		let name = name.into();
180 | 		let element = self.element.clone();
181 | 		let (future, handle) = abortable(value.for_each(move |value| {
182 | 			Self::set_style(&element, &name, value);
183 | 			ready(())
184 | 		}));
185 | 		spawn_local(future.map(|_| ()));
186 | 		let handle = Handle(handle);
187 | 		self.handles.push(handle);
188 | 		self
189 | 	}
190 | 
191 | 	fn set_style(element: &dom::Element, name: &str, value: impl IntoOptionStringValue) {
192 | 		let value = value.into_option_string_value();
193 | 		if let Some(element) = element.dyn_ref::<dom::HtmlElement>() {
194 | 			if let Some(value) = value.0 {
195 | 				element.style().set_property(&name, &value).unwrap();
196 | 			} else {
197 | 				element.style().remove_property(&name).unwrap();
198 | 			}
199 | 		}
200 | 	}
201 | 
202 | 	pub fn event(
203 | 		mut self,
204 | 		name: impl Into<Cow<'static, str>>,
205 | 		closure: impl 'static + FnMut(JsValue),
206 | 	) -> Element {
207 | 		let name = name.into();
208 | 		let closure = Rc::new(Closure::<dyn FnMut(JsValue)>::wrap(Box::new(closure)));
209 | 		self.element
210 | 			.add_event_listener_with_callback(
211 | 				name.as_ref(),
212 | 				closure.as_ref().as_ref().unchecked_ref(),
213 | 			)
214 | 			.unwrap();
215 | 		self.events.push(Event {
216 | 			element: self.element.clone(),
217 | 			name,
218 | 			closure,
219 | 		});
220 | 		self
221 | 	}
222 | 
223 | 	pub fn child<T>(mut self, child: T) -> Element
224 | 	where
225 | 		T: Into<Node>,
226 | 	{
227 | 		let mut child = child.into();
228 | 		child.insert_before(self.element.unchecked_ref(), None);
229 | 		self.children.push(child);
230 | 		self
231 | 	}
232 | 
233 | 	pub fn children<T, I>(mut self, children: I) -> Element
234 | 	where
235 | 		T: Into<Node>,
236 | 		I: IntoIterator<Item = T>,
237 | 	{
238 | 		for child in children.into_iter() {
239 | 			let mut child = child.into();
240 | 			child.insert_before(self.element.unchecked_ref(), None);
241 | 			self.children.push(child);
242 | 		}
243 | 		self
244 | 	}
245 | 
246 | 	pub fn child_signal<T, S>(mut self, signal: S) -> Element
247 | 	where
248 | 		T: Into<Node>,
249 | 		S: 'static + Unpin + Signal<Item = T>,
250 | 	{
251 | 		let mut child = Node::Signal(SignalNode::new(signal));
252 | 		child.insert_before(self.element.unchecked_ref(), None);
253 | 		self.children.push(child);
254 | 		self
255 | 	}
256 | 
257 | 	pub fn child_signal_vec<T, S>(mut self, signal_vec: S) -> Element
258 | 	where
259 | 		T: Into<Node>,
260 | 		S: 'static + Unpin + SignalVec<Item = T>,
261 | 	{
262 | 		let mut child = Node::SignalVec(SignalVecNode::new(signal_vec));
263 | 		child.insert_before(self.element.unchecked_ref(), None);
264 | 		self.children.push(child);
265 | 		self
266 | 	}
267 | 
268 | 	pub fn inner_html(mut self, value: impl IntoStringValue) -> Element {
269 | 		let html = value.into_string_value();
270 | 		self.element.set_inner_html(html.0.as_ref());
271 | 		self.children.clear();
272 | 		self
273 | 	}
274 | 
275 | 	pub fn dom_element(&self) -> dom::Element {
276 | 		self.element.clone()
277 | 	}
278 | }
279 | 
280 | impl Drop for Event {
281 | 	fn drop(&mut self) {
282 | 		self.element
283 | 			.remove_event_listener_with_callback(
284 | 				self.name.as_ref(),
285 | 				self.closure.as_ref().as_ref().unchecked_ref(),
286 | 			)
287 | 			.unwrap();
288 | 	}
289 | }
290 | 


--------------------------------------------------------------------------------
/client/fragment.rs:
--------------------------------------------------------------------------------
 1 | use super::node::Node;
 2 | use web_sys as dom;
 3 | 
 4 | pub fn fragment() -> Fragment {
 5 | 	Fragment::new()
 6 | }
 7 | 
 8 | pub enum Fragment {
 9 | 	Detached {
10 | 		dom_fragment: dom::DocumentFragment,
11 | 		start_marker: Option<dom::Comment>,
12 | 		children: Option<Vec<Node>>,
13 | 	},
14 | 	Attached {
15 | 		start_marker: dom::Comment,
16 | 		children: Vec<Node>,
17 | 	},
18 | }
19 | 
20 | impl Fragment {
21 | 	pub fn new() -> Fragment {
22 | 		let document = dom::window().unwrap().document().unwrap();
23 | 		let dom_fragment = document.create_document_fragment();
24 | 		let start_marker = document.create_comment("");
25 | 		dom_fragment.append_child(&start_marker).unwrap();
26 | 		Fragment::Detached {
27 | 			dom_fragment,
28 | 			start_marker: Some(start_marker),
29 | 			children: Some(Vec::new()),
30 | 		}
31 | 	}
32 | 
33 | 	pub fn child<T>(mut self, child: T) -> Fragment
34 | 	where
35 | 		T: Into<Node>,
36 | 	{
37 | 		let mut child = child.into();
38 | 		let (dom_fragment, children) = match &mut self {
39 | 			Fragment::Detached {
40 | 				dom_fragment,
41 | 				children,
42 | 				..
43 | 			} => (dom_fragment, children),
44 | 			Fragment::Attached { .. } => panic!(),
45 | 		};
46 | 		child.insert_before(dom_fragment, None);
47 | 		children.as_mut().unwrap().push(child);
48 | 		self
49 | 	}
50 | 
51 | 	pub(crate) fn start_marker(&self) -> &dom::Comment {
52 | 		match self {
53 | 			Fragment::Detached { start_marker, .. } => start_marker.as_ref().unwrap(),
54 | 			Fragment::Attached { start_marker, .. } => start_marker,
55 | 		}
56 | 	}
57 | }
58 | 


--------------------------------------------------------------------------------
/client/mod.rs:
--------------------------------------------------------------------------------
 1 | mod element;
 2 | mod fragment;
 3 | mod node;
 4 | mod signal;
 5 | mod signal_vec;
 6 | mod text;
 7 | 
 8 | pub use self::{
 9 | 	element::{Element, HtmlElementKind, Namespace},
10 | 	fragment::{fragment, Fragment},
11 | 	node::Node,
12 | 	signal::SignalNode,
13 | 	signal_vec::SignalVecNode,
14 | 	text::{text, Text},
15 | };
16 | 
17 | pub struct Handle(pub futures::future::AbortHandle);
18 | 
19 | impl Drop for Handle {
20 | 	fn drop(&mut self) {
21 | 		self.0.abort();
22 | 	}
23 | }
24 | 


--------------------------------------------------------------------------------
/client/node.rs:
--------------------------------------------------------------------------------
  1 | use super::{
  2 | 	element::Element, fragment::Fragment, signal::SignalNode, signal_vec::SignalVecNode, text::Text,
  3 | };
  4 | use wasm_bindgen::JsCast;
  5 | use web_sys as dom;
  6 | 
  7 | pub enum Node {
  8 | 	Text(Text),
  9 | 	Element(Element),
 10 | 	Fragment(Fragment),
 11 | 	Signal(SignalNode),
 12 | 	SignalVec(SignalVecNode),
 13 | }
 14 | 
 15 | impl std::fmt::Display for Node {
 16 | 	fn fmt(&self, _f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
 17 | 		unimplemented!()
 18 | 	}
 19 | }
 20 | 
 21 | impl Node {
 22 | 	pub(crate) fn first_dom_node(&self) -> &dom::Node {
 23 | 		match self {
 24 | 			Node::Text(text) => text.text.unchecked_ref(),
 25 | 			Node::Element(element) => element.element.unchecked_ref(),
 26 | 			Node::Fragment(fragment) => fragment.start_marker().unchecked_ref(),
 27 | 			Node::Signal(signal_node) => signal_node.marker.unchecked_ref(),
 28 | 			Node::SignalVec(signal_vec_node) => signal_vec_node.start_marker.unchecked_ref(),
 29 | 		}
 30 | 	}
 31 | 
 32 | 	pub(crate) fn insert_before(
 33 | 		&mut self,
 34 | 		parent_dom_node: &dom::Node,
 35 | 		reference_dom_node: Option<&dom::Node>,
 36 | 	) {
 37 | 		match self {
 38 | 			Node::Text(text) => {
 39 | 				parent_dom_node
 40 | 					.insert_before(text.text.unchecked_ref(), reference_dom_node)
 41 | 					.unwrap();
 42 | 			}
 43 | 			Node::Element(element) => {
 44 | 				parent_dom_node
 45 | 					.insert_before(element.element.unchecked_ref(), reference_dom_node)
 46 | 					.unwrap();
 47 | 			}
 48 | 			Node::Fragment(fragment) => {
 49 | 				parent_dom_node
 50 | 					.insert_before(&fragment.start_marker(), reference_dom_node)
 51 | 					.unwrap();
 52 | 				let (dom_fragment, start_marker, children) = match fragment {
 53 | 					Fragment::Detached {
 54 | 						dom_fragment,
 55 | 						start_marker,
 56 | 						children,
 57 | 					} => (dom_fragment, start_marker, children),
 58 | 					Fragment::Attached { .. } => panic!(),
 59 | 				};
 60 | 				parent_dom_node
 61 | 					.insert_before(&dom_fragment, reference_dom_node)
 62 | 					.unwrap();
 63 | 				*fragment = Fragment::Attached {
 64 | 					start_marker: start_marker.take().unwrap(),
 65 | 					children: children.take().unwrap(),
 66 | 				};
 67 | 			}
 68 | 			Node::Signal(signal_node) => {
 69 | 				if let Some(child) = signal_node.child.borrow_mut().as_mut() {
 70 | 					child.insert_before(parent_dom_node, reference_dom_node)
 71 | 				}
 72 | 				parent_dom_node
 73 | 					.insert_before(&signal_node.marker, reference_dom_node)
 74 | 					.unwrap();
 75 | 			}
 76 | 			Node::SignalVec(signal_vec_node) => {
 77 | 				parent_dom_node
 78 | 					.insert_before(&signal_vec_node.start_marker, reference_dom_node)
 79 | 					.unwrap();
 80 | 				for child in signal_vec_node.children.borrow_mut().iter_mut() {
 81 | 					child.insert_before(parent_dom_node, reference_dom_node);
 82 | 				}
 83 | 				parent_dom_node
 84 | 					.insert_before(&signal_vec_node.end_marker, reference_dom_node)
 85 | 					.unwrap();
 86 | 			}
 87 | 		}
 88 | 	}
 89 | 
 90 | 	pub(crate) fn remove(&mut self) {
 91 | 		match self {
 92 | 			Node::Text(text) => {
 93 | 				text.text.remove();
 94 | 			}
 95 | 			Node::Element(element) => {
 96 | 				element.element.remove();
 97 | 			}
 98 | 			Node::Fragment(fragment) => {
 99 | 				let (start_marker, children) = match fragment {
100 | 					Fragment::Detached { .. } => panic!(),
101 | 					Fragment::Attached {
102 | 						start_marker,
103 | 						children,
104 | 					} => (start_marker, children),
105 | 				};
106 | 				start_marker.remove();
107 | 				for node in children.iter_mut() {
108 | 					node.remove();
109 | 				}
110 | 			}
111 | 			Node::Signal(signal_node) => {
112 | 				if let Some(child) = signal_node.child.borrow_mut().as_mut() {
113 | 					child.remove();
114 | 				}
115 | 				signal_node.marker.remove();
116 | 			}
117 | 			Node::SignalVec(signal_vec_node) => {
118 | 				signal_vec_node.start_marker.remove();
119 | 				for child in signal_vec_node.children.borrow_mut().iter_mut() {
120 | 					child.remove();
121 | 				}
122 | 				signal_vec_node.end_marker.remove();
123 | 			}
124 | 		};
125 | 	}
126 | }
127 | 


--------------------------------------------------------------------------------
/client/signal.rs:
--------------------------------------------------------------------------------
 1 | use super::{node::Node, Handle};
 2 | use futures::future::{abortable, ready, FutureExt};
 3 | use futures_signals::signal::{Signal, SignalExt};
 4 | use std::{cell::RefCell, rc::Rc};
 5 | use wasm_bindgen::JsCast;
 6 | use wasm_bindgen_futures::spawn_local;
 7 | use web_sys as dom;
 8 | 
 9 | pub struct SignalNode {
10 | 	pub(crate) marker: dom::Comment,
11 | 	pub(crate) child: Rc<RefCell<Option<Node>>>,
12 | 	#[allow(dead_code)]
13 | 	pub(crate) handle: Option<Handle>,
14 | }
15 | 
16 | impl SignalNode {
17 | 	pub fn new<T, S>(signal: S) -> SignalNode
18 | 	where
19 | 		T: Into<Node>,
20 | 		S: 'static + Unpin + Signal<Item = T>,
21 | 	{
22 | 		let document = dom::window().unwrap().document().unwrap();
23 | 		let marker = document.create_comment("");
24 | 		let child: Rc<RefCell<Option<Node>>> = Rc::new(RefCell::new(None));
25 | 		let (future, handle) = abortable(signal.for_each({
26 | 			let marker = marker.clone();
27 | 			let child = child.clone();
28 | 			move |node| {
29 | 				let mut node = node.into();
30 | 				let mut child = child.borrow_mut();
31 | 				if let Some(child) = &mut *child {
32 | 					child.remove();
33 | 				}
34 | 				let parent_dom_node = marker.parent_node().unwrap();
35 | 				node.insert_before(&parent_dom_node, Some(marker.unchecked_ref()));
36 | 				*child = Some(node);
37 | 				ready(())
38 | 			}
39 | 		}));
40 | 		spawn_local(future.map(|_| ()));
41 | 		let handle = Handle(handle);
42 | 		SignalNode {
43 | 			child,
44 | 			marker,
45 | 			handle: Some(handle),
46 | 		}
47 | 	}
48 | }
49 | 


--------------------------------------------------------------------------------
/client/signal_vec.rs:
--------------------------------------------------------------------------------
  1 | use super::{node::Node, Handle};
  2 | use futures::future::{abortable, ready, FutureExt};
  3 | use futures_signals::signal_vec::{SignalVec, SignalVecExt, VecDiff};
  4 | use std::{cell::RefCell, rc::Rc};
  5 | use wasm_bindgen_futures::spawn_local;
  6 | use web_sys as dom;
  7 | 
  8 | pub struct SignalVecNode {
  9 | 	pub(crate) start_marker: dom::Comment,
 10 | 	pub(crate) end_marker: dom::Comment,
 11 | 	pub(crate) children: Rc<RefCell<Vec<Node>>>,
 12 | 	#[allow(dead_code)]
 13 | 	pub(crate) handle: Option<Handle>,
 14 | }
 15 | 
 16 | impl SignalVecNode {
 17 | 	pub fn new<T, S>(signal_vec: S) -> SignalVecNode
 18 | 	where
 19 | 		T: Into<Node>,
 20 | 		S: 'static + Unpin + SignalVec<Item = T>,
 21 | 	{
 22 | 		let document = dom::window().unwrap().document().unwrap();
 23 | 		let start_marker = document.create_comment("");
 24 | 		let end_marker = document.create_comment("");
 25 | 		let children: Rc<RefCell<Vec<Node>>> = Rc::new(RefCell::new(Vec::new()));
 26 | 		let (future, handle) = abortable(signal_vec.for_each({
 27 | 			let end_marker = end_marker.clone();
 28 | 			let children = children.clone();
 29 | 			move |diff| {
 30 | 				let parent_dom_node = end_marker.parent_node().unwrap();
 31 | 				let mut children = children.borrow_mut();
 32 | 				match diff {
 33 | 					VecDiff::Replace { values: nodes } => {
 34 | 						for mut node in children.drain(..) {
 35 | 							node.remove();
 36 | 						}
 37 | 						for node in nodes {
 38 | 							let mut node = node.into();
 39 | 							node.insert_before(&parent_dom_node, Some(&end_marker));
 40 | 							children.push(node);
 41 | 						}
 42 | 					}
 43 | 					VecDiff::InsertAt { index, value: node } => {
 44 | 						let mut node = node.into();
 45 | 						let sibling_node = children.get(index).unwrap();
 46 | 						node.insert_before(&parent_dom_node, Some(sibling_node.first_dom_node()));
 47 | 						children.insert(index, node);
 48 | 					}
 49 | 					VecDiff::UpdateAt { index, value: node } => {
 50 | 						let mut node = node.into();
 51 | 						let sibling_node = children.get_mut(index).unwrap();
 52 | 						node.insert_before(&parent_dom_node, Some(sibling_node.first_dom_node()));
 53 | 						sibling_node.remove();
 54 | 						*children.get_mut(index).unwrap() = node;
 55 | 					}
 56 | 					VecDiff::RemoveAt { index } => {
 57 | 						let mut node = children.remove(index);
 58 | 						node.remove();
 59 | 					}
 60 | 					VecDiff::Move {
 61 | 						old_index,
 62 | 						new_index,
 63 | 					} => {
 64 | 						let mut node = children.remove(old_index);
 65 | 						node.insert_before(
 66 | 							&parent_dom_node,
 67 | 							Some(
 68 | 								children
 69 | 									.get(new_index)
 70 | 									.map(|child| child.first_dom_node())
 71 | 									.unwrap_or(&end_marker),
 72 | 							),
 73 | 						);
 74 | 						children.insert(new_index, node);
 75 | 					}
 76 | 					VecDiff::Push { value: node } => {
 77 | 						let mut node = node.into();
 78 | 						node.insert_before(&parent_dom_node, Some(&end_marker));
 79 | 						children.push(node);
 80 | 					}
 81 | 					VecDiff::Pop {} => {
 82 | 						let mut node = children.pop().unwrap();
 83 | 						node.remove();
 84 | 					}
 85 | 					VecDiff::Clear {} => {
 86 | 						for mut node in children.drain(..) {
 87 | 							node.remove()
 88 | 						}
 89 | 					}
 90 | 				}
 91 | 				ready(())
 92 | 			}
 93 | 		}));
 94 | 		spawn_local(future.map(|_| ()));
 95 | 		let handle = Handle(handle);
 96 | 		SignalVecNode {
 97 | 			start_marker,
 98 | 			end_marker,
 99 | 			children,
100 | 			handle: Some(handle),
101 | 		}
102 | 	}
103 | }
104 | 


--------------------------------------------------------------------------------
/client/text.rs:
--------------------------------------------------------------------------------
 1 | use super::Handle;
 2 | use crate::string_value::IntoStringValue;
 3 | use futures::{future::abortable, prelude::*};
 4 | use futures_signals::signal::{Signal, SignalExt};
 5 | use std::future::ready;
 6 | use wasm_bindgen_futures::spawn_local;
 7 | use web_sys as dom;
 8 | 
 9 | pub fn text(text: impl IntoStringValue) -> Text {
10 | 	Text::new(text)
11 | }
12 | 
13 | pub struct Text {
14 | 	pub(crate) text: dom::Text,
15 | 	#[allow(dead_code)]
16 | 	pub(crate) handle: Option<Handle>,
17 | }
18 | 
19 | impl Text {
20 | 	pub fn new(value: impl IntoStringValue) -> Text {
21 | 		let document = dom::window().unwrap().document().unwrap();
22 | 		let text = document.create_text_node(value.into_string_value().0.as_ref());
23 | 		Text { text, handle: None }
24 | 	}
25 | 
26 | 	pub fn new_signal<T, S>(value: S) -> Text
27 | 	where
28 | 		T: IntoStringValue,
29 | 		S: 'static + Unpin + Signal<Item = T>,
30 | 	{
31 | 		let document = dom::window().unwrap().document().unwrap();
32 | 		let text = document.create_text_node("");
33 | 		let text_node = text.clone();
34 | 		let (future, handle) = abortable(value.for_each(move |value| {
35 | 			text_node.set_data(value.into_string_value().0.as_ref());
36 | 			ready(())
37 | 		}));
38 | 		spawn_local(future.map(|_| ()));
39 | 		let handle = Handle(handle);
40 | 		Text {
41 | 			text,
42 | 			handle: Some(handle),
43 | 		}
44 | 	}
45 | }
46 | 


--------------------------------------------------------------------------------
/component.rs:
--------------------------------------------------------------------------------
 1 | use crate::{Element, Fragment, Node, SignalNode, SignalVecNode, Text};
 2 | use std::borrow::Cow;
 3 | 
 4 | pub trait Component {
 5 | 	fn into_node(self) -> Node;
 6 | }
 7 | 
 8 | impl<T> From<T> for Node
 9 | where
10 | 	T: Component,
11 | {
12 | 	fn from(value: T) -> Self {
13 | 		value.into_node()
14 | 	}
15 | }
16 | 
17 | impl Component for Text {
18 | 	fn into_node(self) -> Node {
19 | 		Node::Text(self)
20 | 	}
21 | }
22 | 
23 | impl Component for Element {
24 | 	fn into_node(self) -> Node {
25 | 		Node::Element(self)
26 | 	}
27 | }
28 | 
29 | impl Component for Fragment {
30 | 	fn into_node(self) -> Node {
31 | 		Node::Fragment(self)
32 | 	}
33 | }
34 | 
35 | impl Component for SignalNode {
36 | 	fn into_node(self) -> Node {
37 | 		Node::Signal(self)
38 | 	}
39 | }
40 | 
41 | impl Component for SignalVecNode {
42 | 	fn into_node(self) -> Node {
43 | 		Node::SignalVec(self)
44 | 	}
45 | }
46 | 
47 | impl Component for Cow<'static, str> {
48 | 	fn into_node(self) -> Node {
49 | 		Node::Text(Text::new(self))
50 | 	}
51 | }
52 | 
53 | impl Component for String {
54 | 	fn into_node(self) -> Node {
55 | 		Node::Text(Text::new(self))
56 | 	}
57 | }
58 | 
59 | impl Component for &'static str {
60 | 	fn into_node(self) -> Node {
61 | 		Node::Text(Text::new(self))
62 | 	}
63 | }
64 | 
65 | impl<T> Component for Option<T>
66 | where
67 | 	T: Into<Node>,
68 | {
69 | 	fn into_node(self) -> Node {
70 | 		self.map(|s| s.into())
71 | 			.unwrap_or_else(|| Node::Fragment(Fragment::new()))
72 | 	}
73 | }
74 | 
75 | impl<T> Component for Vec<T>
76 | where
77 | 	T: Into<Node>,
78 | {
79 | 	fn into_node(self) -> Node {
80 | 		let mut fragment = Fragment::new();
81 | 		for child in self {
82 | 			fragment = fragment.child(child.into());
83 | 		}
84 | 		Node::Fragment(fragment)
85 | 	}
86 | }
87 | 


--------------------------------------------------------------------------------
/dehydrate.rs:
--------------------------------------------------------------------------------
 1 | use crate::prelude::*;
 2 | use std::borrow::Cow;
 3 | 
 4 | pub struct Dehydrate<T>
 5 | where
 6 | 	T: Component + serde::Serialize + serde::de::DeserializeOwned,
 7 | {
 8 | 	id: Cow<'static, str>,
 9 | 	component: T,
10 | }
11 | 
12 | impl<T> Dehydrate<T>
13 | where
14 | 	T: Component + serde::Serialize + serde::de::DeserializeOwned,
15 | {
16 | 	pub fn new(id: impl Into<Cow<'static, str>>, component: T) -> Dehydrate<T> {
17 | 		Dehydrate {
18 | 			id: id.into(),
19 | 			component,
20 | 		}
21 | 	}
22 | }
23 | 
24 | impl<T> Component for Dehydrate<T>
25 | where
26 | 	T: Component + serde::Serialize + serde::de::DeserializeOwned,
27 | {
28 | 	fn into_node(self) -> Node {
29 | 		div()
30 | 			.id(self.id)
31 | 			.attribute(
32 | 				"data-component",
33 | 				serde_json::to_string(&self.component).unwrap(),
34 | 			)
35 | 			.child(self.component)
36 | 			.into_node()
37 | 	}
38 | }
39 | 


--------------------------------------------------------------------------------
/elements/html.rs:
--------------------------------------------------------------------------------
   1 | //! https://developer.mozilla.org/en-US/docs/Web/HTML/Element.
   2 | //! https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
   3 | 
   4 | use crate::HtmlElementKind;
   5 | use pinwheel_elements_macro::element;
   6 | 
   7 | // Main Root.
   8 | 
   9 | element!(
  10 | 	/// The HTML `<html>` element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.
  11 | 	namespace = "html",
  12 | 	tag = "html",
  13 | );
  14 | 
  15 | // Document metadata.
  16 | 
  17 | element!(
  18 | 	/// The HTML `<base>` element specifies the base URL to use for all relative URLs in a document.
  19 | 	namespace = "html",
  20 | 	tag = "base",
  21 | 	kind = HtmlElementKind::Void,
  22 | );
  23 | 
  24 | element!(
  25 | 	/// The HTML `<head>` element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
  26 | 	namespace = "html",
  27 | 	tag = "head",
  28 | );
  29 | 
  30 | element!(
  31 | 	/// The HTML External Resource Link element (`<link>`) specifies relationships between the current document and an external resource. This element is most commonly used to link to CSS, but is also used to establish site icons (both \"favicon\" style icons and icons for the home screen and apps on mobile devices) among other things.
  32 | 	namespace = "html",
  33 | 	tag = "link",
  34 | 	kind = HtmlElementKind::Void,
  35 | );
  36 | 
  37 | element!(
  38 | 	/// The HTML `<meta>` element represents Metadata that cannot be represented by other HTML meta-related elements, like base, link, script, style or title.
  39 | 	namespace = "html",
  40 | 	tag = "meta",
  41 | 	kind = HtmlElementKind::Void,
  42 | );
  43 | 
  44 | element!(
  45 | 	/// The HTML `<style>` element contains style information for a document, or part of a document.
  46 | 	namespace = "html",
  47 | 	tag = "style",
  48 | 	kind = HtmlElementKind::RawText,
  49 | );
  50 | 
  51 | element!(
  52 | 	/// The HTML Title element (`<title>`) defines the document's title that is shown in a Browser's title bar or a page's tab.
  53 | 	namespace = "html",
  54 | 	tag = "title",
  55 | 	kind = HtmlElementKind::EscapableRawText,
  56 | );
  57 | 
  58 | // Sectioning root.
  59 | 
  60 | element!(
  61 | 	/// The HTML `<body> Element represents the content of an HTML document. There can be only one <body>` element in a document.
  62 | 	namespace = "html",
  63 | 	tag = "body",
  64 | );
  65 | 
  66 | // Content sectioning
  67 | 
  68 | element!(
  69 | 	/// The HTML `<address>` element indicates that the enclosed HTML provides contact information for a person or people, or for an organization.
  70 | 	namespace = "html",
  71 | 	tag = "address",
  72 | );
  73 | 
  74 | element!(
  75 | 	/// The HTML `<article>` element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).
  76 | 	namespace = "html",
  77 | 	tag = "article",
  78 | );
  79 | 
  80 | element!(
  81 | 	/// The HTML `<aside>` element represents a portion of a document whose content is only indirectly related to the document's main content.
  82 | 	namespace = "html",
  83 | 	tag = "aside",
  84 | );
  85 | 
  86 | element!(
  87 | 	/// The HTML `<footer> element represents a footer for its nearest sectioning content or sectioning root element. A <footer>` typically contains information about the author of the section, copyright data or links to related documents.
  88 | 	namespace = "html",
  89 | 	tag = "footer",
  90 | );
  91 | 
  92 | element!(
  93 | 	/// The HTML `<header>` element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
  94 | 	namespace = "html",
  95 | 	tag = "header",
  96 | );
  97 | 
  98 | element!(
  99 | 	/// The HTML `<h1>-<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6>` is the lowest.
 100 | 	namespace = "html",
 101 | 	tag = "h1",
 102 | );
 103 | 
 104 | element!(
 105 | 	/// The HTML `<h1>-<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6>` is the lowest.
 106 | 	namespace = "html",
 107 | 	tag = "h2",
 108 | );
 109 | 
 110 | element!(
 111 | 	/// The HTML `<h1>-<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6>` is the lowest.
 112 | 	namespace = "html",
 113 | 	tag = "h3",
 114 | );
 115 | 
 116 | element!(
 117 | 	/// The HTML `<h1>-<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6>` is the lowest.
 118 | 	namespace = "html",
 119 | 	tag = "h4",
 120 | );
 121 | 
 122 | element!(
 123 | 	/// The HTML `<h1>-<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6>` is the lowest.
 124 | 	namespace = "html",
 125 | 	tag = "h5",
 126 | );
 127 | 
 128 | element!(
 129 | 	/// The HTML `<h1>-<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6>` is the lowest.
 130 | 	namespace = "html",
 131 | 	tag = "h6",
 132 | );
 133 | 
 134 | element!(
 135 | 	/// The HTML `<main>` element represents the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
 136 | 	namespace = "html",
 137 | 	tag = "main",
 138 | );
 139 | 
 140 | element!(
 141 | 	/// The HTML `<nav>` element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
 142 | 	namespace = "html",
 143 | 	tag = "nav",
 144 | );
 145 | 
 146 | element!(
 147 | 	/// The HTML `<section>` element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it.
 148 | 	namespace = "html",
 149 | 	tag = "section",
 150 | );
 151 | 
 152 | // Text content.
 153 | 
 154 | element!(
 155 | 	/// The HTML `<blockquote>` Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the cite element.
 156 | 	namespace = "html",
 157 | 	tag = "blockquote",
 158 | );
 159 | 
 160 | element!(
 161 | 	/// The HTML `<dd>` element provides the description, definition, or value for the preceding term (dt) in a description list (dl).
 162 | 	namespace = "html",
 163 | 	tag = "dd",
 164 | );
 165 | 
 166 | element!(
 167 | 	/// The HTML Content Division element (`<div>`) is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).
 168 | 	namespace = "html",
 169 | 	tag = "div",
 170 | 	element = web_sys::HtmlDivElement,
 171 | );
 172 | 
 173 | element!(
 174 | 	/// The HTML `<dl>` element represents a description list. The element encloses a list of groups of terms (specified using the dt element) and descriptions (provided by dd elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
 175 | 	namespace = "html",
 176 | 	tag = "dl",
 177 | );
 178 | 
 179 | element!(
 180 | 	/// The HTML `<dt>` element specifies a term in a description or definition list, and as such must be used inside a dl element.
 181 | 	namespace = "html",
 182 | 	tag = "dt",
 183 | );
 184 | 
 185 | element!(
 186 | 	/// The HTML `<figcaption>` or Figure Caption element represents a caption or legend describing the rest of the contents of its parent figure element.
 187 | 	namespace = "html",
 188 | 	tag = "figcaption",
 189 | );
 190 | 
 191 | element!(
 192 | 	/// The HTML `<figure>` (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the figcaption element.
 193 | 	namespace = "html",
 194 | 	tag = "figure",
 195 | );
 196 | 
 197 | element!(
 198 | 	/// The HTML `<hr>` element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
 199 | 	namespace = "html",
 200 | 	tag = "hr",
 201 | 	kind = HtmlElementKind::Void,
 202 | );
 203 | 
 204 | element!(
 205 | 	/// The HTML `<li>` element is used to represent an item in a list.
 206 | 	namespace = "html",
 207 | 	tag = "li",
 208 | );
 209 | 
 210 | element!(
 211 | 	/// The HTML `<ol>` element represents an ordered list of items - typically rendered as a numbered list.
 212 | 	namespace = "html",
 213 | 	tag = "ol",
 214 | );
 215 | 
 216 | element!(
 217 | 	/// The HTML `<p>` element represents a paragraph.
 218 | 	namespace = "html",
 219 | 	tag = "p",
 220 | );
 221 | 
 222 | element!(
 223 | 	/// The HTML `<pre>` element represents preformatted text which is to be presented exactly as written in the HTML file.
 224 | 	namespace = "html",
 225 | 	tag = "pre",
 226 | );
 227 | 
 228 | element!(
 229 | 	/// The HTML `<ul>` element represents an unordered list of items, typically rendered as a bulleted list.
 230 | 	namespace = "html",
 231 | 	tag = "ul",
 232 | );
 233 | 
 234 | // Inline text semantics.
 235 | 
 236 | element!(
 237 | 	/// The HTML `<a>` element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
 238 | 	namespace = "html",
 239 | 	tag = "a",
 240 | 	attributes = {
 241 | 		download,
 242 | 		href,
 243 | 		hreflang,
 244 | 		media,
 245 | 		ping,
 246 | 		referrerpolicy,
 247 | 		rel,
 248 | 		shape,
 249 | 		target,
 250 | 	},
 251 | );
 252 | 
 253 | element!(
 254 | 	/// The HTML Abbreviation element (`<abbr>`) represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation.
 255 | 	namespace = "html",
 256 | 	tag = "abbr",
 257 | );
 258 | 
 259 | element!(
 260 | 	/// The HTML Bring Attention To element (`<b>`) is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance.
 261 | 	namespace = "html",
 262 | 	tag = "b",
 263 | );
 264 | 
 265 | element!(
 266 | 	/// The HTML Bidirectional Isolate element (`<bdi>`)  tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text.
 267 | 	namespace = "html",
 268 | 	tag = "bdi",
 269 | );
 270 | 
 271 | element!(
 272 | 	/// The HTML Bidirectional Text Override element (`<bdo>`) overrides the current directionality of text, so that the text within is rendered in a different direction.
 273 | 	namespace = "html",
 274 | 	tag = "bdo",
 275 | );
 276 | 
 277 | element!(
 278 | 	/// The HTML `<br>` element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
 279 | 	namespace = "html",
 280 | 	tag = "br",
 281 | 	kind = HtmlElementKind::Void,
 282 | );
 283 | 
 284 | element!(
 285 | 	/// The HTML Citation element (`<cite>`) is used to describe a reference to a cited creative work, and must include the title of that work.
 286 | 	namespace = "html",
 287 | 	tag = "cite",
 288 | );
 289 | 
 290 | element!(
 291 | 	/// The HTML `<code>` element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.
 292 | 	namespace = "html",
 293 | 	tag = "code",
 294 | );
 295 | 
 296 | element!(
 297 | 	/// The HTML `<data>` element links a given piece of content with a machine-readable translation. If the content is time- or date-related, the time element must be used.
 298 | 	namespace = "html",
 299 | 	tag = "data",
 300 | );
 301 | 
 302 | element!(
 303 | 	/// The HTML Definition element (`<dfn>`) is used to indicate the term being defined within the context of a definition phrase or sentence.
 304 | 	namespace = "html",
 305 | 	tag = "fdn",
 306 | );
 307 | 
 308 | element!(
 309 | 	/// The HTML `<em> element marks text that has stress emphasis. The <em>` element can be nested, with each level of nesting indicating a greater degree of emphasis.
 310 | 	namespace = "html",
 311 | 	tag = "em",
 312 | );
 313 | 
 314 | element!(
 315 | 	/// The HTML Idiomatic Text element (`<i>`) represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others.
 316 | 	namespace = "html",
 317 | 	tag = "i",
 318 | );
 319 | 
 320 | element!(
 321 | 	/// The HTML Keyboard Input element (`<kbd>`) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
 322 | 	namespace = "html",
 323 | 	tag = "kbd",
 324 | );
 325 | 
 326 | element!(
 327 | 	/// The HTML Mark Text element (`<mark>`) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.
 328 | 	namespace = "html",
 329 | 	tag = "mark",
 330 | );
 331 | 
 332 | element!(
 333 | 	/// The HTML `<q>` element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks.
 334 | 	namespace = "html",
 335 | 	tag = "q",
 336 | );
 337 | 
 338 | element!(
 339 | 	/// The HTML Ruby Base (`<rb>`) element is used to delimit the base text component of a  ruby annotation, i.e. the text that is being annotated.
 340 | 	namespace = "html",
 341 | 	tag = "rb",
 342 | );
 343 | 
 344 | element!(
 345 | 	/// The HTML Ruby Fallback Parenthesis (`<rp>`) element is used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the ruby element.
 346 | 	namespace = "html",
 347 | 	tag = "rp",
 348 | );
 349 | 
 350 | element!(
 351 | 	/// The HTML Ruby Text (`<rt>) element specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The <rt>` element must always be contained within a ruby element.
 352 | 	namespace = "html",
 353 | 	tag = "rt",
 354 | );
 355 | 
 356 | element!(
 357 | 	/// The HTML Ruby Text Container (`<rtc>`) element embraces semantic annotations of characters presented in a ruby of rb elements used inside of ruby element. rb elements can have both pronunciation (rt) and semantic (rtc) annotations.
 358 | 	namespace = "html",
 359 | 	tag = "rtc",
 360 | );
 361 | 
 362 | element!(
 363 | 	/// The HTML `<ruby>` element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.
 364 | 	namespace = "html",
 365 | 	tag = "ruby",
 366 | );
 367 | 
 368 | element!(
 369 | 	/// The HTML `<s> element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s>` is not appropriate when indicating document edits; for that, use the del and ins elements, as appropriate.
 370 | 	namespace = "html",
 371 | 	tag = "s",
 372 | );
 373 | 
 374 | element!(
 375 | 	/// The HTML Sample Element (`<samp>`) is used to enclose inline text which represents sample (or quoted) output from a computer program.
 376 | 	namespace = "html",
 377 | 	tag = "samp",
 378 | );
 379 | 
 380 | element!(
 381 | 	/// The HTML `<small>` element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small.
 382 | 	namespace = "html",
 383 | 	tag = "small",
 384 | );
 385 | 
 386 | element!(
 387 | 	/// The HTML `<span>` element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang.
 388 | 	namespace = "html",
 389 | 	tag = "span",
 390 | );
 391 | 
 392 | element!(
 393 | 	/// The HTML Strong Importance Element (`<strong>`) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
 394 | 	namespace = "html",
 395 | 	tag = "strong",
 396 | );
 397 | 
 398 | element!(
 399 | 	/// The HTML Subscript element (`<sub>`) specifies inline text which should be displayed as subscript for solely typographical reasons.
 400 | 	namespace = "html",
 401 | 	tag = "sub",
 402 | );
 403 | 
 404 | element!(
 405 | 	/// The HTML Superscript element (`<sup>`) specifies inline text which is to be displayed as superscript for solely typographical reasons.
 406 | 	namespace = "html",
 407 | 	tag = "sup",
 408 | );
 409 | 
 410 | element!(
 411 | 	/// The HTML `<time>` element represents a specific period in time.
 412 | 	namespace = "html",
 413 | 	tag = "time",
 414 | );
 415 | 
 416 | element!(
 417 | 	/// The HTML Unarticulated Annotation element (`<u>`) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
 418 | 	namespace = "html",
 419 | 	tag = "u",
 420 | );
 421 | 
 422 | element!(
 423 | 	/// The HTML Variable element (`<var>`) represents the name of a variable in a mathematical expression or a programming context.
 424 | 	namespace = "html",
 425 | 	tag = "var",
 426 | );
 427 | 
 428 | element!(
 429 | 	/// The HTML `<wbr>` element represents a word break opportunity - a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
 430 | 	namespace = "html",
 431 | 	tag = "wbr",
 432 | 	kind = HtmlElementKind::Void,
 433 | );
 434 | 
 435 | // Image and multimedia.
 436 | 
 437 | element!(
 438 | 	/// The HTML `<area>` element defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with Hyperlink.
 439 | 	namespace = "html",
 440 | 	tag = "area",
 441 | 	kind = HtmlElementKind::Void,
 442 | );
 443 | 
 444 | element!(
 445 | 	/// The HTML `<audio>` element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the source element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.
 446 | 	namespace = "html",
 447 | 	tag = "audio",
 448 | );
 449 | 
 450 | element!(
 451 | 	/// The HTML `<img>` element embeds an image into the document.
 452 | 	namespace = "html",
 453 | 	tag = "img",
 454 | 	kind = HtmlElementKind::Void,
 455 | );
 456 | 
 457 | element!(
 458 | 	/// The HTML `<map>` element is used with area elements to define an image map (a clickable link area).
 459 | 	namespace = "html",
 460 | 	tag = "map",
 461 | );
 462 | 
 463 | element!(
 464 | 	/// The HTML `<track>` element is used as a child of the media elements, audio and video. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles.
 465 | 	namespace = "html",
 466 | 	tag = "track",
 467 | 	kind = HtmlElementKind::Void,
 468 | );
 469 | 
 470 | element!(
 471 | 	/// The HTML Video element (`<video>) embeds a media player which supports video playback into the document. You can use <video>` for audio content as well, but the audio element may provide a more appropriate user experience.
 472 | 	namespace = "html",
 473 | 	tag = "video",
 474 | );
 475 | 
 476 | // Embedded content.
 477 | 
 478 | element!(
 479 | 	/// The HTML `<embed>` element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.
 480 | 	namespace = "html",
 481 | 	tag = "embed",
 482 | 	kind = HtmlElementKind::Void,
 483 | );
 484 | 
 485 | element!(
 486 | 	/// The HTML Inline Frame element (`<iframe>`) represents a nested browsing context, embedding another HTML page into the current one.
 487 | 	namespace = "html",
 488 | 	tag = "iframe",
 489 | );
 490 | 
 491 | element!(
 492 | 	/// The HTML `<object>` element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.
 493 | 	namespace = "html",
 494 | 	tag = "object",
 495 | );
 496 | 
 497 | element!(
 498 | 	/// The HTML `<param>` element defines parameters for an object element.
 499 | 	namespace = "html",
 500 | 	tag = "param",
 501 | 	kind = HtmlElementKind::Void,
 502 | );
 503 | 
 504 | element!(
 505 | 	/// The HTML `<picture>` element contains zero or more source elements and one img element to offer alternative versions of an image for different display/device scenarios.
 506 | 	namespace = "html",
 507 | 	tag = "picture",
 508 | );
 509 | 
 510 | element!(
 511 | 	/// The HTML Portal element (`<portal>`) enables the embedding of another HTML page into the current one for the purposes of allowing smoother navigation into new pages.
 512 | 	namespace = "html",
 513 | 	tag = "portal",
 514 | );
 515 | 
 516 | element!(
 517 | 	/// The HTML `<source>` element specifies multiple media resources for the picture, the audio element, or the video element.
 518 | 	namespace = "html",
 519 | 	tag = "source",
 520 | 	kind = HtmlElementKind::Void,
 521 | );
 522 | 
 523 | // SVG and MathML.
 524 | 
 525 | element!(
 526 | 	/// The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.
 527 | 	namespace = "html",
 528 | 	tag = "svg",
 529 | );
 530 | 
 531 | element!(
 532 | 	/// The top-level element in MathML is `<math>. Every valid MathML instance must be wrapped in <math> tags. In addition you must not nest a second <math>` element in another, but you can have an arbitrary number of other child elements in it.
 533 | 	namespace = "html",
 534 | 	tag = "math",
 535 | );
 536 | 
 537 | // Scripting
 538 | 
 539 | element!(
 540 | 	/// Use the HTML `<canvas>` element with either the canvas scripting API or the WebGL API to draw graphics and animations.
 541 | 	namespace = "html",
 542 | 	tag = "canvas",
 543 | );
 544 | 
 545 | element!(
 546 | 	/// The HTML `<noscript>` element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
 547 | 	namespace = "html",
 548 | 	tag = "noscript",
 549 | );
 550 | 
 551 | element!(
 552 | 	/// The HTML `<script>` element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code.
 553 | 	namespace = "html",
 554 | 	tag = "script",
 555 | 	kind = HtmlElementKind::RawText,
 556 | );
 557 | 
 558 | // Demarcating edits.
 559 | 
 560 | element!(
 561 | 	/// The HTML `<del>` element represents a range of text that has been deleted from a document.
 562 | 	namespace = "html",
 563 | 	tag = "del",
 564 | );
 565 | 
 566 | element!(
 567 | 	/// The HTML `<ins>` element represents a range of text that has been added to a document.
 568 | 	namespace = "html",
 569 | 	tag = "ins",
 570 | );
 571 | 
 572 | // Table content.
 573 | 
 574 | element!(
 575 | 	/// The HTML `<caption>` element specifies the caption (or title) of a table.
 576 | 	namespace = "html",
 577 | 	tag = "caption",
 578 | );
 579 | 
 580 | element!(
 581 | 	/// The HTML `<col>` element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a colgroup element.
 582 | 	namespace = "html",
 583 | 	tag = "col",
 584 | 	kind = HtmlElementKind::Void,
 585 | );
 586 | 
 587 | element!(
 588 | 	/// The HTML `<colgroup>` element defines a group of columns within a table.
 589 | 	namespace = "html",
 590 | 	tag = "colgroup",
 591 | );
 592 | 
 593 | element!(
 594 | 	/// The HTML `<table>` element represents tabular data - that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
 595 | 	namespace = "html",
 596 | 	tag = "table",
 597 | );
 598 | 
 599 | element!(
 600 | 	/// The HTML Table Body element (`<tbody>`) encapsulates a set of table rows (tr elements), indicating that they comprise the body of the table (table).
 601 | 	namespace = "html",
 602 | 	tag = "tbody",
 603 | );
 604 | 
 605 | element!(
 606 | 	/// The HTML `<td>` element defines a cell of a table that contains data. It participates in the table model.
 607 | 	namespace = "html",
 608 | 	tag = "td",
 609 | );
 610 | 
 611 | element!(
 612 | 	/// The HTML `<tfoot>` element defines a set of rows summarizing the columns of the table.
 613 | 	namespace = "html",
 614 | 	tag = "tfoot",
 615 | );
 616 | 
 617 | element!(
 618 | 	/// The HTML `<th>` element defines a cell as header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.
 619 | 	namespace = "html",
 620 | 	tag = "th",
 621 | );
 622 | 
 623 | element!(
 624 | 	/// The HTML `<thead>` element defines a set of rows defining the head of the columns of the table.
 625 | 	namespace = "html",
 626 | 	tag = "thead",
 627 | );
 628 | 
 629 | element!(
 630 | 	/// The HTML `<tr>` element defines a row of cells in a table. The row's cells can then be established using a mix of td (data cell) and th (header cell) elements.
 631 | 	namespace = "html",
 632 | 	tag = "tr",
 633 | );
 634 | 
 635 | // Forms.
 636 | 
 637 | element!(
 638 | 	/// The HTML `<button>` element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
 639 | 	namespace = "html",
 640 | 	tag = "button",
 641 | 	attributes = {
 642 | 		autofocus,
 643 | 		disabled?,
 644 | 		form,
 645 | 		formaction,
 646 | 		formenctype,
 647 | 		formmethod,
 648 | 		formnovalidate,
 649 | 		formtarget,
 650 | 		name,
 651 | 		// type,
 652 | 		value,
 653 | 	},
 654 | );
 655 | 
 656 | element!(
 657 | 	/// The HTML `<datalist>` element contains a set of option elements that represent the permissible or recommended options available to choose from within other controls.
 658 | 	namespace = "html",
 659 | 	tag = "datalist",
 660 | );
 661 | 
 662 | element!(
 663 | 	/// The HTML `<fieldset>` element is used to group several controls as well as labels (label) within a web form.
 664 | 	namespace = "html",
 665 | 	tag = "fieldset",
 666 | );
 667 | 
 668 | element!(
 669 | 	/// The HTML `<form>` element represents a document section containing interactive controls for submitting information.
 670 | 	namespace = "html",
 671 | 	tag = "form",
 672 | 	attributes = {
 673 | 		accept,
 674 | 		accept_charset,
 675 | 		action,
 676 | 		autocomplete,
 677 | 		enctype,
 678 | 		method,
 679 | 		name,
 680 | 		novalidate?,
 681 | 		target,
 682 | 	},
 683 | );
 684 | 
 685 | element!(
 686 | 	/// The HTML `<input>` element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
 687 | 	namespace = "html",
 688 | 	tag = "input",
 689 | 	kind = HtmlElementKind::Void,
 690 | 	attributes = {
 691 | 		accept,
 692 | 		alt,
 693 | 		autocomplete,
 694 | 		autofocus,
 695 | 		capture,
 696 | 		checked,
 697 | 		dirname,
 698 | 		disabled?,
 699 | 		form,
 700 | 		formaction,
 701 | 		formenctype,
 702 | 		formmethod,
 703 | 		formnovalidate,
 704 | 		formtarget,
 705 | 		height,
 706 | 		list,
 707 | 		max,
 708 | 		maxlength,
 709 | 		minlength,
 710 | 		min,
 711 | 		multiple,
 712 | 		name,
 713 | 		pattern,
 714 | 		placeholder,
 715 | 		readonly?,
 716 | 		required?,
 717 | 		size,
 718 | 		src,
 719 | 		step,
 720 | 		// type,
 721 | 		usemap,
 722 | 		value,
 723 | 		width,
 724 | 	},
 725 | 	events = {
 726 | 		input: InputEvent,
 727 | 	},
 728 | );
 729 | 
 730 | element!(
 731 | 	/// The HTML `<label>` element represents a caption for an item in a user interface.
 732 | 	namespace = "html",
 733 | 	tag = "label",
 734 | );
 735 | 
 736 | element!(
 737 | 	/// The HTML `<legend>` element represents a caption for the content of its parent fieldset.
 738 | 	namespace = "html",
 739 | 	tag = "legend",
 740 | );
 741 | 
 742 | element!(
 743 | 	/// The HTML `<meter>` element represents either a scalar value within a known range or a fractional value.
 744 | 	namespace = "html",
 745 | 	tag = "meter",
 746 | );
 747 | 
 748 | element!(
 749 | 	/// The HTML `<optgroup>` element creates a grouping of options within a select element.
 750 | 	namespace = "html",
 751 | 	tag = "optgroup",
 752 | );
 753 | 
 754 | element!(
 755 | 	/// The HTML `<option> element is used to define an item contained in a select, an optgroup, or a datalist element. As such, <option>` can represent menu items in popups and other lists of items in an HTML document.
 756 | 	namespace = "html",
 757 | 	tag = "option",
 758 | );
 759 | 
 760 | element!(
 761 | 	/// The HTML Output element (`<output>`) is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.
 762 | 	namespace = "html",
 763 | 	tag = "output",
 764 | );
 765 | 
 766 | element!(
 767 | 	/// The HTML `<progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
 768 | 	namespace = "html",
 769 | 	tag = "progress",
 770 | );
 771 | 
 772 | element!(
 773 | 	/// The HTML `<select>` element represents a control that provides a menu of options
 774 | 	namespace = "html",
 775 | 	tag = "select",
 776 | 	events = {
 777 | 		change: InputEvent,
 778 | 		input: InputEvent,
 779 | 	},
 780 | );
 781 | 
 782 | element!(
 783 | 	/// The HTML `<textarea>` element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
 784 | 	namespace = "html",
 785 | 	tag = "textarea",
 786 | 	kind = HtmlElementKind::EscapableRawText,
 787 | );
 788 | 
 789 | // Interactive elements.
 790 | 
 791 | element!(
 792 | 	/// The HTML Details Element (`<details>`) creates a disclosure widget in which information is visible only when the widget is toggled into an \"open\" state.
 793 | 	namespace = "html",
 794 | 	tag = "details",
 795 | );
 796 | 
 797 | element!(
 798 | 	/// The HTML `<dialog>` element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
 799 | 	namespace = "html",
 800 | 	tag = "dialog",
 801 | );
 802 | 
 803 | element!(
 804 | 	/// The HTML `<menu>` element represents a group of commands that a user can perform or activate. This includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked.
 805 | 	namespace = "html",
 806 | 	tag = "menu",
 807 | );
 808 | 
 809 | element!(
 810 | 	/// The HTML Disclosure Summary element (`<summary>`) element specifies a summary, caption, or legend for a details element's disclosure box.
 811 | 	namespace = "html",
 812 | 	tag = "summary",
 813 | );
 814 | 
 815 | // Web components.
 816 | 
 817 | element!(
 818 | 	/// The HTML `<slot>` element - part of the Web Components technology suite - is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.
 819 | 	namespace = "html",
 820 | 	tag = "slot",
 821 | );
 822 | 
 823 | element!(
 824 | 	/// The HTML Content Template (`<template>`) element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.
 825 | 	namespace = "html",
 826 | 	tag = "template",
 827 | 	kind = HtmlElementKind::Template,
 828 | );
 829 | 
 830 | // Obsoltete and deprecated elements.
 831 | 
 832 | // These items are unimplemented.
 833 | 
 834 | pub mod style {
 835 | 	pub const ALIGN_CONTENT: &str = "align-content";
 836 | 	pub const ALIGN_ITEMS: &str = "align-items";
 837 | 	pub const ALIGN_SELF: &str = "align-self";
 838 | 	pub const ALIGNMENT_BASELINE: &str = "alignment-baseline";
 839 | 	pub const ANIMATION: &str = "animation";
 840 | 	pub const ANIMATION_DELAY: &str = "animation-delay";
 841 | 	pub const ANIMATION_DIRECTION: &str = "animation-direction";
 842 | 	pub const ANIMATION_DURATION: &str = "animation-duration";
 843 | 	pub const ANIMATION_FILL_MODE: &str = "animation-fill-mode";
 844 | 	pub const ANIMATION_ITERATION_COUNT: &str = "animation-iteration-count";
 845 | 	pub const ANIMATION_NAME: &str = "animation-name";
 846 | 	pub const ANIMATION_PLAY_STATE: &str = "animation-play-state";
 847 | 	pub const ANIMATION_TIMING_FUNCTION: &str = "animation-timing-function";
 848 | 	pub const BACKFACE_VISIBILITY: &str = "backface-visibility";
 849 | 	pub const BACKGROUND: &str = "background";
 850 | 	pub const BACKGROUND_ATTACHMENT: &str = "background-attachment";
 851 | 	pub const BACKGROUND_CLIP: &str = "background-clip";
 852 | 	pub const BACKGROUND_COLOR: &str = "background-color";
 853 | 	pub const BACKGROUND_IMAGE: &str = "background-image";
 854 | 	pub const BACKGROUND_ORIGIN: &str = "background-origin";
 855 | 	pub const BACKGROUND_POSITION: &str = "background-position";
 856 | 	pub const BACKGROUND_POSITION_X: &str = "background-position-x";
 857 | 	pub const BACKGROUND_POSITION_Y: &str = "background-position-y";
 858 | 	pub const BACKGROUND_REPEAT: &str = "background-repeat";
 859 | 	pub const BACKGROUND_SIZE: &str = "background-size";
 860 | 	pub const BASELINE_SHIFT: &str = "baseline-shift";
 861 | 	pub const BLOCK_SIZE: &str = "block-size";
 862 | 	pub const BORDER: &str = "border";
 863 | 	pub const BORDER_BLOCK_END: &str = "border-block-end";
 864 | 	pub const BORDER_BLOCK_END_COLOR: &str = "border-block-end-color";
 865 | 	pub const BORDER_BLOCK_END_STYLE: &str = "border-block-end-style";
 866 | 	pub const BORDER_BLOCK_END_WIDTH: &str = "border-block-end-width";
 867 | 	pub const BORDER_BLOCK_START: &str = "border-block-start";
 868 | 	pub const BORDER_BLOCK_START_COLOR: &str = "border-block-start-color";
 869 | 	pub const BORDER_BLOCK_START_STYLE: &str = "border-block-start-style";
 870 | 	pub const BORDER_BLOCK_START_WIDTH: &str = "border-block-start-width";
 871 | 	pub const BORDER_BOTTOM: &str = "border-bottom";
 872 | 	pub const BORDER_BOTTOM_COLOR: &str = "border-bottom-color";
 873 | 	pub const BORDER_BOTTOM_LEFT_RADIUS: &str = "border-bottom-left-radius";
 874 | 	pub const BORDER_BOTTOM_RIGHT_RADIUS: &str = "border-bottom-right-radius";
 875 | 	pub const BORDER_BOTTOM_STYLE: &str = "border-bottom-style";
 876 | 	pub const BORDER_BOTTOM_WIDTH: &str = "border-bottom-width";
 877 | 	pub const BORDER_COLLAPSE: &str = "border-collapse";
 878 | 	pub const BORDER_COLOR: &str = "border-color";
 879 | 	pub const BORDER_IMAGE: &str = "border-image";
 880 | 	pub const BORDER_IMAGE_OUTSET: &str = "border-image-outset";
 881 | 	pub const BORDER_IMAGE_REPEAT: &str = "border-image-repeat";
 882 | 	pub const BORDER_IMAGE_SLICE: &str = "border-image-slice";
 883 | 	pub const BORDER_IMAGE_SOURCE: &str = "border-image-source";
 884 | 	pub const BORDER_IMAGE_WIDTH: &str = "border-image-width";
 885 | 	pub const BORDER_INLINE_END: &str = "border-inline-end";
 886 | 	pub const BORDER_INLINE_END_COLOR: &str = "border-inline-end-color";
 887 | 	pub const BORDER_INLINE_END_STYLE: &str = "border-inline-end-style";
 888 | 	pub const BORDER_INLINE_END_WIDTH: &str = "border-inline-end-width";
 889 | 	pub const BORDER_INLINE_START: &str = "border-inline-start";
 890 | 	pub const BORDER_INLINE_START_COLOR: &str = "border-inline-start-color";
 891 | 	pub const BORDER_INLINE_START_STYLE: &str = "border-inline-start-style";
 892 | 	pub const BORDER_INLINE_START_WIDTH: &str = "border-inline-start-width";
 893 | 	pub const BORDER_LEFT: &str = "border-left";
 894 | 	pub const BORDER_LEFT_COLOR: &str = "border-left-color";
 895 | 	pub const BORDER_LEFT_STYLE: &str = "border-left-style";
 896 | 	pub const BORDER_LEFT_WIDTH: &str = "border-left-width";
 897 | 	pub const BORDER_RADIUS: &str = "border-radius";
 898 | 	pub const BORDER_RIGHT: &str = "border-right";
 899 | 	pub const BORDER_RIGHT_COLOR: &str = "border-right-color";
 900 | 	pub const BORDER_RIGHT_STYLE: &str = "border-right-style";
 901 | 	pub const BORDER_RIGHT_WIDTH: &str = "border-right-width";
 902 | 	pub const BORDER_SPACING: &str = "border-spacing";
 903 | 	pub const BORDER_STYLE: &str = "border-style";
 904 | 	pub const BORDER_TOP: &str = "border-top";
 905 | 	pub const BORDER_TOP_COLOR: &str = "border-top-color";
 906 | 	pub const BORDER_TOP_LEFT_RADIUS: &str = "border-top-left-radius";
 907 | 	pub const BORDER_TOP_RIGHT_RADIUS: &str = "border-top-right-radius";
 908 | 	pub const BORDER_TOP_STYLE: &str = "border-top-style";
 909 | 	pub const BORDER_TOP_WIDTH: &str = "border-top-width";
 910 | 	pub const BORDER_WIDTH: &str = "border-width";
 911 | 	pub const BOTTOM: &str = "bottom";
 912 | 	pub const BOX_SHADOW: &str = "box-shadow";
 913 | 	pub const BOX_SIZING: &str = "box-sizing";
 914 | 	pub const BREAK_AFTER: &str = "break-after";
 915 | 	pub const BREAK_BEFORE: &str = "break-before";
 916 | 	pub const BREAK_INSIDE: &str = "break-inside";
 917 | 	pub const CAPTION_SIDE: &str = "caption-side";
 918 | 	pub const CARET_COLOR: &str = "caret-color";
 919 | 	pub const CLEAR: &str = "clear";
 920 | 	pub const CLIP: &str = "clip";
 921 | 	pub const CLIP_PATH: &str = "clip-path";
 922 | 	pub const CLIP_RULE: &str = "clip-rule";
 923 | 	pub const COLOR: &str = "color";
 924 | 	pub const COLOR_INTERPOLATION: &str = "color-interpolation";
 925 | 	pub const COLOR_INTERPOLATION_FILTERS: &str = "color-interpolation-filters";
 926 | 	pub const COLUMN_COUNT: &str = "column-count";
 927 | 	pub const COLUMN_FILL: &str = "column-fill";
 928 | 	pub const COLUMN_GAP: &str = "column-gap";
 929 | 	pub const COLUMN_RULE: &str = "column-rule";
 930 | 	pub const COLUMN_RULE_COLOR: &str = "column-rule-color";
 931 | 	pub const COLUMN_RULE_STYLE: &str = "column-rule-style";
 932 | 	pub const COLUMN_RULE_WIDTH: &str = "column-rule-width";
 933 | 	pub const COLUMN_SPAN: &str = "column-span";
 934 | 	pub const COLUMN_WIDTH: &str = "column-width";
 935 | 	pub const COLUMNS: &str = "columns";
 936 | 	pub const CONTENT: &str = "content";
 937 | 	pub const COUNTER_INCREMENT: &str = "counter-increment";
 938 | 	pub const COUNTER_RESET: &str = "counter-reset";
 939 | 	pub const CSS_FLOAT: &str = "css-float";
 940 | 	pub const CSS_TEXT: &str = "css-text";
 941 | 	pub const CURSOR: &str = "cursor";
 942 | 	pub const DIRECTION: &str = "direction";
 943 | 	pub const DISPLAY: &str = "display";
 944 | 	pub const DOMINANT_BASELINE: &str = "dominant-baseline";
 945 | 	pub const EMPTY_CELLS: &str = "empty-cells";
 946 | 	pub const ENABLE_BACKGROUND: &str = "enable-background";
 947 | 	pub const FILL: &str = "fill";
 948 | 	pub const FILL_OPACITY: &str = "fill-opacity";
 949 | 	pub const FILL_RULE: &str = "fill-rule";
 950 | 	pub const FILTER: &str = "filter";
 951 | 	pub const FLEX: &str = "flex";
 952 | 	pub const FLEX_BASIS: &str = "flex-basis";
 953 | 	pub const FLEX_DIRECTION: &str = "flex-direction";
 954 | 	pub const FLEX_FLOW: &str = "flex-flow";
 955 | 	pub const FLEX_GROW: &str = "flex-grow";
 956 | 	pub const FLEX_SHRINK: &str = "flex-shrink";
 957 | 	pub const FLEX_WRAP: &str = "flex-wrap";
 958 | 	pub const FLOAT: &str = "float";
 959 | 	pub const FLOOD_COLOR: &str = "flood-color";
 960 | 	pub const FLOOD_OPACITY: &str = "flood-opacity";
 961 | 	pub const FONT: &str = "font";
 962 | 	pub const FONT_FAMILY: &str = "font-family";
 963 | 	pub const FONT_FEATURE_SETTINGS: &str = "font-feature-settings";
 964 | 	pub const FONT_KERNING: &str = "font-kerning";
 965 | 	pub const FONT_SIZE: &str = "font-size";
 966 | 	pub const FONT_SIZE_ADJUST: &str = "font-size-adjust";
 967 | 	pub const FONT_STRETCH: &str = "font-stretch";
 968 | 	pub const FONT_STYLE: &str = "font-style";
 969 | 	pub const FONT_SYNTHESIS: &str = "font-synthesis";
 970 | 	pub const FONT_VARIANT: &str = "font-variant";
 971 | 	pub const FONT_VARIANT_CAPS: &str = "font-variant-caps";
 972 | 	pub const FONT_VARIANT_EAST_ASIAN: &str = "font-variant-east-asian";
 973 | 	pub const FONT_VARIANT_LIGATURES: &str = "font-variant-ligatures";
 974 | 	pub const FONT_VARIANT_NUMERIC: &str = "font-variant-numeric";
 975 | 	pub const FONT_VARIANT_POSITION: &str = "font-variant-position";
 976 | 	pub const FONT_WEIGHT: &str = "font-weight";
 977 | 	pub const GAP: &str = "gap";
 978 | 	pub const GLYPH_ORIENTATION_HORIZONTAL: &str = "glyph-orientation-horizontal";
 979 | 	pub const GLYPH_ORIENTATION_VERTICAL: &str = "glyph-orientation-vertical";
 980 | 	pub const GRID: &str = "grid";
 981 | 	pub const GRID_AREA: &str = "grid-area";
 982 | 	pub const GRID_AUTO_COLUMNS: &str = "grid-auto-columns";
 983 | 	pub const GRID_AUTO_FLOW: &str = "grid-auto-flow";
 984 | 	pub const GRID_AUTO_ROWS: &str = "grid-auto-rows";
 985 | 	pub const GRID_COLUMN: &str = "grid-column";
 986 | 	pub const GRID_COLUMN_END: &str = "grid-column-end";
 987 | 	pub const GRID_COLUMN_GAP: &str = "grid-column-gap";
 988 | 	pub const GRID_COLUMN_START: &str = "grid-column-start";
 989 | 	pub const GRID_GAP: &str = "grid-gap";
 990 | 	pub const GRID_ROW: &str = "grid-row";
 991 | 	pub const GRID_ROW_END: &str = "grid-row-end";
 992 | 	pub const GRID_ROW_GAP: &str = "grid-row-gap";
 993 | 	pub const GRID_ROW_START: &str = "grid-row-start";
 994 | 	pub const GRID_TEMPLATE: &str = "grid-template";
 995 | 	pub const GRID_TEMPLATE_AREAS: &str = "grid-template-areas";
 996 | 	pub const GRID_TEMPLATE_COLUMNS: &str = "grid-template-columns";
 997 | 	pub const GRID_TEMPLATE_ROWS: &str = "grid-template-rows";
 998 | 	pub const HEIGHT: &str = "height";
 999 | 	pub const HYPHENS: &str = "hyphens";
1000 | 	pub const IMAGE_ORIENTATION: &str = "image-orientation";
1001 | 	pub const IMAGE_RENDERING: &str = "image-rendering";
1002 | 	pub const IME_MODE: &str = "ime-mode";
1003 | 	pub const INLINE_SIZE: &str = "inline-size";
1004 | 	pub const JUSTIFY_CONTENT: &str = "justify-content";
1005 | 	pub const JUSTIFY_ITEMS: &str = "justify-items";
1006 | 	pub const JUSTIFY_SELF: &str = "justify-self";
1007 | 	pub const KERNING: &str = "kerning";
1008 | 	pub const LAYOUT_GRID: &str = "layout-grid";
1009 | 	pub const LAYOUT_GRID_CHAR: &str = "layout-grid-char";
1010 | 	pub const LAYOUT_GRID_LINE: &str = "layout-grid-line";
1011 | 	pub const LAYOUT_GRID_MODE: &str = "layout-grid-mode";
1012 | 	pub const LAYOUT_GRID_TYPE: &str = "layout-grid-type";
1013 | 	pub const LEFT: &str = "left";
1014 | 	pub const LENGTH: &str = "length";
1015 | 	pub const LETTER_SPACING: &str = "letter-spacing";
1016 | 	pub const LIGHTING_COLOR: &str = "lighting-color";
1017 | 	pub const LINE_BREAK: &str = "line-break";
1018 | 	pub const LINE_HEIGHT: &str = "line-height";
1019 | 	pub const LIST_STYLE: &str = "list-style";
1020 | 	pub const LIST_STYLE_IMAGE: &str = "list-style-image";
1021 | 	pub const LIST_STYLE_POSITION: &str = "list-style-position";
1022 | 	pub const LIST_STYLE_TYPE: &str = "list-style-type";
1023 | 	pub const MARGIN: &str = "margin";
1024 | 	pub const MARGIN_BLOCK_END: &str = "margin-block-end";
1025 | 	pub const MARGIN_BLOCK_START: &str = "margin-block-start";
1026 | 	pub const MARGIN_BOTTOM: &str = "margin-bottom";
1027 | 	pub const MARGIN_INLINE_END: &str = "margin-inline-end";
1028 | 	pub const MARGIN_INLINE_START: &str = "margin-inline-start";
1029 | 	pub const MARGIN_LEFT: &str = "margin-left";
1030 | 	pub const MARGIN_RIGHT: &str = "margin-right";
1031 | 	pub const MARGIN_TOP: &str = "margin-top";
1032 | 	pub const MARKER: &str = "marker";
1033 | 	pub const MARKER_END: &str = "marker-end";
1034 | 	pub const MARKER_MID: &str = "marker-mid";
1035 | 	pub const MARKER_START: &str = "marker-start";
1036 | 	pub const MASK: &str = "mask";
1037 | 	pub const MASK_COMPOSITE: &str = "mask-composite";
1038 | 	pub const MASK_IMAGE: &str = "mask-image";
1039 | 	pub const MASK_POSITION: &str = "mask-position";
1040 | 	pub const MASK_REPEAT: &str = "mask-repeat";
1041 | 	pub const MASK_SIZE: &str = "mask-size";
1042 | 	pub const MASK_TYPE: &str = "mask-type";
1043 | 	pub const MAX_BLOCK_SIZE: &str = "max-block-size";
1044 | 	pub const MAX_HEIGHT: &str = "max-height";
1045 | 	pub const MAX_INLINE_SIZE: &str = "max-inline-size";
1046 | 	pub const MAX_WIDTH: &str = "max-width";
1047 | 	pub const MIN_BLOCK_SIZE: &str = "min-block-size";
1048 | 	pub const MIN_HEIGHT: &str = "min-height";
1049 | 	pub const MIN_INLINE_SIZE: &str = "min-inline-size";
1050 | 	pub const MIN_WIDTH: &str = "min-width";
1051 | 	pub const MS_CONTENT_ZOOM_CHAINING: &str = "ms-content-zoom-chaining";
1052 | 	pub const MS_CONTENT_ZOOM_LIMIT: &str = "ms-content-zoom-limit";
1053 | 	pub const MS_CONTENT_ZOOM_LIMIT_MAX: &str = "ms-content-zoom-limit-max";
1054 | 	pub const MS_CONTENT_ZOOM_LIMIT_MIN: &str = "ms-content-zoom-limit-min";
1055 | 	pub const MS_CONTENT_ZOOM_SNAP: &str = "ms-content-zoom-snap";
1056 | 	pub const MS_CONTENT_ZOOM_SNAP_POINTS: &str = "ms-content-zoom-snap-points";
1057 | 	pub const MS_CONTENT_ZOOM_SNAP_TYPE: &str = "ms-content-zoom-snap-type";
1058 | 	pub const MS_CONTENT_ZOOMING: &str = "ms-content-zooming";
1059 | 	pub const MS_FLOW_FROM: &str = "ms-flow-from";
1060 | 	pub const MS_FLOW_INTO: &str = "ms-flow-into";
1061 | 	pub const MS_FONT_FEATURE_SETTINGS: &str = "ms-font-feature-settings";
1062 | 	pub const MS_GRID_COLUMN: &str = "ms-grid-column";
1063 | 	pub const MS_GRID_COLUMN_ALIGN: &str = "ms-grid-column-align";
1064 | 	pub const MS_GRID_COLUMN_SPAN: &str = "ms-grid-column-span";
1065 | 	pub const MS_GRID_COLUMNS: &str = "ms-grid-columns";
1066 | 	pub const MS_GRID_ROW: &str = "ms-grid-row";
1067 | 	pub const MS_GRID_ROW_ALIGN: &str = "ms-grid-row-align";
1068 | 	pub const MS_GRID_ROW_SPAN: &str = "ms-grid-row-span";
1069 | 	pub const MS_GRID_ROWS: &str = "ms-grid-rows";
1070 | 	pub const MS_HIGH_CONTRAST_ADJUST: &str = "ms-high-contrast-adjust";
1071 | 	pub const MS_HYPHENATE_LIMIT_CHARS: &str = "ms-hyphenate-limit-chars";
1072 | 	pub const MS_HYPHENATE_LIMIT_LINES: &str = "ms-hyphenate-limit-lines";
1073 | 	pub const MS_HYPHENATE_LIMIT_ZONE: &str = "ms-hyphenate-limit-zone";
1074 | 	pub const MS_HYPHENS: &str = "ms-hyphens";
1075 | 	pub const MS_IME_ALIGN: &str = "ms-ime-align";
1076 | 	pub const MS_OVERFLOW_STYLE: &str = "ms-overflow-style";
1077 | 	pub const MS_SCROLL_CHAINING: &str = "ms-scroll-chaining";
1078 | 	pub const MS_SCROLL_LIMIT: &str = "ms-scroll-limit";
1079 | 	pub const MS_SCROLL_LIMIT_X_MAX: &str = "ms-scroll-limit-x_max";
1080 | 	pub const MS_SCROLL_LIMIT_X_MIN: &str = "ms-scroll-limit-x_min";
1081 | 	pub const MS_SCROLL_LIMIT_Y_MAX: &str = "ms-scroll-limit-y_max";
1082 | 	pub const MS_SCROLL_LIMIT_Y_MIN: &str = "ms-scroll-limit-y_min";
1083 | 	pub const MS_SCROLL_RAILS: &str = "ms-scroll-rails";
1084 | 	pub const MS_SCROLL_SNAP_POINTS_X: &str = "ms-scroll-snap-points-x";
1085 | 	pub const MS_SCROLL_SNAP_POINTS_Y: &str = "ms-scroll-snap-points-y";
1086 | 	pub const MS_SCROLL_SNAP_TYPE: &str = "ms-scroll-snap-type";
1087 | 	pub const MS_SCROLL_SNAP_X: &str = "ms-scroll-snap-x";
1088 | 	pub const MS_SCROLL_SNAP_Y: &str = "ms-scroll-snap-y";
1089 | 	pub const MS_SCROLL_TRANSLATION: &str = "ms-scroll-translation";
1090 | 	pub const MS_TEXT_COMBINE_HORIZONTAL: &str = "ms-text-combine-horizontal";
1091 | 	pub const MS_TEXT_SIZE_ADJUST: &str = "ms-text-size-adjust";
1092 | 	pub const MS_TOUCH_ACTION: &str = "ms-touch-action";
1093 | 	pub const MS_TOUCH_SELECT: &str = "ms-touch-select";
1094 | 	pub const MS_USER_SELECT: &str = "ms-user-select";
1095 | 	pub const MS_WRAP_FLOW: &str = "ms-wrap-flow";
1096 | 	pub const MS_WRAP_MARGIN: &str = "ms-wrap-margin";
1097 | 	pub const MS_WRAP_THROUGH: &str = "ms-wrap-through";
1098 | 	pub const OBJECT_FIT: &str = "object-fit";
1099 | 	pub const OBJECT_POSITION: &str = "object-position";
1100 | 	pub const OPACITY: &str = "opacity";
1101 | 	pub const ORDER: &str = "order";
1102 | 	pub const ORPHANS: &str = "orphans";
1103 | 	pub const OUTLINE: &str = "outline";
1104 | 	pub const OUTLINE_COLOR: &str = "outline-color";
1105 | 	pub const OUTLINE_OFFSET: &str = "outline-offset";
1106 | 	pub const OUTLINE_STYLE: &str = "outline-style";
1107 | 	pub const OUTLINE_WIDTH: &str = "outline-width";
1108 | 	pub const OVERFLOW: &str = "overflow";
1109 | 	pub const OVERFLOW_ANCHOR: &str = "overflow-anchor";
1110 | 	pub const OVERFLOW_WRAP: &str = "overflow-wrap";
1111 | 	pub const OVERFLOW_X: &str = "overflow-x";
1112 | 	pub const OVERFLOW_Y: &str = "overflow-y";
1113 | 	pub const PADDING: &str = "padding";
1114 | 	pub const PADDING_BLOCK_END: &str = "padding-block-end";
1115 | 	pub const PADDING_BLOCK_START: &str = "padding-block-start";
1116 | 	pub const PADDING_BOTTOM: &str = "padding-bottom";
1117 | 	pub const PADDING_INLINE_END: &str = "padding-inline-end";
1118 | 	pub const PADDING_INLINE_START: &str = "padding-inline-start";
1119 | 	pub const PADDING_LEFT: &str = "padding-left";
1120 | 	pub const PADDING_RIGHT: &str = "padding-right";
1121 | 	pub const PADDING_TOP: &str = "padding-top";
1122 | 	pub const PAGE_BREAK_AFTER: &str = "page-break-after";
1123 | 	pub const PAGE_BREAK_BEFORE: &str = "page-break-before";
1124 | 	pub const PAGE_BREAK_INSIDE: &str = "page-break-inside";
1125 | 	pub const PAINT_ORDER: &str = "paint-order";
1126 | 	pub const PARENT_RULE: &str = "parent-rule";
1127 | 	pub const PEN_ACTION: &str = "pen-action";
1128 | 	pub const PERSPECTIVE: &str = "perspective";
1129 | 	pub const PERSPECTIVE_ORIGIN: &str = "perspective-origin";
1130 | 	pub const PLACE_CONTENT: &str = "place-content";
1131 | 	pub const PLACE_ITEMS: &str = "place-items";
1132 | 	pub const PLACE_SELF: &str = "place-self";
1133 | 	pub const POINTER_EVENTS: &str = "pointer-events";
1134 | 	pub const POSITION: &str = "position";
1135 | 	pub const QUOTES: &str = "quotes";
1136 | 	pub const RESIZE: &str = "resize";
1137 | 	pub const RIGHT: &str = "right";
1138 | 	pub const ROTATE: &str = "rotate";
1139 | 	pub const ROW_GAP: &str = "row-gap";
1140 | 	pub const RUBY_ALIGN: &str = "ruby-align";
1141 | 	pub const RUBY_OVERHANG: &str = "ruby-overhang";
1142 | 	pub const RUBY_POSITION: &str = "ruby-position";
1143 | 	pub const SCALE: &str = "scale";
1144 | 	pub const SCROLL_BEHAVIOR: &str = "scroll-behavior";
1145 | 	pub const SHAPE_RENDERING: &str = "shape-rendering";
1146 | 	pub const STOP_COLOR: &str = "stop-color";
1147 | 	pub const STOP_OPACITY: &str = "stop-opacity";
1148 | 	pub const STROKE: &str = "stroke";
1149 | 	pub const STROKE_DASHARRAY: &str = "stroke-dasharray";
1150 | 	pub const STROKE_DASHOFFSET: &str = "stroke-dashoffset";
1151 | 	pub const STROKE_LINECAP: &str = "stroke-linecap";
1152 | 	pub const STROKE_LINEJOIN: &str = "stroke-linejoin";
1153 | 	pub const STROKE_MITERLIMIT: &str = "stroke-miterlimit";
1154 | 	pub const STROKE_OPACITY: &str = "stroke-opacity";
1155 | 	pub const STROKE_WIDTH: &str = "stroke-width";
1156 | 	pub const TAB_SIZE: &str = "tab-size";
1157 | 	pub const TABLE_LAYOUT: &str = "table-layout";
1158 | 	pub const TEXT_ALIGN: &str = "text-align";
1159 | 	pub const TEXT_ALIGN_LAST: &str = "text-align-last";
1160 | 	pub const TEXT_ANCHOR: &str = "text-anchor";
1161 | 	pub const TEXT_COMBINE_UPRIGHT: &str = "text-combine-upright";
1162 | 	pub const TEXT_DECORATION: &str = "text-decoration";
1163 | 	pub const TEXT_DECORATION_COLOR: &str = "text-decoration-color";
1164 | 	pub const TEXT_DECORATION_LINE: &str = "text-decoration-line";
1165 | 	pub const TEXT_DECORATION_STYLE: &str = "text-decoration-style";
1166 | 	pub const TEXT_EMPHASIS: &str = "text-emphasis";
1167 | 	pub const TEXT_EMPHASIS_COLOR: &str = "text-emphasis-color";
1168 | 	pub const TEXT_EMPHASIS_POSITION: &str = "text-emphasis-position";
1169 | 	pub const TEXT_EMPHASIS_STYLE: &str = "text-emphasis-style";
1170 | 	pub const TEXT_INDENT: &str = "text-indent";
1171 | 	pub const TEXT_JUSTIFY: &str = "text-justify";
1172 | 	pub const TEXT_KASHIDA: &str = "text-kashida";
1173 | 	pub const TEXT_KASHIDA_SPACE: &str = "text-kashida-space";
1174 | 	pub const TEXT_ORIENTATION: &str = "text-orientation";
1175 | 	pub const TEXT_OVERFLOW: &str = "text-overflow";
1176 | 	pub const TEXT_RENDERING: &str = "text-rendering";
1177 | 	pub const TEXT_SHADOW: &str = "text-shadow";
1178 | 	pub const TEXT_TRANSFORM: &str = "text-transform";
1179 | 	pub const TEXT_UNDERLINE_POSITION: &str = "text-underline-position";
1180 | 	pub const TOP: &str = "top";
1181 | 	pub const TOUCH_ACTION: &str = "touch-action";
1182 | 	pub const TRANSFORM: &str = "transform";
1183 | 	pub const TRANSFORM_BOX: &str = "transform-box";
1184 | 	pub const TRANSFORM_ORIGIN: &str = "transform-origin";
1185 | 	pub const TRANSFORM_STYLE: &str = "transform-style";
1186 | 	pub const TRANSITION: &str = "transition";
1187 | 	pub const TRANSITION_DELAY: &str = "transition-delay";
1188 | 	pub const TRANSITION_DURATION: &str = "transition-duration";
1189 | 	pub const TRANSITION_PROPERTY: &str = "transition-property";
1190 | 	pub const TRANSITION_TIMING_FUNCTION: &str = "transition-timing-function";
1191 | 	pub const TRANSLATE: &str = "translate";
1192 | 	pub const UNICODE_BIDI: &str = "unicode-bidi";
1193 | 	pub const USER_SELECT: &str = "user-select";
1194 | 	pub const VERTICAL_ALIGN: &str = "vertical-align";
1195 | 	pub const VISIBILITY: &str = "visibility";
1196 | 	pub const WEBKIT_ALIGN_CONTENT: &str = "webkit-align-content";
1197 | 	pub const WEBKIT_ALIGN_ITEMS: &str = "webkit-align-items";
1198 | 	pub const WEBKIT_ALIGN_SELF: &str = "webkit-align-self";
1199 | 	pub const WEBKIT_ANIMATION: &str = "webkit-animation";
1200 | 	pub const WEBKIT_ANIMATION_DELAY: &str = "webkit-animation-delay";
1201 | 	pub const WEBKIT_ANIMATION_DIRECTION: &str = "webkit-animation-direction";
1202 | 	pub const WEBKIT_ANIMATION_DURATION: &str = "webkit-animation-duration";
1203 | 	pub const WEBKIT_ANIMATION_FILL_MODE: &str = "webkit-animation-fill-mode";
1204 | 	pub const WEBKIT_ANIMATION_ITERATION_COUNT: &str = "webkit-animation-iteration-count";
1205 | 	pub const WEBKIT_ANIMATION_NAME: &str = "webkit-animation-name";
1206 | 	pub const WEBKIT_ANIMATION_PLAY_STATE: &str = "webkit-animation-play-state";
1207 | 	pub const WEBKIT_ANIMATION_TIMING_FUNCTION: &str = "webkit-animation-timing-function";
1208 | 	pub const WEBKIT_APPEARANCE: &str = "webkit-appearance";
1209 | 	pub const WEBKIT_BACKFACE_VISIBILITY: &str = "webkit-backface-visibility";
1210 | 	pub const WEBKIT_BACKGROUND_CLIP: &str = "webkit-background-clip";
1211 | 	pub const WEBKIT_BACKGROUND_ORIGIN: &str = "webkit-background-origin";
1212 | 	pub const WEBKIT_BACKGROUND_SIZE: &str = "webkit-background-size";
1213 | 	pub const WEBKIT_BORDER_BOTTOM_LEFT_RADIUS: &str = "webkit-border-bottom-left-radius";
1214 | 	pub const WEBKIT_BORDER_BOTTOM_RIGHT_RADIUS: &str = "webkit-border-bottom-right-radius";
1215 | 	pub const WEBKIT_BORDER_IMAGE: &str = "webkit-border-image";
1216 | 	pub const WEBKIT_BORDER_RADIUS: &str = "webkit-border-radius";
1217 | 	pub const WEBKIT_BORDER_TOP_LEFT_RADIUS: &str = "webkit-border-top-left-radius";
1218 | 	pub const WEBKIT_BORDER_TOP_RIGHT_RADIUS: &str = "webkit-border-top-right-radius";
1219 | 	pub const WEBKIT_BOX_ALIGN: &str = "webkit-box-align";
1220 | 	pub const WEBKIT_BOX_DIRECTION: &str = "webkit-box-direction";
1221 | 	pub const WEBKIT_BOX_FLEX: &str = "webkit-box-flex";
1222 | 	pub const WEBKIT_BOX_ORDINAL_GROUP: &str = "webkit-box-ordinal-group";
1223 | 	pub const WEBKIT_BOX_ORIENT: &str = "webkit-box-orient";
1224 | 	pub const WEBKIT_BOX_PACK: &str = "webkit-box-pack";
1225 | 	pub const WEBKIT_BOX_SHADOW: &str = "webkit-box-shadow";
1226 | 	pub const WEBKIT_BOX_SIZING: &str = "webkit-box-sizing";
1227 | 	pub const WEBKIT_COLUMN_BREAK_AFTER: &str = "webkit-column-break-after";
1228 | 	pub const WEBKIT_COLUMN_BREAK_BEFORE: &str = "webkit-column-break-before";
1229 | 	pub const WEBKIT_COLUMN_BREAK_INSIDE: &str = "webkit-column-break-inside";
1230 | 	pub const WEBKIT_COLUMN_COUNT: &str = "webkit-column-count";
1231 | 	pub const WEBKIT_COLUMN_GAP: &str = "webkit-column-gap";
1232 | 	pub const WEBKIT_COLUMN_RULE: &str = "webkit-column-rule";
1233 | 	pub const WEBKIT_COLUMN_RULE_COLOR: &str = "webkit-column-rule-color";
1234 | 	pub const WEBKIT_COLUMN_RULE_STYLE: &str = "webkit-column-rule-style";
1235 | 	pub const WEBKIT_COLUMN_RULE_WIDTH: &str = "webkit-column-rule-width";
1236 | 	pub const WEBKIT_COLUMN_SPAN: &str = "webkit-column-span";
1237 | 	pub const WEBKIT_COLUMN_WIDTH: &str = "webkit-column-width";
1238 | 	pub const WEBKIT_COLUMNS: &str = "webkit-columns";
1239 | 	pub const WEBKIT_FILTER: &str = "webkit-filter";
1240 | 	pub const WEBKIT_FLEX: &str = "webkit-flex";
1241 | 	pub const WEBKIT_FLEX_BASIS: &str = "webkit-flex-basis";
1242 | 	pub const WEBKIT_FLEX_DIRECTION: &str = "webkit-flex-direction";
1243 | 	pub const WEBKIT_FLEX_FLOW: &str = "webkit-flex-flow";
1244 | 	pub const WEBKIT_FLEX_GROW: &str = "webkit-flex-grow";
1245 | 	pub const WEBKIT_FLEX_SHRINK: &str = "webkit-flex-shrink";
1246 | 	pub const WEBKIT_FLEX_WRAP: &str = "webkit-flex-wrap";
1247 | 	pub const WEBKIT_JUSTIFY_CONTENT: &str = "webkit-justify-content";
1248 | 	pub const WEBKIT_LINE_CLAMP: &str = "webkit-line-clamp";
1249 | 	pub const WEBKIT_MASK: &str = "webkit-mask";
1250 | 	pub const WEBKIT_MASK_BOX_IMAGE: &str = "webkit-mask-box-image";
1251 | 	pub const WEBKIT_MASK_BOX_IMAGE_OUTSET: &str = "webkit-mask-box-image-outset";
1252 | 	pub const WEBKIT_MASK_BOX_IMAGE_REPEAT: &str = "webkit-mask-box-image-repeat";
1253 | 	pub const WEBKIT_MASK_BOX_IMAGE_SLICE: &str = "webkit-mask-box-image-slice";
1254 | 	pub const WEBKIT_MASK_BOX_IMAGE_SOURCE: &str = "webkit-mask-box-image-source";
1255 | 	pub const WEBKIT_MASK_BOX_IMAGE_WIDTH: &str = "webkit-mask-box-image-width";
1256 | 	pub const WEBKIT_MASK_CLIP: &str = "webkit-mask-clip";
1257 | 	pub const WEBKIT_MASK_COMPOSITE: &str = "webkit-mask-composite";
1258 | 	pub const WEBKIT_MASK_IMAGE: &str = "webkit-mask-image";
1259 | 	pub const WEBKIT_MASK_ORIGIN: &str = "webkit-mask-origin";
1260 | 	pub const WEBKIT_MASK_POSITION: &str = "webkit-mask-position";
1261 | 	pub const WEBKIT_MASK_REPEAT: &str = "webkit-mask-repeat";
1262 | 	pub const WEBKIT_MASK_SIZE: &str = "webkit-mask-size";
1263 | 	pub const WEBKIT_ORDER: &str = "webkit-order";
1264 | 	pub const WEBKIT_PERSPECTIVE: &str = "webkit-perspective";
1265 | 	pub const WEBKIT_PERSPECTIVE_ORIGIN: &str = "webkit-perspective-origin";
1266 | 	pub const WEBKIT_TAP_HIGHLIGHT_COLOR: &str = "webkit-tap-highlight-color";
1267 | 	pub const WEBKIT_TEXT_FILL_COLOR: &str = "webkit-text-fill-color";
1268 | 	pub const WEBKIT_TEXT_SIZE_ADJUST: &str = "webkit-text-size-adjust";
1269 | 	pub const WEBKIT_TEXT_STROKE: &str = "webkit-text-stroke";
1270 | 	pub const WEBKIT_TEXT_STROKE_COLOR: &str = "webkit-text-stroke-color";
1271 | 	pub const WEBKIT_TEXT_STROKE_WIDTH: &str = "webkit-text-stroke-width";
1272 | 	pub const WEBKIT_TRANSFORM: &str = "webkit-transform";
1273 | 	pub const WEBKIT_TRANSFORM_ORIGIN: &str = "webkit-transform-origin";
1274 | 	pub const WEBKIT_TRANSFORM_STYLE: &str = "webkit-transform-style";
1275 | 	pub const WEBKIT_TRANSITION: &str = "webkit-transition";
1276 | 	pub const WEBKIT_TRANSITION_DELAY: &str = "webkit-transition-delay";
1277 | 	pub const WEBKIT_TRANSITION_DURATION: &str = "webkit-transition-duration";
1278 | 	pub const WEBKIT_TRANSITION_PROPERTY: &str = "webkit-transition-property";
1279 | 	pub const WEBKIT_TRANSITION_TIMING_FUNCTION: &str = "webkit-transition-timing-function";
1280 | 	pub const WEBKIT_USER_MODIFY: &str = "webkit-user-modify";
1281 | 	pub const WEBKIT_USER_SELECT: &str = "webkit-user-select";
1282 | 	pub const WEBKIT_WRITING_MODE: &str = "webkit-writing-mode";
1283 | 	pub const WHITE_SPACE: &str = "white-space";
1284 | 	pub const WIDOWS: &str = "widows";
1285 | 	pub const WIDTH: &str = "width";
1286 | 	pub const WILL_CHANGE: &str = "will-change";
1287 | 	pub const WORD_BREAK: &str = "word-break";
1288 | 	pub const WORD_SPACING: &str = "word-spacing";
1289 | 	pub const WORD_WRAP: &str = "word-wrap";
1290 | 	pub const WRITING_MODE: &str = "writing-mode";
1291 | 	pub const Z_INDEX: &str = "z-index";
1292 | 	pub const ZOOM: &str = "zoom";
1293 | }
1294 | 


--------------------------------------------------------------------------------
/elements/macro/Cargo.toml:
--------------------------------------------------------------------------------
 1 | [package]
 2 | authors = ["Tangram <root@tangram.dev"]
 3 | description = "Build web applications with Rust."
 4 | documentation = "https://docs.rs/pinwheel"
 5 | edition = "2021"
 6 | homepage = "https://github.com/tangramdotdev/pinwheel"
 7 | license = "MIT"
 8 | name = "pinwheel_elements_macro"
 9 | publish = true
10 | repository = "https://github.com/tangramdotdev/pinwheel"
11 | version = "0.2.0"
12 | 
13 | [lib]
14 | path = "lib.rs"
15 | proc-macro = true
16 | 
17 | [dependencies]
18 | heck = "0.3"
19 | proc-macro2 = "1"
20 | quote = "1"
21 | syn = { version = "1", features = ["full", "extra-traits"] }
22 | 


--------------------------------------------------------------------------------
/elements/macro/element.rs:
--------------------------------------------------------------------------------
  1 | use heck::*;
  2 | use quote::{format_ident, quote};
  3 | 
  4 | pub fn element(input: proc_macro2::TokenStream) -> syn::Result<proc_macro2::TokenStream> {
  5 | 	let element: Element = syn::parse2(input)?;
  6 | 	let code = quote! { #element };
  7 | 	Ok(code)
  8 | }
  9 | 
 10 | struct Element {
 11 | 	attrs: Vec<syn::Attribute>,
 12 | 	namespace: Namespace,
 13 | 	tag: String,
 14 | 	kind: Option<syn::Expr>,
 15 | 	element: Option<syn::Path>,
 16 | 	attributes: Option<Attributes>,
 17 | 	events: Option<Events>,
 18 | }
 19 | 
 20 | enum Namespace {
 21 | 	Html,
 22 | 	Svg,
 23 | 	MathMl,
 24 | }
 25 | 
 26 | struct Attributes(Vec<Attribute>);
 27 | 
 28 | struct Attribute {
 29 | 	attrs: Vec<syn::Attribute>,
 30 | 	name: String,
 31 | 	#[allow(dead_code)]
 32 | 	is_void: bool,
 33 | }
 34 | 
 35 | struct Events(Vec<Event>);
 36 | 
 37 | struct Event {
 38 | 	attrs: Vec<syn::Attribute>,
 39 | 	name: String,
 40 | 	ty: syn::Type,
 41 | }
 42 | 
 43 | impl syn::parse::Parse for Element {
 44 | 	fn parse(input: syn::parse::ParseStream) -> syn::Result<Self> {
 45 | 		let attrs = input.call(syn::Attribute::parse_outer)?;
 46 | 		let mut namespace = None;
 47 | 		let mut tag = None;
 48 | 		let mut kind = None;
 49 | 		let mut element = None;
 50 | 		let mut attributes = None;
 51 | 		let mut events = None;
 52 | 		while !input.is_empty() {
 53 | 			let ident = input.parse::<syn::Ident>()?;
 54 | 			input.parse::<syn::Token![=]>()?;
 55 | 			let ident_string = ident.to_string();
 56 | 			match ident_string.as_str() {
 57 | 				"namespace" => {
 58 | 					namespace = Some(match input.parse::<syn::LitStr>()?.value().as_str() {
 59 | 						"html" => Namespace::Html,
 60 | 						"svg" => Namespace::Svg,
 61 | 						"mathml" => Namespace::MathMl,
 62 | 						_ => return Err(input.error("unexpected namespace")),
 63 | 					});
 64 | 				}
 65 | 				"tag" => {
 66 | 					tag = Some(input.parse::<syn::LitStr>()?.value());
 67 | 				}
 68 | 				"kind" => {
 69 | 					kind = Some(input.parse()?);
 70 | 				}
 71 | 				"element" => {
 72 | 					element = Some(input.parse()?);
 73 | 				}
 74 | 				"attributes" => {
 75 | 					let content;
 76 | 					syn::braced!(content in input);
 77 | 					attributes = Some(content.parse()?);
 78 | 				}
 79 | 				"events" => {
 80 | 					let content;
 81 | 					syn::braced!(content in input);
 82 | 					events = Some(content.parse()?)
 83 | 				}
 84 | 				_ => return Err(input.error("unexpected key")),
 85 | 			}
 86 | 			input.parse::<syn::Token![,]>().ok();
 87 | 		}
 88 | 		Ok(Element {
 89 | 			attrs,
 90 | 			namespace: namespace.unwrap(),
 91 | 			tag: tag.unwrap(),
 92 | 			kind,
 93 | 			element,
 94 | 			attributes,
 95 | 			events,
 96 | 		})
 97 | 	}
 98 | }
 99 | 
100 | impl syn::parse::Parse for Attributes {
101 | 	fn parse(input: syn::parse::ParseStream) -> syn::Result<Self> {
102 | 		let attributes = input.parse_terminated::<_, syn::Token![,]>(Attribute::parse)?;
103 | 		let attributes = attributes.into_iter().collect();
104 | 		Ok(Attributes(attributes))
105 | 	}
106 | }
107 | 
108 | impl syn::parse::Parse for Attribute {
109 | 	fn parse(input: syn::parse::ParseStream) -> syn::Result<Self> {
110 | 		let attrs = input.call(syn::Attribute::parse_outer)?;
111 | 		let name = input.parse::<syn::Ident>()?.to_string();
112 | 		let is_void = input.parse::<syn::Token![?]>().ok().is_some();
113 | 		Ok(Attribute {
114 | 			attrs,
115 | 			name,
116 | 			is_void,
117 | 		})
118 | 	}
119 | }
120 | 
121 | impl syn::parse::Parse for Events {
122 | 	fn parse(input: syn::parse::ParseStream) -> syn::Result<Self> {
123 | 		let events = input.parse_terminated::<_, syn::Token![,]>(Event::parse)?;
124 | 		let events = events.into_iter().collect();
125 | 		Ok(Events(events))
126 | 	}
127 | }
128 | 
129 | impl syn::parse::Parse for Event {
130 | 	fn parse(input: syn::parse::ParseStream) -> syn::Result<Self> {
131 | 		let attrs = input.call(syn::Attribute::parse_outer)?;
132 | 		let name = input.parse::<syn::Ident>()?.to_string();
133 | 		input.parse::<syn::Token![:]>()?;
134 | 		let ty = input.parse()?;
135 | 		Ok(Event { attrs, name, ty })
136 | 	}
137 | }
138 | 
139 | impl quote::ToTokens for Element {
140 | 	fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
141 | 		let doc = &self.attrs;
142 | 		let tag = &self.tag;
143 | 		let namespace = match self.namespace {
144 | 			Namespace::Html => quote! { crate::Namespace::Html },
145 | 			Namespace::Svg => quote! { crate::Namespace::Svg },
146 | 			Namespace::MathMl => quote! { crate::Namespace::MathMl },
147 | 		};
148 | 		let kind = match self.namespace {
149 | 			Namespace::Html => self
150 | 				.kind
151 | 				.as_ref()
152 | 				.map(|kind| quote! { Some(#kind) })
153 | 				.unwrap_or_else(|| quote! { Some(crate::HtmlElementKind::Normal) }),
154 | 			_ => quote! { None },
155 | 		};
156 | 		let fn_ident = format_ident!("{}", tag);
157 | 		let element_ident = format_ident!("{}Element", tag.to_camel_case());
158 | 		let dom_element_ty = self
159 | 			.element
160 | 			.as_ref()
161 | 			.map(|element| quote! { #element })
162 | 			.unwrap_or_else(|| quote! { web_sys::Element });
163 | 		let basic_impl = quote! {
164 | 			impl #element_ident {
165 | 				pub fn new() -> Self {
166 | 					#element_ident(crate::Element::new(#tag, #namespace, #kind))
167 | 				}
168 | 				pub fn future<F>(mut self, f: impl FnOnce(&crate::Element) -> F ) -> Self where F: 'static + std::future::Future<Output = ()> {
169 | 					self.0 = self.0.future(f);
170 | 					self
171 | 				}
172 | 				pub fn attribute<T>(mut self, name: impl Into<std::borrow::Cow<'static, str>>, value: T) -> Self
173 | 				where
174 | 					T: crate::attribute_value::IntoAttributeValue,
175 | 				{
176 | 					self.0 = self.0.attribute(name, value);
177 | 					self
178 | 				}
179 | 				pub fn attribute_signal<T, S>(mut self, name: impl Into<std::borrow::Cow<'static, str>>, value: S) -> Self
180 | 				where
181 | 					T: crate::attribute_value::IntoAttributeValue,
182 | 					S: 'static + Unpin + futures_signals::signal::Signal<Item = T>,
183 | 				{
184 | 					self.0 = self.0.attribute_signal(name, value);
185 | 					self
186 | 				}
187 | 				pub fn class<T>(mut self, value: T) -> Self
188 | 				where
189 | 					T: crate::option_string_value::IntoOptionStringValue,
190 | 				{
191 | 					self.0 = self.0.class(value);
192 | 					self
193 | 				}
194 | 				pub fn class_signal<S, T>(mut self, value: S) -> Self
195 | 				where
196 | 					S: 'static + Unpin + futures_signals::signal::Signal<Item = T>,
197 | 					T: crate::option_string_value::IntoOptionStringValue,
198 | 				{
199 | 					self.0 = self.0.class_signal(value);
200 | 					self
201 | 				}
202 | 				pub fn style<T>(mut self, name: impl Into<std::borrow::Cow<'static, str>>, value: T) -> Self
203 | 				where
204 | 					T: crate::option_string_value::IntoOptionStringValue,
205 | 				{
206 | 					self.0 = self.0.style(name, value);
207 | 					self
208 | 				}
209 | 				pub fn style_signal<S, T>(mut self, name: impl Into<std::borrow::Cow<'static, str>>, value: S) -> Self
210 | 				where
211 | 					S: 'static + Unpin + futures_signals::signal::Signal<Item = T>,
212 | 					T: crate::option_string_value::IntoOptionStringValue,
213 | 				{
214 | 					self.0 = self.0.style_signal(name, value);
215 | 					self
216 | 				}
217 | 				pub fn event(
218 | 					mut self,
219 | 					name: impl Into<std::borrow::Cow<'static, str>>,
220 | 					closure: impl 'static + FnMut(wasm_bindgen::JsValue),
221 | 				) -> Self {
222 | 					self.0 = self.0.event(name, closure);
223 | 					self
224 | 				}
225 | 				pub fn child<T>(mut self, child: T) -> Self
226 | 				where
227 | 					T: Into<crate::Node>,
228 | 				{
229 | 					self.0 = self.0.child(child);
230 | 					self
231 | 				}
232 | 				pub fn children<T, I>(mut self, children: I) -> Self
233 | 				where
234 | 					T: Into<crate::Node>,
235 | 					I: IntoIterator<Item = T>,
236 | 				{
237 | 					for child in children.into_iter() {
238 | 						self.0 = self.0.child(child);
239 | 					}
240 | 					self
241 | 				}
242 | 				pub fn child_signal<T, S>(mut self, signal: S) -> Self
243 | 				where
244 | 					T: Into<crate::Node>,
245 | 					S: 'static + Unpin + futures_signals::signal::Signal<Item = T>,
246 | 				{
247 | 					self.0 = self.0.child_signal(signal);
248 | 					self
249 | 				}
250 | 				pub fn child_signal_vec<T, S>(mut self, signal_vec: S) -> Self
251 | 				where
252 | 					T: Into<crate::Node>,
253 | 					S: 'static + Unpin + futures_signals::signal_vec::SignalVec<Item = T>,
254 | 				{
255 | 					self.0 = self.0.child_signal_vec(signal_vec);
256 | 					self
257 | 				}
258 | 				pub fn inner_html(mut self, value: impl crate::string_value::IntoStringValue) -> Self {
259 | 					self.0 = self.0.inner_html(value);
260 | 					self
261 | 				}
262 | 				#[cfg(target_arch = "wasm32")]
263 | 				pub fn dom_element(&self) -> #dom_element_ty {
264 | 					wasm_bindgen::JsCast::unchecked_into(self.0.dom_element())
265 | 				}
266 | 			}
267 | 		};
268 | 		let global_attributes = match self.namespace {
269 | 			Namespace::Html => html_element_attributes(),
270 | 			_ => Attributes(Vec::new()),
271 | 		};
272 | 		let empty_attributes = Attributes(Vec::new());
273 | 		let attributes = self.attributes.as_ref().unwrap_or(&empty_attributes);
274 | 		let attribute_fns =
275 | 			global_attributes
276 | 				.0
277 | 				.iter()
278 | 				.chain(attributes.0.iter())
279 | 				.map(|attribute| {
280 | 					let attribute_attrs = &attribute.attrs;
281 | 					let attribute_name = attribute.name.to_string();
282 | 					let attribute_ident = format_ident!("{}", attribute_name);
283 | 					let attribute_signal_ident = format_ident!("{}_signal", attribute_name);
284 | 					quote! {
285 | 						#(#attribute_attrs)*
286 | 						pub fn #attribute_ident<T>(mut self, value: T) -> Self
287 | 						where
288 | 							T: crate::attribute_value::IntoAttributeValue,
289 | 						{
290 | 							self.0 = self.0.attribute(#attribute_name, value);
291 | 							self
292 | 						}
293 | 						pub fn #attribute_signal_ident<T, S>(mut self, value: S) -> Self
294 | 						where
295 | 							T: crate::attribute_value::IntoAttributeValue,
296 | 							S: 'static + Unpin + futures_signals::signal::Signal<Item = T>,
297 | 						{
298 | 							self.0 = self.0.attribute_signal(#attribute_name, value);
299 | 							self
300 | 						}
301 | 					}
302 | 				});
303 | 		let attributes_impl = quote! {
304 | 			impl #element_ident {
305 | 				#(#attribute_fns)*
306 | 			}
307 | 		};
308 | 		let global_events = match self.namespace {
309 | 			Namespace::Html => html_element_events(),
310 | 			_ => Events(Vec::new()),
311 | 		};
312 | 		let empty_events = Events(Vec::new());
313 | 		let events = self.events.as_ref().unwrap_or(&empty_events);
314 | 		let event_fns = global_events.0.iter().chain(events.0.iter()).map(|event| {
315 | 			let event_attrs = &event.attrs;
316 | 			let event_name = event.name.to_string();
317 | 			let event_fn_ident = format_ident!("on{}", event_name);
318 | 			let event_ty = &event.ty;
319 | 			quote! {
320 | 				#(#event_attrs)*
321 | 				pub fn #event_fn_ident(
322 | 					mut self,
323 | 					mut closure: impl 'static + FnMut(web_sys::#event_ty),
324 | 				) -> Self {
325 | 					self.0 = self.0.event(
326 | 						#event_name,
327 | 						move |event| closure(wasm_bindgen::JsCast::unchecked_into(event)),
328 | 					);
329 | 					self
330 | 				}
331 | 			}
332 | 		});
333 | 		let events_impl = quote! {
334 | 			impl #element_ident {
335 | 				#(#event_fns)*
336 | 			}
337 | 		};
338 | 		let from_impls = quote! {
339 | 			impl crate::component::Component for #element_ident {
340 | 				fn into_node(self) -> crate::Node {
341 | 					crate::Node::Element(self.0)
342 | 				}
343 | 			}
344 | 		};
345 | 		let code = quote! {
346 | 			#(#doc)*
347 | 			pub fn #fn_ident() -> #element_ident {
348 | 				#element_ident::new()
349 | 			}
350 | 			#(#doc)*
351 | 			pub struct #element_ident(crate::Element);
352 | 			#basic_impl
353 | 			#attributes_impl
354 | 			#events_impl
355 | 			#from_impls
356 | 		};
357 | 		code.to_tokens(tokens);
358 | 	}
359 | }
360 | 
361 | fn html_element_attributes() -> Attributes {
362 | 	syn::parse2(quote!(
363 | 		/// Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.
364 | 		accesskey,
365 | 		/**
366 | 		Controls whether and how text input is automatically capitalized as it is entered/edited by the user. It can have the following values:
367 | 			* off or none, no autocapitalization is applied (all letters default to lowercase)
368 | 			* on or sentences, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase
369 | 			* words, the first letter of each word defaults to a capital letter; all other letters default to lowercase
370 | 			* characters, all letters should default to uppercase
371 | 		*/
372 | 		autocapitalize,
373 | 		/// A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`.
374 | 		// class,
375 | 		/**
376 | 		An enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values:
377 | 		true or the empty string, which indicates that the element must be editable;
378 | 		false, which indicates that the element must not be editable.
379 | 		*/
380 | 		contenteditable,
381 | 		/// The id of a `<menu>` to use as the contextual menu for this element.
382 | 		contextmenu,
383 | 		/**
384 | 		An enumerated attribute indicating the directionality of the element's text. It can have the following values:
385 | 			* ltr, which means left to right and is to be used for languages that are written from the left to the right (like English);
386 | 			* rtl, which means right to left and is to be used for languages that are written from the right to the left (like Arabic);
387 | 			* auto, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then it applies that directionality to the whole element.
388 | 		*/
389 | 		dir,
390 | 		/**
391 | 		An enumerated attribute indicating whether the element can be dragged, using the Drag and Drop API. It can have the following values:
392 | 			* true, which indicates that the element may be dragged
393 | 			* false, which indicates that the element may not be dragged.
394 | 		*/
395 | 		draggable,
396 | 		/// Hints what action label (or icon) to present for the enter key on virtual keyboards.
397 | 		enterkeyhint,
398 | 		/// Used to transitively export shadow parts from a nested shadow tree into a containing light tree.
399 | 		exportparts,
400 | 		/// A Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.
401 | 		hidden?,
402 | 		/// Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
403 | 		id,
404 | 		/// Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on `<input>` elements, but is usable on any element while in contenteditable mode.
405 | 		inputmode,
406 | 		/// Allows you to specify that a standard HTML element should behave like a registered custom built-in element (see Using custom elements for more details).
407 | 		is,
408 | 		/// The unique, global identifier of an item.
409 | 		itemid,
410 | 		/// Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.
411 | 		itemprop,
412 | 		/// Properties that are not descendants of an element with the itemscope attribute can be associated with the item using an itemref. It provides a list of element ids (not itemids) with additional properties elsewhere in the document.
413 | 		itemref,
414 | 		/// itemscope (usually) works along with itemtype to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as schema.org) that describes the item and its properties context.
415 | 		itemscope?,
416 | 		/// Specifies the URL of the vocabulary that will be used to define itemprops (item properties) in the data structure. itemscope is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.
417 | 		itemtype,
418 | 		/// Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. The attribute contains one \u201clanguage tag\u201d (made of hyphen-separated \u201clanguage subtags\u201d) in the format defined in Tags for Identifying Languages (BCP47). xml:lang has priority over it.
419 | 		lang,
420 | 		/// A cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not a given fetch will be allowed to proceed.
421 | 		nonce,
422 | 		/// A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element.
423 | 		part,
424 | 		/// Assigns a slot in a shadow DOM shadow tree to an element: An element with a slot attribute is assigned to the slot created by the `<slot>` element whose name attribute's value matches that slot attribute's value.
425 | 		slot,
426 | 		/**
427 | 		An enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values:
428 | 			* true, which indicates that the element should be, if possible, checked for spelling errors;
429 | 			* false, which indicates that the element should not be checked for spelling errors.
430 | 		*/
431 | 		spellcheck,
432 | 		// /// Contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the `<style>` element have mainly the purpose of allowing for quick styling, for example for testing purposes.
433 | 		// style,
434 | 		/**
435 | 		An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values:
436 | 			* a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
437 | 			* 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
438 | 			* a positive value means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the tabindex. If several elements share the same tabindex, their relative order follows their relative positions in the document.
439 | 		*/
440 | 		tabindex,
441 | 		/// Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.
442 | 		title,
443 | 		/**
444 | 		An enumerated attribute that is used to specify whether an element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values:
445 | 			* empty string and yes, which indicates that the element will be translated.
446 | 			* no, which indicates that the element will not be translated.
447 | 		*/
448 | 		translate,
449 | 	))
450 | 	.unwrap()
451 | }
452 | 
453 | fn html_element_events() -> Events {
454 | 	syn::parse2(quote!(
455 | 		/// Fires on a <dialog> when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the Esc key or clicks a "Close dialog" button which is part of the browser's UI.
456 | 		cancel: Event,
457 | 		/// Fired when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
458 | 		error: Event,
459 | 		/// Fired when the document view or an element has been scrolled.
460 | 		scroll: Event,
461 | 		/// Fired when some text has been selected.
462 | 		select: Event,
463 | 		/// Fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute.
464 | 		show: Event,
465 | 		/// Fired when the user rotates a wheel button on a pointing device (typically a mouse).
466 | 		wheel: Event,
467 | 		/// Fired when the user initiates a copy action through the browser's user interface.
468 | 		copy: Event,
469 | 		/// Fired when the user initiates a cut action through the browser's user interface.
470 | 		cut: Event,
471 | 		/// Fired when the user initiates a paste action through the browser's user interface.
472 | 		paste: Event,
473 | 		/// Fired when a text composition system such as an input method editor completes or cancels the current composition session.
474 | 		compositionend: CompositionEvent,
475 | 		/// Fired when a text composition system such as an input method editor starts a new composition session.
476 | 		compositionstart: CompositionEvent,
477 | 		/// Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an input method editor.
478 | 		compositionupdate: CompositionEvent,
479 | 		/// Fired when an element has lost focus.
480 | 		blur: FocusEvent,
481 | 		/// Fired when an element has gained focus.
482 | 		focus: FocusEvent,
483 | 		/// Fired when an element is about to gain focus.
484 | 		focusin: FocusEvent,
485 | 		/// Fired when an element is about to lose focus.
486 | 		focusout: FocusEvent,
487 | 		/// Sent to an Element when it transitions into or out of full-screen mode.
488 | 		fullscreenchange: Event,
489 | 		/// Sent to an Element if an error occurs while attempting to switch it into or out of full-screen mode.
490 | 		fullscreenerror: Event,
491 | 		/// Fired when a key is pressed.
492 | 		keydown: KeyboardEvent,
493 | 		/// Fired when a key that produces a character value is pressed down.
494 | 		keypress: KeyboardEvent,
495 | 		/// Fired when a key is released.
496 | 		keyup: KeyboardEvent,
497 | 		/// Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.
498 | 		auxclick: MouseEvent,
499 | 		/// Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.
500 | 		click: MouseEvent,
501 | 		/// Fired when the user attempts to open a context menu.
502 | 		contextmenu: MouseEvent,
503 | 		/// Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.
504 | 		dblclick: MouseEvent,
505 | 		/// Occurs when an element is activated, for instance, through a mouse click or a keypress.
506 | 		DOMActivate: MouseEvent,
507 | 		/// Fired when a pointing device button is pressed on an element.
508 | 		mousedown: MouseEvent,
509 | 		/// Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.
510 | 		mouseenter: MouseEvent,
511 | 		/// Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.
512 | 		mouseleave: MouseEvent,
513 | 		/// Fired when a pointing device (usually a mouse) is moved while over an element.
514 | 		mousemove: MouseEvent,
515 | 		/// Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.
516 | 		mouseout: MouseEvent,
517 | 		/// Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.
518 | 		mouseover: MouseEvent,
519 | 		/// Fired when a pointing device button is released on an element.
520 | 		mouseup: MouseEvent,
521 | 		/// Fired each time the amount of pressure changes on the trackpadtouchscreen.
522 | 		webkitmouseforcechanged: MouseEvent,
523 | 		/// Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".
524 | 		webkitmouseforcedown: MouseEvent,
525 | 		/// Fired before the mousedown event.
526 | 		webkitmouseforcewillbegin: MouseEvent,
527 | 		/// Fired after the webkitmouseforcedown event as soon as the pressure has been reduced sufficiently to end the "force click".
528 | 		webkitmouseforceup: MouseEvent,
529 | 		/// Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).
530 | 		touchcancel: TouchEvent,
531 | 		/// Fired when one or more touch points are removed from the touch surface.
532 | 		touchend: TouchEvent,
533 | 		/// Fired when one or more touch points are moved along the touch surface.
534 | 		touchmove: TouchEvent,
535 | 		/// Fired when one or more touch points are placed on the touch surface.
536 | 		touchstart: TouchEvent,
537 | 	))
538 | 	.unwrap()
539 | }
540 | 


--------------------------------------------------------------------------------
/elements/macro/lib.rs:
--------------------------------------------------------------------------------
1 | mod element;
2 | 
3 | #[proc_macro]
4 | pub fn element(input: proc_macro::TokenStream) -> proc_macro::TokenStream {
5 | 	element::element(input.into())
6 | 		.unwrap_or_else(|e| e.to_compile_error())
7 | 		.into()
8 | }
9 | 


--------------------------------------------------------------------------------
/elements/mathml.rs:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/modelfoxdotdev/pinwheel/11907a419c8367993f502d486ba8ddf417cc665e/elements/mathml.rs


--------------------------------------------------------------------------------
/elements/mod.rs:
--------------------------------------------------------------------------------
1 | pub mod html;
2 | pub mod svg;
3 | 


--------------------------------------------------------------------------------
/elements/svg.rs:
--------------------------------------------------------------------------------
 1 | //! https://developer.mozilla.org/en-US/docs/Web/SVG/Element
 2 | 
 3 | use pinwheel_elements_macro::element;
 4 | 
 5 | element!(namespace = "svg", tag = "a");
 6 | element!(namespace = "svg", tag = "altGlyph");
 7 | element!(namespace = "svg", tag = "altGlyphDef");
 8 | element!(namespace = "svg", tag = "altGlyphItem");
 9 | element!(namespace = "svg", tag = "animate");
10 | element!(namespace = "svg", tag = "animateColor");
11 | element!(namespace = "svg", tag = "animateMotion");
12 | element!(namespace = "svg", tag = "animateTransform");
13 | element!(namespace = "svg", tag = "circle");
14 | element!(namespace = "svg", tag = "clipPath");
15 | // element!(namespace = "svg", tag = "color-profile");
16 | element!(namespace = "svg", tag = "cursor");
17 | element!(namespace = "svg", tag = "defs");
18 | element!(namespace = "svg", tag = "desc");
19 | element!(namespace = "svg", tag = "discard");
20 | element!(namespace = "svg", tag = "ellipse");
21 | element!(namespace = "svg", tag = "feBlend");
22 | element!(namespace = "svg", tag = "feColorMatrix");
23 | element!(namespace = "svg", tag = "feComponentTransfer");
24 | element!(namespace = "svg", tag = "feComposite");
25 | element!(namespace = "svg", tag = "feConvolveMatrix");
26 | element!(namespace = "svg", tag = "feDiffuseLighting");
27 | element!(namespace = "svg", tag = "feDisplacementMap");
28 | element!(namespace = "svg", tag = "feDistantLight");
29 | element!(namespace = "svg", tag = "feDropShadow");
30 | element!(namespace = "svg", tag = "feFloodfeFuncA");
31 | element!(namespace = "svg", tag = "feFuncB");
32 | element!(namespace = "svg", tag = "feFuncG");
33 | element!(namespace = "svg", tag = "feFuncRfeGaussianBlur");
34 | element!(namespace = "svg", tag = "feImage");
35 | element!(namespace = "svg", tag = "feMerge");
36 | element!(namespace = "svg", tag = "feMergeNode");
37 | element!(namespace = "svg", tag = "feMorphology");
38 | element!(namespace = "svg", tag = "feOffset");
39 | element!(namespace = "svg", tag = "fePointLight");
40 | element!(namespace = "svg", tag = "feSpecularLighting");
41 | element!(namespace = "svg", tag = "feSpotLight");
42 | element!(namespace = "svg", tag = "feTile");
43 | element!(namespace = "svg", tag = "feTurbulence");
44 | element!(namespace = "svg", tag = "filter");
45 | // element!(namespace = "svg", tag = "font-face-format");
46 | // element!(namespace = "svg", tag = "font-face-name");
47 | // element!(namespace = "svg", tag = "font-face-src");
48 | // element!(namespace = "svg", tag = "font-face-uri");
49 | // element!(namespace = "svg", tag = "font-face");
50 | element!(namespace = "svg", tag = "font");
51 | element!(namespace = "svg", tag = "foreignObject");
52 | element!(namespace = "svg", tag = "g");
53 | element!(namespace = "svg", tag = "glyph");
54 | element!(namespace = "svg", tag = "glyphRef");
55 | element!(namespace = "svg", tag = "hatch");
56 | element!(namespace = "svg", tag = "hatchpath");
57 | element!(namespace = "svg", tag = "hkern");
58 | element!(namespace = "svg", tag = "image");
59 | element!(namespace = "svg", tag = "line");
60 | element!(namespace = "svg", tag = "linearGradient");
61 | element!(namespace = "svg", tag = "marker");
62 | element!(namespace = "svg", tag = "mask");
63 | element!(namespace = "svg", tag = "mesh");
64 | element!(namespace = "svg", tag = "meshgradient");
65 | element!(namespace = "svg", tag = "meshpatch");
66 | element!(namespace = "svg", tag = "meshrow");
67 | element!(namespace = "svg", tag = "metadata");
68 | // element!(namespace = "svg", tag = "missing-glyph");
69 | element!(namespace = "svg", tag = "mpath");
70 | element!(namespace = "svg", tag = "path");
71 | element!(namespace = "svg", tag = "pattern");
72 | element!(namespace = "svg", tag = "polygon");
73 | element!(namespace = "svg", tag = "polyline");
74 | element!(namespace = "svg", tag = "radialGradient");
75 | element!(namespace = "svg", tag = "rect");
76 | element!(namespace = "svg", tag = "script");
77 | element!(namespace = "svg", tag = "set");
78 | element!(namespace = "svg", tag = "solidcolor");
79 | element!(namespace = "svg", tag = "stop");
80 | element!(namespace = "svg", tag = "style");
81 | element!(namespace = "svg", tag = "svg");
82 | element!(namespace = "svg", tag = "switch");
83 | element!(namespace = "svg", tag = "symbol");
84 | element!(namespace = "svg", tag = "textPath");
85 | element!(namespace = "svg", tag = "title");
86 | element!(namespace = "svg", tag = "tref");
87 | element!(namespace = "svg", tag = "tspan");
88 | element!(namespace = "svg", tag = "unknown");
89 | // element!(namespace = "svg", tag = "use");
90 | element!(namespace = "svg", tag = "view");
91 | element!(namespace = "svg", tag = "vkern");
92 | 


--------------------------------------------------------------------------------
/examples/counter/.gitignore:
--------------------------------------------------------------------------------
1 | /dist
2 | 


--------------------------------------------------------------------------------
/examples/counter/Cargo.toml:
--------------------------------------------------------------------------------
 1 | [package]
 2 | edition = "2021"
 3 | name = "pinwheel_counter"
 4 | publish = false
 5 | version = "0.0.0"
 6 | 
 7 | [[bin]]
 8 | name = "counter"
 9 | path = "main.rs"
10 | 
11 | [dependencies]
12 | pinwheel = { path = "../../" }
13 | wasm-bindgen = "=0.2.73"
14 | 
15 | [dependencies.web-sys]
16 | version = "0.3"
17 | features = [
18 |   "Document",
19 |   "Window",
20 | ]
21 | 


--------------------------------------------------------------------------------
/examples/counter/README.md:
--------------------------------------------------------------------------------
1 | # Counter
2 | 
3 | To run this example, install [trunk](https://trunkrs.dev), then run `trunk serve` in this directory and open your browser to http://localhost:8080.
4 | 


--------------------------------------------------------------------------------
/examples/counter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<title>Pinwheel Counter</title>
 6 | 	</head>
 7 | 	<body>
 8 | 	</body>
 9 | </html>
10 | 


--------------------------------------------------------------------------------
/examples/counter/main.rs:
--------------------------------------------------------------------------------
 1 | use pinwheel::prelude::*;
 2 | use web_sys as dom;
 3 | 
 4 | fn main() {
 5 | 	let window = dom::window().unwrap();
 6 | 	let document = window.document().unwrap();
 7 | 	let body = document.body().unwrap();
 8 | 	let counter = Counter::new();
 9 | 	App::new(body.into(), counter).forget();
10 | }
11 | 
12 | struct Counter {
13 | 	count: Mutable<usize>,
14 | }
15 | 
16 | impl Counter {
17 | 	pub fn new() -> Counter {
18 | 		Counter {
19 | 			count: Mutable::new(0),
20 | 		}
21 | 	}
22 | }
23 | 
24 | impl Component for Counter {
25 | 	fn into_node(self) -> Node {
26 | 		let on_click = {
27 | 			let count = self.count.clone();
28 | 			move |_| {
29 | 				count.replace_with(|count| *count + 1);
30 | 			}
31 | 		};
32 | 		let count_text = self
33 | 			.count
34 | 			.signal()
35 | 			.map(|count| p().child(count.to_string()));
36 | 		let increment_button = button().onclick(on_click).child("Increment");
37 | 		div()
38 | 			.child_signal(count_text)
39 | 			.child(increment_button)
40 | 			.into_node()
41 | 	}
42 | }
43 | 


--------------------------------------------------------------------------------
/hydrate.rs:
--------------------------------------------------------------------------------
 1 | use crate::{app::App, component::Component};
 2 | use wasm_bindgen::JsCast;
 3 | use web_sys as dom;
 4 | 
 5 | pub fn hydrate<T>(id: &str)
 6 | where
 7 | 	T: Component + serde::Serialize + serde::de::DeserializeOwned,
 8 | {
 9 | 	let window = dom::window().unwrap();
10 | 	let document = window.document().unwrap();
11 | 	let root = document.get_element_by_id(id).unwrap();
12 | 	let component = root
13 | 		.dyn_ref::<dom::HtmlElement>()
14 | 		.unwrap()
15 | 		.dataset()
16 | 		.get("component")
17 | 		.unwrap();
18 | 	let component: T = serde_json::from_str(&component).unwrap();
19 | 	App::new(root.into(), component.into_node()).forget();
20 | }
21 | 


--------------------------------------------------------------------------------
/lib.rs:
--------------------------------------------------------------------------------
 1 | pub mod app;
 2 | pub mod attribute_value;
 3 | pub mod component;
 4 | pub mod dehydrate;
 5 | pub mod elements;
 6 | pub mod hydrate;
 7 | pub mod option_string_value;
 8 | pub mod string_value;
 9 | 
10 | #[cfg(target_arch = "wasm32")]
11 | mod client;
12 | #[cfg(target_arch = "wasm32")]
13 | pub use crate::client::*;
14 | 
15 | #[cfg(not(target_arch = "wasm32"))]
16 | mod server;
17 | #[cfg(not(target_arch = "wasm32"))]
18 | pub use crate::server::*;
19 | 
20 | pub mod prelude {
21 | 	pub use crate::{
22 | 		app::App,
23 | 		clone,
24 | 		component::Component,
25 | 		dehydrate::Dehydrate,
26 | 		elements::{html, html::*, svg},
27 | 		fragment, html,
28 | 		hydrate::hydrate,
29 | 		text, Element, Fragment, Namespace, Node, SignalNode, SignalVecNode, Text,
30 | 	};
31 | 	pub use futures_signals::{
32 | 		signal::{Mutable, Signal, SignalExt},
33 | 		signal_vec::{MutableVec, SignalVec, SignalVecExt},
34 | 	};
35 | 	pub use pinwheel_macro::{builder, children, new};
36 | }
37 | 
38 | pub use futures_signals::signal;
39 | pub use futures_signals::signal_vec;
40 | 
41 | #[macro_export]
42 | macro_rules! clone {
43 | 	($($name:ident),*$(,)?) => {
44 | 		$(let $name = $name.clone();)*
45 | 	}
46 | }
47 | 
48 | pub fn html<T: component::Component>(component: T) -> String {
49 | 	format!("<!doctype html>{}", component.into_node())
50 | }
51 | 


--------------------------------------------------------------------------------
/macro/Cargo.toml:
--------------------------------------------------------------------------------
 1 | [package]
 2 | authors = ["Tangram <root@tangram.dev"]
 3 | description = "Build web applications with Rust."
 4 | documentation = "https://docs.rs/pinwheel"
 5 | edition = "2021"
 6 | homepage = "https://github.com/tangramdotdev/pinwheel"
 7 | license = "MIT"
 8 | name = "pinwheel_macro"
 9 | publish = true
10 | repository = "https://github.com/tangramdotdev/pinwheel"
11 | version = "0.2.1"
12 | 
13 | [lib]
14 | path = "lib.rs"
15 | proc-macro = true
16 | 
17 | [dependencies]
18 | heck = "0.3"
19 | proc-macro2 = "1"
20 | quote = "1"
21 | syn = { version = "1", features = ["full", "extra-traits"] }
22 | 


--------------------------------------------------------------------------------
/macro/builder.rs:
--------------------------------------------------------------------------------
 1 | use quote::quote;
 2 | 
 3 | pub fn builder(input: proc_macro2::TokenStream) -> syn::Result<proc_macro2::TokenStream> {
 4 | 	let input: syn::DeriveInput = syn::parse2(input)?;
 5 | 	let ident = &input.ident;
 6 | 	let (impl_generics, ty_generics, where_clause) = input.generics.split_for_impl();
 7 | 	let data = match &input.data {
 8 | 		syn::Data::Struct(data) => data,
 9 | 		_ => {
10 | 			return Err(syn::Error::new_spanned(
11 | 				input,
12 | 				"this macro can only be used on a struct",
13 | 			))
14 | 		}
15 | 	};
16 | 	let fns = data
17 | 		.fields
18 | 		.iter()
19 | 		.filter_map(|field| {
20 | 			let field_ident = &field.ident;
21 | 			let field_ty = &field.ty;
22 | 			if field.attrs.iter().any(|attr| attr.path.is_ident("builder")) {
23 | 				Some((field_ident, field_ty))
24 | 			} else {
25 | 				None
26 | 			}
27 | 		})
28 | 		.map(|(field_ident, field_ty)| {
29 | 			quote! {
30 | 				pub fn #field_ident(mut self, #field_ident: impl Into<#field_ty>) -> #ident #ty_generics {
31 | 					self.#field_ident = #field_ident.into();
32 | 					self
33 | 				}
34 | 			}
35 | 		});
36 | 	Ok(quote! {
37 | 		impl #impl_generics #ident #ty_generics #where_clause {
38 | 			#(#fns)*
39 | 		}
40 | 	})
41 | }
42 | 


--------------------------------------------------------------------------------
/macro/children.rs:
--------------------------------------------------------------------------------
 1 | use quote::quote;
 2 | 
 3 | pub fn children(input: proc_macro2::TokenStream) -> syn::Result<proc_macro2::TokenStream> {
 4 | 	let input: syn::DeriveInput = syn::parse2(input)?;
 5 | 	let ident = &input.ident;
 6 | 	let (impl_generics, ty_generics, where_clause) = input.generics.split_for_impl();
 7 | 	match &input.data {
 8 | 		syn::Data::Struct(_) => {}
 9 | 		_ => {
10 | 			return Err(syn::Error::new_spanned(
11 | 				input,
12 | 				"this macro can only be used on a struct",
13 | 			))
14 | 		}
15 | 	};
16 | 	let child_fn = quote! {
17 | 		pub fn child<T>(mut self, child: T) -> Self
18 | 		where
19 | 			T: Into<Node>
20 | 		{
21 | 			let child = child.into();
22 | 			self.children.push(child);
23 | 			self
24 | 		}
25 | 	};
26 | 	let children_fn = quote! {
27 | 		pub fn children<T, I>(mut self, children: I) -> Self
28 | 		where
29 | 			T: Into<Node>, I: IntoIterator<Item = T>
30 | 		{
31 | 			for child in children {
32 | 				let child = child.into();
33 | 				self.children.push(child);
34 | 			}
35 | 			self
36 | 		}
37 | 	};
38 | 	let child_signal_fn = quote! {
39 | 		pub fn child_signal<T, S>(mut self, signal: S) -> Self
40 | 		where
41 | 			T: Into<Node>,
42 | 			S: 'static + Unpin + Signal<Item = T>,
43 | 		{
44 | 			self.children.push(Node::Signal(SignalNode::new(signal)));
45 | 			self
46 | 		}
47 | 	};
48 | 	let child_signal_vec_fn = quote! {
49 | 		pub fn child_signal_vec<T, S>(mut self, signal_vec: S) -> Self
50 | 		where
51 | 			T: Into<Node>,
52 | 			S: 'static + Unpin + SignalVec<Item = T>,
53 | 		{
54 | 			self.children.push(Node::SignalVec(SignalVecNode::new(signal_vec)));
55 | 			self
56 | 		}
57 | 	};
58 | 	Ok(quote! {
59 | 		impl #impl_generics #ident #ty_generics #where_clause {
60 | 			#child_fn
61 | 			#children_fn
62 | 			#child_signal_fn
63 | 			#child_signal_vec_fn
64 | 		}
65 | 	})
66 | }
67 | 


--------------------------------------------------------------------------------
/macro/lib.rs:
--------------------------------------------------------------------------------
 1 | mod builder;
 2 | mod children;
 3 | mod new;
 4 | 
 5 | #[proc_macro_derive(builder, attributes(builder))]
 6 | pub fn builder(input: proc_macro::TokenStream) -> proc_macro::TokenStream {
 7 | 	builder::builder(input.into())
 8 | 		.unwrap_or_else(|e| e.to_compile_error())
 9 | 		.into()
10 | }
11 | 
12 | #[proc_macro_derive(children)]
13 | pub fn children(input: proc_macro::TokenStream) -> proc_macro::TokenStream {
14 | 	children::children(input.into())
15 | 		.unwrap_or_else(|e| e.to_compile_error())
16 | 		.into()
17 | }
18 | 
19 | #[proc_macro_derive(new, attributes(new))]
20 | pub fn new(input: proc_macro::TokenStream) -> proc_macro::TokenStream {
21 | 	new::new(input.into())
22 | 		.unwrap_or_else(|e| e.to_compile_error())
23 | 		.into()
24 | }
25 | 


--------------------------------------------------------------------------------
/macro/new.rs:
--------------------------------------------------------------------------------
  1 | use quote::quote;
  2 | use syn::spanned::Spanned;
  3 | 
  4 | pub fn new(input: proc_macro2::TokenStream) -> syn::Result<proc_macro2::TokenStream> {
  5 | 	let input: syn::DeriveInput = syn::parse2(input)?;
  6 | 	let ident = &input.ident;
  7 | 	let (impl_generics, ty_generics, where_clause) = input.generics.split_for_impl();
  8 | 	let data_struct = match &input.data {
  9 | 		syn::Data::Struct(data) => data,
 10 | 		_ => {
 11 | 			return Err(syn::Error::new(
 12 | 				input.span(),
 13 | 				"this macro can only be used on a struct",
 14 | 			))
 15 | 		}
 16 | 	};
 17 | 	let struct_attrs = attrs(&input)?;
 18 | 	if struct_attrs.default {
 19 | 		return Ok(quote! {
 20 | 			impl #ident {
 21 | 				pub fn new() -> #ident {
 22 | 					#ident::default()
 23 | 				}
 24 | 			}
 25 | 		});
 26 | 	}
 27 | 	let mut args = Vec::new();
 28 | 	let mut arg_fields = Vec::new();
 29 | 	let mut default_fields = Vec::new();
 30 | 	for field in data_struct.fields.iter() {
 31 | 		let field_ident = &field.ident;
 32 | 		let field_ty = &field.ty;
 33 | 		let field_attrs = field_attrs(field)?;
 34 | 		match field_attrs.default {
 35 | 			None => {
 36 | 				args.push(quote! {
 37 | 					#field_ident: impl Into<#field_ty>
 38 | 				});
 39 | 				arg_fields.push(quote! {
 40 | 					#field_ident: #field_ident.into()
 41 | 				});
 42 | 			}
 43 | 			Some(FieldDefault::Default) => {
 44 | 				default_fields.push(quote! {
 45 | 					#field_ident: Default::default()
 46 | 				});
 47 | 			}
 48 | 			Some(FieldDefault::DefaultLit(lit)) => {
 49 | 				default_fields.push(quote! {
 50 | 					#field_ident: #lit
 51 | 				});
 52 | 			}
 53 | 		};
 54 | 	}
 55 | 	Ok(quote! {
 56 | 		impl #impl_generics #ident #ty_generics #where_clause {
 57 | 			pub fn new(#(#args),*) -> #ident #ty_generics {
 58 | 				#ident {
 59 | 					#(#arg_fields,)*
 60 | 					#(#default_fields,)*
 61 | 				}
 62 | 			}
 63 | 		}
 64 | 	})
 65 | }
 66 | 
 67 | struct StructAttrs {
 68 | 	default: bool,
 69 | }
 70 | 
 71 | fn attrs(input: &syn::DeriveInput) -> syn::Result<StructAttrs> {
 72 | 	let attr = input.attrs.iter().find(|attr| attr.path.is_ident("new"));
 73 | 	let attr = if let Some(attr) = attr {
 74 | 		Some(attr.parse_meta()?)
 75 | 	} else {
 76 | 		None
 77 | 	};
 78 | 	let mut default = None;
 79 | 	if let Some(attr) = attr {
 80 | 		let list = match attr {
 81 | 			syn::Meta::List(list) => list,
 82 | 			_ => {
 83 | 				return Err(syn::Error::new(
 84 | 					input.span(),
 85 | 					"expected attribute to be a list",
 86 | 				))
 87 | 			}
 88 | 		};
 89 | 		for item in list.nested.iter() {
 90 | 			match item {
 91 | 				syn::NestedMeta::Meta(syn::Meta::Path(path)) if path.is_ident("default") => {
 92 | 					default = Some(true)
 93 | 				}
 94 | 				_ => {}
 95 | 			};
 96 | 		}
 97 | 	}
 98 | 	let default = default.unwrap_or(false);
 99 | 	Ok(StructAttrs { default })
100 | }
101 | 
102 | struct FieldAttrs {
103 | 	default: Option<FieldDefault>,
104 | }
105 | 
106 | enum FieldDefault {
107 | 	Default,
108 | 	DefaultLit(syn::Lit),
109 | }
110 | 
111 | fn field_attrs(input: &syn::Field) -> syn::Result<FieldAttrs> {
112 | 	let attr = input.attrs.iter().find(|attr| attr.path.is_ident("new"));
113 | 	let attr = if let Some(attr) = attr {
114 | 		Some(attr.parse_meta()?)
115 | 	} else {
116 | 		None
117 | 	};
118 | 	let mut default = None;
119 | 	if let Some(attr) = attr {
120 | 		let list = match attr {
121 | 			syn::Meta::List(list) => list,
122 | 			_ => {
123 | 				return Err(syn::Error::new(
124 | 					input.span(),
125 | 					"expected attribute to be a list",
126 | 				))
127 | 			}
128 | 		};
129 | 		for item in list.nested.iter() {
130 | 			match item {
131 | 				syn::NestedMeta::Meta(syn::Meta::Path(path)) if path.is_ident("default") => {
132 | 					default = Some(FieldDefault::Default);
133 | 				}
134 | 				syn::NestedMeta::Meta(syn::Meta::NameValue(name_value))
135 | 					if name_value.path.is_ident("default") =>
136 | 				{
137 | 					default = Some(FieldDefault::DefaultLit(name_value.lit.clone()));
138 | 				}
139 | 				_ => {}
140 | 			};
141 | 		}
142 | 	}
143 | 	Ok(FieldAttrs { default })
144 | }
145 | 


--------------------------------------------------------------------------------
/option_string_value.rs:
--------------------------------------------------------------------------------
 1 | use std::borrow::Cow;
 2 | 
 3 | #[derive(Clone)]
 4 | pub struct OptionStringValue(pub Option<Cow<'static, str>>);
 5 | 
 6 | pub trait IntoOptionStringValue {
 7 | 	fn into_option_string_value(self) -> OptionStringValue;
 8 | }
 9 | 
10 | impl IntoOptionStringValue for Cow<'static, str> {
11 | 	fn into_option_string_value(self) -> OptionStringValue {
12 | 		OptionStringValue(Some(self))
13 | 	}
14 | }
15 | 
16 | impl IntoOptionStringValue for String {
17 | 	fn into_option_string_value(self) -> OptionStringValue {
18 | 		OptionStringValue(Some(Cow::Owned(self)))
19 | 	}
20 | }
21 | 
22 | impl IntoOptionStringValue for &'static str {
23 | 	fn into_option_string_value(self) -> OptionStringValue {
24 | 		OptionStringValue(Some(Cow::Borrowed(self)))
25 | 	}
26 | }
27 | 
28 | impl IntoOptionStringValue for Option<Cow<'static, str>> {
29 | 	fn into_option_string_value(self) -> OptionStringValue {
30 | 		OptionStringValue(self)
31 | 	}
32 | }
33 | 
34 | impl IntoOptionStringValue for Option<String> {
35 | 	fn into_option_string_value(self) -> OptionStringValue {
36 | 		OptionStringValue(self.map(Cow::Owned))
37 | 	}
38 | }
39 | 
40 | impl IntoOptionStringValue for Option<&'static str> {
41 | 	fn into_option_string_value(self) -> OptionStringValue {
42 | 		OptionStringValue(self.map(Cow::Borrowed))
43 | 	}
44 | }
45 | 


--------------------------------------------------------------------------------
/rustfmt.toml:
--------------------------------------------------------------------------------
1 | hard_tabs = true
2 | use_field_init_shorthand = true
3 | 


--------------------------------------------------------------------------------
/server/element.rs:
--------------------------------------------------------------------------------
  1 | use super::{text::EscapedText, Node};
  2 | use crate::{
  3 | 	attribute_value::{AttributeValue, IntoAttributeValue},
  4 | 	option_string_value::{IntoOptionStringValue, OptionStringValue},
  5 | 	string_value::IntoStringValue,
  6 | };
  7 | use futures::{future::FutureExt, stream::StreamExt};
  8 | use futures_signals::{
  9 | 	signal::{Signal, SignalExt},
 10 | 	signal_vec::{SignalVec, SignalVecExt},
 11 | };
 12 | use std::{borrow::Cow, future::Future};
 13 | use wasm_bindgen::prelude::*;
 14 | use web_sys as dom;
 15 | 
 16 | pub struct Element {
 17 | 	tag: &'static str,
 18 | 	kind: Option<HtmlElementKind>,
 19 | 	attributes: Vec<Attribute>,
 20 | 	classes: Vec<Class>,
 21 | 	styles: Vec<Style>,
 22 | 	children: Vec<Node>,
 23 | 	inner_html: Option<Cow<'static, str>>,
 24 | }
 25 | 
 26 | pub enum Namespace {
 27 | 	Html,
 28 | 	Svg,
 29 | 	MathMl,
 30 | }
 31 | 
 32 | #[derive(PartialEq)]
 33 | pub enum HtmlElementKind {
 34 | 	Void,
 35 | 	Template,
 36 | 	RawText,
 37 | 	EscapableRawText,
 38 | 	Foreign,
 39 | 	Normal,
 40 | }
 41 | 
 42 | pub struct Attribute {
 43 | 	name: Cow<'static, str>,
 44 | 	value: AttributeValue,
 45 | }
 46 | 
 47 | pub struct Class {
 48 | 	value: OptionStringValue,
 49 | }
 50 | 
 51 | pub struct Style {
 52 | 	name: Cow<'static, str>,
 53 | 	value: OptionStringValue,
 54 | }
 55 | 
 56 | impl Element {
 57 | 	pub fn new(tag: &'static str, _namespace: Namespace, kind: Option<HtmlElementKind>) -> Element {
 58 | 		Element {
 59 | 			tag,
 60 | 			kind,
 61 | 			attributes: Vec::new(),
 62 | 			classes: Vec::new(),
 63 | 			styles: Vec::new(),
 64 | 			children: Vec::new(),
 65 | 			inner_html: None,
 66 | 		}
 67 | 	}
 68 | 
 69 | 	pub fn future<F>(self, _f: impl FnOnce(&Element) -> F) -> Element
 70 | 	where
 71 | 		F: 'static + Future<Output = ()>,
 72 | 	{
 73 | 		self
 74 | 	}
 75 | 
 76 | 	pub fn attribute<T>(mut self, name: impl Into<Cow<'static, str>>, value: T) -> Element
 77 | 	where
 78 | 		T: IntoAttributeValue,
 79 | 	{
 80 | 		self.attributes.push(Attribute {
 81 | 			name: name.into(),
 82 | 			value: value.into_attribute_value(),
 83 | 		});
 84 | 		self
 85 | 	}
 86 | 
 87 | 	pub fn attribute_signal<T, S>(mut self, name: impl Into<Cow<'static, str>>, value: S) -> Element
 88 | 	where
 89 | 		T: IntoAttributeValue,
 90 | 		S: 'static + Unpin + Signal<Item = T>,
 91 | 	{
 92 | 		self.attributes.push(Attribute {
 93 | 			name: name.into(),
 94 | 			value: value
 95 | 				.first()
 96 | 				.to_future()
 97 | 				.now_or_never()
 98 | 				.unwrap()
 99 | 				.into_attribute_value(),
100 | 		});
101 | 		self
102 | 	}
103 | 
104 | 	pub fn class<T>(mut self, value: T) -> Element
105 | 	where
106 | 		T: IntoOptionStringValue,
107 | 	{
108 | 		self.classes.push(Class {
109 | 			value: value.into_option_string_value(),
110 | 		});
111 | 		self
112 | 	}
113 | 
114 | 	pub fn class_signal<S, T>(mut self, value: S) -> Element
115 | 	where
116 | 		S: 'static + Unpin + Signal<Item = T>,
117 | 		T: IntoOptionStringValue,
118 | 	{
119 | 		self.classes.push(Class {
120 | 			value: value
121 | 				.first()
122 | 				.to_future()
123 | 				.now_or_never()
124 | 				.unwrap()
125 | 				.into_option_string_value(),
126 | 		});
127 | 		self
128 | 	}
129 | 
130 | 	pub fn style<T>(mut self, name: impl Into<Cow<'static, str>>, value: T) -> Element
131 | 	where
132 | 		T: IntoOptionStringValue,
133 | 	{
134 | 		self.styles.push(Style {
135 | 			name: name.into(),
136 | 			value: value.into_option_string_value(),
137 | 		});
138 | 		self
139 | 	}
140 | 
141 | 	pub fn style_signal<S, T>(mut self, name: impl Into<Cow<'static, str>>, value: S) -> Element
142 | 	where
143 | 		S: 'static + Unpin + Signal<Item = T>,
144 | 		T: IntoOptionStringValue,
145 | 	{
146 | 		self.styles.push(Style {
147 | 			name: name.into(),
148 | 			value: value
149 | 				.first()
150 | 				.to_future()
151 | 				.now_or_never()
152 | 				.unwrap()
153 | 				.into_option_string_value(),
154 | 		});
155 | 		self
156 | 	}
157 | 
158 | 	pub fn event(
159 | 		self,
160 | 		_name: impl Into<Cow<'static, str>>,
161 | 		_closure: impl 'static + FnMut(JsValue),
162 | 	) -> Element {
163 | 		self
164 | 	}
165 | 
166 | 	pub fn child<T>(mut self, child: T) -> Element
167 | 	where
168 | 		T: Into<Node>,
169 | 	{
170 | 		let child = child.into();
171 | 		self.children.push(child);
172 | 		self
173 | 	}
174 | 
175 | 	pub fn children<T, I>(mut self, children: I) -> Element
176 | 	where
177 | 		T: Into<Node>,
178 | 		I: IntoIterator<Item = T>,
179 | 	{
180 | 		for child in children.into_iter() {
181 | 			let child = child.into();
182 | 			self.children.push(child);
183 | 		}
184 | 		self
185 | 	}
186 | 
187 | 	pub fn child_signal<T, S>(mut self, signal: S) -> Element
188 | 	where
189 | 		T: Into<Node>,
190 | 		S: 'static + Unpin + Signal<Item = T>,
191 | 	{
192 | 		let child = signal.first().to_future().now_or_never().unwrap().into();
193 | 		self.children.push(child);
194 | 		self
195 | 	}
196 | 
197 | 	pub fn child_signal_vec<T, S>(mut self, signal_vec: S) -> Element
198 | 	where
199 | 		T: Into<Node>,
200 | 		S: 'static + Unpin + SignalVec<Item = T>,
201 | 	{
202 | 		let mut children = Vec::new();
203 | 
204 | 		signal_vec
205 | 			.map(|child| child.into())
206 | 			.to_stream()
207 | 			.map(|diff| {
208 | 				diff.apply_to_vec(&mut children);
209 | 			})
210 | 			.next()
211 | 			.now_or_never()
212 | 			.unwrap();
213 | 		self.children.append(&mut children);
214 | 		self
215 | 	}
216 | 
217 | 	pub fn inner_html(mut self, value: impl IntoStringValue) -> Element {
218 | 		let html = value.into_string_value();
219 | 		self.inner_html = Some(html.0);
220 | 		self.children.clear();
221 | 		self
222 | 	}
223 | 
224 | 	pub fn dom_element(&self) -> dom::Element {
225 | 		unimplemented!()
226 | 	}
227 | }
228 | 
229 | impl std::fmt::Display for Element {
230 | 	fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
231 | 		write!(f, "<{}", self.tag)?;
232 | 		for attribute in self.attributes.iter() {
233 | 			match &attribute.value {
234 | 				AttributeValue::Bool(value) => {
235 | 					if value.unwrap_or(false) {
236 | 						write!(f, " {}", attribute.name)?;
237 | 					}
238 | 				}
239 | 				AttributeValue::String(value) => {
240 | 					if let Some(value) = value.as_ref() {
241 | 						write!(f, " {}=\"{}\"", attribute.name, EscapedText(value.as_ref()))?;
242 | 					}
243 | 				}
244 | 			}
245 | 		}
246 | 		let has_classes = self.classes.iter().any(|class| class.value.0.is_some());
247 | 		if has_classes {
248 | 			write!(f, " class=\"")?;
249 | 			let mut first = true;
250 | 			for class in self.classes.iter() {
251 | 				if let Some(value) = class.value.0.as_ref() {
252 | 					if first {
253 | 						first = false;
254 | 					} else {
255 | 						write!(f, " ")?;
256 | 					}
257 | 					write!(f, "{}", value)?;
258 | 				}
259 | 			}
260 | 			write!(f, "\"")?;
261 | 		}
262 | 		let has_styles = self.styles.iter().any(|style| style.value.0.is_some());
263 | 		if has_styles {
264 | 			write!(f, " style=\"")?;
265 | 			let mut first = true;
266 | 			for style in self.styles.iter() {
267 | 				if let Some(value) = style.value.0.as_ref() {
268 | 					if first {
269 | 						first = false;
270 | 					} else {
271 | 						write!(f, " ")?;
272 | 					}
273 | 					write!(f, "{}: {};", style.name, value)?;
274 | 				}
275 | 			}
276 | 			write!(f, "\"")?;
277 | 		}
278 | 		if self.kind == Some(HtmlElementKind::Void) {
279 | 			write!(f, " />")?;
280 | 			return Ok(());
281 | 		}
282 | 		write!(f, ">")?;
283 | 		if let Some(inner_html) = &self.inner_html {
284 | 			write!(f, "{}", inner_html)?;
285 | 		} else {
286 | 			for child in self.children.iter() {
287 | 				write!(f, "{}", child)?;
288 | 			}
289 | 		}
290 | 		if self.kind != Some(HtmlElementKind::Void) {
291 | 			write!(f, "</{}>", self.tag)?;
292 | 		}
293 | 		Ok(())
294 | 	}
295 | }
296 | 


--------------------------------------------------------------------------------
/server/fragment.rs:
--------------------------------------------------------------------------------
 1 | use super::Node;
 2 | 
 3 | pub fn fragment() -> Fragment {
 4 | 	Fragment::new()
 5 | }
 6 | 
 7 | pub struct Fragment {
 8 | 	children: Vec<Node>,
 9 | }
10 | 
11 | impl Fragment {
12 | 	pub fn new() -> Fragment {
13 | 		Fragment {
14 | 			children: Vec::new(),
15 | 		}
16 | 	}
17 | 
18 | 	pub fn child<T>(mut self, child: T) -> Fragment
19 | 	where
20 | 		T: Into<Node>,
21 | 	{
22 | 		let child = child.into();
23 | 		self.children.push(child);
24 | 		self
25 | 	}
26 | }
27 | 
28 | impl Default for Fragment {
29 | 	fn default() -> Self {
30 | 		Self::new()
31 | 	}
32 | }
33 | 
34 | impl std::fmt::Display for Fragment {
35 | 	fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
36 | 		for child in self.children.iter() {
37 | 			write!(f, "{}", child)?;
38 | 		}
39 | 		Ok(())
40 | 	}
41 | }
42 | 


--------------------------------------------------------------------------------
/server/mod.rs:
--------------------------------------------------------------------------------
 1 | mod element;
 2 | mod fragment;
 3 | mod node;
 4 | mod signal;
 5 | mod signal_vec;
 6 | mod text;
 7 | 
 8 | pub use self::{
 9 | 	element::{Element, HtmlElementKind, Namespace},
10 | 	fragment::{fragment, Fragment},
11 | 	node::Node,
12 | 	signal::SignalNode,
13 | 	signal_vec::SignalVecNode,
14 | 	text::{text, Text},
15 | };
16 | 


--------------------------------------------------------------------------------
/server/node.rs:
--------------------------------------------------------------------------------
 1 | use super::{Element, Fragment, SignalNode, SignalVecNode, Text};
 2 | use web_sys as dom;
 3 | 
 4 | pub enum Node {
 5 | 	Text(Text),
 6 | 	Element(Element),
 7 | 	Fragment(Fragment),
 8 | 	Signal(SignalNode),
 9 | 	SignalVec(SignalVecNode),
10 | }
11 | 
12 | impl Node {
13 | 	#[allow(dead_code)]
14 | 	pub(crate) fn first_dom_node(&self) -> &dom::Node {
15 | 		unimplemented!()
16 | 	}
17 | 
18 | 	pub(crate) fn insert_before(
19 | 		&mut self,
20 | 		_parent_dom_node: &dom::Node,
21 | 		_reference_dom_node: Option<&dom::Node>,
22 | 	) {
23 | 		unimplemented!()
24 | 	}
25 | 
26 | 	pub(crate) fn remove(&mut self) {
27 | 		unimplemented!()
28 | 	}
29 | }
30 | 
31 | impl std::fmt::Display for Node {
32 | 	fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
33 | 		match self {
34 | 			Node::Text(text) => {
35 | 				write!(f, "{}", text)?;
36 | 			}
37 | 			Node::Element(element) => {
38 | 				write!(f, "{}", element)?;
39 | 			}
40 | 			Node::Fragment(fragment) => {
41 | 				write!(f, "{}", fragment)?;
42 | 			}
43 | 			Node::Signal(signal) => {
44 | 				write!(f, "{}", signal)?;
45 | 			}
46 | 			Node::SignalVec(signal_vec) => {
47 | 				write!(f, "{}", signal_vec)?;
48 | 			}
49 | 		}
50 | 		Ok(())
51 | 	}
52 | }
53 | 


--------------------------------------------------------------------------------
/server/signal.rs:
--------------------------------------------------------------------------------
 1 | use super::node::Node;
 2 | use futures::FutureExt;
 3 | use futures_signals::signal::{Signal, SignalExt};
 4 | 
 5 | pub struct SignalNode {
 6 | 	pub(crate) child: Box<Node>,
 7 | }
 8 | 
 9 | impl SignalNode {
10 | 	pub fn new<T, S>(signal: S) -> SignalNode
11 | 	where
12 | 		T: Into<Node>,
13 | 		S: 'static + Unpin + Signal<Item = T>,
14 | 	{
15 | 		let node = signal.first().to_future().now_or_never().unwrap().into();
16 | 		SignalNode {
17 | 			child: Box::new(node),
18 | 		}
19 | 	}
20 | }
21 | 
22 | impl std::fmt::Display for SignalNode {
23 | 	fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
24 | 		write!(f, "{}", self.child)
25 | 	}
26 | }
27 | 


--------------------------------------------------------------------------------
/server/signal_vec.rs:
--------------------------------------------------------------------------------
 1 | use super::node::Node;
 2 | use futures::{stream::StreamExt, FutureExt};
 3 | use futures_signals::signal_vec::{SignalVec, SignalVecExt};
 4 | 
 5 | pub struct SignalVecNode {
 6 | 	pub(crate) children: Vec<Node>,
 7 | }
 8 | 
 9 | impl SignalVecNode {
10 | 	pub fn new<T, S>(signal_vec: S) -> SignalVecNode
11 | 	where
12 | 		T: Into<Node>,
13 | 		S: 'static + Unpin + SignalVec<Item = T>,
14 | 	{
15 | 		let mut children = Vec::new();
16 | 
17 | 		signal_vec
18 | 			.map(|child| child.into())
19 | 			.to_stream()
20 | 			.map(|diff| {
21 | 				diff.apply_to_vec(&mut children);
22 | 			})
23 | 			.next()
24 | 			.now_or_never()
25 | 			.unwrap();
26 | 		SignalVecNode { children }
27 | 	}
28 | }
29 | 
30 | impl std::fmt::Display for SignalVecNode {
31 | 	fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
32 | 		for child in self.children.iter() {
33 | 			write!(f, "{}", child)?;
34 | 		}
35 | 		Ok(())
36 | 	}
37 | }
38 | 


--------------------------------------------------------------------------------
/server/text.rs:
--------------------------------------------------------------------------------
 1 | use crate::string_value::{IntoStringValue, StringValue};
 2 | use futures::FutureExt;
 3 | use futures_signals::signal::{Signal, SignalExt};
 4 | use std::fmt::Write;
 5 | 
 6 | pub fn text(text: impl IntoStringValue) -> Text {
 7 | 	Text::new(text)
 8 | }
 9 | 
10 | pub struct Text {
11 | 	value: StringValue,
12 | }
13 | 
14 | impl Text {
15 | 	pub fn new(value: impl IntoStringValue) -> Text {
16 | 		Text {
17 | 			value: value.into_string_value(),
18 | 		}
19 | 	}
20 | 
21 | 	pub fn new_signal<T, S>(value: S) -> Text
22 | 	where
23 | 		T: IntoStringValue,
24 | 		S: 'static + Unpin + Signal<Item = T>,
25 | 	{
26 | 		Text {
27 | 			value: value
28 | 				.first()
29 | 				.to_future()
30 | 				.now_or_never()
31 | 				.unwrap()
32 | 				.into_string_value(),
33 | 		}
34 | 	}
35 | }
36 | 
37 | impl std::fmt::Display for Text {
38 | 	fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
39 | 		write!(f, "{}", EscapedText(&self.value.0))
40 | 	}
41 | }
42 | 
43 | pub(crate) struct EscapedText<'a>(pub(crate) &'a str);
44 | 
45 | impl<'a> std::fmt::Display for EscapedText<'a> {
46 | 	fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
47 | 		for c in self.0.chars() {
48 | 			match c {
49 | 				'>' => write!(f, "&gt;")?,
50 | 				'<' => write!(f, "&lt;")?,
51 | 				'"' => write!(f, "&quot;")?,
52 | 				'&' => write!(f, "&amp;")?,
53 | 				'\'' => write!(f, "&apos;")?,
54 | 				c => f.write_char(c)?,
55 | 			}
56 | 		}
57 | 		Ok(())
58 | 	}
59 | }
60 | 


--------------------------------------------------------------------------------
/string_value.rs:
--------------------------------------------------------------------------------
 1 | use std::borrow::Cow;
 2 | 
 3 | pub struct StringValue(pub Cow<'static, str>);
 4 | 
 5 | pub trait IntoStringValue {
 6 | 	fn into_string_value(self) -> StringValue;
 7 | }
 8 | 
 9 | impl IntoStringValue for Cow<'static, str> {
10 | 	fn into_string_value(self) -> StringValue {
11 | 		StringValue(self)
12 | 	}
13 | }
14 | 
15 | impl IntoStringValue for String {
16 | 	fn into_string_value(self) -> StringValue {
17 | 		StringValue(Cow::Owned(self))
18 | 	}
19 | }
20 | 
21 | impl IntoStringValue for &'static str {
22 | 	fn into_string_value(self) -> StringValue {
23 | 		StringValue(Cow::Borrowed(self))
24 | 	}
25 | }
26 | 


--------------------------------------------------------------------------------