feat: use rollup as build tool (#153)

* feat: use rollup as build tool

* feat: avoid polluting window and document of global

* chore: tweak .npmignore

* chore: update devDependencies

.gitignore

@@ -4,4 +4,7 @@ bower_components
 .vscode
 .DS_Store
 
+# ouput dir
 dist/
+lib/
+es/

.npmignore

@@ -1,10 +1,9 @@
 .github/
 example/
-test/
+src/
 tests/
-bower.json
 CONTRIBUTING.md
 index.html
 package-lock.json
 playwright.config.ts
-webpack.config.js
+rollup.config.js

CONTRIBUTING.md

@@ -6,12 +6,10 @@
 
 * Install deps with `npm install`
 
-* Watch *src* for changes and will then compile and minify into *dist* with `npm start`
+* Watch *src* for changes and will then compile into *dist*, *lib* and *es* with `npm start`
 
   * Make sure you have [prettier](https://prettier.io/) installed, and you are reformatting on save
 
-* Open Chrome `open http://localhost:3000/`
-
-* Run tests `http://localhost:3000/test/`
+* Run tests `npm run test`
 
 * Build distribution files with `npm run build`

package.json

@@ -2,11 +2,11 @@
   "name": "xhook",
   "version": "0.0.0-git-tag",
   "description": "Easily intercept and modify XHR request and response",
-  "browser": "dist/xhook.js",
-  "main": "src/main.js",
+  "main": "lib/main.js",
+  "module": "es/main.js",
   "scripts": {
-    "start": "webpack-dev-server --mode development",
-    "build": "webpack-cli --mode development && webpack-cli --mode production --output-filename xhook.min.js",
+    "start": "rollup -c -w",
+    "build": "rollup -c",
     "test": "playwright test",
     "test:server": "http-server --port 8080",
     "test:all": "testcafe all tests"
@@ -42,11 +42,10 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@playwright/test": "^1.23.0",
+    "@playwright/test": "^1.24.2",
     "http-server": "^14.1.1",
-    "webpack": "^4.42.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "rollup": "^2.77.2",
+    "rollup-plugin-terser": "^7.0.2"
   },
   "prettier": {}
 }

rollup.config.js

@@ -0,0 +1,45 @@
+import { defineConfig } from 'rollup';
+import { terser } from "rollup-plugin-terser";
+import { version } from './package.json'
+
+const year = new Date().getFullYear();
+
+const banner = `//XHook - v${version} - ` +
+  "https://github.com/jpillora/xhook\n" +
+  `//Jaime Pillora <[email protected]> - ` +
+  `MIT Copyright ${year}`
+
+const baseIifeConfig = {
+  banner,
+  format: 'iife',
+  name: 'xhook',
+  sourcemap: true,
+}
+
+export default defineConfig({
+  input: 'src/main.js',
+  output: [
+    {
+      ...baseIifeConfig,
+      file: 'dist/xhook.js',
+    },
+    {
+      ...baseIifeConfig,
+      file: 'dist/xhook.min.js',
+      plugins: [terser({
+        format: {
+          comments: /^(XHook|Jaime)/,
+        },
+      })]
+    },
+    {
+      dir: 'lib',
+      format: 'cjs',
+      exports: 'auto'
+    },
+    {
+      dir: 'es',
+      format: 'esm',
+    }
+  ]
+})

src/main.js

@@ -1,5 +1,4 @@
 import { EventEmitter } from "./misc/event-emitter";
-import { window } from "./misc/window";
 import headers from "./misc/headers";
 
 //patchable types
@@ -49,11 +48,5 @@ xhook.headers = headers.convert;
 //enable by default
 xhook.enable();
 
-//publicise (amd+commonjs+window)
-if (typeof define === "function" && define.amd) {
-  define("xhook", [], () => xhook);
-} else if (module && typeof module === "object" && module.exports) {
-  module.exports = { xhook };
-} else if (window) {
-  window.xhook = xhook;
-}
+
+export default xhook;

src/misc/events.js

@@ -1,4 +1,4 @@
-import { document } from "./window";
+import { documentRef } from "./window";
 
 export const UPLOAD_EVENTS = ["load", "loadend", "loadstart"];
 export const COMMON_EVENTS = ["progress", "abort", "error", "timeout"];
@@ -45,8 +45,8 @@ export const proxyEvents = function(events, src, dst) {
 
 //create fake event
 export const fakeEvent = function(type) {
-  if (document && document.createEventObject != null) {
-    const msieEventObject = document.createEventObject();
+  if (documentRef && documentRef.createEventObject != null) {
+    const msieEventObject = documentRef.createEventObject();
     msieEventObject.type = type;
     return msieEventObject;
   }

src/misc/window.js

@@ -26,5 +26,5 @@ if (
   msie = parseInt(RegExp.$1, 10);
 }
 
-export const window = result;
-export const document = result.document;
+export const windowRef = result;
+export const documentRef = result.document;

src/patch/fetch.js

@@ -1,10 +1,10 @@
-import { window } from "../misc/window";
+import { windowRef } from "../misc/window";
 import { mergeObjects } from "../misc/events";
 import hooks from "../misc/hooks";
 import formData from "./formdata";
 
 //browser's fetch
-const Native = window.fetch;
+const Native = windowRef.fetch;
 
 //xhook's fetch
 const Xhook = function(url, options) {
@@ -105,12 +105,12 @@ const Xhook = function(url, options) {
 export default {
   patch() {
     if (Native) {
-      window.fetch = Xhook;
+      windowRef.fetch = Xhook;
     }
   },
   unpatch() {
     if (Native) {
-      window.fetch = Native;
+      windowRef.fetch = Native;
     }
   },
   Native,

src/patch/formdata.js

@@ -1,4 +1,4 @@
-import { window } from "../misc/window";
+import { windowRef } from "../misc/window";
 import { slice } from "../misc/array";
 
 //note:
@@ -7,7 +7,7 @@ import { slice } from "../misc/array";
 // object is used on send
 
 //browser's FormData
-var Native = window.FormData;
+var Native = windowRef.FormData;
 
 //xhooks's FormData
 const Xhook = function(form) {
@@ -37,12 +37,12 @@ const Xhook = function(form) {
 export default {
   patch() {
     if (Native) {
-      window.FormData = Xhook;
+      windowRef.FormData = Xhook;
     }
   },
   unpatch() {
     if (Native) {
-      window.FormData = Native;
+      windowRef.FormData = Native;
     }
   },
   Native,

src/patch/xmlhttprequest.js

@@ -1,4 +1,4 @@
-import { window, msie } from "../misc/window";
+import { windowRef, msie } from "../misc/window";
 import {
   proxyEvents,
   mergeObjects,
@@ -12,7 +12,7 @@ import formData from "./formdata";
 const nullify = res => (res === undefined ? null : res);
 
 //browser's XMLHttpRequest
-const Native = window.XMLHttpRequest;
+const Native = windowRef.XMLHttpRequest;
 
 //xhook's XMLHttpRequest
 const Xhook = function() {
@@ -413,12 +413,12 @@ Xhook.DONE = 4;
 export default {
   patch() {
     if (Native) {
-      window.XMLHttpRequest = Xhook;
+      windowRef.XMLHttpRequest = Xhook;
     }
   },
   unpatch() {
     if (Native) {
-      window.XMLHttpRequest = Native;
+      windowRef.XMLHttpRequest = Native;
     }
   },
   Native,