refactor(browser): switch from webpack to rollup for browser bundling

BREAKING CHANGE:
mountain-pass · Jun 22, 2021 · e94d68a · e94d68a
1 parent ae1b5ac
commit e94d68a
Show file tree

Hide file tree

Showing 29 changed files with 1,148 additions and 3,795 deletions.
diff --git a/.github/workflows/build-and-publish.yml b/.github/workflows/build-and-publish.yml
@@ -201,9 +201,16 @@ jobs:
 
     runs-on: ubuntu-latest
 
+    continue-on-error: ${{ matrix.experimental }}
+
     strategy:
+      fail-fast: true
       matrix:
         node-version: [10.x, 12.x, 14.x]
+        experimental: [false]
+        include:
+          - node-version: 16.x
+            experimental: true
 
     defaults:
       run:
@@ -239,7 +246,7 @@ jobs:
 
 
 
-  test-browser-api-local:
+  test-chrome-local:
     if: |
       ! contains(toJSON(github.event.commits.*.message), '[skip-ci]')
 
@@ -277,12 +284,88 @@ jobs:
           name: code-coverage-report-chrome-local
           path: coverage/browser-api-chrome-local
 
+  test-chrome-local-min:
+    if: |
+      ! contains(toJSON(github.event.commits.*.message), '[skip-ci]')
+
+    continue-on-error: true
+
+    runs-on: ubuntu-latest
+
+    name: test-chrome-local-min
+
+    defaults:
+      run:
+        shell: bash
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v1
+        with:
+          path: |
+            ~/.npm
+            node_modules
+          key: ${{ runner.OS }}-npm-cache-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-npm-cache-
+
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+
+      - run: npm config set script-shell $(which bash)
+      - run: npm ci
+      - run: npm run test:browser-api-min:chrome:local
+
+  test-firefox-local:
+    if: |
+      ! contains(toJSON(github.event.commits.*.message), '[skip-ci]')
+    
+    continue-on-error: true
+
+    runs-on: ubuntu-latest
+
+    name: test-firefox-local
+
+    defaults:
+      run:
+        shell: bash
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v1
+        with:
+          path: |
+            ~/.npm
+            node_modules
+          key: ${{ runner.OS }}-npm-cache-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-npm-cache-
+
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+
+      - run: npm config set script-shell $(which bash)
+      - run: npm ci
+      - run: npm run cover:browser-api:firefox:local
+      - uses: actions/upload-artifact@v2
+        with:
+          name: code-coverage-report-firefox-local
+          path: coverage/browser-api-firefox-local
+
   check-coverage-local:
     if: "! contains(toJSON(github.event.commits.*.message), '[skip-ci]') && ! startsWith( github.head_ref, 'dependabot' )"
 
     needs:
       - test-node-api
-      - test-browser-api-local
+      - test-chrome-local
 
     runs-on: ubuntu-latest
 
@@ -359,7 +442,7 @@ jobs:
           name: code-coverage-report-node-not-skippable-14.x
           path: coverage/node-api-not--skippable-
 
-  test-browser-api-local-not-skippable:
+  test-chrome-local-not-skippable:
     if: |
       ! contains(toJSON(github.event.commits.*.message), '[skip-ci]')
 
@@ -402,7 +485,7 @@ jobs:
 
     needs:
       - test-node-api-not-skippable
