build: use rollup to build esm, cjs, and browser bundles

Author: MichaelSolati

.babelrc

@@ -6,4 +6,4 @@
     "@babel/plugin-proposal-object-rest-spread",
     "@babel/transform-async-to-generator"
   ]
-}
+}

package-lock.json

@@ -7,20 +7,17 @@
     "test:unit:watch": "MOCK_AXIOS=true jest ./tests/unit --watch",
     "test:integration": "jest ./tests/integration/",
     "test:integration:watch": "jest ./tests/integration/ --watch",
-    "build": "npm run build:dist && npm run build:lib",
-    "build:dist": "webpack --mode production",
-    "build:lib": "NODE_ENV=production babel src --out-dir lib",
+    "build": "rm -rf ./dist && rollup -c",
     "prepublish": "in-publish && npm run build || not-in-publish",
+    "prepare": "npm run build",
     "lint": "standard ./src",
     "semantic-release": "semantic-release",
     "server": "node ./tests/integration/mockServer.js",
     "server:dev": "nodemon ./tests/integration/mockServer.js"
   },
-  "main": "lib/typeform.js",
-  "directories": {
-    "lib": "lib",
-    "test": "tests"
-  },
+  "main": "dist/index.cjs.js",
+  "browser": "dist/typeform-api.js",
+  "module": "dist/index.esm.js",
   "engines": {
     "node": ">=8"
   },
@@ -42,6 +39,14 @@
     "url": "https://github.com/Typeform/js-api-client/issues"
   },
   "homepage": "https://github.com/Typeform/js-api-client#readme",
+  "files": [
+    "dist/**",
+    "LICENSE.md",
+    "package.json",
+    "package-lock.json",
+    "README.md",
+    "yarn.lock"
+  ],
   "dependencies": {
     "axios": "^0.19.0"
   },
@@ -70,10 +75,13 @@
     "json-server": "^0.14.0",
     "lint-staged": "^7.0.4",
     "nodemon": "^1.18.3",
+    "rollup": "^1.20.0",
+    "rollup-plugin-commonjs": "^10.0.2",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-terser": "^5.1.1",
     "semantic-release": "^15.13.19",
-    "standard": "^11.0.1",
-    "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.1"
+    "standard": "^11.0.1"
   },
   "lint-staged": {
     "*.js": [

package.json

@@ -0,0 +1,56 @@
+import commonjs from 'rollup-plugin-commonjs'
+import json from 'rollup-plugin-json'
+import resolveModule from 'rollup-plugin-node-resolve'
+import pkg from './package.json'
+import { terser } from 'rollup-plugin-terser'
+
+const onwarn = (warning, rollupWarn) => {
+  if (warning.code !== 'CIRCULAR_DEPENDENCY') {
+    rollupWarn(warning)
+  }
+}
+
+const plugins = [
+  commonjs({
+    include: ['node_modules/**']
+  }),
+  json()
+]
+
+export default [{
+  input: 'src/index.js',
+  output: [{
+    file: pkg.main,
+    format: 'cjs',
+    exports: 'named'
+  }, {
+    file: pkg.module,
+    format: 'es',
+    exports: 'named'
+  }],
+  onwarn,
+  plugins: [
+    resolveModule({
+      mainFields: ['main', 'module'],
+      preferBuiltins: true
+    }),
+    ...plugins
+  ],
+  external: ['http', 'https', 'url', 'zlib', 'assert', 'stream', 'tty', 'util', 'os']
+}, {
+  input: 'src/index.js',
+  output: {
+    file: pkg.browser,
+    format: 'umd',
+    name: 'typeformAPI',
+    exports: 'named'
+  },
+  onwarn,
+  plugins: [
+    resolveModule({
+      mainFields: ['browser']
+    }),
+    terser(),
+    ...plugins
+  ]
+}]

rollup.config.js

@@ -1,6 +1,4 @@
-export default http => new Form(http)
-
-class Form {
+export class Forms {
   constructor (_http) {
     this._http = _http
     this._messages = new FormMessages(_http)

src/forms.js

@@ -1,6 +1,4 @@
-export default http => new Images(http)
-
-class Images {
+export class Images {
   constructor (_http) {
     this._http = _http
   }

src/images.js

@@ -0,0 +1,26 @@
+import { clientConstructor } from './create-client'
+import { Forms } from './forms'
+import { Images } from './images'
+import { Teams } from './teams'
+import { Themes } from './themes'
+import { Workspaces } from './workspaces'
+import { Responses } from './responses'
+import { Webhooks } from './webhooks'
+
+export const createClient = (args = {}) => {
+  if (!args.token) {
+    throw new Error('Token is missing')
+  }
+
+  const http = clientConstructor(args)
+
+  return {
+    forms: new Forms(http),
+    images: new Images(http),
+    teams: new Teams(http),
+    themes: new Themes(http),
+    workspaces: new Workspaces(http),
+    responses: new Responses(http),
+    webhooks: new Webhooks(http)
+  }
+}

src/index.js

@@ -1,6 +1,4 @@
-export default http => new Responses(http)
-
-class Responses {
+export class Responses {
   constructor (_http) {
     this._http = _http
   }

src/responses.js

@@ -1,8 +1,6 @@
 import { isMemberPropValid, createMemberPatchQuery } from './utils'
 
-export default http => new Teams(http)
-
-class Teams {
+export class Teams {
   constructor (_http) {
     this._http = _http
   }

src/teams.js

@@ -1,8 +1,6 @@
 import { FONTS_AVAILABLE } from './constants'
 
-export default http => new Themes(http)
-
-class Themes {
+export class Themes {
   constructor (_http) {
     this._http = _http
   }