Created a proper custom element out of rnacentral-sequence-search.

BurkovBA · BurkovBA · commit ecf211626187 · 2019-06-09T19:12:43.000+03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "babel-core": "^6.25.0",
     "babel-jest": "^23.6.0",
     "babel-loader": "^7.1.1",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
     "babel-plugin-transform-es2015-destructuring": "^6.23.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
diff --git a/src/app.jsx b/src/app.jsx
@@ -30,22 +30,45 @@ export const databases = ['mirbase'];
 //   reactRoot
 // );
 
-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);
-    }
+
+class RNAcentralSequenceSearch extends HTMLElement {
+  constructor() {
+    super();
+
+    const mountPoint = document.createElement('div');
+    const shadowRoot = this.attachShadow({mode: 'open'});
+    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);
   }
-});
+}
+
+customElements.define('rnacentral-sequence-search', RNAcentralSequenceSearch);
+
+
+
+// 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});
+// 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">
-    <RNAcentral-sequence-search />
+    <rnacentral-sequence-search />
   </body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -41,7 +41,7 @@ module.exports = function(env) {
           exclude: /node_modules/,
           query: {
             presets: ['es2015', 'react'],
-            plugins: ['transform-es2015-destructuring', 'transform-object-rest-spread']
+            plugins: ['transform-es2015-destructuring', 'transform-object-rest-spread', 'transform-custom-element-classes']
           }
         },
         {

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ module.exports = function(env) {`
`41`	`41`	`exclude: /node_modules/,`
`42`	`42`	`query: {`
`43`	`43`	`presets: ['es2015', 'react'],`
`44`		`- plugins: ['transform-es2015-destructuring', 'transform-object-rest-spread']`
	`44`	`+ plugins: ['transform-es2015-destructuring', 'transform-object-rest-spread', 'transform-custom-element-classes']`
`45`	`45`	`}`
`46`	`46`	`},`
`47`	`47`	`{`