feat: call arbitrary method on node + added :parent selector

2 files changed, 32 insertions, 8 deletions

diff --git a/src/eval.ts b/src/eval.ts
index 445cb8f..aba31df 100644
--- a/src/eval.ts
+++ b/src/eval.ts
@@ -31,6 +31,11 @@ export interface EvalActions {
   }): Promise<void>
   addChildren(id: string, children: Expr[]): Promise<void>
   removeElement(id: string | undefined): Promise<void>
+  callMethod(
+    id: string | undefined,
+    method: string,
+    args: EvalValue[],
+  ): Promise<void>
   // calculate ??
 }
 
@@ -154,6 +159,14 @@ const getFunctions = (name: string, args: Expr[], actions: EvalActions) => {
       actions.removeElement(
         (args[0] && (await evalExpr(args[0], actions))) ?? undefined,
       ),
+    call: async () => {
+      const [id, method, ...methodArgs] = await Promise.all(
+        args.map(a => evalExpr(a, actions)),
+      )
+      if (id && method) {
+        actions.callMethod(id, method, methodArgs)
+      }
+    },
 
     _: () => Promise.reject(new Error('not supposed to be here')),
   })
diff --git a/src/index.ts b/src/index.ts
index 2392c9e..ec22b70 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -52,7 +52,8 @@ export const injectStyles = () => {
 }
 
 export const getPropertyValue = ($element: HTMLElement, prop: string) => {
-  const value = `${getComputedStyle($element).getPropertyValue(prop)}`.trim()
+  let value = `${getComputedStyle($element).getPropertyValue(prop)}`.trim()
+  value = value.replace(/(^['"])|(['"]$)/gi, '')
   return !value || value === UNSET_PROPERTY_VALUE ? '' : value
 }
 
@@ -68,13 +69,19 @@ const getElement = (
   id: string,
   $node: HTMLElement | Document = document,
 ): HTMLElement | null => {
-  // TODO: Please no ternary
-  const [$element, selector] = /^('|")?[a-z0-9_-]+\1$/gi.test(id)
-    ? [document, `[data-element=${id}]`]
-    : /^:scope/i.test(id)
-    ? [$node, id]
-    : [document, id]
-  return $element.querySelector<HTMLElement>(selector)
+  let $element: Node | null = document,
+    selector: string = id
+
+  if (/^('|")?[a-z0-9_-]+\1$/gi.test(id)) {
+    selector = `[data-element=${id}]`
+  } else if (/^:scope/i.test(id)) {
+    $element = $node
+  } else if (/^:parent\s+/i.test(id)) {
+    $element = $node.parentNode
+    selector = id.replace(/^:parent\s+/i, '')
+  }
+
+  return ($element as Element)?.querySelector<HTMLElement>(selector)
 }
 
 const getEvalActions = (
@@ -159,6 +166,10 @@ const getEvalActions = (
       const $el = id ? getElement(id, $element) : $element
       $el?.parentNode?.removeChild($el)
     },
+    callMethod: async (id, method, args) => {
+      const $el = id ? getElement(id, $element) : $element
+      ;($el as any)[method].call($el, args)
+    },
   }
   return actions
 }