2 files changed, 49 insertions, 0 deletions
diff --git a/src/lib/dom.ts b/src/lib/dom.ts
new file mode 100644
index 0000000..0b6a0ab
--- /dev/null
+++ b/src/lib/dom.ts
@@ -0,0 +1,15 @@
+export function show(elements: Element[]): void {
+  document.body.innerHTML = ''
+  elements.forEach(element => document.body.appendChild(element))
+}
+
+/* Trigger animation in any case.
+ *
+ * Trigger reflow between removing and adding the classname.
+ * See https://css-tricks.com/restart-css-animation/
+ */
+export function triggerAnimation(element: HTMLElement, animation: string) {
+  element.classList.remove(animation)
+  void element.offsetWidth
+  element.classList.add(animation)
+}
diff --git a/src/lib/h.ts b/src/lib/h.ts
new file mode 100644
index 0000000..8b1abf3
--- /dev/null
+++ b/src/lib/h.ts
@@ -0,0 +1,34 @@
+type Child = Element | Text | string | number
+
+export default function h(
+  tagName: string,
+  attrs: object,
+  ...children: Child[]
+): Element {
+  const isSvg = tagName === 'svg' || tagName === 'path'
+
+  let elem = isSvg
+    ? document.createElementNS('http://www.w3.org/2000/svg', tagName)
+    : document.createElement(tagName)
+
+  if (isSvg) {
+    Object.entries(attrs).forEach(([key, value]) => {
+      elem.setAttribute(key, value)
+    })
+  } else {
+    elem = Object.assign(elem, attrs)
+  }
+
+  for (const child of children) {
+    if (typeof child === 'number')
+      elem.append(child.toString())
+    else
+      elem.append(child)
+  }
+
+  return elem
+}
+
+export function classNames(obj: {[key: string]: boolean }): string {
+  return Object.keys(obj).filter(k => obj[k]).join(' ')
+}