feat: h expressions for declaring elements

1 files changed, 7 insertions, 8 deletions

diff --git a/examples/clock/style.css b/examples/clock/style.css
index c23e033..07b8cc9 100644
--- a/examples/clock/style.css
+++ b/examples/clock/style.css
@@ -6,7 +6,13 @@
   font-family: sans-serif;
   color: #555;
 
-  --cssx-children: div#digital div#analog;
+  --cssx-children:
+    div#digital
+    h(div#analog, map(), seq(
+      div#seconds.analog-clock-hand,
+      div#minutes.analog-clock-hand,
+      div#hours.analog-clock-hand
+    ));
 }
 
 body * { box-sizing: border-box; }
@@ -44,7 +50,6 @@ body * { box-sizing: border-box; }
 
   --cssx-on-mount: update(--date, call(--get-date));
   --cssx-on-update:
-    update('[data-element=seconds]', --angle, js-eval("360 * new Date().getSeconds() / 60 - 90")),
     update('[data-element=seconds]', --angle, js-eval("360 * new Date().getSeconds() / 60 - 90"))
     update('[data-element=minutes]', --angle, js-eval("360 * new Date().getMinutes() / 60 - 90"))
     update('[data-element=hours]', --angle,
@@ -52,12 +57,6 @@ body * { box-sizing: border-box; }
     )
     delay(1s)
     update(--date, call(--get-date));
-
-  --cssx-children:
-    div#seconds.analog-clock-hand
-    div#minutes.analog-clock-hand
-    div#hours.analog-clock-hand
-  ;
 }
 
 [data-element=seconds].analog-clock-hand {