feat: h expressions for declaring elements

3 files changed, 44 insertions, 8 deletions

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)
+    }
   }
 }