feat: refactor types and add function overloads for state (#51)

Author: szhsin

README.md

@@ -648,8 +648,6 @@ const myTodos = state<string[], { add: (newTodo: string) => void }>(
 );
 ```
 
-However, if you choose this method, you need to specify the types for both the state value and actions.
-
 # Examples
 
 - Counter – [sandbox](https://codesandbox.io/p/sandbox/reactish-counter-z42qt7) | [source](https://github.com/szhsin/reactish-state/tree/master/examples/examples/counter)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "reactish-state",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Simple, decentralized (atomic) state management for React.",
   "author": "Zheng Song",
   "license": "MIT",

package.json

@@ -1,4 +1,4 @@
-import type { Middleware } from '../../common';
+import type { Middleware } from '../../types';
 import { createState } from '../../';
 import { applyMiddleware } from '../../middleware';
 

src/__tests__/middleware/applyMiddleware.test.ts

@@ -3,7 +3,7 @@
  */
 import * as React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { Selector } from '../../common';
+import { Selector } from '../../types';
 import { state, useSelector, useSnapshot } from '../../';
 
 jest.mock('../../react/useSnapshot', () => ({

src/__tests__/react/useSelector-mock.test.tsx

@@ -1,5 +1,5 @@
 import { state } from '../../vanilla/state';
-import { selector, createSelector } from '../../';
+import { selector, createSelector, Config } from '../../';
 
 test('selector should update when the base state has changed', () => {
   const price = state(7);
@@ -61,7 +61,7 @@ test('selector should return cached result when base state has not changed', ()
 
 test('selector can be enhanced with plugin', () => {
   const plugin = jest.fn();
-  const selector = createSelector({
+  const selector = createSelector<Config>({
     plugin: ({ get, subscribe }, config) => {
       const onChange = () => {
         plugin(get(), config?.key);

src/__tests__/vanilla/selector.test.ts

@@ -1,4 +1,86 @@
-import { state, createState } from '../../';
+import { state, createState, Config } from '../../';
+
+test('function overloads and type correctness', () => {
+  const s1 = state('s1');
+  expect(s1.get().trim()).toBe('s1');
+
+  const s2 = state<string>();
+  expect(s2.get()?.trim()).toBeUndefined();
+
+  const s2ctx = state<string, number>();
+  expect(s2ctx.get()?.trim()).toBeUndefined();
+  s2ctx.set('context', 1);
+
+  const s3 = state([] as string[]);
+  expect(s3.get()[0]?.trim()).toBeUndefined();
+
+  const s4 = state([] as string[], (set, get) => ({
+    append: (newValue: string) => set([...get(), newValue])
+  }));
+  s4.append('s4');
+  expect(s4.get()[0].trim()).toBe('s4');
+
+  // Custom actions must not override built-in state properties
+  const s5 = state([] as string[], (set, get) => ({
+    append: (newValue: string) => set([...get(), newValue]),
+    set: () => set([])
+  }));
+  s5.append('tmp');
+  expect(s5.get()).toEqual(['tmp']);
+  s5.set(['s5']);
+  expect(s5.get()[0].trim()).toBe('s5');
+
+  const s6 = state<string[], { append: (newValue: string) => void }>([], (set, get) => ({
+    append: (newValue) => set([...get(), newValue])
+  }));
+  s6.append('s6');
+  expect(s6.get()[0].trim()).toBe('s6');
+
+  const s6ctx = state<string[], { append: (newValue: string) => void }, number>([], (set, get) => ({
+    append: (newValue) => set([...get(), newValue])
+  }));
+  s6ctx.append('s6');
+  expect(s6ctx.get()[0].trim()).toBe('s6');
+  s6ctx.set(['context'], 1);
+
+  const s7 = state<string[]>([], null, { key: 's7' });
+  expect(s7.get()[0]?.trim()).toBeUndefined();
+
+  const s7ctx = state<string[], number>([], null, { key: 's7' });
+  expect(s7ctx.get()[0]?.trim()).toBeUndefined();
+  s7ctx.set(['context'], 1);
+
+  const s8 = state<string | undefined>(undefined, undefined, { key: 's8' });
+  expect(s8.get()?.trim()).toBeUndefined();
+
+  const s8ctx = state<string | undefined, number>(undefined, undefined, { key: 's8' });
+  expect(s8ctx.get()?.trim()).toBeUndefined();
+  s8ctx.set('context', 1);
+
+  const s9 = state<string[], { append: (newValue: string) => void }>(
+    [],
+    (set, get) => ({
+      append: (newValue) => set([...get(), newValue])
+    }),
+    { key: 's9' }
+  );
+  s9.append('s9');
+  expect(s9.get()[0].trim()).toBe('s9');
+
+  const s9ctx = state<string[], { append: (newValue: string) => void }, number>(
+    [],
+    (set, get) => ({
+      append: (newValue) => set([...get(), newValue])
+    }),
+    { key: 's9' }
+  );
+  s9ctx.append('s9');
+  expect(s9ctx.get()[0].trim()).toBe('s9');
+  s9ctx.set(['context'], 1);
+
+  const s10 = state('s10', undefined);
+  expect(s10.get().trim()).toBe('s10');
+});
 
 test('state should notify listeners when updated', () => {
   const listener = jest.fn();
@@ -66,7 +148,7 @@ test('state can bind actions', () => {
 
 test('state can be enhanced with middleware', () => {
   const middleware = jest.fn();
-  const state = createState({
+  const state = createState<Config>({
     middleware:
       ({ set, get }, config) =>
       (...arg) => {

src/__tests__/vanilla/state.test.ts

@@ -1,4 +1,4 @@
-export * from './common';
+export * from './types';
 export * from './vanilla/state';
 export * from './vanilla/selector';
 export * from './react/useSnapshot';

src/common.ts

@@ -1,9 +1,9 @@
-import type { Middleware } from '../common';
+import type { Middleware } from '../types';
 
-const applyMiddleware: (
-  middlewares: (Middleware | undefined)[],
+const applyMiddleware: <TConfig>(
+  middlewares: (Middleware<TConfig> | undefined)[],
   options?: { fromRight?: boolean }
-) => Middleware =
+) => Middleware<TConfig> =
   (middlewares, { fromRight } = {}) =>
   (api, config) =>
     middlewares[fromRight ? 'reduceRight' : 'reduce'](