feat: use Rollup for bundling

AlaskaAirlines · Nov 20, 2020 · 0a9fcd4 · 0a9fcd4
1 parent 08788a8
commit 0a9fcd4
Show file tree

Hide file tree

Showing 11 changed files with 188 additions and 194 deletions.
diff --git a/README.md b/README.md
@@ -60,14 +60,16 @@ $ wc-generate -t -N Han -n Solo
 
 ## Pre-bundled components
 
-The WC-Generator contains automated functionality with each build to generate a pre-bundled version of the new component so that users can consume these assets without needing to bundle the JavaScript assets themselves.
+The WC-Generator contains automated functionality with each build to generate pre-bundled versions of the new component so that users can consume these assets without needing to bundle the JavaScript assets themselves. Both a modern and legacy bundle are produced.
+
+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.
 
 ```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" />
 
-<script src="https://unpkg.com/@alaskaairux/[namespace]-[name]@:version/dist/polyfills.js"></script>
-<script src="https://unpkg.com/@alaskaairux/[namespace]-[name]@:version/dist/[namespace]-[name]__bundled.js"></script>
+<script src="https://unpkg.com/@alaskaairux/[namespace]-[name]@:version/dist/[namespace]-[name]__bundled.js" type="module"></script>
+<script src="https://unpkg.com/@alaskaairux/[namespace]-[name]@:version/dist/[namespace]-[name]__bundled.es5.js" nomodule></script>
 ```
 
 ## Static Styles
@@ -80,3 +82,5 @@ If there is a requirement for the CSS to be reevaluated, this can either be done
 
 Moving the CSS to the `render()` method requires an update to the `sassRender` script and removing the reference to `staticStyles-template.js`.
 
