build(lib): Migrate to esbuild and drop UMD support

- Moves from rollup to esbuild for faster compilation.
- UMD build is removed in favour of a simpler IIFE. This ends
compatibility for old module systems, such as AMD.
- Dev workflow is simplified through the use of esbuild's serve command,
 which takes the place of http-server for our purposes.

Author: jayfreestone

.gitignore

@@ -2,4 +2,3 @@
 node_modules/
 cypress/videos/
 dist/*
-!dist/.gitkeep

.npmignore

@@ -3,4 +3,4 @@
 # include whitelist
 !dist/*.js
 !dist/types/**/*.d.ts
-!css/*.css
+!dist/*.css

.travis.yml

@@ -13,9 +13,7 @@ jobs:
   include:
     - stage: test
       before_script: npm run build
-      script: npm run test:ci
-    - before_script: npm run build
-      script: npm run test:lint
+      script: npm run test
     - before_script: npm run build
       script: npx bundlesize
     - stage: release

README.md

@@ -15,7 +15,7 @@ There's also a Glitch pen [available here](https://priority-plus-demo.glitch.me/
 
 **The short stuff**:
 
-- Vanilla JS, dependency free. Available as an ES6 module, CJS module, or a UMD bundle.
+- Vanilla JS, dependency free. Available as an ES6 module, or a drop-in IIFE assigned to the global `priorityPlus`.
 - Uses the [`IntersectionObserver` API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) instead of width-based calculations.
 - Toggles the appropriate [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) attributes to remain accessible.
 - Provides a class hook to style the menu differently when all items are in the overflow/hidden.
@@ -83,9 +83,9 @@ npm install priority-plus
 Or use a CDN if you're feeling old-school:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/priority-plus/css/priority-plus.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/priority-plus/dist/priority-plus.css">
 <!-- Will be available globally as priorityPlus -->
-<script defer src="https://cdn.jsdelivr.net/npm/priority-plus/dist/priority-plus.umd.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/priority-plus/dist/priority-plus.js"></script>
 ```
 
 ## Setup
@@ -106,7 +106,7 @@ You can create a new instance by passing in an `HTMLElement` that is the direct
 
 ```css
 // Doesn't have to be SASS, just ensure the CSS is included.
-@import "node_modules/priority-nav/css/priority-plus";
+@import "node_modules/priority-plus/dist/priority-plus";
 ```
 
 ```javascript

cypress.json

@@ -1,4 +1,4 @@
 {
-  "baseUrl": "http://127.0.0.1:8080",
+  "baseUrl": "http://127.0.0.1:8000",
   "video": false
 }

cypress/plugins/index.js cypress/plugins/index.cjscypress/plugins/index.js renamed to cypress/plugins/index.cjs

@@ -4,22 +4,23 @@
   "description": "A modern implementation of the priority plus navigation pattern.",
   "type": "module",
   "module": "dist/priority-plus.esm.js",
-  "browser": "dist/priority-plus.umd.js",
+  "browser": "dist/priority-plus.js",
   "exports": {
     "import": "./dist/priority-plus.esm.js",
-    "default": "./dist/priority-plus.umd.js"
+    "default": "./dist/priority-plus.js"
   },
   "types": "dist/types/priorityPlus.d.ts",
   "scripts": {
-    "build": "concurrently \"npm:build:lib\" \"npm:build:types\"",
-    "build:lib": "rollup -c",
+    "dev": "esbuild src/browser.ts --bundle --sourcemap --format=iife --servedir=www --outdir=www/assets",
+    "prebuild": "rimraf dist",
+    "build": "concurrently \"npm:build:*\"",
+    "build:esm": "esbuild src/priorityPlus.ts --bundle --minify --format=esm --outfile=dist/priority-plus.esm.js",
+    "build:iife": "esbuild src/browser.ts --bundle --minify --format=iife --outfile=dist/priority-plus.js",
     "build:types": "tsc --emitDeclarationOnly --declarationDir dist/types",
-    "dev": "rollup -c -w",
-    "test": "concurrently \"npm:serve\" \"cypress run\"",
-    "test:ci": "npm run serve & wait-on http://localhost:8080 && cypress run",
+    "test": "npm run test:types && npm run test:lint && npm run test:e2e",
+    "test:types": "tsc --noEmit",
     "test:lint": "tslint -c tslint.json 'src/**/*.ts'",
-    "test:open": "concurrently \"npm:serve\" \"cypress open\"",
-    "serve": "http-server -c-1"
+    "test:e2e": "npm run dev & wait-on http-get://localhost:8000 && cypress run"
   },
   "repository": {
     "type": "git",
@@ -35,27 +36,24 @@
     "url": "https://github.com/jayfreestone/priority-plus/issues"
   },
   "homepage": "https://github.com/jayfreestone/priority-plus#readme",
-  "dependencies": {
-    "@babel/core": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
-    "babel-loader": "^8.1.0"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "@cypress/webpack-preprocessor": "^5.4.1",
-    "@types/chai": "^4.2.11",
-    "@types/mocha": "^7.0.2",
-    "concurrently": "^5.2.0",
-    "cypress": "^4.9.0",
-    "http-server": "^0.12.3",
-    "rollup": "^2.18.2",
-    "rollup-plugin-terser": "^6.1.0",
-    "rollup-plugin-typescript": "^1.0.1",
-    "ts-loader": "^7.0.5",
-    "tslib": "^2.0.0",
+    "@babel/core": "^7.13.14",
+    "@babel/preset-env": "^7.13.12",
+    "@cypress/webpack-preprocessor": "^5.6.0",
+    "@types/chai": "^4.2.15",
+    "@types/mocha": "^8.2.2",
+    "babel-loader": "^8.2.2",
+    "concurrently": "^6.0.0",
+    "cypress": "^6.8.0",
+    "esbuild": "^0.11.2",
+    "rimraf": "^3.0.2",
+    "ts-loader": "^8.1.0",
+    "tslib": "^2.1.0",
     "tslint": "^6.1.2",
-    "typescript": "^3.9.6",
-    "wait-on": "^5.0.1",
-    "webpack": "^4.43.0"
+    "typescript": "^4.2.3",
+    "wait-on": "^5.3.0",
+    "webpack": "^5.28.0"
   },
   "keywords": [
     "navigation",
@@ -70,6 +68,7 @@
     }
   ],
   "release": {
+    "branches": ["master"],
     "plugins": [
       "@semantic-release/commit-analyzer",
       "@semantic-release/release-notes-generator",
@@ -78,8 +77,7 @@
         "@semantic-release/github",
         {
           "assets": [
-            "dist/*.js",
-            "css/*.css"
+            "dist/**/*"
           ]
         }
       ]

dist/.gitkeep

@@ -0,0 +1,11 @@
+// Wrapper around library which exposes `priorityPlus` as a global
+// on `window`. Required as `globalName` will nest the default export
+// under `.default`.
+// See: https://github.com/evanw/esbuild/issues/869
+import lib from './priorityPlus';
+// Required so that esbuild spits out the CSS. We don't include it in
+// the main `priorityPlus.ts` file since that would result in two files.
+import './css/priority-plus.css';
+
+// @ts-ignore
+window.priorityPlus = lib;