Remove axios and change browser bundle name (#573)

* Update Error handler

* Remove axios

* Add cross-fetch

* Update tests to test on both node and dom

* Remove node polyfill

* Types cleanup

* Umd works in node and browser, removes cjs from repo

README.md

@@ -77,7 +77,7 @@ const client = new MeiliSearch({
 #### HTML Import <!-- omit in toc -->
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/meilisearch@latest/dist/bundles/meilisearch.browser.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/meilisearch@latest/dist/bundles/meilisearch.umd.js"></script>
 <script>
   const client = new MeiliSearch({
     host: 'http://127.0.0.1:7700',

examples/browser/index.html

@@ -11,7 +11,7 @@
     <div id="indexes"></div>
 </body>
 </html>
-<script src="../../dist/bundles/meilisearch.browser.js"></script>
+<script src="../../dist/bundles/meilisearch.umd.js"></script>
 <script>
   const client = new window.MeiliSearch({
     host: 'http://127.0.0.1:7700',

examples/node/search_example.js

@@ -1,4 +1,4 @@
-const MeiliSearch = require('../../dist/bundles/meilisearch.cjs.js')
+const MeiliSearch = require('../../dist/bundles/meilisearch.umd.js')
 const dataset = require('./small_movies.json')
 
 const config = {

examples/node/small_index.js

@@ -1,4 +1,4 @@
-const MeiliSearch = require('../../dist/bundles/meilisearch.cjs.js')
+const MeiliSearch = require('../../dist/bundles/meilisearch.umd.js')
 
 const config = {
   host: 'http://127.0.0.1:7700',

jest.config.js

@@ -1,8 +1,5 @@
 const config = {
-  preset: 'ts-jest',
   rootDir: '.',
-  testMatch: ['<rootDir>/tests/**/*.ts?(x)'],
-  testPathIgnorePatterns: ['meilisearch-test-utils'],
   coverageThreshold: {
     global: {
       'ts-jest': {
@@ -19,7 +16,22 @@ const config = {
     'jest-watch-typeahead/filename',
     'jest-watch-typeahead/testname',
   ],
-  testEnvironment: 'node',
+  projects: [
+    {
+      preset: 'ts-jest',
+      displayName: 'dom',
+      testEnvironment: 'jsdom',
+      testMatch: ['<rootDir>/tests/**/*.ts?(x)'],
+      testPathIgnorePatterns: ['meilisearch-test-utils'],
+    },
+    {
+      preset: 'ts-jest',
+      displayName: 'node',
+      testEnvironment: 'node',
+      testMatch: ['<rootDir>/tests/**/*.ts?(x)'],
+      testPathIgnorePatterns: ['meilisearch-test-utils'],
+    },
+  ],
 }
 
 module.exports = config

package.json

@@ -16,9 +16,9 @@
     "qdequele <[email protected]>"
   ],
   "license": "MIT",
-  "main": "./dist/bundles/meilisearch.cjs.js",
+  "main": "./dist/bundles/meilisearch.umd.js",
   "module": "./dist/bundles/meilisearch.esm.js",
-  "browser": "./dist/bundles/meilisearch.browser.js",
+  "browser": "./dist/bundles/meilisearch.umd.js",
   "typings": "./dist/types/types.d.ts",
   "types": "./dist/types/types.d.ts",
   "jsnext:main": "./dist/bundles/meilisearch.esm.js",
@@ -30,12 +30,13 @@
   "scripts": {
     "cleanup": "shx rm -rf dist/",
     "build": "yarn cleanup && rollup -c && rollup -c --environment NODE_ENV:production",
+    "watch": "yarn cleanup && rollup -c --watch",
     "postbuild": "yarn size && yarn typingsheader",
     "test": "jest --runInBand",
     "test:watch": "yarn test --watch",
     "test:coverage": "yarn test --coverage",
     "test:ci": "yarn test --ci",
-    "size": "node scripts/file-size ./dist/bundles/meilisearch.cjs.min.js ./dist/bundles/meilisearch.esm.min.js ./dist/bundles/meilisearch.browser.min.js",
+    "size": "node scripts/file-size ./dist/bundles/meilisearch.esm.min.js ./dist/bundles/meilisearch.umd.min.js",
     "style": "yarn lint",
     "style:fix": "yarn lint:fix",
     "lint": "eslint --ext .js,.ts,.tsx .",
@@ -53,9 +54,11 @@
     ]
   },
   "dependencies": {
-    "axios": "^0.20.0"
+    "cross-fetch": "^3.0.5"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.11.0",
+    "@rollup/plugin-babel": "^5.2.0",
     "@rollup/plugin-commonjs": "15.0.0",
     "@rollup/plugin-json": "^4.0.2",
     "@rollup/plugin-node-resolve": "9.0.0",

rollup.config.js

@@ -5,6 +5,7 @@ import json from '@rollup/plugin-json'
 import typescript from 'rollup-plugin-typescript2'
 import pkg from './package.json'
 import { terser } from 'rollup-plugin-terser'
+import { babel } from '@rollup/plugin-babel'
 
 function getOutputFileName(fileName, isProd = false) {
   return isProd ? fileName.replace(/\.js$/, '.min.js') : fileName
@@ -27,9 +28,10 @@ const PLUGINS = [
 ]
 
 module.exports = [
-  // browser-friendly IIFE build
+  // browser-friendly UMD build
   {
     input: 'src/meilisearch.ts', // directory to transpilation of typescript
+    external: ['cross-fetch', 'cross-fetch/polyfill'],
     output: {
       name: LIB_NAME,
       file: getOutputFileName(
@@ -39,20 +41,33 @@ module.exports = [
       ),
       format: 'umd',
       sourcemap: env === 'production', // create sourcemap for error reporting in production mode
-      globals: {
-        axios: 'axios',
-      },
     },
     plugins: [
       ...PLUGINS,
+      babel({
+        babelrc: false,
+        extensions: ['.ts'],
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              modules: false,
+              targets: {
+                browsers: ['last 2 versions', 'ie >= 11'],
+              },
+            },
+          ],
+        ],
+      }),
       nodeResolve({
         mainFields: ['jsnext', 'main'],
         preferBuiltins: true,
         browser: true,
       }),
       commonjs({
-        include: 'node_modules/axios/**',
+        include: ['node_modules/**'],
       }),
+      // nodePolyfills
       json(),
       env === 'production' ? terser() : {}, // will minify the file in production mode
     ],
@@ -66,18 +81,8 @@ module.exports = [
   // `file` and `format` for each target)
   {
     input: 'src/meilisearch.ts',
-    external: ['axios'],
+    external: ['cross-fetch', 'cross-fetch/polyfill'],
     output: [
-      {
-        file: getOutputFileName(
-          // will add .min. in filename if in production env
-          resolve(ROOT, pkg.main),
-          env === 'production'
-        ),
-        exports: 'default',
-        format: 'cjs',
-        sourcemap: env === 'production', // create sourcemap for error reporting in production mode
-      },
       {
         file: getOutputFileName(
           resolve(ROOT, pkg.module),

src/errors/http-error-handler.ts

@@ -1,15 +1,25 @@
-import { AxiosError } from 'axios'
-import MeiliSearchApiError from './meilisearch-api-error'
 import MeiliSearchCommunicationError from './meilisearch-communication-error'
+import MeiliSearchApiError from './meilisearch-api-error'
+import * as Types from '../types'
+
+async function httpResponseErrorHandler(response: Response): Promise<Response> {
+  if (!response.ok) {
+    let err
+    try {
+      err = await response.json()
+    } catch (e) {
+      throw new MeiliSearchCommunicationError(response.statusText, response)
+    }
+    throw new MeiliSearchApiError(err, response.status)
+  }
+  return response
+}
 
-function httpErrorHandler(e: AxiosError, cachedStack?: string): void {
-  if (e.response !== undefined) {
-    throw new MeiliSearchApiError(e, cachedStack)
-  } else if (e.isAxiosError === true) {
-    throw new MeiliSearchCommunicationError(e.message)
-  } else {
-    throw e
+function httpErrorHandler(response: Types.FetchError): Promise<void> {
+  if (response.type !== 'MeiliSearchApiError') {
+    throw new MeiliSearchCommunicationError(response.message, response)
   }
+  throw response
 }
 
-export { httpErrorHandler }
+export { httpResponseErrorHandler, httpErrorHandler }

src/errors/meilisearch-api-error.ts

@@ -1,49 +1,26 @@
-import { AxiosError } from 'axios'
 import * as Types from '../types'
 
-const MeiliSearchApiError: Types.MeiliSearchApiErrorConstructor = class
-  extends Error
-  implements Types.MeiliSearchApiErrorInterface {
+const MeiliSearchApiError: Types.MSApiErrorConstructor = class extends Error
+  implements Types.MSApiError {
+  httpStatus: number
   response?: Types.MeiliSearchApiErrorResponse
   errorCode?: string
   errorType?: string
   errorLink?: string
   stack?: string
   type: string
 
-  constructor(error: AxiosError, cachedStack?: string) {
+  constructor(error: Types.MSApiError, status: number) {
     super(error.message)
-
     this.type = 'MeiliSearchApiError'
     this.name = 'MeiliSearchApiError'
 
-    // Fetch the native error message but add our application name in front of it.
-    // This means slicing the "Error" string at the start of the message.
-    if (error.response !== undefined) {
-      this.response = {
-        status: error.response.status,
-        statusText: error.response.statusText,
-        path: error.response.config.url,
-        method: error.response.config.method,
-      }
-
-      // If a custom message was sent back by our API
-      // We change the error message to be more explicit
-      if (error.response.data?.message !== undefined) {
-        this.errorCode = error.response.data.errorCode
-        this.errorType = error.response.data.errorType
-        this.errorLink = error.response.data.errorLink
-        this.message = error.response.data.message
-      }
-    }
-
-    // use cached Stack on error object to keep the call stack
-    if (cachedStack !== undefined && error.stack !== undefined) {
-      this.stack = `${this.name}: ${this.message}\n${cachedStack
-        .split('\n')
-        .slice(1)
-        .join('\n')}`
-    }
+    this.errorCode = error.errorCode
+    this.errorType = error.errorType
+    this.errorLink = error.errorLink
+    this.message = error.message
+    this.httpStatus = status
+    Error.captureStackTrace(this, MeiliSearchApiError)
   }
 }
 export default MeiliSearchApiError

src/errors/meilisearch-communication-error.ts

@@ -1,9 +1,25 @@
+import 'cross-fetch/polyfill'
+import * as Types from '../types'
+
 class MeiliSearchCommunicationError extends Error {
   type: string
-  constructor(message: string) {
+  statusCode?: number
+  errno?: string
+  code?: string
+
+  constructor(message: string, body: Response | Types.FetchError) {
     super(message)
     this.name = 'MeiliSearchCommunicationError'
     this.type = 'MeiliSearchCommunicationError'
+    if (body instanceof Response) {
+      this.message = body.statusText
+      this.statusCode = body.status
+    }
+    if (body instanceof Error) {
+      this.errno = body.errno
+      this.code = body.code
+    }
+
     Error.captureStackTrace(this, MeiliSearchCommunicationError)
   }
 }