3 files changed, 74 insertions, 9 deletions

diff --git a/src/index.ts b/src/index.ts
index 37693ba..02da27a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,27 @@
 const UNSET_PROPERTY_VALUE = '<unset>';
+const EVENT_HANDLERS = {
+  click: '--cssx-on-click',
+  load: '--cssx-on-load',
+}
+
+const injectStyles = () => {
+  const STYLE_TAG_CLASS = 'cssx-style-root';
+  if (document.querySelector(`.${STYLE_TAG_CLASS}`)) return;
+
+  const $style = document.createElement('style');
+  $style.className = STYLE_TAG_CLASS;
+
+  const properties = [
+    '--cssx-children',
+    ...Object.values(EVENT_HANDLERS),
+  ];
+
+  $style.textContent = `.cssx-layer {
+    ${properties.map(p => `${p}: ${UNSET_PROPERTY_VALUE};`).join(' ')}
+  }`;
+
+  document.body.appendChild($style);
+}
 
 const getPropertyValue = ($element: HTMLElement, prop: string) => {
   const value = `${getComputedStyle($element).getPropertyValue(prop)}`.trim()
@@ -7,27 +30,23 @@ const getPropertyValue = ($element: HTMLElement, prop: string) => {
 
 const getChildrenIds = ($element: HTMLElement) => {
   const value = getPropertyValue($element, '--cssx-children')
-  return value.split(/\s*,\s*/g).filter(Boolean)
+  return value.split(/(\s*,\s*)|\s*/g).filter(Boolean)
 }
 
 const handleEvents = ($element: HTMLElement) => {
-  const eventHandlers = {
-    click: '--cssx-on-click',
-    load: '--cssx-on-load',
-  }
-
-  Object.entries(eventHandlers).forEach(([event, property]) => {
+  Object.entries(EVENT_HANDLERS).forEach(([event, property]) => {
     const handlerExpr = getPropertyValue($element, property);
     if (handlerExpr) {
       // TODO: Parse onclick
-      console.log($element.id, event, handlerExpr);
+      // TODO: attach handler for eval
+      console.log(event, handlerExpr);
     }
   });
 };
 
 let iters = 0;
 const manageElement = ($element: HTMLElement) => {
-  if (iters++ > 100) return; // to prevent infinite rec
+  if (iters++ > 100) return; // NOTE: Temporary. To prevent infinite rec
 
   handleEvents($element);
 
@@ -44,4 +63,13 @@ const manageElement = ($element: HTMLElement) => {
   }
 }
 
+interface Options {
+  root?: HTMLElement;
+}
+const render = ({ root = document.body }: Options = {}) => {
+  injectStyles();
+  manageElement(root);
+}
+
+render();
 
diff --git a/src/parse-expr.ts b/src/parse-expr.ts
new file mode 100644
index 0000000..53de485
--- /dev/null
+++ b/src/parse-expr.ts
@@ -0,0 +1,11 @@
+import { Enum, constructors } from "./utils/adt";
+
+export type Expr = Enum<{
+  Call: { name: string, args: Expr[] }
+  Var: { name: string, defaultValue: Expr }
+  Identifier: string
+  LiteralString: string
+}>;
+
+export const Expr = constructors<Expr>();
+
diff --git a/src/utils/adt.ts b/src/utils/adt.ts
new file mode 100644
index 0000000..c19398b
--- /dev/null
+++ b/src/utils/adt.ts
@@ -0,0 +1,26 @@
+type TagValue<T, N> = T extends Tag<N, infer V> ? V : never
+
+export const match =
+  <R, T extends Tag<string, any>>(pattern: {
+    [key in T['tag'] | '_']?: (v: TagValue<T, key>) => R
+  }) =>
+  (tag: T): R =>
+    ((pattern as any)[tag.tag] || (pattern._ as any))(tag.value)
+
+type Tag<N, V> = { tag: N; value: V }
+export type Enum<T> = { [N in keyof T]: Tag<N, T[N]> }[keyof T]
+
+export const constructors = <T extends Tag<string, any>>(): {
+  [N in T['tag']]: TagValue<T, N> extends null | never
+    ? (value?: null | never) => T
+    : (value: TagValue<T, N>) => T
+} =>
+  new Proxy(
+    {},
+    {
+      get(_, k) {
+        return (value: any) => ({ tag: k, value })
+      },
+    },
+  ) as any
+