Merge pull request #7 from WTW-IM/polyfills-documentation

JosephDSchwartz · web-flow · commit 34c89a5d0cd3 · 2020-03-30T14:54:49.000-06:00
Documenting Polyfills &amp; Adding Github Updating to semantic-release
diff --git a/README.md b/README.md
@@ -59,18 +59,44 @@ customElements.define('incrementer', ReactTestComponent);
 
 The key pieces of code are `... extends ReactHTMLElement` and `this.mountPoint`.
 
+> One thing to remember is that you will need to load [the webcomponentsjs polyfills](https://www.webcomponents.org/polyfills) for `ReactHTMLElement` to work in all browsers. The polyfills should be in the `<head>`, and should look something like this:
+>
+> ```html
+> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
+> <script>
+>   if (!window.customElements) {
+>     document.write('<!--');
+>   }
+> </script>
+> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/custom-elements-es5-adapter.js"></script>
+> <!--- We use the closing bracket of this comment to close off the above opening comment, if it gets written -->
+> ```
+>
+> There are many ways to implement these polyfills, and you can explore them in the [webpcomponentsjs README](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#how-to-use).
+
 This will allow us to utilize our Web Component as an element in any HTML:
 
 ```html
 <html>
   <head>
     <title>Incrementer Example</title>
+    <!-- Load the polyfills -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
+    <script>
+      if (!window.customElements) {
+        document.write('<!--');
+      }
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/custom-elements-es5-adapter.js"></script>
+    <!--- We use the closing bracket of this comment to close off the above opening comment, if it gets written -->
+    <!-- load your web component -->
     <script src="./path/to/incrementer.js"></script>
   </head>
   <body>
     <h1>
       Behold: An Incrementer
     </h1>
+    <!-- put your web component in your html -->
     <incrementer></incrementer>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-html-element",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "An HTMLElement extension that provides a simple setup for Web Components using React.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -64,7 +64,6 @@
     "@types/react-dom": "^16.9.5",
     "@typescript-eslint/eslint-plugin": "^2.24.0",
     "@typescript-eslint/parser": "^2.24.0",
-    "babel-loader": "^8.1.0",
     "conventional-changelog-eslint": "^3.0.4",
     "eslint": "^6.5.1",
     "eslint-config-airbnb-typescript": "^7.2.0",
diff --git a/release.config.js b/release.config.js
@@ -4,7 +4,12 @@ module.exports = {
     '@semantic-release/commit-analyzer',
     '@semantic-release/release-notes-generator',
     '@semantic-release/changelog',
-    '@semantic-release/github',
+    [
+      '@semantic-release/github',
+      {
+        message: 'Docs: ${nextRelease.version} [skip ci]\n\n${nextRelease.note}'
+      }
+    ],
     '@semantic-release/npm'
   ],
   preset: 'eslint'
