feat: add TypeScript typings and Prettier

rufman · rufman · commit 4c91b758e80f · 2019-09-18T22:14:54.000-07:00
- Add TypeScript type definitions.
- Add Prettier for code formatting.
- Update dependencies
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintrc b/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "extends": "airbnb-base",
+  "extends": ["airbnb-base", "plugin:prettier/recommended"],
   "env": {
     "browser": true
   },
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "arrowParens": "always",
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all"
+}
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ],
+};
diff --git a/fetch-script.d.ts b/fetch-script.d.ts
@@ -0,0 +1,10 @@
+declare module 'fetch-script' {
+  interface Script {
+    url: string;
+    options: RequestInit;
+  }
+
+  function fetchScript(scripts: Script[], promise?: Promise<void>): Promise<void>;
+
+  export = fetchScript;
+}
diff --git a/jest.config.js b/jest.config.js
@@ -8,15 +8,8 @@ module.exports = {
       statements: 100,
     },
   },
-  coverageReporters: [
-    'html',
-  ],
+  coverageReporters: ['html'],
   moduleFileExtensions: ['js'],
-  roots: [
-    '<rootDir>/test',
-    '<rootDir>/src',
-  ],
-  setupFiles: [
-    '<rootDir>/test/test-setup.js',
-  ],
+  roots: ['<rootDir>/test', '<rootDir>/src'],
+  setupFiles: ['<rootDir>/test/test-setup.js'],
 };
