Convert to Typescript (#15)

* WIP: add types

* add types

* added types in testcases

* add more types :)

* refactor

* add vue types

* Some more refactoring

* Improve coverage

Author: rishabhrpg

.babelrc

@@ -6,7 +6,7 @@
 [![license](https://badgen.net/github/license/ankurk91/vue-web-storage)](https://yarnpkg.com/en/package/vue-web-storage)
 [![tests](https://github.com/ankurk91/vue-web-storage/workflows/tests/badge.svg)](https://github.com/ankurk91/vue-web-storage/actions)
 [![codecov](https://codecov.io/gh/ankurk91/vue-web-storage/branch/master/graph/badge.svg)](https://codecov.io/gh/ankurk91/vue-web-storage)
-![ts](https://badgen.net/badge/ready/TypeScript/blue)
+![ts](https://badgen.net/badge/Built%20With/TypeScript/blue)
 
 A minimalistic Vue.js plugin for web storage
 

README.md

@@ -1,4 +1,4 @@
 // suppress all those red colored errors
-window.console.error = (e) => {
+window.console.error = (e: Error) => {
   e instanceof Error && console.log(e.message)
 };

__test__/setup.js __test__/setup.ts

@@ -1,15 +1,15 @@
 import StorageWithEvents from '../src/storageWithEvents';
 
 // js-dom does not support `StorageEvent`
-const mockStorageEvent = (key) => {
-  let event = new Event('storage');
+const mockStorageEvent = (key: string) => {
+  let event: any = new Event('storage');
   event.key = key;
   window.dispatchEvent(event)
 };
 
 describe('Storage events', () => {
 
-  let ls;
+  let ls: StorageWithEvents;
 
   beforeEach(() => {
     ls = new StorageWithEvents(
@@ -74,7 +74,6 @@ describe('Storage events', () => {
     mockStorageEvent('app_logged_out');
     expect(mockFn).not.toHaveBeenCalled();
     expect(mockFn2).not.toHaveBeenCalled();
-
   });
 
   test('clear events for all keys', () => {
@@ -91,7 +90,6 @@ describe('Storage events', () => {
     mockStorageEvent('app_logged_in');
     expect(mockFn2).not.toHaveBeenCalled();
     expect(ls.events.listeners()['app_logged_in']).not.toBeDefined();
-
   });
 
 });

__test__/storage-events.test.js __test__/storage-events.test.ts

@@ -1,134 +1,141 @@
-import Storage from '../src/storage';
+import WebStorage from '../src/webStorage';
 
 describe('Storage class', () => {
 
-  let ls;
+  let ws: WebStorage;
 
   beforeEach(() => {
-    ls = new Storage(
+    ws = new WebStorage(
       'app_',
       'local'
     );
   });
 
   afterEach(() => {
-    ls.clear(true);
+    ws.clear(true);
   });
 
   test('accepts prefix', () => {
-    expect(ls.prefix).toEqual('app_');
+    expect(ws.prefix).toEqual('app_');
   });
 
   test('can store strings', () => {
     let key = 'name';
     let value = 'john';
 
-    ls.set(key, value);
-    expect(ls.get(key)).toBe(value)
+    ws.set(key, value);
+    expect(ws.get(key)).toBe(value)
   });
 
   test('can store boolean', () => {
     let key = 'flag';
     let value = true;
 
-    ls.set(key, value);
-    expect(ls.get(key)).toBe(value)
+    ws.set(key, value);
+    expect(ws.get(key)).toBe(value)
   });
 
   test('can store objects', () => {
     let key = 'cat';
     let value = {id: 12, name: 'kitten'};
 
-    ls.set(key, value);
-    expect(ls.get(key)).toEqual(value)
+    ws.set(key, value);
+    expect(ws.get(key)).toEqual(value)
   });
 
 
   test('can store arrays', () => {
     let key = 'ids';
     let value = [123, 456, 789];
 
-    ls.set(key, value);
-    expect(ls.get(key)).toEqual(value)
+    ws.set(key, value);
+    expect(ws.get(key)).toEqual(value)
   });
 
   test('can store array of objects', () => {
     let key = 'cats';
     let value = [{id: 1, name: 'kitten'}, {id: 2, name: 'mum'}];
 
-    ls.set(key, value);
-    expect(ls.get(key)).toEqual(value)
+    ws.set(key, value);
+    expect(ws.get(key)).toEqual(value)
   });
 
   test('can store null', () => {
     let key = 'nullable';
     let value = null;
 
-    ls.set(key, value);
-    expect(ls.get(key)).toBe(value)
+    ws.set(key, value);
+    expect(ws.get(key)).toBe(value)
   });
 
   test('can store numbers', () => {
     let key = 'age';
     let value = 26;
 
-    ls.set(key, value);
-    expect(ls.get(key)).toBe(value)
+    ws.set(key, value);
+    expect(ws.get(key)).toBe(value)
   });
 
   test('can remove stored key', () => {
     let key = 'age';
     let value = 26;
 
-    ls.set(key, value);
-    ls.remove(key);
-    expect(ls.get(key)).toBe(null)
+    ws.set(key, value);
+    ws.remove(key);
+    expect(ws.get(key)).toBe(null)
   });
 
   test('can empty storage', () => {
-    ls.set('name', 'jest');
-    ls.set('age', 26);
-    ls.clear();
+    ws.set('name', 'jest');
+    ws.set('age', 26);
+    ws.clear();
 
-    expect(ls.get('age')).toBe(null);
-    expect(ls.get('name')).toBe(null);
-    expect(ls.length()).toEqual(0)
+    expect(ws.get('age')).toBe(null);
+    expect(ws.get('name')).toBe(null);
+    expect(ws.length()).toEqual(0)
   });
 
   test('can get stored key names', () => {
-    ls.set('name', 'jest');
-    ls.set('age', 26);
+    ws.set('name', 'jest');
+    ws.set('age', 26);
 
-    expect(ls.keys()).toEqual(['name', 'age'])
+    expect(ws.keys()).toEqual(['name', 'age'])
   });
 
   test('can check if key exits', () => {
-    ls.set('name', 'jest');
+    ws.set('name', 'jest');
 
-    expect(ls.hasKey('name')).toBe(true);
-    expect(ls.hasKey('unknown')).toBe(false)
+    expect(ws.hasKey('name')).toBe(true);
+    expect(ws.hasKey('unknown')).toBe(false)
   });
 
   test('returns stored value when fail to parse', () => {
     let value = 'was_stored_by_other_library_without_json_stringify';
-    window.localStorage.setItem(ls.prefix + 'alien', value);
+    window.localStorage.setItem(ws.prefix + 'alien', value);
     let spy = jest.spyOn(console, 'error');
 
-    expect(ls.get('alien')).toEqual(value);
+    expect(ws.get('alien')).toEqual(value);
     expect(spy).toHaveBeenCalled();
     spy.mockReset();
   });
 
   test('returns default value when key does not exists in storage', () => {
-    let value = ls.get('keyThatDoesNotExists', 'defaultValue');
+    let value = ws.get('keyThatDoesNotExists', 'defaultValue');
 
     expect(value).toEqual('defaultValue');
   });
 
   test('returns null when key does not exists in storage and default parameter not set', () => {
-    let value = ls.get('keyThatDoesNotExists');
+    let value = ws.get('keyThatDoesNotExists');
 
     expect(value).toEqual(null);
   });
 
+
+  test('it throw error for unknown driver type', () => {
+    expect(() => {
+      // @ts-ignore
+      new WebStorage('app_', 'alien');
+    }).toThrowError(/Unknown driver/);
+  });
 });

__test__/storage.test.js __test__/storage.test.ts

@@ -1,5 +1,6 @@
-import {Storage, Plugin as VueWebStorage} from '../src/index';
+import {WebStorage, Plugin as VueWebStorage} from '../src';
 // Lets import full build
+// @ts-ignore
 import Vue from 'vue/dist/vue.common';
 
 Vue.config.productionTip = false;
@@ -23,7 +24,7 @@ describe('Vue Storage plugin', () => {
       prefix: 'vue_'
     });
 
-    expect(localVue.$localStorage).toBeInstanceOf(Storage);
+    expect(localVue.$localStorage).toBeInstanceOf(WebStorage);
     expect(localVue.$localStorage.prefix).toEqual('vue_');
   });
 
@@ -38,8 +39,8 @@ describe('Vue Storage plugin', () => {
     expect(localVue.$sessionStorage.prefix).toEqual('app_');
 
     // Both names should be registered
-    expect(localVue.$localStorage).toBeInstanceOf(Storage);
-    expect(localVue.$sessionStorage).toBeInstanceOf(Storage);
+    expect(localVue.$localStorage).toBeInstanceOf(WebStorage);
+    expect(localVue.$sessionStorage).toBeInstanceOf(WebStorage);
   });
 
 });

__test__/vue-storage.test.js __test__/vue-storage.test.ts

@@ -0,0 +1,9 @@
+module.exports = {
+  collectCoverage: true,
+  testURL: "http://localhost",
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+}

jest.config.js

@@ -2,13 +2,12 @@
   "name": "vue-web-storage",
   "version": "4.0.3",
   "description": "Vue.js plugin for localStorage and sessionStorage",
-  "main": "dist/vue-web-storage.js",
-  "browser": "dist/vue-web-storage.min.js",
-  "typings": "types/main.d.ts",
+  "main": "dist/index.umd.js",
+  "module": "dist/esm/index.js",
+  "typings": "dist/types/index.d.ts",
   "files": [
     "src",
-    "dist",
-    "types"
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -29,18 +28,18 @@
   "scripts": {
     "test": "jest",
     "test:watch": "yarn run test --watch --notify",
-    "build": "cross-env NODE_ENV=production webpack --progress --mode production",
+    "build:esm": "tsc -m es6 --outDir ./dist/esm",
+    "build:umd": "cross-env NODE_ENV=production webpack --mode production",
+    "build": "npm run build:umd && npm run build:esm",
     "prepublishOnly": "yarn run test && yarn run build"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/plugin-transform-object-assign": "^7.8.3",
-    "@babel/preset-env": "^7.9.6",
-    "babel-jest": "^26.0.1",
-    "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.2",
     "jest": "^26.0.1",
+    "ts-jest": "^26.4.1",
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.0.3",
     "unminified-webpack-plugin": "^2.0.0",
     "vue": "^2.6.11",
     "webpack": "^4.43.0",
@@ -49,23 +48,6 @@
   "peerDependencies": {
     "vue": "^2.0.0"
   },
-  "jest": {
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "jsx",
-      "node",
-      "vue"
-    ],
-    "setupFiles": [
-      "<rootDir>/__test__/setup.js"
-    ],
-    "transform": {
-      "^.+\\.js$": "babel-jest"
-    },
-    "testURL": "http://localhost",
-    "collectCoverage": true
-  },
   "engines": {
     "node": ">=6.9.0",
     "npm": ">=3.10.0"