-      - test-browser-api-local-not-skippable
+      - test-chrome-local-not-skippable
 
     runs-on: ubuntu-latest
 

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -13,8 +13,6 @@ waychaser is released under the non-restrictive Apache 2.0 licenses and follows
     - [🚫💩](#)
     - [Babel](#babel)
     - [ESLint](#eslint)
-    - [Webpack](#webpack)
-      - [Webpack dev server](#webpack-dev-server)
     - [VSCode + ESLint + Prettier](#vscode--eslint--prettier)
       - [Installation guide](#installation-guide)
     - [Contribution flow](#contribution-flow)
@@ -84,16 +82,6 @@ Babel requires plugins to do the transformation. Presets are the set of plugins
 
 [.eslintrc.json file](<(https://eslint.org/docs/user-guide/configuring)>) (alternatively configurations can we written in Javascript or YAML as well) is used describe the configurations required for ESLint.
 
-### Webpack
-
-[Webpack](https://webpack.js.org/) is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser.
-
-[webpack.config.js](https://webpack.js.org/configuration/) file is used to describe the configurations required for webpack.
-
-#### Webpack dev server
-
-[Webpack dev server](https://webpack.js.org/configuration/dev-server/) is used along with webpack. It provides a development server that provides live reloading for the client side code. This should be used for development only.
-
 ### VSCode + ESLint + Prettier
 
 [VSCode](https://code.visualstudio.com/) is a lightweight but powerful source code editor. [ESLint](https://eslint.org/) takes care of the code-quality. [Prettier](https://prettier.io/) takes care of all the formatting.

diff --git a/README.md b/README.md
@@ -61,6 +61,7 @@ This [isomorphic](https://en.wikipedia.org/wiki/Isomorphic_JavaScript) library i
   - [Error responses](#error-responses)
   - [Invoking missing operations](#invoking-missing-operations)
   - [Handling location headers](#handling-location-headers)
+- [Upgrading from 3.x to 4.x](#upgrading-from-3x-to-4x)
 
 # Usage
 
@@ -71,10 +72,10 @@ npm install @mountainpass/waychaser
 ```
 
 ```js
-import { waychaser } from '@mountainpass/waychaser'
+import { WayChaser } from '@mountainpass/waychaser'
 
 //...
-
+const waychaser = new WayChaser()
 try {
   const apiResource = await waychaser.load(apiUrl)
   // do something with `apiResource`
@@ -93,6 +94,7 @@ try {
 
 ...
 <script type="text/javascript">
+  var waychaser = new window.waychaser.WayChaser()
   waychaser
     .load(apiUrl)
     .then((apiResource) => {
@@ -106,7 +108,7 @@ try {
 
 ## Getting the response
 
-Waychaser makes it's http requests using `fetch` and the `Fetch.Response` is available via the `response` property.
+WayChaser makes it's http requests using `fetch` and the `Fetch.Response` is available via the `response` property.
 
 For example
 ```js
@@ -115,21 +117,17 @@ const responseUrl = apiResource.response.url
 
 ### Getting the response body
 
-Waychaser makes the response body available via the `body()` async method.
+WayChaser makes the response body available via the `body()` async method.
 
 For example
 ```js
 const responseUrl = await apiResource.body()
 ```
-
-NOTE: The response body is also available via the `Fetch.Response`, however if the server is using HAL or Siren, then
-waychaser needs to consume the body in order to parse the links. If you then call `apiResource.response.json()`, you will get a `Body has already been consumed` error. Use `apiResource.body()` instead.
-
 ## Requesting linked resources
 
-Level 3 REST APIs are expected to return links to related resources. Waychaser expects to find these links via [RFC 8288](https://tools.ietf.org/html/rfc8288) `link` headers, [`link-template`](https://mnot.github.io/I-D/link-template/) headers, [HAL](https://tools.ietf.org/html/draft-kelly-json-hal-08)  `_link` elements or [Siren](https://github.com/kevinswiber/siren) `link` elements.
+Level 3 REST APIs are expected to return links to related resources. WayChaser expects to find these links via [RFC 8288](https://tools.ietf.org/html/rfc8288) `link` headers, [`link-template`](https://mnot.github.io/I-D/link-template/) headers, [HAL](https://tools.ietf.org/html/draft-kelly-json-hal-08)  `_link` elements or [Siren](https://github.com/kevinswiber/siren) `link` elements.
 
-Waychaser provides methods to simplify requesting these linked resources.
+WayChaser provides methods to simplify requesting these linked resources.
 
 For instance, if the `apiResource` we loaded above has a `next`  `link` like any of the following:
 
@@ -350,6 +348,10 @@ import aws4 from 'aws4'
 
 
 // AWS makes us sign each request. This is a fetcher that does that automagically for us.
+/**
+ * @param url
+ * @param options
+ */
 function awsFetch (url, options) {
   const parsedUrl = new URL(url)
   const signedOptions = aws4.sign(
@@ -366,7 +368,7 @@ function awsFetch (url, options) {
 }
 
 // Now we tell waychaser, to only accept HAL and to use our fetcher.
-const awsWaychaser = waychaser.use(halHandler, MediaTypes.HAL).withFetch(awsFetch)
+const awsWayChaser = waychaser.use(halHandler, MediaTypes.HAL).withFetch(awsFetch)
 
 // now we can load the API
 const api = await waychaser.load(
@@ -565,7 +567,7 @@ The accept header can be overridden for individual requests, by including an alt
 
 ### Handlers
 
-The `use` method now expects both a `handler` and the `mediaType` it can handle. Waychaser uses the provided 
+The `use` method now expects both a `handler` and the `mediaType` it can handle. WayChaser uses the provided 
 mediaTypes to automatically generate the `accept` request header. 
 
 **NOTE:** Currently waychaser does use the corresponding `content-type` header to filter the responses passed to
@@ -653,8 +655,12 @@ to `undefined`. This is what makes the `...invoke(rel) || default` code possible
 
 ## Handling location headers
 
-Waychaser 3.x now includes a `location` header hander, which will create an operation with the `related` relationship.
+WayChaser 3.x now includes a `location` header hander, which will create an operation with the `related` relationship.
 This allows support for APIs that, when creating a resource (ie using POST), provide a `location` to the created 
 resource in the response, or APIs that, when updating a resource (ie using PUT or PATCH),  provide a `location` to the
 updated resource in the response.
 
+# Upgrading from 3.x to 4.x
+
+Previously WayChaser provided a default instance via the `waychaser` export. This is no longer the case and you will
+need to create your own instance using `new WayChaser()`
diff --git a/TODO.md b/TODO.md
@@ -75,6 +75,7 @@
   - [x] and providing the appropriately anchored operations
 - [x] Dependabot branches shouldn't run audit. Because the branches restricted to 10, this can prevent the update of 
 the package that is causing the audit failure
+- [x] replace webpack with rollup
 - [ ] add invocation arrays 
 - [ ] have `body()` interpret the `content-type` header
 - [ ] Fix release log and change log - it only includes last commit 😢
@@ -84,9 +85,6 @@ the package that is causing the audit failure
 - [ ] Look at using https://github.com/RichardLitt/standard-readme-preset
 - [ ] add 404 equivalent for when trying to invoke a relationship that doesn't exist
 - [ ] add tests for authenticated requests
-- [ ] upgrade webpack
-  - [ ] or investigate using https://rollupjs.org/guide/en/ instead
-  - [ ] or https://github.com/parcel-bundler/parcel
 - [ ] fix structure of package so we get better jsdoc linting
 - [ ] refactor browserstack test run to use single tunnel when running locally
 - [ ] add tests for abort
@@ -101,8 +99,6 @@ the package that is causing the audit failure
 - [ ] help [
       eslint-plugin-security](https://github.com/nodesecurity/eslint-plugin-security) and get better version of `security/detect-object-injection` that doesn't flag `for (const index in object) { object[index] = 0; }`
 - [ ] have a look at using https://github.com/gkouziik/eslint-plugin-security-node
-- [ ] try to use umd for both node and browser. https://github.com/webpack/webpack/pull/8625
-  - [ ] investigate using https://rollupjs.org/guide/en/
 - [ ] handler for "live" swagger/open-api specs
 - [ ] Move accept parsing into it's own library
 
diff --git a/babel.config.json b/babel.config.json
@@ -0,0 +1,26 @@
+{
+  "presets": [["@babel/preset-env"]],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    [
+      "@babel/transform-runtime",
+      {
+        "regenerator": true
+      }
+    ],
+    ["@babel/plugin-syntax-top-level-await"]
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        [
+          "@babel/plugin-transform-modules-commonjs",
+          {
+            "allowTopLevelThis": true
+          }
+        ],
+        "istanbul"
+      ]
+    }
+  }
+}
diff --git a/babel.config.js → browser-babel-config.js b/babel.config.js → browser-babel-config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export const babelConfig = {
   presets: [
     [
       '@babel/preset-env',
@@ -7,15 +7,12 @@ module.exports = {
           version: '3',
           proposals: true
         },
+        modules: false,
+        spec: true,
         useBuiltIns: 'entry',
         targets: {
           ie: '11',
-          browsers: [
-            'ie >= 11',
-            'last 2 versions',
-            '> 0.2%',
-            'maintained node versions'
-          ]
+          browsers: ['ie >= 11', 'last 2 versions', '> 0.2%']
         }
       }
     ]
@@ -30,13 +27,6 @@ module.exports = {
         regenerator: true
       }
     ],
-    'dynamic-import-webpack',
-    [
-      '@babel/plugin-transform-modules-commonjs',
-      {
-        allowTopLevelThis: true
-      }
-    ],
     ['@babel/plugin-syntax-top-level-await']
   ],
   env: {