refactor: update entrypoint to now import all components that are listed out in a separate file

Author: sghoweri

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

@@ -0,0 +1,45 @@
+import './lit-components/pl-icon/pl-icon';
+import './lit-components/pl-button/pl-button';
+import './lit-components/pl-toggle-info/pl-toggle-info';
+import './lit-components/pl-toggle-layout/pl-toggle-layout';
+import './lit-components/pl-toggle-theme/pl-toggle-theme';
+
+import './components/pl-nav/pl-nav';
+import './components/pl-logo/pl-logo';
+import './components/pl-layout/pl-layout';
+import './components/pl-controls/pl-controls';
+import './components/pl-drawer/pl-drawer';
+import './components/pl-header/pl-header';
+import './components/pl-viewport/pl-viewport';
+import './components/pl-tools-menu/pl-tools-menu';
+import './components/pl-search/pl-search';
+
+import(
+  /* webpackChunkName: "pl-viewport-sizes" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  './components/pl-viewport-size-list/pl-viewport-size-list'
+);
+
+import(
+  /* webpackChunkName: "pl-plugin-loader" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  './components/plugin-loader'
+);
+
+import(
+  /* webpackChunkName: "pl-modal-viewer" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  './components/modal-viewer'
+);
+
+// Add hook to auto re-render the root component.
+if (typeof module.hot === 'object') {
+  module.hot.accept(err => {
+    if (err) {
+      console.error('Cannot apply HMR update.', err);
+    }
+  });
+}

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

@@ -1,43 +1,9 @@
-import './utils/polyfills';
-import './components/pl-nav/pl-nav';
-import './components/pl-logo/pl-logo';
-import './components/pl-layout/pl-layout';
-import './components/pl-controls/pl-controls';
-import './components/pl-drawer/pl-drawer';
-import './components/pl-header/pl-header';
-import './components/pl-viewport/pl-viewport';
-import './components/pl-toggle-info/pl-toggle-info';
-import './components/pl-toggle-layout/pl-toggle-layout';
-import './components/pl-toggle-theme/pl-toggle-theme';
-import './components/pl-tools-menu/pl-tools-menu';
-import './components/pl-search/pl-search';
-
-import(
-  /* webpackChunkName: "pl-viewport-sizes" */
-  /* webpackMode: "lazy" */
-  /* webpackPrefetch: true */
-  './components/pl-viewport-size-list/pl-viewport-size-list'
-);
-
-import(
-  /* webpackChunkName: "pl-plugin-loader" */
-  /* webpackMode: "lazy" */
-  /* webpackPrefetch: true */
-  './components/plugin-loader'
-);
-
-import(
-  /* webpackChunkName: "pl-modal-viewer" */
-  /* webpackMode: "lazy" */
-  /* webpackPrefetch: true */
-  './components/modal-viewer'
-);
-
-// Add hook to auto re-render the root component.
-if (typeof module.hot === 'object') {
-  module.hot.accept(err => {
-    if (err) {
-      console.error('Cannot apply HMR update.', err);
-    }
-  });
-}
+import { loadPolyfills } from './utils/polyfills/polyfill-loader.js';
+
+loadPolyfills.then(() => {
+  import(
+    /* webpackChunkName: "pl-components" */
+    /* webpackMode: "eager" */
+    './patternlab-components'
+  );
+});

packages/uikit-workshop/src/scripts/utils/polyfills/index.js

@@ -1 +1,5 @@
-import './polyfills';
+import { loadPolyfills } from './polyfill-loader';
+
+loadPolyfills.then(() => {
+  return;
+});