CLDC-1084: IE11 output tag support [SEPARATED] (#433)

* CLDC-1084: IE11 output tag support

* CLDC-1084: stop resolving turbo

app/frontend/vendor/outerHTML.js

@@ -0,0 +1,75 @@
+/*
+ * outerHTML.js
+ *   Cross-browser full HTMLElement.outerHTML implementation.
+ *
+ * 2011-11-14
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public Domain.
+ * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+ */
+
+if (typeof document !== "undefined" && !("outerHTML" in document.createElementNS("http://www.w3.org/1999/xhtml", "_"))) {
+
+(function(view) {
+"use strict";
+
+var
+	  container = document.createElementNS("http://www.w3.org/1999/xhtml", "_")
+	, elem_proto = (view.HTMLElement || view.Element).prototype
+	, xml_serializer = new XMLSerializer
+	, outerHTML_getter = function() {
+		var
+			  node = this
+			, html
+		;
+		if (document.xmlVersion) {
+			return xml_serializer.serializeToString(node);
+		} else {
+			container.appendChild(node.cloneNode(false));
+			html = container.innerHTML.replace("><", ">" + node.innerHTML + "<");
+			container.innerHTML = "";
+			return html;
+		}
+	}
+	, outerHTML_setter = function(html) {
+		var
+			  node = this
+			, parent = node.parentNode
+			, child
+		;
+		if (parent === null) {
+			DOMException.code = DOMException.NOT_FOUND_ERR;
+			throw DOMException;
+		}
+		container.innerHTML = html;
+		while ((child = container.firstChild)) {
+			parent.insertBefore(child, node);
+		}
+		parent.removeChild(node);
+	}
+;
+
+if (Object.defineProperty) {
+	var outerHTML_prop_desc = {
+		  get: outerHTML_getter
+		, set: outerHTML_setter
+		, enumerable: true
+		, configurable: true
+	};
+	try {
+		Object.defineProperty(elem_proto, "outerHTML", outerHTML_prop_desc);
+	} catch (ex) { // IE 8 doesn't support enumerable:true
+		if (ex.number === -0x7FF5EC54) {
+			outerHTML_prop_desc.enumerable = false;
+			Object.defineProperty(elem_proto, "outerHTML", outerHTML_prop_desc);
+		}
+	}
+} else if (Object.prototype.__defineGetter__ && Object.prototype.__defineSetter__) {
+	elem_proto.__defineGetter__("outerHTML", outerHTML_getter);
+	elem_proto.__defineSetter__("outerHTML", outerHTML_setter);
+}
+
+}(self));
+
+} 

app/frontend/vendor/polyfill-output-value.js

@@ -0,0 +1,14 @@
+if (window.HTMLOutputElement === undefined) {
+    Object.defineProperty(HTMLUnknownElement.prototype, 'value', {
+      get: function () {
+        if (this.tagName === 'OUTPUT') {
+          return this.textContent;
+        }
+      },
+      set: function (newValue) {
+        if (this.tagName === 'OUTPUT') {
+          this.textContent = newValue;
+        }
+      }
+    });
+  }

app/views/layouts/application.html.erb

@@ -14,6 +14,13 @@
     <%= favicon_link_tag asset_path('images/govuk-apple-touch-icon-167x167.png'), rel: 'apple-touch-icon', type: 'image/png', size: '167x167' %>
     <%= favicon_link_tag asset_path('images/govuk-apple-touch-icon-180x180.png'), rel: 'apple-touch-icon', type: 'image/png', size: '180x180' %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= javascript_include_tag "vendor/html5shiv.min.js" %>
+    <%= javascript_tag do -%>
+      window.html5.elements = 'output';
+      html5.shivDocument(document);
+    <% end -%>
+    <%= javascript_include_tag "vendor/polyfill-output-value.js" %>
+    <%= javascript_include_tag "vendor/outerHTML.js" %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
 
     <% if content_for?(:head) %>

babel.config.js

@@ -25,7 +25,7 @@ module.exports = function(api) {
         {
           forceAllTransforms: true,
           useBuiltIns: 'entry',
-          corejs: 3,
+          corejs: '3.21.1',
           modules: false,
           exclude: ['transform-typeof-symbol']
         }

package.json

@@ -25,6 +25,7 @@
     "custom-event-polyfill": "^1.0.7",
     "file-loader": "^6.2.0",
     "govuk-frontend": "^4.0.1",
+    "html5shiv": "^3.7.3",
     "intersection-observer": "^0.12.0",
     "mini-css-extract-plugin": "^2.6.0",
     "regenerator-runtime": "^0.13.9",

webpack.config.js

@@ -28,7 +28,7 @@ module.exports = {
           path.resolve(__dirname, 'node_modules/@stimulus/polyfills'),
           path.resolve(__dirname, 'node_modules/@rails/actioncable'),
           path.resolve(__dirname, 'node_modules/chartjs'),
-          path.resolve(__dirname, 'app/frontend/controllers'),
+          path.resolve(__dirname, 'app/frontend'),
         ],
         use: ['babel-loader'],
       },
@@ -60,6 +60,9 @@ module.exports = {
       patterns: [
         { from: "node_modules/govuk-frontend/govuk/assets/images", to: "images" },
         { from: "node_modules/govuk-frontend/govuk/assets/fonts", to: "fonts" },
+        { from: "node_modules/html5shiv/dist/html5shiv.min.js", to: "vendor" },
+        { from: "app/frontend/vendor/outerHTML.js", to: "vendor" },
+        { from: "app/frontend/vendor/polyfill-output-value.js", to: "vendor" }
       ],
     }),
     new webpack.ProvidePlugin({

yarn.lock

@@ -1842,6 +1842,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+html5shiv@^3.7.3:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/html5shiv/-/html5shiv-3.7.3.tgz#d78a84a367bcb9a710100d57802c387b084631d2"
+  integrity sha1-14qEo2e8uacQEA1XgCw4ewhGMdI=
+
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"