Typescript migration

.eslintignore

@@ -1 +1,3 @@
-/dist/**/*.js
+/dist/**/*.js
+/examples
+/coverage

.eslintrc

@@ -0,0 +1,34 @@
+{
+  "env": {
+    "jest": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "overrides": [
+    {
+      "files": ["src"],
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      }
+    },
+    {
+      "files": ["./*.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    }
+  ]
+}

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "bracketSameLine": true,
+  "tabWidth": 2,
+  "printWidth": 80
+}

.swcrc

@@ -2,7 +2,7 @@
   "jsc": {
     "target": "es2015",
     "parser": {
-      "syntax": "ecmascript",
+      "syntax": "typescript",
       "jsx": true
     },
     "transform": {

README.md

@@ -13,13 +13,13 @@ npm install killa
 To use directly vanilla minified version in the browser:
 
 ```html
-<script src="https://unpkg.com/killa@0.3.0/dist/killa.min.js"></script>
+<script src="https://unpkg.com/killa@1.0.0/dist/killa.min.js"></script>
 ```
 
 Or from jsdelivr:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/killa@0.3.0/dist/killa.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/killa@1.0.0/dist/killa.min.js"></script>
 ```
 
 ### How to create your first store

__tests__/deep-equals.test.js → __tests__/deep-equals.test.ts

@@ -1,4 +1,3 @@
-
 import { deepEquals } from '../src/utils/deep-equals'
 
 describe('DeepEquals', () => {
@@ -32,30 +31,52 @@ describe('DeepEquals', () => {
   })
 
   it('Should compare arrays of objects', () => {
-    expect(deepEquals(
-      [{ a: 1, b: 2, c: 'c' }, { a: 1, b: 2, c: 'c' }],
-      [{ a: 1, b: 2, c: 'c' }, { a: 1, b: 2, c: 'c' }]
-    )).toBe(true)
-    expect(deepEquals(
-      [{ a: 1, b: 2, c: 'c' }, { a: 1, b: 2, c: 'c' }],
-      [{ a: 2, b: 1, c: 'c' }, { a: 1, b: 2, c: 'c' }]
-    )).toBe(false)
+    expect(
+      deepEquals(
+        [
+          { a: 1, b: 2, c: 'c' },
+          { a: 1, b: 2, c: 'c' }
+        ],
+        [
+          { a: 1, b: 2, c: 'c' },
+          { a: 1, b: 2, c: 'c' }
+        ]
+      )
+    ).toBe(true)
+    expect(
+      deepEquals(
+        [
+          { a: 1, b: 2, c: 'c' },
+          { a: 1, b: 2, c: 'c' }
+        ],
+        [
+          { a: 2, b: 1, c: 'c' },
+          { a: 1, b: 2, c: 'c' }
+        ]
+      )
+    ).toBe(false)
   })
 
   it('Should compare simple objects', () => {
-    expect(deepEquals({ a: 1, b: 2, c: 'c' }, { a: 1, b: 2, c: 'c' })).toBe(true)
+    expect(deepEquals({ a: 1, b: 2, c: 'c' }, { a: 1, b: 2, c: 'c' })).toBe(
+      true
+    )
     expect(deepEquals({ a: 1, b: 2, c: 'c' }, { a: 2, b: 1 })).toBe(false)
   })
 
   it('Should compare nested objects', () => {
-    expect(deepEquals(
-      { a: 1, b: 2, c: { y: 2, z: '1' } },
-      { a: 1, b: 2, c: { y: 2, z: '1' } }
-    )).toBe(true)
-    expect(deepEquals(
-      { a: 1, b: 2, c: { y: 2, z: '1' } },
-      { a: 1, b: 2, c: { y: 2, z: '2' } }
-    )).toBe(false)
+    expect(
+      deepEquals(
+        { a: 1, b: 2, c: { y: 2, z: '1' } },
+        { a: 1, b: 2, c: { y: 2, z: '1' } }
+      )
+    ).toBe(true)
+    expect(
+      deepEquals(
+        { a: 1, b: 2, c: { y: 2, z: '1' } },
+        { a: 1, b: 2, c: { y: 2, z: '2' } }
+      )
+    ).toBe(false)
   })
 
   it('Should compare functions', () => {
@@ -67,9 +88,13 @@ describe('DeepEquals', () => {
   })
 
   it('Should compare Maps', () => {
-    const firstMap = new Map([['Map', { name: 'I am a map', phone: '213-555-1234' }]])
-    const secondMap = new Map([['Map', { name: 'I am a map', phone: '213-555-1234' }]])
-    const thirdMap = new Map([
+    const firstMap = new Map([
+      ['Map', { name: 'I am a map', phone: '213-555-1234' }]
+    ])
+    const secondMap = new Map([
+      ['Map', { name: 'I am a map', phone: '213-555-1234' }]
+    ])
+    const thirdMap = new Map<any, any>([
       ['Map', { name: 'I am third map', phone: '213-555-1234' }],
       [1, 1]
     ])
@@ -80,25 +105,37 @@ describe('DeepEquals', () => {
   })
 
   it('Should compare Sets', () => {
-    const firstSet = new Set(['1', { name: 'I am a set', phone: '213-555-1234' }])
-    const secondSet = new Set(['1', { name: 'I am a set', phone: '213-555-1234' }])
-    const thirdSet = new Set(
-      ['2', { name: 'I am another', phone: '213-555-1234' }, 2]
-    )
+    const firstSet = new Set([
+      '1',
+      { name: 'I am a set', phone: '213-555-1234' }
+    ])
+    const secondSet = new Set([
+      '1',
+      { name: 'I am a set', phone: '213-555-1234' }
+    ])
+    const thirdSet = new Set([
+      '2',
+      { name: 'I am another', phone: '213-555-1234' },
+      2
+    ])
 
     expect(deepEquals(firstSet, secondSet)).toBe(true)
     expect(deepEquals(firstSet, thirdSet)).toBe(false)
   })
 
   it('Should compare Dates', () => {
-    expect(deepEquals(
-      new Date('2023-01-04T00:00:00.000Z'),
-      new Date('2023-01-04T00:00:00.000Z')
-    )).toBe(true)
-
-    expect(deepEquals(
-      new Date('2023-01-04T00:00:00.000Z'),
-      new Date('2023-01-05T00:00:00.000Z')
-    )).toBe(false)
+    expect(
+      deepEquals(
+        new Date('2023-01-04T00:00:00.000Z'),
+        new Date('2023-01-04T00:00:00.000Z')
+      )
+    ).toBe(true)
+
+    expect(
+      deepEquals(
+        new Date('2023-01-04T00:00:00.000Z'),
+        new Date('2023-01-05T00:00:00.000Z')
+      )
+    ).toBe(false)
   })
 })

__tests__/react.test.js → __tests__/react.test.tsx

@@ -1,26 +1,48 @@
 import '@testing-library/jest-dom/extend-expect'
 
 import { useEffect, useRef } from 'react'
-import { render, screen, cleanup, fireEvent, renderHook, act } from '@testing-library/react'
-import killa, { useStore } from '../src'
-
-const handleCounter = (state) => {
+import {
+  render,
+  screen,
+  cleanup,
+  fireEvent,
+  renderHook,
+  act
+} from '@testing-library/react'
+
+import killa, { useStore, Store } from '../src'
+
+const handleCounter = (state: any) => {
   return {
     ...state,
     counter: state.counter + 1
   }
 }
 
-const App = ({ store, handleCounter }) => {
+const App = ({
+  store,
+  handleCounter
+}: {
+  store: Store
+  handleCounter?: ((state: any) => void) | undefined
+}) => {
   return (
     <div>
       <Counter store={store} onCounter={handleCounter} />
-      <Counter store={store} label='Counter +2' onCounter={handleCounter} />
+      <Counter store={store} label="Counter +2" onCounter={handleCounter} />
     </div>
   )
 }
 
-const Counter = ({ store, label = 'Counter +1', onCounter }) => {
+const Counter = ({
+  store,
+  label = 'Counter +1',
+  onCounter
+}: {
+  store: Store
+  label?: string
+  onCounter?: ((state: any) => void) | undefined
+}) => {
   const { state, setState } = useStore(store, (state) => {
     return {
       counter: state.counter,
@@ -29,33 +51,57 @@ const Counter = ({ store, label = 'Counter +1', onCounter }) => {
   })
 
   const handleCounter = () => {
-    setState(onCounter)
+    if (onCounter) {
+      setState(onCounter)
+    }
   }
 
   return (
     <div>
       <p>Counter: {state.counter}</p>
-      <button onClick={handleCounter}>
-        {label}
-      </button>
+      <button onClick={handleCounter}>{label}</button>
     </div>
   )
 }
 
 describe('React', () => {
-  let store
+  let store: Store
 
   beforeEach(() => {
+    store = killa({ counter: 1, filter: '' })
     cleanup()
-    store = killa({ counter: 1 })
   })
 
-  it('Should render Counter with the counter state with initial state', () => {
+  it('Should render Counter with initial state', () => {
     render(<Counter store={store} onCounter={handleCounter} />)
     const $counter = screen.getByText(/counter: 1/i)
     expect($counter).toBeInTheDocument()
   })
 
+  it('Should render Counter with the selector by default', () => {
+    const Component = () => {
+      useStore(store)
+
+      return <p>Component</p>
+    }
+
+    render(<Component />)
+  })
+
+  it('Should render Counter with the counter state with initial state', () => {
+    const Component = () => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      useStore({})
+
+      return <p>Component</p>
+    }
+
+    expect(() => render(<Component />)).toThrow(
+      'Provide a store valid for killa.'
+    )
+  })
+
   it('Should update Counter state when clicking on the counter button', () => {
     const cb = jest.fn(handleCounter)
 
@@ -91,7 +137,7 @@ describe('React', () => {
     expect(screen.getAllByText(/counter: 1/i)).toHaveLength(2)
     expect($buttons).toHaveLength(2)
 
-    fireEvent.click($buttons[0])
+    $buttons[0] && fireEvent.click($buttons[0])
 
     expect(screen.getAllByText(/counter: 2/i)).toHaveLength(2)
   })
@@ -114,7 +160,7 @@ describe('React', () => {
             counter: state.counter + 1
           }
         })
-      }, [])
+      }, [setState])
 
       countRef.current++