Packaged component as a web component.

BurkovBA · BurkovBA · commit b7213966273a · 2019-06-08T19:52:33.000+03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "react-redux": "^5.0.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
+    "react-shadow-dom-retarget-events": "^1.0.10",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0"
   },
@@ -72,7 +73,7 @@
     "react-router-config": "^1.0.0-beta.4",
     "redux-devtools-extension": "^2.13.8",
     "sass-loader": "^6.0.6",
-    "style-loader": "^0.18.2",
+    "style-loader": "^0.23.1",
     "url-loader": "^0.5.9",
     "webpack": "^3.12.0",
     "webpack-dev-server": "^2.5.0"
diff --git a/src/app.jsx b/src/app.jsx
@@ -1,17 +1,51 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import retargetEvents from 'react-shadow-dom-retarget-events';
 import {Provider} from 'react-redux';
 
 import SequenceSearch from 'containers/SequenceSearch/index.jsx';
 import configureStore from 'store/configureStore.js';
 
 
+// Prepare data
 export const store = configureStore();
 export const databases = ['mirbase'];
+//
+// // Get the shadow root
+// const shadowHost = document.querySelector('div#sequence-search');
+// const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+//
+// // Create div element for react to render into
+// const reactRoot = document.createElement('div');
+// reactRoot.setAttribute('id', 'react-root');
+//
+// // Append react root to shadow root
+// shadowRoot.appendChild(reactRoot);
+//
+// // Render react
+// ReactDOM.render(
+//   <Provider store={store}>
+//     <SequenceSearch databases={databases}/>
+//   </Provider>,
+//   reactRoot
+// );
 
-ReactDOM.render(
-  <Provider store={store}>
-    <SequenceSearch databases={databases}/>
-  </Provider>,
-  document.querySelector('div#sequence-search')
-);
+const proto = Object.create(HTMLElement.prototype, {
+  attachedCallback: {
+    value: function() {
+      const mountPoint = document.createElement('div');
+      const shadowRoot = this.createShadowRoot();
+      shadowRoot.appendChild(mountPoint);
+      ReactDOM.render([
+        <link key='styles' href="RNAcentral-sequence-search.css" rel="stylesheet" />,
+        <Provider key='provider' store={store}>
+          <SequenceSearch databases={databases}/>
+        </Provider>],
+        mountPoint
+      );
+      retargetEvents(shadowRoot);
+    }
+  }
+});
+
+document.registerElement('RNAcentral-sequence-search', {prototype: proto});
diff --git a/src/index.html b/src/index.html
@@ -34,6 +34,6 @@
     <meta name="msapplication-TileImage" content="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/mstile-144x144.png" />
   </head>
   <body class="level2">
-    <div id="sequence-search"></div>
+    <RNAcentral-sequence-search />
   </body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -18,14 +18,14 @@ module.exports = function(env) {
     output: {
       path: path.join(__dirname, 'dist'),
       publicPath: environment === 'production' ? '/rnacentral-sequence-search-embed/dist/' : '/',
-      filename: 'app.[hash:7].js'
+      filename: 'RNAcentral-sequence-search.js'
     },
     resolve: {
       modules: [path.join(__dirname, 'src'), path.join(__dirname, 'node_modules')]
     },
     plugins: [
       new webpack.HotModuleReplacementPlugin(),
-      new ExtractTextPlugin('app.[hash:7].css'),
+      new ExtractTextPlugin('RNAcentral-sequence-search.css'),
       new HtmlWebpackPlugin({
         inject: "body",
         template: "src/index.html",