+## Developing locally
+To test changes to the generator, run `npm test` to generate an `auro-test` component.
diff --git a/bin/generate.js b/bin/generate.js
@@ -93,12 +93,12 @@ const getVersionData = async () => {
   versions['focusVisible'] = await latestVersion('focus-visible');
   versions['webcomponentsjs'] = await latestVersion('@webcomponents/webcomponentsjs');
   versions['litElement'] = await latestVersion('lit-element');
-  versions['bableCore'] = await latestVersion('@babel/core');
-  versions['bableLoader'] = await latestVersion('babel-loader');
-  versions['bableSyntaxDynamicImport'] = await latestVersion('@babel/plugin-syntax-dynamic-import');
-  versions['bableTransRuntime'] = await latestVersion('@babel/plugin-transform-runtime');
-  versions['bablePreset'] = await latestVersion('@babel/preset-env');
-  versions['bableRuntime'] = await latestVersion('@babel/runtime');
+  versions['babelCore'] = await latestVersion('@babel/core');
+  versions['babelLoader'] = await latestVersion('babel-loader');
+  versions['babelSyntaxDynamicImport'] = await latestVersion('@babel/plugin-syntax-dynamic-import');
+  versions['babelTransRuntime'] = await latestVersion('@babel/plugin-transform-runtime');
+  versions['babelPreset'] = await latestVersion('@babel/preset-env');
+  versions['babelRuntime'] = await latestVersion('@babel/runtime');
   versions['compression'] = await latestVersion('compression');
   versions['commitlintCli'] = await latestVersion('@commitlint/cli');
   versions['commitlintConfig'] = await latestVersion('@commitlint/config-conventional');
@@ -111,7 +111,6 @@ const getVersionData = async () => {
   versions['chalk'] = await latestVersion('chalk');
   versions['concat'] = await latestVersion('concat');
   versions['copyfiles'] = await latestVersion('copyfiles');
-  versions['copyWebpackPlugin'] = await latestVersion('copy-webpack-plugin');
   versions['coreJs'] = await latestVersion('core-js');
   versions['eslint'] = await latestVersion('eslint');
   versions['eslintLit'] = await latestVersion('eslint-plugin-lit');
@@ -127,77 +126,30 @@ const getVersionData = async () => {
   versions['postcssDiscardComments'] = await latestVersion('postcss-discard-comments');
   versions['postcssRemoveRules'] = await latestVersion('postcss-remove-rules');
   versions['postcssSelectorReplace'] = await latestVersion('postcss-selector-replace');
+  versions['rollupPluginAlias'] = await latestVersion('@rollup/plugin-alias');
+  versions['rollupPluginBabel'] = await latestVersion('@rollup/plugin-babel');
+  versions['rollupPluginCommonJs'] = await latestVersion('@rollup/plugin-commonjs');
+  versions['rollupPluginNode'] = await latestVersion('@rollup/plugin-node-resolve');
+  versions['rollup'] = await latestVersion('rollup');
+  versions['rollupPluginHtml'] = await latestVersion('rollup-plugin-minify-html-literals');
+  versions['rollupPluginServe'] = await latestVersion('rollup-plugin-serve');
+  versions['rollupPluginTerser'] = await latestVersion('rollup-plugin-terser');
   versions['sr'] = await latestVersion('semantic-release');
   versions['sinon'] = await latestVersion('sinon');
   versions['stylelint'] = await latestVersion('stylelint');
   versions['stylelintConfig'] = await latestVersion('stylelint-config-standard');
   versions['wcSassRender'] = await latestVersion('wc-sass-render');
   versions['wca'] = await latestVersion('web-component-analyzer');
-  versions['webpack'] = await latestVersion('webpack');
-  versions['webpackBundleAnalyzer'] = await latestVersion('webpack-bundle-analyzer');
   versions['webpackMerge'] = await latestVersion('webpack-merge');
-  versions['webpackCli'] = await latestVersion('webpack-cli');
-  versions['webpackDevServer'] = await latestVersion('webpack-dev-server');
   versions['yamlLint'] = await latestVersion('yaml-lint');
-
   return versions;
 }
 
 const formatTemplateFileContents = (data, content, { name, namespace, npm }) => {
-  const pkgReplacements = [
-    { regex: /\[designTokens\]/g, value: data.designTokens },
-    { regex: /\[wcss\]/g, value: data.wcss },
-    { regex: /\[icons\]/g, value: data.icons },
-    { regex: /\[focusVisible\]/g, value: data.focusVisible },
-    { regex: /\[webcomponentsjs\]/g, value: data.webcomponentsjs },
-    { regex: /\[litElement\]/g, value: data.litElement },
-    { regex: /\[bableCore\]/g, value: data.bableCore },
-    { regex: /\[bableLoader\]/g, value: data.bableLoader },
-    { regex: /\[bableSyntaxDynamicImport\]/g, value: data.bableSyntaxDynamicImport },
-    { regex: /\[bableTransRuntime\]/g, value: data.bableTransRuntime },
-    { regex: /\[bablePreset\]/g, value: data.bablePreset },
-    { regex: /\[bableRuntime\]/g, value: data.bableRuntime },
-    { regex: /\[compression\]/g, value: data.compression },
-    { regex: /\[chalk\]/g, value: data.chalk },
-    { regex: /\[commitlintCli\]/g, value: data.commitlintCli },
-    { regex: /\[commitlintConfig\]/g, value: data.commitlintConfig },
-    { regex: /\[openwcTesting\]/g, value: data.openwcTesting },
-    { regex: /\[openwcKarma\]/g, value: data.openwcKarma },
-    { regex: /\[srChangelog\]/g, value: data.srChangelog },
-    { regex: /\[srGit\]/g, value: data.srGit },
-    { regex: /\[srNpm\]/g, value: data.srNpm },
-    { regex: /\[autoprefixer\]/g, value: data.autoprefixer },
-    { regex: /\[concat\]/g, value: data.concat },
-    { regex: /\[copyfiles\]/g, value: data.copyfiles },
-    { regex: /\[copyWebpackPlugin\]/g, value: data.copyWebpackPlugin },
-    { regex: /\[coreJs\]/g, value: data.coreJs },
-    { regex: /\[eslint\]/g, value: data.eslint },
-    { regex: /\[eslintLit\]/g, value: data.eslintLit },
-    { regex: /\[husky\]/g, value: data.husky },
-    { regex: /\[lodash\]/g, value: data.lodash },
-    { regex: /\[marked\]/g, value: data.marked },
-    { regex: /\[nodemon\]/g, value: data.nodemon },
-    { regex: /\[npmRunAll\]/g, value: data.npmRunAll },
-    { regex: /\[parcelBundler\]/g, value: data.parcelBundler },
-    { regex: /\[parcelCompress\]/g, value: data.parcelCompress },
-    { regex: /\[postcss\]/g, value: data.postcss },
-    { regex: /\[postcssCustomProperties\]/g, value: data.postcssCustomProperties },
-    { regex: /\[postcssDiscardComments\]/g, value: data.postcssDiscardComments },
-    { regex: /\[postcssRemoveRules\]/g, value: data.postcssRemoveRules },
-    { regex: /\[postcssSelectorReplace\]/g, value: data.postcssSelectorReplace },
-    { regex: /\[sr\]/g, value: data.sr },
-    { regex: /\[sinon\]/g, value: data.sinon },
-    { regex: /\[stylelint\]/g, value: data.stylelint },
-    { regex: /\[stylelintConfig\]/g, value: data.stylelintConfig },
-    { regex: /\[wcSassRender\]/g, value: data.wcSassRender },
-    { regex: /\[wca\]/g, value: data.wca },
-    { regex: /\[webpackMerge\]/g, value: data.webpackMerge },
-    { regex: /\[webpack\]/g, value: data.webpack },
-    { regex: /\[webpackDevServer\]/g, value: data.webpackDevServer },
-    { regex: /\[webpackCli\]/g, value: data.webpackCli },
-    { regex: /\[webpackBundleAnalyzer\]/g, value: data.webpackBundleAnalyzer },
-    { regex: /\[yamlLint\]/g, value: data.yamlLint }
-  ];
+  const pkgReplacements = Object.keys(data).map(key => ({
+    regex: new RegExp(`\\[${key}\\]`, 'g'),
+    value: data[key]
+  }));
 
   // name to lower-kebab-case (e.g. Text Input -> text-input)
   const lowerKebabCaseName = lowerKebabCase(name);
@@ -212,17 +164,14 @@ const formatTemplateFileContents = (data, content, { name, namespace, npm }) =>
   // generate new year for copyright stamp
   const newYear = new Date().getFullYear();
 
-  const webPackName = '[name].js';
-
   const nameReplacements = [
     { regex: /\[author\]/g, value: userName },
     { regex: /\[name\]/g, value: lowerKebabCaseName },
     { regex: /\[namespace\]/g, value: lowerKebabCaseNameSpace },
     { regex: /\[Namespace\]/g, value: upperCamelCaseNameSpace },
     { regex: /\[Name\]/g, value: upperCamelCaseName },
     { regex: /\[npm\]/g, value: npm },
-    { regex: /\[year\]/g, value: newYear },
-    { regex: /\|webPackName\|/g, value: webPackName }
+    { regex: /\[year\]/g, value: newYear }
   ];
 
   const replacements = nameReplacements.concat(pkgReplacements);

diff --git a/docs/gettingStarted.md b/docs/gettingStarted.md
@@ -9,7 +9,7 @@ When using the WC-Generator, you will get the following scaffolding:
 1. Sass and PostCSS pre-configured support
 1. Sass template Auro Design Tokens, breakpoints and core CSS ready
 1. JSDoc support
-1. Pre-configured Webpack for producing pre-bundled versions of the web component
+1. Pre-configured Rollup for producing pre-bundled modern and legacy versions of the web component
 1. Full code linting support
 1. Fully configured [Karma via Open-WC](https://auro.alaskaair.com/support/tests) testing support
 1. Support for conventional commits and automated semantic versioning
@@ -37,9 +37,9 @@ By default, the WC-Generator will assume `auro` as the namespace for the WC, `@a
 
 When building the new web component, there are two servers you can use to test your component.
 
-Running `npm run serve` will start the polymer server where you can view your web component demo at [http://localhost:3001/demo/](http://localhost:3001/demo/).
+Running `npm run serve` will start the polymer server where you can view your web component demo at http://localhost:3001/demo/.
 
-Running `npm run bundle:test` will start a webpack server of bundled assets that you can view at [http://localhost:8080/](http://localhost:8080/).
+Running `npm run bundle:test` will start a Rollup server of bundled assets that you can view at http://localhost:10001/docs/. You can use the server to test the bundled output in modern and legacy browsers.
 
 ## Editing your Polymer demo
 
@@ -65,7 +65,7 @@ The purpose of the bundled demo is simply to ensure that your new component can
 
 Located in `/docs/index.html` is a simple scaffolding where examples can be viewed. Editing the `auro*` array will show the component and output a simple code example.
 
-If there is more than one component in your project, be sure to update the `config` object in the `./webpack.config.js` file.
+If there is more than one component in your project, be sure to update the Rollup config in the `rollup.config.js` file.
 
 ## Editing your web component
 

diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     ]
   },
   "scripts": {
-    "testbuild": "node bin/generate.js -t -N Han -n Solo -P @mypackage/ -d ./auro-test",
+    "testbuild": "node bin/generate.js -t -N Han -n Solo -P @mypackage -d ./auro-test",
     "fullbuild": "node bin/generate.js -n solo -d ../auro-test",
     "sweep": "rm -rf auro-test",
     "test": "npm-run-all sweep testbuild"

diff --git a/template/README.md b/template/README.md
@@ -44,27 +44,20 @@ import "[npm]/[namespace]-[name]";
 
 ## 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 -- `[namespace]-[name]__bundled.js` for modern browsers and `[namespace]-[name]__bundled.es5.js` for legacy browsers (including IE11). 
+
+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 `:version` in the URL with the version of the asset you want.
 
 ```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" />
 
-<script src="https://unpkg.com/[npm]/[namespace]-[name]@:version/dist/polyfills.js"></script>
-<script src="https://unpkg.com/[npm]/[namespace]-[name]@:version/dist/[namespace]-[name]__bundled.js"></script>
+<script src="https://unpkg.com/@alaskaairux/[namespace]-[name]@:version/dist/[namespace]-[name]__bundled.js" type="module"></script>
+<script src="https://unpkg.com/@alaskaairux/[namespace]-[name]@:version/dist/[namespace]-[name]__bundled.es5.js" nomodule></script>
 ```
 
-### polyfills.js
-
-The `polyfills.js` is packaged with this component, but **IT IS NOT NEEDED** to load a polyfill per component. The `polyfills.js` will work for all additional components added to the project.
-
-### IE11 Support
-
-**Displaimer:** While these components are supported in IE, there may be issues with loading the [web components polyfill](https://www.webcomponents.org/polyfills). Please consult their documentation when supporting IE11.
-
-
 ## [namespace]-[name] use cases
 
 The `<[namespace]-[name]>` element should be used in situations where users may:

diff --git a/template/babel.config.js b/template/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
+    }
+  }
+};
diff --git a/template/docs/index.html b/template/docs/index.html
@@ -87,13 +87,13 @@ <h3>[namespace]-[name]: default</h3>
 
 
     <!-- for initial build and test only -->
-    <script src="./polyfills.js"></script>
-    <script src="./[namespace]-[name]__bundled.js"></script>
+    <script src="/dist/[namespace]-[name]__bundled.js" type="module"></script>
+    <script src="/dist/[namespace]-[name]__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/[namespace]-[name]@:version/dist/polyfills.js"></script>
-    <script src="https://unpkg.com/@alaskaairux/[namespace]-[name]@:version/dist/[namespace]-[name]__bundled.js"></script> -->
+    <!-- <script src="https://unpkg.com/@alaskaairux/[namespace]-[name]@:version/dist/[namespace]-[name]__bundled.js" type="module"></script>
+    <script src="https://unpkg.com/@alaskaairux/[namespace]-[name]@:version/dist/[namespace]-[name]__bundled.es5.js" nomodule></script> -->
   </div>
 </body>