searchkit-manager.html

<link rel="import" href="../polymer/polymer-element.html">
<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
<script src="./bower_components/searchkit/release/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

<dom-module id="searchkit-manager">
  <link rel="import" type="css" href="./bower_components/searchkit/release/theme.css">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <slot name="script-babel"></slot>
  </template>

  <script>
    /**
     * `searchkit-manager`
     * Searchkit Manager
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    const {
        SearchBox,
        Hits,
        HitsStats,
        RefinementListFilter,
        ResetFilters,
        SelectedFilters,
        HierarchicalMenuFilter,
        NumericRefinementListFilter,
        SearchkitComponent,
        SearchkitProvider,
        SearchkitManager,
        NoHits,
        RangeFilter,
        ItemHistogramList,
        TagCloud,
        Layout, LayoutBody, LayoutResults,
        SideBar, TopBar,
        ActionBar, ActionBarRow
    } = window.Searchkit;
    
    class SearchkitManagerElement extends Polymer.Element {
      static get is() { return 'searchkit-manager'; }
      static get properties() {
        return {
          config: {
            type: String,
            value: 'searchkit-manager'
          }
        };
      }

      constructor() {
        super();
        
      }
      connectedCallback() {
        if (super.connectedCallback) {
          super.connectedCallback();
        }
        window.SearckitManagerContainer = this.shadowRoot;
        /* ... */
        let code = this.getBabelScript();
        var output = Babel.transform(code, {presets: ['react', 'es2015'],plugins: ["transform-eval"]}).code;
        eval(output);
        var style = document.createElement('style');
        style.innerHTML = '@import "../bower_components/searchkit/release/theme.css";@import "./bower_components/searchkit/release/theme.css";.sk-layout__top-bar {position: relative;}';
        this.shadowRoot.appendChild(style);
      }

      getBabelScript() {
        let nodes = Polymer.FlattenedNodesObserver.getFlattenedNodes(this.shadowRoot.querySelector('slot'));
        let template =  [].filter.call(nodes, (node) => node.nodeType === Node.ELEMENT_NODE)[0];
        return template.innerHTML;
      }
    }

    window.customElements.define(SearchkitManagerElement.is, SearchkitManagerElement);
  </script>
</dom-module>