usepages-render-blocks/dist/next.js

A renderer of blocks for https://usePages.today

import React from 'react';

const RESERVED = ['break', 'case', 'class', 'catch', 'const', 'continue', 'debugger', 'default', 'delete', 'do', 'else', 'export', 'extends', 'finally', 'for', 'function', 'if', 'import', 'in', 'new', 'return', 'super', 'switch', 'this', 'throw', 'try', 'var', 'void', 'while', 'with', 'yield', '=>', 'abstract', 'boolean', 'byte', 'char', 'double', 'final', 'float', 'goto', 'int', 'long', 'native', 'short', 'synchronized', 'throws', 'transient', 'volatile', 'async', 'await', 'implements', 'package', 'protected', 'static', 'let', 'interface', 'private', 'public', 'Boolean', 'Number', 'RegExp', 'String'].map(w => `\\s+${ w }\\s+|^${ w }$|\\s+${ w }$|^${ w }\\s+`).join('|');

const SYMBOLS = [';', '\\(', '\\)', 'window', '[\\s+|\\w+]=[\\s+|\\w+]'].join('|');

var BLACKLIST = new RegExp(`${ RESERVED }|${ SYMBOLS }`, 'i');

function empty () {};

function toFn(code = '', ...args) {
  return BLACKLIST.test(code) ? empty : new Function(args, `return ${ code };`);
}

function shouldRender(when, props) {
  return toFn(when, 'props')(props);
}

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 raw(props = {}, panelProps = {}) {
  let rawProps = {};

  Object.keys(props).forEach(key => {
    const match = typeof props[key] === 'string' && props[key].match(/^props\.(.+)/);
    rawProps[key] = match && panelProps[match[1]] ? panelProps[match[1]] : props[key];
  });

  return rawProps;
}

function render(blocks, sources, keyPrefix, props = {}) {
  if (blocks && typeof blocks.map === 'function') {
    return blocks.map((instance, i) => {
      // TODO remove once we've fully migrated block instead of type
      const block = instance.block || instance.type;

      try {
        if (instance.when && !shouldRender(instance.when, props)) return null;

        const Block = sources[block] || sources.Unknown;

        const rawProps = raw(instance.props, props);

        return React.createElement(Block, _extends({}, rawProps, { key: `${ keyPrefix }-${ i }`, _block: block }));
      } catch (err) {
        const givenProps = Object.keys(instance.props).map(key => React.createElement(
          'span',
          { key: key },
          '`$',
          key,
          ': $',
          instance.props[key],
          '`'
        ));

        return React.createElement(
          'div',
          { style: style.error },
          React.createElement(
            'div',
            null,
            'We couldn\'t render your block ',
            block,
            '.'
          ),
          React.createElement(
            'div',
            null,
            'You gave it these props:'
          ),
          React.createElement(
            'div',
            null,
            givenProps
          ),
          React.createElement(
            'div',
            null,
            'This is what failed:'
          ),
          React.createElement(
            'div',
            null,
            err.message
          ),
          React.createElement(
            'div',
            null,
            err.stack
          )
        );
      }
    }).filter(block => block);
  } else {
    return React.createElement(
      'div',
      { style: style.error },
      React.createElement(
        'div',
        null,
        'We couldn\'t render your blocks.'
      ),
      React.createElement(
        'div',
        null,
        `Make sure "blocks" use square brackets [] instead of curly braces {} or anything else.`
      )
    );
  }
}

const style = {
  error: {
    backgroundColor: '#ff5959',
    color: 'white',
    fontSize: 12,
    padding: 20
  }
};

export default render;