feat: add support for rollup bundles

BREAKING CHANGE: This is a change in the use of bundled resources,
removed depenbdency on polyfill file and created ES5 and ES6 resources

README.md

@@ -44,16 +44,18 @@ import "@alaskaairux/auro-avatar";
 
 ## Install bundled assets from CDN
 
-In cases where the project is not able to process JS assets, there are pre-processed assets available for use.
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Two bundles are available -- `auro-avatar__bundled.js` for modern browsers and `auro-avatar__bundled.es5.js` for legacy browsers (including IE11).
 
-**NOTE:** Be sure to replace `:version` in the URL with the version of the asset you want.
+Since the legacy bundle includes many polyfills that are not needed by modern browsers, we recommend you load these bundles using [differential serving](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) so that the browser only loads the bundle it needs. To accomplish this, the script tag for the modern bundle should have `type="module"` and the script tag for the legacy bundle should have the `nomodule` attribute. See the example below.
+
+**NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk.
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/orion-design-tokens@:version/dist/tokens/CSSTokenProperties.css" />
-<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/orion-web-core-style-sheets@:version/dist/bundled/baseline.css" />
+<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/webcorestylesheets@latest/dist/bundled/essentials.css" />
 
-<script src="https://unpkg.com/@alaskaairux/auro-avatar@:version/dist/polyfills.js"></script>
-<script src="https://unpkg.com/@alaskaairux/auro-avatar@:version/dist/auro-avatar__bundled.js"></script>
+<script src="https://unpkg.com/@alaskaairux/auro-avatar@latest/dist/auro-avatar__bundled.js" type="module"></script>
+<script src="https://unpkg.com/@alaskaairux/auro-avatar@latest/dist/auro-avatar__bundled.es5.js" nomodule></script>
 ```
 
 ### polyfills.js
@@ -93,7 +95,7 @@ $ npm run dev
 $ npm run serve
 ```
 
-Open [localhost:3001](http://localhost:3001/)
+Open [localhost:8000](http://localhost:8000/)
 
 ### Testing
 Automated tests are required for every Auro component. See `.\test\auro-avatar.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.

babel.config.js

@@ -0,0 +1,53 @@
+const { browserslist: defaultBrowserslist } = require('./package.json');
+
+const modernBrowserslist = defaultBrowserslist.filter(
+  (browser) => browser !== 'ie 11'
+);
+
+const sharedPlugins = [
+  '@babel/plugin-syntax-dynamic-import',
+  [
+    '@babel/plugin-transform-runtime',
+    {
+      useESModules: true
+    }
+  ]
+];
+
+module.exports = {
+  exclude: [
+    'node_modules/@babel/**',
+    'node_modules/core-js/**',
+    'node_modules/@webcomponents/webcomponentsjs/**'
+  ],
+  env: {
+    modern: {
+      // lit-element supports the last two versions of modern browsers, so we don't need to polyfill
+      exclude: ['node_modules/lit-element/**', 'node_modules/lit-html/**'],
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: modernBrowserslist.join(', '),
+            useBuiltIns: 'usage',
+            corejs: 3
+          }
+        ]
+      ],
+      plugins: sharedPlugins
+    },
+    legacy: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: defaultBrowserslist.join(', '),
+            useBuiltIns: 'usage',
+            corejs: 3
+          }
+        ]
+      ],
+      plugins: sharedPlugins
+    }
+  }
+};

docs/index.html

@@ -51,7 +51,9 @@
     }
 
     var auroAvatar = [
-      '<auro-avatar cssClass="testClass">Hello World</auro-avatar>'
+      '<auro-avatar></auro-avatar>',
+      '<auro-avatar code="psp"></auro-avatar>',
+      '<auro-avatar code="psp" sm></auro-avatar>'
     ]
   </script>
 </head>
@@ -81,19 +83,19 @@ <h3>auro-avatar: default</h3>
   </main>
   <div id="assets">
     <link rel="stylesheet"
-      href="https://unpkg.com/@alaskaairux/orion-design-tokens@2.12.1/dist/tokens/CSSCustomProperties.css" />
+    href="https://unpkg.com/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
     <link rel="stylesheet"
-      href="https://unpkg.com/@alaskaairux/orion-web-core-style-sheets@2.12.1/dist/bundled/essentials.css" />
+      href="https://unpkg.com/@alaskaairux/webcorestylesheets@latest/dist/bundled/essentials.css" />
 
 
     <!-- for initial build and test only -->
-    <script src="./polyfills.js"></script>
-    <script src="./auro-avatar__bundled.js"></script>
+    <script src="/dist/auro-avatar__bundled.js" type="module"></script>
+    <script src="/dist/auro-avatar__bundled.es5.js" nomodule></script>
 
     <!-- once first build has been released, update with the links below -->
-    <!-- Be sure to update the :version number -->
-    <!-- <script src="https://unpkg.com/@alaskaairux/auro-avatar@:version/dist/polyfills.js"></script>
-    <script src="https://unpkg.com/@alaskaairux/auro-avatar@:version/dist/auro-avatar__bundled.js"></script> -->
+    <!-- Be sure to update the @latest number -->
+    <!-- <script src="https://unpkg.com/@alaskaairux/auro-avatar@latest/dist/auro-avatar__bundled.es5.js" nomodule></script>
+    <script src="https://unpkg.com/@alaskaairux/auro-avatar@latest/dist/auro-avatar__bundled.js" type="module"></script> -->
   </div>
 </body>