react-ampify/dist/index.js

A collection of utility functions for developing AMP page with React.js

'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; };

const React = require('react');

const convertToBindable = function (key) {
  return `[${key}]`;
};

module.exports = {
  /*
  * Inline script element can't be created by using jsx syntax (security concern).
  * This function use dangerouslySetInnerHTML property to generate script element with json data for you.
  * @param json
  *   json data which will be the inner content of script element
  * @return
  *   script element with the given json data
  */
  createJsonScriptElement: function (json) {
    return React.createElement('script', { type: 'application/json', dangerouslySetInnerHTML: { __html: JSON.stringify(json) } });
  },
  /*
  * The syntax of binding attribute of AMP can't be used directly in jsx way.
  * For example: React will complain if you create element like this ... <input [value]='state.value' />.
  * This function help to append binding attributes to React element.
  * @param element
  *   the react element which binding attributes will be attached to
  * @param attrs
  *   the binding attributes
  * @return
  *   the react element with binding attributes
  */
  withBindingAttrs: function (element, attrs) {
    const elementProps = element.props;
    const props = _extends({}, elementProps, Object.keys(attrs).reduce((acc, key) => {
      return _extends({}, acc, {
        [convertToBindable(key)]: attrs[key]
      });
    }, {}));

    return React.cloneElement(element, props, element.props.children);
  }
};