1 files changed, 47 insertions, 0 deletions
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..37693ba
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,47 @@
+const UNSET_PROPERTY_VALUE = '<unset>';
+
+const getPropertyValue = ($element: HTMLElement, prop: string) => {
+  const value = `${getComputedStyle($element).getPropertyValue(prop)}`.trim()
+  return !value || value === UNSET_PROPERTY_VALUE ? '' : value;
+};
+
+const getChildrenIds = ($element: HTMLElement) => {
+  const value = getPropertyValue($element, '--cssx-children')
+  return value.split(/\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]) => {
+    const handlerExpr = getPropertyValue($element, property);
+    if (handlerExpr) {
+      // TODO: Parse onclick
+      console.log($element.id, event, handlerExpr);
+    }
+  });
+};
+
+let iters = 0;
+const manageElement = ($element: HTMLElement) => {
+  if (iters++ > 100) return; // to prevent infinite rec
+
+  handleEvents($element);
+
+  const $childrenRoot = Object.assign(document.createElement('div'), {
+    className: 'cssx-layer',
+  });
+  $element.appendChild($childrenRoot);
+
+  const childrenIds = getChildrenIds($element);
+  for (const id of childrenIds) {
+    const $child = Object.assign(document.createElement('div'), { id });
+    $childrenRoot.appendChild($child);
+    manageElement($child);
+  }
+}
+
+