Fix IE11 errors and polyfills (pattern-lab#1255)

* Fix IE11 error - SCRIPT438: Object doesn't support property or method 'forEach'
* Update uikit polyfills to run pl in ie11
* Update packages/uikit-workshop/src/scripts/components/modal-styleguide.js
* Update modal-styleguide.js

Co-authored-by: Ofer Shaal <ofer@3paces.com> Josef Bredreck <slime.games@outlook.de>

Author: Ofer Shaal

packages/uikit-workshop/package.json

@@ -59,34 +59,22 @@
     "@babel/runtime": "^7.6.3",
     "@pattern-lab/uikit-polyfills": "^5.2.0",
     "@reach/visually-hidden": "^0.1.2",
-    "@skatejs/element-preact": "^0.0.1",
-    "@skatejs/renderer-lit-html": "^0.2.2",
-    "@skatejs/renderer-preact": "^0.3.3",
-    "@svgr/webpack": "^4.3.3",
-    "@ungap/url-search-params": "^0.1.2",
-    "@webcomponents/custom-elements": "^1.3.0",
-    "@webcomponents/shadydom": "^1.6.1",
-    "@webcomponents/template": "^1.4.1",
+    "@webcomponents/custom-elements": "^1.4.2",
     "autoprefixer": "^9.6.5",
     "babel-loader": "^8.0.6",
     "classnames": "^2.2.6",
     "clean-css-loader": "^1.0.1",
     "clean-webpack-plugin": "0.1.19",
     "clipboard": "^2.0.4",
     "copy-webpack-plugin": "^5.0.2",
-    "core-js": "^3.3.6",
+    "core-js": "^3.6.5",
     "cosmiconfig": "^5.0.6",
     "critical": "^1.3.4",
     "critical-css-webpack-plugin": "^0.2.0",
     "css-loader": "^3.2.0",
     "deepmerge": "^2.1.1",
-    "document-register-element": "^1.13.3",
-    "element-closest": "2.0.2",
-    "es6-promise": "^4.2.8",
-    "fg-loadcss": "^2.1.0",
     "fg-loadjs": "^1.1.0",
     "fuse.js": "^3.4.5",
-    "get-own-property-symbols": "^0.9.4",
     "hard-source-webpack-plugin-patch": "^0.13.3",
     "hogan.js": "^3.0.2",
     "htm": "^1.0.1",
@@ -95,13 +83,11 @@
     "iframe-resizer": "^3.6.5",
     "lit-element": "^2.2.1",
     "lit-html": "^1.1.2",
-    "local-chrome": "^0.1.0",
     "mini-css-extract-plugin": "^0.8.0",
     "mousetrap": "^1.6.3",
     "no-emit-webpack-plugin": "^1.0.0",
     "node-sass": "^4.14.1",
     "node-sass-selector-importer": "^5.2.0",
-    "penthouse": "^2.2.2",
     "postcss-loader": "^3.0.0",
     "preact": "8.3.1",
     "preact-compat": "3.18.4",
@@ -112,31 +98,25 @@
     "pretty": "^2.0.0",
     "prismjs": "^1.15.0",
     "pwa-helpers": "^0.9.0",
-    "raw-loader": "^3.1.0",
     "react-autosuggest": "^9.4.2",
     "react-dom": "^16.8.6",
     "react-html-parser": "^2.0.2",
     "react-popper-tooltip": "^2.7.0",
     "redux": "3.7.2",
     "redux-thunk": "^2.3.0",
-    "reselect": "^3.0.1",
     "sass-loader": "^8.0.0",
     "scriptjs": "^2.5.8",
     "scroll-js": "^2.2.0",
     "skatejs": "^5.2.4",
     "style-loader": "^1.0.0",
     "svg-sprite-loader": "^4.1.6",
     "svg-transform-loader": "^2.0.8",
-    "svgo": "^1.3.0",
     "svgo-loader": "^2.2.1",
     "ts-loader": "^6.2.1",
-    "url-search-params-polyfill": "^5.0.0",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.9",
     "webpack-merge": "^4.2.2",
-    "whendefined": "^0.0.1",
     "wolfy87-eventemitter": "^5.2.6",
-    "workbox-build": "^3.4.1",
     "yargs": "^14.2.0"
   },
   "browserslist": [

packages/uikit-workshop/src/scripts/components/modal-styleguide.js

@@ -22,12 +22,12 @@ export const modalStyleguide = {
     // go through the panel toggles and add click event to the pattern extra toggle button
     const toggles = document.querySelectorAll('.pl-js-pattern-extra-toggle');
 
-    toggles.forEach(toggle => {
-      toggle.addEventListener('click', e => {
-        const patternPartial = toggle.getAttribute('data-patternpartial');
+    for (let i = 0; i < toggles.length; i++) {
+      toggles[i].addEventListener('click', e => {
+        const patternPartial = toggles[i].getAttribute('data-patternpartial');
         modalStyleguide.toggle(patternPartial);
       });
-    });
+    }
   },
 
   /**

packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js

@@ -9,7 +9,6 @@ import { store } from '../../store.js'; // redux store
 import { BaseComponent } from '../base-component.js';
 import { iframeMsgDataExtraction } from '../../utils';
 import Mousetrap from 'mousetrap';
-import 'url-search-params-polyfill';
 
 import { NavTitle } from './src/NavTitle';
 import { NavList } from './src/NavList';
@@ -34,6 +33,7 @@ class Nav extends BaseComponent {
 
   handlePageClick(e) {
     if (
+      e.target.closest &&
       e.target.closest('.pl-c-nav') === null &&
       e.target.closest('.pl-js-nav-trigger') === null &&
       e.target.closest('svg') === null &&

packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.js

@@ -1,5 +1,4 @@
 /* eslint-disable no-unused-vars, no-param-reassign */
-import URLSearchParams from '@ungap/url-search-params'; // URLSearchParams poly for older browsers
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { store } from '../../store.js'; // connect to redux
 import { updateCurrentPattern, updateCurrentUrl } from '../../actions/app.js'; // redux actions

packages/uikit-workshop/src/scripts/patternlab-pattern.js

@@ -1,9 +1,4 @@
 import 'regenerator-runtime/runtime';
-if (window.NodeList && !NodeList.prototype.forEach) {
-  NodeList.prototype.forEach = Array.prototype.forEach;
-}
-import '@pattern-lab/uikit-polyfills/platform/custom-event';
-import '@pattern-lab/uikit-polyfills/platform/symbol';
 import './components/modal-styleguide';
 import './components/pl-search/pl-search.iframe-helper';
 import './components/pl-nav/pl-nav.iframe-helper';