fix: get-var hack

2 files changed, 44 insertions, 17 deletions

diff --git a/src/eval.ts b/src/eval.ts
index 1a55364..445cb8f 100644
--- a/src/eval.ts
+++ b/src/eval.ts
@@ -53,8 +53,14 @@ export const evalExpr = async (
     _: async _ => undefined,
   })
 
-const getFunctions = (name: string, args: Expr[], actions: EvalActions) =>
-  matchString<Promise<EvalValue>>(name, {
+const getFunctions = (name: string, args: Expr[], actions: EvalActions) => {
+  const getVariable = async () => {
+    const varName = await evalExpr(args[0], actions)
+    const defaultValue = args[1] && (await evalExpr(args[1], actions))
+    return varName && (actions.getVariable(varName) ?? defaultValue)
+  }
+
+  return matchString<Promise<EvalValue>>(name, {
     'add-class': async () => {
       const id = await evalExpr(args[0], actions)
       const classes = await evalExpr(args[1], actions)
@@ -96,11 +102,9 @@ const getFunctions = (name: string, args: Expr[], actions: EvalActions) =>
       }
     },
 
-    var: async () => {
-      const varName = await evalExpr(args[0], actions)
-      const defaultValue = args[1] && (await evalExpr(args[1], actions))
-      return varName && (actions.getVariable(varName) ?? defaultValue)
-    },
+    var: getVariable,
+    'get-var': getVariable,
+
     update: async () => {
       const [id, name, value] =
         args.length >= 3
@@ -153,6 +157,7 @@ const getFunctions = (name: string, args: Expr[], actions: EvalActions) =>
 
     _: () => Promise.reject(new Error('not supposed to be here')),
   })
+}
 
 export const evalArgs = (
   args: Array<Expr>,
diff --git a/src/index.ts b/src/index.ts
index 47e65fe..765f676 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,14 +5,18 @@ import {
   expressionsToDeclrs,
 } from './declarations'
 import { parse } from './parser'
-import { match } from './utils/adt'
+import { match, matchString } from './utils/adt'
+
+const CSSX_ON_UPDATE_EVENT = 'cssx--update'
+const CSSX_ON_MOUNT_EVENT = 'cssx--mount'
 
 const UNSET_PROPERTY_VALUE = '<unset>'
 const EVENT_HANDLERS = {
   click: '--cssx-on-click',
   load: '--cssx-on-load',
-  mount: '--cssx-on-mount',
   submit: '--cssx-on-submit',
+  [CSSX_ON_MOUNT_EVENT]: '--cssx-on-mount',
+  [CSSX_ON_UPDATE_EVENT]: '--cssx-on-update',
 }
 
 const PROPERTIES = [
@@ -32,6 +36,9 @@ export const injectStyles = () => {
 
   $style.textContent = `.cssx-layer {
     ${properties.map(p => `${p}: ${UNSET_PROPERTY_VALUE};`).join(' ')}
+    display: inherit;
+    width: inherit;
+    height: inherit;
   }`
 
   document.body.appendChild($style)
@@ -85,7 +92,13 @@ const getEvalActions = (
     updateVariable: async (targetId, varName, value) => {
       const $el = targetId ? document.getElementById(targetId) : $element
       if ($el) {
+        const prevValue = getPropertyValue($el, varName)
         ;($el as any).style.setProperty(varName, JSON.stringify(value))
+
+        if (JSON.stringify(value) !== prevValue) {
+          const detail = { name: varName, value, prevValue }
+          $el.dispatchEvent(new CustomEvent(CSSX_ON_UPDATE_EVENT, { detail }))
+        }
       }
     },
     setAttribute: async (id, name, value) => {
@@ -141,11 +154,20 @@ export const handleEvents = async (
         }
       }
 
-      if (eventType === 'mount') {
-        if (isNewElement) setTimeout(eventHandler)
-      } else {
-        ;($element as any)[`on${eventType}`] = eventHandler
-      }
+      matchString(eventType, {
+        [CSSX_ON_UPDATE_EVENT]: () => {
+          if (!$element.hasAttribute('data-hooked')) {
+            $element.addEventListener(eventType, eventHandler)
+            $element.setAttribute('data-hooked', 'true')
+          }
+        },
+        [CSSX_ON_MOUNT_EVENT]: () => {
+          if (isNewElement) setTimeout(eventHandler)
+        },
+        _: () => {
+          ;($element as any)[`on${eventType}`] = eventHandler
+        },
+      })
     }
   }
 }
@@ -173,7 +195,7 @@ const declarationToElement = (
   }
 
   for (const [key, value] of declaration.properties) {
-    ;($child as HTMLElement)?.style.setProperty(key, value)
+    ;($child as HTMLElement)?.style.setProperty(key, JSON.stringify(value))
   }
 
   return { node: $child, isNewElement }
@@ -188,6 +210,8 @@ const createLayer = async (
     $parent?.querySelector(`:scope > .${LAYER_CLASS}`) ??
     Object.assign(document.createElement('div'), { className: LAYER_CLASS })
 
+  if (!$childrenRoot.parentNode) $parent.appendChild($childrenRoot)
+
   for (const declaration of declarations) {
     const { node: $child, isNewElement } = declarationToElement(
       declaration,
@@ -196,8 +220,6 @@ const createLayer = async (
     $childrenRoot.appendChild($child)
     await manageElement($child, isNewElement)
   }
-
-  if (!$childrenRoot.parentNode) $parent.appendChild($childrenRoot)
 }
 
 export const manageElement = async (