utils.ts

import * as snabbdom from 'snabbdom'
import attributesModule from 'snabbdom/modules/attributes'
import classModule from 'snabbdom/modules/class'
import eventlistenersModule from 'snabbdom/modules/eventlisteners'
import propsModule from 'snabbdom/modules/props'
import styleModule from 'snabbdom/modules/style'

export const SELF = 'self'

export const patch = snabbdom.init([
  classModule,
  propsModule,
  attributesModule,
  styleModule,
  eventlistenersModule,
])

let _app
export const setApp = (app) => {
  _app = app
}

export const getApp = () => {
  return _app
}

export function flatten(array) {
  return array.reduce(
    (aggr, item) => aggr.concat(Array.isArray(item) ? flatten(item) : item),
    []
  )
}

export function getName(name) {
  return name.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase()
}

export function isEvent(key) {
  return (
    key.length > 2 && key.startsWith('on') && key[2] === key[2].toUpperCase()
  )
}

export function getEvent(key) {
  const eventName = key.toLowerCase().substr(2)

  if (eventName === 'change') {
    return 'input'
  }

  if (eventName === 'doubleclick') {
    return 'dblclick'
  }

  if (eventName === 'update') {
    return 'postpatch'
  }

  return eventName
}

let isHoldingCmdCTRL = false

if (process.env.NODE_ENV === 'development') {
}

const pathDescriptions = document.createElement('div')
pathDescriptions.style.position = 'absolute'
pathDescriptions.style.zIndex = '9999999999999'
pathDescriptions.style.backgroundColor = '#333'
pathDescriptions.style.padding = '0.5rem'
pathDescriptions.style.fontFamily = 'Arial'
pathDescriptions.style.maxWidth = '300px'
pathDescriptions.style.color = '#FAFAFA'
pathDescriptions.style.display = 'none'
document.body.appendChild(pathDescriptions)

export function normalizeAttrs(tag, attrs) {
  const normalizedAttrs = Object.keys(attrs || {}).reduce(
    (aggr, key) => {
      if (key === 'onMount') {
        aggr.hook = aggr.hook || {}
        let unmount
        aggr.hook.insert = (vnode) => {
          unmount = attrs[key](vnode.elm)
        }

        aggr.hook.destroy = () => {
          if (unmount) {
            unmount()
          }
        }

        return aggr
      }

      if (key === 'onEnter') {
        aggr.hook = aggr.hook || {}
        let onLeave
        aggr.hook.insert = (vnode) =>
          requestAnimationFrame(() => {
            onLeave = attrs[key](vnode.elm || vnode)
          })
        aggr.hook.remove = (vnode, done) => {
          if (onLeave) {
            vnode.elm.addEventListener(
              'transitionend',
              function transitionEnd() {
                vnode.elm.removeEventListener('transitionEnd', transitionEnd)
                done()
              }
            )
            onLeave(vnode.elm)
          } else {
            done()
          }
        }
        return aggr
      }

      if (isEvent(key)) {
        aggr.on = aggr.on || {}
        aggr.on[getEvent(key)] = attrs[key]

        return aggr
      }

      if (key === 'key' || key === 'style' || key === 'class') {
        aggr[key] = attrs[key]

        return aggr
      }

      if (
        key === 'value' ||
        key === 'checked' ||
        key === 'selected' ||
        key === 'className'
      ) {
        aggr.props = aggr.props || {}
        aggr.props[key] = attrs[key]

        return aggr
      }

      aggr.attrs = aggr.attrs || {}
      aggr.attrs[key.startsWith('html') ? key.substr(4) : key] = attrs[key]

      return aggr
    },
    {} as any
  )

  /*
  if (tag === SELF) {
    normalizedAttrs.hook = normalizedAttrs.hook || {};

    if (process.env.NODE_ENV === "development") {
      normalizedAttrs.hook.mouseover = event => {
        event.stopPropagation();
        event.currentTarget.__prevDisplay = window
          .getComputedStyle(event.currentTarget)
          .getPropertyValue("display");
        event.currentTarget.style.display = event.currentTarget.__prevDisplay
          ? event.currentTarget.__prevDisplay
          : "block";
        event.currentTarget.style.outline = "solid";
        const boundingRect = event.currentTarget.getBoundingClientRect();

        pathDescriptions.style.display = "block";
        pathDescriptions.style.top = boundingRect.bottom + "px";
        pathDescriptions.style.left = boundingRect.left + "px";
        pathDescriptions.innerHTML = `
          <h3>${event.currentTarget.__overmind.name}</h3>
            <div>${Array.from(
              event.currentTarget.__overmind.tree.pathDependencies
            ).join(", ")}</div>
          `;
      };
      normalizedAttrs.hook.mouseout = event => {
        event.stopPropagation();
        pathDescriptions.style.display = "none";
        event.currentTarget.style.display = event.currentTarget.__prevDisplay;
        event.currentTarget.style.outline = null;
      };
    }
  }
  */

  return normalizedAttrs
}