fix(types): fixed types for PartialState

.eslintrc.yml

@@ -15,6 +15,8 @@ extends:
   - plugin:import/errors
   - plugin:import/warnings
   - plugin:import/typescript
+  - plugin:react/recommended
+  - plugin:react-hooks/recommended
   - prettier
 settings:
   import/resolver:

.gitignore

@@ -6,4 +6,5 @@ lib
 .DS_Store
 .eslintcache
 .vscode/
-build
+build
+examples/**/yarn.lock

examples/05_typescript/package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@foobar-agency/react-global-state": "latest",
     "react": "latest",
     "react-dom": "latest",
     "react-scripts": "latest"

examples/05_typescript/tsconfig.json

@@ -18,7 +18,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@foobar-agency/react-global-state": ["../../lib/esm/index"]
+    }
   },
   "include": [
     "src"

package.json

@@ -67,6 +67,8 @@
     "eslint-config-prettier": "^8.1.0",
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^27.4.7",
     "jest-localstorage-mock": "^2.4.18",
     "prettier": "^2.2.1",

src/Observable.ts

@@ -5,7 +5,7 @@
 
 import { isBrowser } from "./isBrowser"
 
-export class Observable<S> {
+export class Observable<TState> {
   private static stateIndex = 0
 
   private static eventOptions: AddEventListenerOptions = {
@@ -16,13 +16,13 @@ export class Observable<S> {
 
   private readonly eventName = `${Observable.stateIndex++}-global-state-change`
 
-  constructor(private _value: S) {}
+  constructor(private _value: TState) {}
 
   get value() {
     return this._value
   }
 
-  next(value: S) {
+  next(value: TState) {
     if (value === this._value) {
       return
     }
@@ -34,7 +34,7 @@ export class Observable<S> {
     }
   }
 
-  subscribe(subscriber: (value: S) => void) {
+  subscribe(subscriber: (value: TState) => void) {
     const eventListener = () => subscriber(this._value)
     const eventName = this.eventName
 

src/createGlobalState.ts

@@ -1,4 +1,5 @@
 import { SetStateAction } from "react"
+
 import { Observable } from "./Observable"
 import { isBrowser } from "./isBrowser"
 import { isEqual } from "./isEqual"
@@ -13,11 +14,11 @@ import updater from "./updater"
 import { createHook } from "./createHook"
 import { createReadOnlyHook } from "./createReadOnlyHook"
 
-export const createGlobalState = <S>(
-  initialState: S,
+export const createGlobalState = <TState>(
+  initialState: TState,
   options?: GlobalStateOptions
-): GlobalState<S> => {
-  const state$ = new Observable<S>(initialState)
+): GlobalState<TState> => {
+  const state$ = new Observable<TState>(initialState)
 
   if (options?.persistence?.key && isBrowser()) {
     rehydrate(state$, options?.persistence)
@@ -26,7 +27,7 @@ export const createGlobalState = <S>(
   const getGlobalState = () => state$.value
 
   const setGlobalState = (
-    state: SetStateAction<S>,
+    state: SetStateAction<TState>,
     options?: SetStateOptions
   ) => {
     if (options?.deepCompare) {
@@ -42,8 +43,9 @@ export const createGlobalState = <S>(
 
   const useReadOnlyState = createReadOnlyHook(state$, state => state)
 
-  const createPartialState = (project: (state: S) => PartialState<S>) =>
-    createReadOnlyHook(state$, project)
+  const createPartialState = <TPartial>(
+    project: (state: TState) => PartialState<TState, TPartial>
+  ) => createReadOnlyHook<TState, TPartial>(state$, project)
 
   return {
     useGlobalState,

src/createHook.ts

@@ -1,10 +1,14 @@
 import { SetStateAction, useEffect, useState } from "react"
+
 import { Observable } from "./Observable"
 import { SetStateOptions } from "./types"
 
-export function createHook<T>(
-  state$: Observable<T>,
-  setGlobalState: (state: SetStateAction<T>, options?: SetStateOptions) => void
+export function createHook<TState>(
+  state$: Observable<TState>,
+  setGlobalState: (
+    state: SetStateAction<TState>,
+    options?: SetStateOptions
+  ) => void
 ) {
   return () => {
     const [state, setState] = useState(state$.value)
@@ -18,7 +22,10 @@ export function createHook<T>(
        * the reason for that is we only subscribe to the state$ if the component is mounted
        */
       const stateValueAfterMount = state$.value
-      state !== stateValueAfterMount && setState(stateValueAfterMount)
+
+      if (state !== stateValueAfterMount) {
+        setState(stateValueAfterMount)
+      }
 
       const subscription = state$.subscribe(setState)
 

src/createReadOnlyHook.ts

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react"
+
 import { Observable } from "./Observable"
 import { PartialState } from "./types"
 
-export function createReadOnlyHook<S>(
-  state$: Observable<S>,
-  project: (state: S) => PartialState<S>
+export function createReadOnlyHook<TState, TPartial>(
+  state$: Observable<TState>,
+  project: (state: TState) => PartialState<TState, TPartial>
 ) {
   return () => {
     const [state, setState] = useState(project(state$.value))

src/rehydrate.ts

@@ -3,8 +3,8 @@ import { isEqual } from "./isEqual"
 import { PersistenceOptions } from "./types"
 import { Observable } from "./Observable"
 
-export function rehydrate<T>(
-  state$: Observable<T>,
+export function rehydrate<TState>(
+  state$: Observable<TState>,
   options: PersistenceOptions
 ) {
   const { key, type } = options
@@ -13,7 +13,7 @@ export function rehydrate<T>(
       ? globalThis.sessionStorage
       : globalThis.localStorage
 
-  const storage = new StorageItem<T>(key, storageLayer)
+  const storage = new StorageItem<TState>(key, storageLayer)
 
   const storedValue = storage.get()
 

src/types.ts

@@ -13,17 +13,20 @@ export interface GlobalStateOptions {
   persistence?: PersistenceOptions
 }
 
-export type PartialState<T> = Partial<T> | keyof T
+export type PartialState<TState, TPartial> = TState | TPartial
 
-export interface GlobalState<T> {
+export interface GlobalState<TState> {
   useGlobalState: () => readonly [
-    T,
-    (state: SetStateAction<T>, options?: SetStateOptions) => void
+    TState,
+    (state: SetStateAction<TState>, options?: SetStateOptions) => void
   ]
-  useReadOnlyState: () => PartialState<T>
-  createPartialState: (
-    project: (state: T) => PartialState<T>
-  ) => () => PartialState<T>
-  getGlobalState: () => T
-  setGlobalState: (state: SetStateAction<T>, options?: SetStateOptions) => void
+  useReadOnlyState: () => PartialState<TState, TState>
+  createPartialState: <TPartial>(
+    project: (state: TState) => PartialState<TState, TPartial>
+  ) => () => PartialState<TState, TPartial>
+  getGlobalState: () => TState
+  setGlobalState: (
+    state: SetStateAction<TState>,
+    options?: SetStateOptions
+  ) => void
 }

tsconfig.json

@@ -21,7 +21,7 @@
       "es2020", "DOM"
     ],
     "paths": {
-      "@foobaragency/react-global-state": ["src/*"]
+      "@foobar-agency/react-global-state/*": ["src/*"]
     }
   },
   "include": ["./src"]