feat: h expressions for declaring elements

5 files changed, 51 insertions, 21 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 {
diff --git a/examples/form/signup.css b/examples/form/signup.css
index 5dfb8f6..ee0c2c1 100644
--- a/examples/form/signup.css
+++ b/examples/form/signup.css
@@ -43,11 +43,6 @@
     input#input-email
     input#input-password
     #actions
-    h(#message[data-attr="wiow"], map(--wow: "wow"),
-      div#wow
-      div#yay
-      h(div#yay, map(--wow: "wow"))
-    )
   ;
 }
 #form.submitted #message::after {
diff --git a/src/declarations.ts b/src/declarations.ts
index a82f42f..5725846 100644
--- a/src/declarations.ts
+++ b/src/declarations.ts
@@ -30,9 +30,40 @@ export const toDeclaration =
       },
       Call: async ({ name, args }) => {
         return matchString(name, {
-          // h: () => {
-          //
-          // },
+          h: async () => {
+            const [sel, map, childreExpr] = args
+
+            // Selector
+            match(sel, {
+              Selector: sel => {
+                selector = sel
+              },
+              _: _ => {},
+            })
+
+            const props = await evalExpr(map, actions)
+            match(props, {
+              Map: props => {
+                for (const [key, value] of Object.entries(props)) {
+                  properties.set(key, value)
+                }
+              },
+              _: _ => {},
+            })
+
+            const childrenExprs = await match<
+              Promise<Array<Declaration | undefined>>,
+              EvalValue
+            >(await evalExpr(childreExpr, actions), {
+              Lazy: async exprs =>
+                Promise.all(exprs.map(toDeclaration(actions))),
+              _: async _ => [],
+            })
+
+            children.push(
+              ...(childrenExprs.filter(Boolean) as Array<Declaration>),
+            )
+          },
           instance: async () => {
             isInstance = true
             const [sel, map] = args
diff --git a/src/eval.ts b/src/eval.ts
index 2dde4c1..9a55828 100644
--- a/src/eval.ts
+++ b/src/eval.ts
@@ -47,7 +47,7 @@ export type EvalValue = Enum<{
   String: string
   Number: number
   Boolean: boolean
-  Lazy: Expr[]
+  Lazy: Array<Expr>
   Void: never
   VarIdentifier: string
   Map: { [key in string]: EvalValue }
@@ -280,7 +280,7 @@ const getFunctions = (
       return EvalValue.Map(Object.fromEntries(values.filter(Boolean) as any))
     },
 
-    func: async () => EvalValue.Lazy(args),
+    seq: async () => EvalValue.Lazy(args),
 
     call: async () => {
       const varId = match<string | undefined, EvalValue>(
diff --git a/src/index.ts b/src/index.ts
index 69d1fea..bc471ee 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -247,10 +247,10 @@ export const handleEvents = async (
   }
 }
 
-const declarationToElement = (
+const declarationToElement = async (
   declaration: Declaration,
   $parent?: HTMLElement,
-): { node: HTMLElement; isNewElement: boolean } => {
+): Promise<{ node: HTMLElement; isNewElement: boolean }> => {
   const { tag, id, selectors } = declaration.selector
   const tagName = tag || 'div'
 
@@ -291,12 +291,17 @@ const createLayer = async (
   if (!$childrenRoot.parentNode) $parent.appendChild($childrenRoot)
 
   for (const declaration of declarations) {
-    const { node: $child, isNewElement } = declarationToElement(
+    const { node: $child, isNewElement } = await declarationToElement(
       declaration,
       $childrenRoot,
     )
     $childrenRoot.appendChild($child)
+    console.log($child.dataset.element, isNewElement, declaration)
     await manageElement($child, isNewElement)
+
+    if (declaration.children.length > 0) {
+      await createLayer(declaration.children, $child)
+    }
   }
 }