diff --git a/package.json b/package.json
@@ -1,10 +1,11 @@
 {
   "name": "fetch-script",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Async loading of scripts using the Fetch API",
   "main": "lib/fetch-script.js",
   "unpkg": "dist/fetch-script.js",
   "module": "es/fetch-script.js",
+  "typings": "fetch-script.d.ts",
   "scripts": {
     "build:commonjs": "cross-env NODE_ENV=cjs rollup -c -o lib/fetch-script.js",
     "build:es": "cross-env BABEL_ENV=es NODE_ENV=es rollup -c -o es/fetch-script.js",
@@ -30,25 +31,30 @@
     "src"
   ],
   "devDependencies": {
-    "@babel/core": "^7.1.0",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/core": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^24.9.0",
     "babel-preset-env": "^1.7.0",
-    "babel-preset-es2015-rollup": "^3.0.0",
-    "cross-env": "^5.2.0",
-    "eslint": "^5.6.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "jest": "^23.6.0",
-    "jest-fetch-mock": "^1.6.6",
-    "jsdom": "^12.0.0",
-    "regenerator-runtime": "^0.12.1",
-    "rollup": "^0.66.2",
-    "rollup-plugin-babel": "^4.0.3",
-    "rollup-plugin-commonjs": "^9.1.8",
-    "rollup-plugin-node-resolve": "^3.4.0",
-    "rollup-plugin-uglify": "^6.0.0",
+    "cross-env": "^6.0.0",
+    "eslint": "^6.4.0",
+    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-prettier": "^3.1.1",
+    "jest": "^24.9.0",
+    "jest-fetch-mock": "1.6.6",
+    "jsdom": "^15.1.1",
+    "prettier": "^1.18.2",
+    "rollup": "^1.21.4",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-terser": "^5.1.2",
     "whatwg-fetch": "^3.0.0"
+  },
+  "resolutions": {
+    "mixin-deep": "1.3.2",
+    "set-value": "2.0.1"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,7 +1,7 @@
 import babel from 'rollup-plugin-babel';
 import commonjs from 'rollup-plugin-commonjs';
 import nodeResolve from 'rollup-plugin-node-resolve';
-import { uglify } from 'rollup-plugin-uglify';
+import { terser } from 'rollup-plugin-terser';
 
 const env = process.env.NODE_ENV;
 
@@ -16,10 +16,7 @@ if (env === 'es' || env === 'cjs') {
     format: env,
     indent: false,
   };
-  config.plugins.push(
-    babel(),
-    commonjs(),
-  );
+  config.plugins.push(babel(), commonjs());
 }
 
 if (env === 'development' || env === 'production') {
@@ -41,14 +38,7 @@ if (env === 'development' || env === 'production') {
 }
 
 if (env === 'production') {
-  config.plugins.push(uglify({
-    compress: {
-      pure_getters: true,
-      unsafe: true,
-      unsafe_comps: true,
-      warnings: false,
-    },
-  }));
+  config.plugins.push(terser());
 }
 
 export default config;
diff --git a/src/index.js b/src/index.js
@@ -12,13 +12,21 @@ function contentLoadedEvent() {
  */
 function fetchInject(scripts, promise) {
   if (!scripts) {
-    return Promise.reject(new ReferenceError("Failed to execute 'fetchInject': 1 argument required but only 0 present."));
+    return Promise.reject(
+      new ReferenceError(
+        "Failed to execute 'fetchInject': 1 argument required but only 0 present.",
+      ),
+    );
   }
   if (scripts && !Array.isArray(scripts)) {
-    return Promise.reject(new TypeError("Failed to execute 'fetchInject': argument 1 must be of type 'Array'."));
+    return Promise.reject(
+      new TypeError("Failed to execute 'fetchInject': argument 1 must be of type 'Array'."),
+    );
   }
   if (promise && promise.constructor !== Promise) {
-    return Promise.reject(new TypeError("Failed to execute 'fetchInject': argument 2 must be of type 'Promise'."));
+    return Promise.reject(
+      new TypeError("Failed to execute 'fetchInject': argument 2 must be of type 'Promise'."),
+    );
   }
 
   const resources = [];
@@ -33,25 +41,38 @@ function fetchInject(scripts, promise) {
     }
     if (options && options.mode === 'no-cors' && options.method === 'GET') {
       // can not use fetch, inject the script into the head
-      deferreds.push(new Promise((resolve, reject) => {
-        headCors(window, document, 'script', url, () => {
-          contentLoadedEvent();
-          resolve();
-        }, () => {
-          reject(new Error(networkError));
-        });
-      }));
+      deferreds.push(
+        new Promise((resolve, reject) => {
+          headCors(
+            window,
+            document,
+            'script',
+            url,
+            () => {
+              contentLoadedEvent();
+              resolve();
+            },
+            () => {
+              reject(new Error(networkError));
+            },
+          );
+        }),
+      );
     } else {
       deferreds.push(
-        window.fetch(url, options)
+        window
+          .fetch(url, options)
           .then((res) => {
             if (!res.ok) {
               throw Error(networkError);
             }
             return [res.clone().text(), res.blob()];
           })
-          .then((promises) => Promise.all(promises)
-            .then((resolved) => resources.push({ text: resolved[0], blob: resolved[1] }))),
+          .then((promises) =>
+            Promise.all(promises).then((resolved) =>
+              resources.push({ text: resolved[0], blob: resolved[1] }),
+            ),
+          ),
       );
     }
   });
diff --git a/src/injectors.js b/src/injectors.js
@@ -1,4 +1,16 @@
-export const head = (function(w,d,t,o,r,c,s){c=d.createElement(t),s=d.getElementsByTagName(t)[0];c.appendChild(d.createTextNode(o.text));c.onload=r(o);s?s.parentNode.insertBefore(c,s):d.appendChild(c)}); // eslint-disable-line
+/* eslint-disable */
 
-export const headCors = (function(w,d,t,u,r,e,c,s){c=d.createElement(t),s=d.head.getElementsByTagName(t)[0];c.src=u;c.onload=r;c.onerror=e;s?s.parentNode.insertBefore(c,s):d.head.appendChild(c) // eslint-disable-line
-});
+export const head = function(w, d, t, o, r, c, s) {
+  (c = d.createElement(t)), (s = d.getElementsByTagName(t)[0]);
+  c.appendChild(d.createTextNode(o.text));
+  c.onload = r(o);
+  s ? s.parentNode.insertBefore(c, s) : d.appendChild(c);
+};
+
+export const headCors = function(w, d, t, u, r, e, c, s) {
+  (c = d.createElement(t)), (s = d.head.getElementsByTagName(t)[0]);
+  c.src = u;
+  c.onload = r;
+  c.onerror = e;
+  s ? s.parentNode.insertBefore(c, s) : d.head.appendChild(c);
+};
diff --git a/test/index.spec.js b/test/index.spec.js
@@ -26,12 +26,13 @@ describe('fetchInject', () => {
       injectedScriptElement.dispatchEvent(loadEvent);
     }, 10);
 
-    fetchInject([{
-      url: `//${scriptName}`,
-      options: { method: 'GET', mode: 'no-cors' },
-    }]).then(() => {
-      expect(document.getElementsByTagName('script')[0].src)
-        .toEqual(`http://${scriptName}/`);
+    fetchInject([
+      {
+        url: `//${scriptName}`,
+        options: { method: 'GET', mode: 'no-cors' },
+      },
+    ]).then(() => {
+      expect(document.getElementsByTagName('script')[0].src).toEqual(`http://${scriptName}/`);
       expect(contentloadedListener).toHaveBeenCalledWith(DOMContentLoadedEvent);
       done();
     });
@@ -48,12 +49,13 @@ describe('fetchInject', () => {
       injectedScriptElement.dispatchEvent(loadErrorEvent);
     }, 10);
 
-    fetchInject([{
-      url: `//${scriptName}`,
-      options: { method: 'GET', mode: 'no-cors' },
-    }]).catch((err) => {
-      expect(document.getElementsByTagName('script')[0].src)
-        .toEqual(`http://${scriptName}/`);
+    fetchInject([
+      {
+        url: `//${scriptName}`,
+        options: { method: 'GET', mode: 'no-cors' },
+      },
+    ]).catch((err) => {
+      expect(document.getElementsByTagName('script')[0].src).toEqual(`http://${scriptName}/`);
       expect(contentloadedListener).not.toHaveBeenCalled();
       expect(err.message).toEqual(networkError);
       done();
@@ -63,10 +65,12 @@ describe('fetchInject', () => {
   test('should fetch a script in cors mode', async (done) => {
     fetch.mockResponseOnce(scriptText);
 
-    fetchInject([{
-      url: `//${scriptName}`,
-      options: { method: 'GET', mode: 'cors' },
-    }]).then((res) => {
+    fetchInject([
+      {
+        url: `//${scriptName}`,
+        options: { method: 'GET', mode: 'cors' },
+      },
+    ]).then((res) => {
       expect(res[0].text).toEqual(scriptText);
       expect(fetch.mock.calls.length).toEqual(1);
       done();
@@ -76,9 +80,11 @@ describe('fetchInject', () => {
   test('should fetch without any options', async (done) => {
     fetch.mockResponseOnce(scriptText);
 
-    fetchInject([{
-      url: `//${scriptName}`,
-    }]).then((res) => {
+    fetchInject([
+      {
+        url: `//${scriptName}`,
+      },
+    ]).then((res) => {
       expect(res[0].text).toEqual(scriptText);
       expect(fetch.mock.calls.length).toEqual(1);
       done();
@@ -115,33 +121,36 @@ describe('fetchInject', () => {
   test('should fetch css in cors mode', async (done) => {
     fetch.mockResponseOnce(new Blob([cssText], { type: 'text/css' }));
 
-    fetchInject([{
-      url: `//${cssName}`,
-      options: { method: 'GET', mode: 'cors' },
-    }]).then((res) => {
+    fetchInject([
+      {
+        url: `//${cssName}`,
+        options: { method: 'GET', mode: 'cors' },
+      },
+    ]).then((res) => {
       expect(res[0].text).toEqual(cssText);
       expect(fetch.mock.calls.length).toEqual(1);
       done();
     });
   });
 
   test('should return an error for a failed fetch in cors mode', async (done) => {
-    fetch.mockResponses([
-      scriptText,
-      { status: 500 },
-    ]);
-
-    fetchInject([{
-      url: `//${scriptName}`,
-      options: { method: 'GET', mode: 'cors' },
-    }]).catch((err) => {
+    fetch.mockResponses([scriptText, { status: 500 }]);
+
+    fetchInject([
+      {
+        url: `//${scriptName}`,
+        options: { method: 'GET', mode: 'cors' },
+      },
+    ]).catch((err) => {
       expect(err.message).toEqual(networkError);
       done();
     });
   });
 
   test('should reject promise, if no scripts are defined', () => {
-    expect(fetchInject()).rejects.toThrow("Failed to execute 'fetchInject': 1 argument required but only 0 present.");
+    expect(fetchInject()).rejects.toThrow(
+      "Failed to execute 'fetchInject': 1 argument required but only 0 present.",
+    );
   });
 
   test('should reject promise, if scripts is not an array', () => {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "extends": "airbnb-base",`
	`2`	`+ "extends": ["airbnb-base", "plugin:prettier/recommended"],`
`3`	`3`	`"env": {`
`4`	`4`	`"browser": true`
`5`	`5`	`},`