Use WebComponents v2 for gl-emoji elementleipert-fix-the-emoji

Replaces deprecated `document.registerElement` (WebComponents v1) which
is only supported by Chrome and Opera without polyfill with
`window.customElements.define` (WebComponents v2) which is supported by
Firefox and Safari as well. Polyfill for other Browsers is provided.

3 files changed, 52 insertions, 46 deletions

diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js
index 56293d5f96f..fc2ea7605f9 100644
--- a/app/assets/javascripts/behaviors/gl_emoji.js
+++ b/app/assets/javascripts/behaviors/gl_emoji.js
@@ -1,51 +1,57 @@
-import installCustomElements from 'document-register-element';
+import '@webcomponents/webcomponentsjs/webcomponents-loader';
 import isEmojiUnicodeSupported from '../emoji/support';
 
-installCustomElements(window);
-
 export default function installGlEmojiElement() {
-  const GlEmojiElementProto = Object.create(HTMLElement.prototype);
-  GlEmojiElementProto.createdCallback = function createdCallback() {
-    const emojiUnicode = this.textContent.trim();
-    const { name, unicodeVersion, fallbackSrc, fallbackSpriteClass } = this.dataset;
+  class GlEmojiElement extends HTMLElement {
+    constructor() {
+      super();
+      const emojiUnicode = this.textContent.trim();
+      const { name, unicodeVersion, fallbackSrc, fallbackSpriteClass } = this.dataset;
+
+      const isEmojiUnicode =
+        this.childNodes &&
+        Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
+
+      if (
+        emojiUnicode &&
+        isEmojiUnicode &&
+        !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
+      ) {
+        const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
 
-    const isEmojiUnicode =
-      this.childNodes &&
-      Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
-    const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
-    const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
+        // CSS sprite fallback takes precedence over image fallback
+        if (hasCssSpriteFalback) {
+          if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
+            const emojiSpriteLinkTag = document.createElement('link');
+            emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
+            emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
+            document.head.appendChild(emojiSpriteLinkTag);
+            gon.emoji_sprites_css_added = true;
+          }
+          // IE 11 doesn't like adding multiple at once :(
+          this.classList.add('emoji-icon');
+          this.classList.add(fallbackSpriteClass);
+        } else {
+          const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
 
-    if (emojiUnicode && isEmojiUnicode && !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)) {
-      // CSS sprite fallback takes precedence over image fallback
-      if (hasCssSpriteFalback) {
-        if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
-          const emojiSpriteLinkTag = document.createElement('link');
-          emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
-          emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
-          document.head.appendChild(emojiSpriteLinkTag);
-          gon.emoji_sprites_css_added = true;
+          import(/* webpackChunkName: 'emoji' */ '../emoji')
+            .then(({ emojiImageTag, emojiFallbackImageSrc }) => {
+              if (hasImageFallback) {
+                this.innerHTML = emojiImageTag(name, fallbackSrc);
+              } else {
+                const src = emojiFallbackImageSrc(name);
+                this.innerHTML = emojiImageTag(name, src);
+              }
+            })
+            .catch(() => {
+              // do nothing
+            });
         }
-        // IE 11 doesn't like adding multiple at once :(
-        this.classList.add('emoji-icon');
-        this.classList.add(fallbackSpriteClass);
-      } else {
-        import(/* webpackChunkName: 'emoji' */ '../emoji')
-          .then(({ emojiImageTag, emojiFallbackImageSrc }) => {
-            if (hasImageFallback) {
-              this.innerHTML = emojiImageTag(name, fallbackSrc);
-            } else {
-              const src = emojiFallbackImageSrc(name);
-              this.innerHTML = emojiImageTag(name, src);
-            }
-          })
-          .catch(() => {
-            // do nothing
-          });
       }
     }
-  };
+  }
 
-  document.registerElement('gl-emoji', {
-    prototype: GlEmojiElementProto,
+  window.WebComponents.waitFor(() => {
+    window.customElements.define('gl-emoji', GlEmojiElement);
   });
 }
diff --git a/package.json b/package.json
index 086617dc265..4c078f41ade 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@babel/preset-env": "^7.1.0",
     "@gitlab-org/gitlab-svgs": "^1.33.0",
     "@gitlab-org/gitlab-ui": "^1.8.0",
+    "@webcomponents/webcomponentsjs": "^2.1.3",
     "autosize": "^4.0.0",
     "axios": "^0.17.1",
     "babel-loader": "^8.0.4",
@@ -52,7 +53,6 @@
     "dateformat": "^3.0.3",
     "deckar01-task_list": "^2.0.0",
     "diff": "^3.4.0",
-    "document-register-element": "1.3.0",
     "dropzone": "^4.2.0",
     "emoji-unicode-version": "^0.2.1",
     "exports-loader": "^0.7.0",
diff --git a/yarn.lock b/yarn.lock
index 5da401c1d43..fba8660f094 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -849,6 +849,11 @@
     "@webassemblyjs/wast-parser" "1.7.6"
     "@xtuc/long" "4.2.1"
 
+"@webcomponents/webcomponentsjs@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.1.3.tgz#f7430c6efe52ab06f69d219fddd32afd2758f683"
+  integrity sha512-0UHJNY88lR3pnEYtBVT7F8cuuxOiITQGWJa0LxoELqkBSB7IabzJFOj5K99PajD3CGAsWpjB0CAeijfe376Y1w==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -2772,11 +2777,6 @@ doctrine@^2.1.0:
   dependencies:
     esutils "^2.0.2"
 
-document-register-element@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/document-register-element/-/document-register-element-1.3.0.tgz#fb3babb523c74662be47be19c6bc33e71990d940"
-  integrity sha1-+zurtSPHRmK+R74Zxrwz5xmQ2UA=
-
 dom-serialize@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"