decca/lib/fix_props.js

Render interfaces using pure functions and virtual DOM, kinda

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/*
 * Fixes props for virtual-dom's consumption
 */

// Taken from: https://github.com/wayfair/tungstenjs/blob/42535b17e4894e866abf5711be2266458bc4d508/src/template/template_to_vdom.js#L118-L140

var transforms = {
  // transformed name
  'class': 'className',
  'for': 'htmlFor',
  'http-equiv': 'httpEquiv',
  // case specificity
  'accesskey': 'accessKey',
  'autocomplete': 'autoComplete',
  'autoplay': 'autoPlay',
  'colspan': 'colSpan',
  'contenteditable': 'contentEditable',
  'contextmenu': 'contextMenu',
  'enctype': 'encType',
  'formnovalidate': 'formNoValidate',
  'hreflang': 'hrefLang',
  'novalidate': 'noValidate',
  'readonly': 'readOnly',
  'rowspan': 'rowSpan',
  'spellcheck ': 'spellCheck',
  'srcdoc': 'srcDoc',
  'srcset': 'srcSet',
  'tabindex': 'tabIndex'
};

function transformProperties(props) {
  var attrs = {};

  for (var attr in props) {
    var transform = transforms[attr] || attr;

    attrs[transform] = props[attr];
  }

  return attrs;
}

module.exports = function fixProps(props) {
  if (props) {
    props = transformProperties(props);

    // See https://github.com/Matt-Esch/virtual-dom/blob/master/docs/vnode.md#propertiesstyle-vs-propertiesattributesstyle
    if (typeof props.style === 'string') {
      props = _extends({}, props, { attributes: _extends({}, props.attributes || {}, { style: props.style }) });
    }

    // onClick => onclick
    Object.keys(props).forEach(function (key) {
      var _extends2;

      var m = key.match(/^on([A-Z][a-z]+)$/);
      if (m) props = _extends({}, props, (_extends2 = {}, _defineProperty(_extends2, key, undefined), _defineProperty(_extends2, key.toLowerCase(), props[key]), _extends2));
    });
  }

  return props;
};