@patternplate/client/lib/widgets.js

Universal javascript client application for patternplate

function _sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return _sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }

const vm = require("vm");

const React = require("react");

const ReactDOM = require("react-dom");

const buble = require("buble");

const widgets = require("@patternplate/widgets");

const _require = require("@patternplate/search"),
      createSearch = _require.createSearch;

const _require2 = require("@patternplate/components"),
      styled = _require2.styled,
      ThemeProvider = _require2.ThemeProvider;

require("iframe-resizer");

document.addEventListener("DOMContentLoaded", () => {
  const stateEl = document.querySelector("[data-widget-state]");

  const _JSON$parse = JSON.parse(decodeURIComponent(stateEl.textContent)),
        state = _JSON$parse.state,
        source = _JSON$parse.code;

  const result = render(source, state);
  const mountEl = document.querySelector("[data-widget-mount]");
  ReactDOM.render(result, mountEl);
});

function render(source, state) {
  const _transpile = transpile(source),
        _transpile2 = _slicedToArray(_transpile, 2),
        terr = _transpile2[0],
        code = _transpile2[1];

  if (terr) {
    return React.createElement(ThemeProvider, {
      theme: state.themes.light
    }, React.createElement(WidgetError, {
      message: terr.message,
      snippet: terr.snippet
    }));
  }

  const _execute = execute(code, connect(widgets, state)),
        _execute2 = _slicedToArray(_execute, 2),
        err = _execute2[0],
        result = _execute2[1];

  if (err) {
    return React.createElement(ThemeProvider, {
      theme: state.themes.light
    }, React.createElement(WidgetError, {
      message: err.message,
      snippet: err.snippet
    }));
  }

  return result;
}

function connect(widgets, state) {
  const search = selectSearch(state);
  const get = selectGet(state);
  const src = selectSrc(state);

  const onListClick = e => {
    e.preventDefault();
    const link = getMatch(e.target, "[data-id]");

    if (link) {
      const id = link.getAttribute("data-id");
      const itemType = link.getAttribute("data-type");
      window.parent.postMessage(JSON.stringify({
        type: "navigate",
        id,
        itemType
      }), "*");
    }
  };

  return {
    PatternList: props => {
      return React.createElement(ThemeProvider, {
        theme: state.themes.light
      }, React.createElement(widgets.PatternList, {
        base: state.base,
        search: search,
        query: props.query,
        onClick: onListClick
      }));
    },
    ComponentList: props => {
      return React.createElement(ThemeProvider, {
        theme: state.themes.light
      }, React.createElement(widgets.ComponentList, {
        base: state.base,
        search: search,
        query: props.query,
        onClick: onListClick
      }));
    },
    PatternDemo: props => {
      return React.createElement(ThemeProvider, {
        theme: state.themes.light
      }, React.createElement(widgets.PatternDemo, {
        id: props.id,
        get: get,
        src: src,
        reload: state.isStatic
      }));
    },
    ComponentDemo: props => {
      return React.createElement(ThemeProvider, {
        theme: state.themes.light
      }, React.createElement(widgets.ComponentDemo, {
        id: props.id,
        get: get,
        src: src,
        reload: state.isStatic
      }));
    }
  };
}

function getMatch(el, selector) {
  while (el) {
    if (el.nodeType !== 1) {
      el = el.parentNode;
      continue;
    }

    if (el.matches(selector)) {
      return el;
    }

    el = el.parentNode;
  }

  return null;
}

function selectSearch(state) {
  const search = createSearch(state.pool);
  return query => {
    return search(query).map(id => state.pool.find(p => p.id === id));
  };
}

function selectGet(state) {
  return id => state.pool.filter(p => p.contentType === "pattern").find(pattern => pattern.id === id);
}

function selectSrc(state) {
  const get = selectGet(state);
  return id => {
    const item = get(id);

    if (!item) {
      return null;
    }

    if (item.contentType !== "pattern") {
      return null;
    }

    return `${prefix(state.base)}/api/demo/${item.id}.html`;
  };
}

function transpile(source) {
  try {
    const _buble$transform = buble.transform(source),
          code = _buble$transform.code;

    return [null, code];
  } catch (err) {
    return [err];
  }
}

function execute(code, widgets = {}) {
  try {
    const mod = {
      exports: {}
    };
    vm.runInNewContext(`(function() {${code}})();`, {
      module: mod,

      require(id) {
        if (id === 'react') {
          return React;
        }

        if ('@patternplate/widgets') {
          return widgets;
        }

        throw new Error(`Could not resolve ${id}`);
      }

    });
    const result = mod.exports;

    if (typeof result !== "function") {
      const err = new Error(`widget blocks must export a function, but found "${typeof result}". Make sure to export a function e.g.:`);
      err.snippet = `module.exports = () => <div>Hello World</div>;`;
      throw err;
    }

    return [null, result()];
  } catch (err) {
    return [err];
  }
}

function prefix(base) {
  return base.charAt(base.length - 1) === "/" ? base.slice(0, base.length - 1) : base;
}

function WidgetError(props) {
  return React.createElement(StyledWidgetError, null, React.createElement("div", null, props.message), React.createElement("pre", null, props.snippet));
}

const StyledWidgetError = styled.div.withConfig({
  displayName: "widgets__StyledWidgetError"
})(["background:", ";color:#fff;padding:10px 15px;font-family:monospace;"], props => props.theme.colors.error);
//# sourceMappingURL=widgets.js.map