refactor: update entrypoint to async load new web components; update load order to account for the styleguide.js logic being sensitive to the order that things load in

Author: sghoweri

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

@@ -1,11 +1,22 @@
+import { loadPolyfills } from './utils/polyfills';
+
+loadPolyfills.then(res => {
+  import(/* webpackMode: 'eager', webpackChunkName: 'pl-layout' */ './components/pl-layout/pl-layout').then(
+    () => {
+      // this ensures that the old-school way the styleguide JS binds to the page isn't thrown off by the <pl-layout> component rendering -- temp workaround till the logic in styleguide.js gets broken down and refactored.
+      import(/* webpackMode: 'eager', webpackChunkName: 'pl-styleguide' */ './components/styleguide');
+    }
+  );
+  import(/* webpackMode: 'eager', webpackChunkName: 'pl-toggle-theme' */ './components/pl-toggle-theme/pl-toggle-theme');
+  import(/* webpackMode: 'eager', webpackChunkName: 'pl-toggle-layout' */ './components/pl-toggle-layout/pl-toggle-layout');
+});
+
 import './components/typeahead';
-import './components/layout';
 import './components/modal-viewer';
 import './components/panels';
 import './components/panels-viewer';
 import './components/pattern-finder';
 import './components/plugin-loader';
-import './components/styleguide';
 
 //// Add hook to auto re-render the root component.
 if (typeof module.hot === 'object') {