hank-zilla 3.0.0 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,116 +1,116 @@
1
- # 🦖 Hank-Zilla
2
-
3
- Global React state with the ergonomics of `useState` — no Provider, no boilerplate, no dependencies.
4
-
5
- [![npm version](https://badge.fury.io/js/hank-zilla.svg)](https://badge.fury.io/js/hank-zilla)
6
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
- [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
8
-
9
- ## Features
10
-
11
- - **No Provider** — read and write the same state from any component
12
- - **Familiar** — `useAppState` reads like `useState`, but global
13
- - **Tiny** — zero dependencies, ~0.7 KB gzipped
14
- - **Correct** — built on `useSyncExternalStore`, concurrent-safe
15
- - **Typed** — full TypeScript inference
16
-
17
- ## Install
18
-
19
- ```bash
20
- npm install hank-zilla
21
- ```
22
-
23
- ## Quick start
24
-
25
- `useAppState` returns the **value** and subscribes to it. Write with `setAppState` from anywhere — no props, no context.
26
-
27
- ```tsx
28
- import { useAppState, setAppState } from 'hank-zilla'
29
-
30
- function Counter() {
31
- const count = useAppState('count', 0)
32
- return <button onClick={() => setAppState('count', (n) => n + 1)}>{count}</button>
33
- }
34
-
35
- // Another component, same state — nothing passed down
36
- function Readout() {
37
- const count = useAppState('count')
38
- return <p>Count is {count}</p>
39
- }
40
- ```
41
-
42
- ## API
43
-
44
- ### `useAppState<T>(key, defaultValue?, removeOnUnmount?, silent?) → T`
45
-
46
- Subscribe to a key and get its current value. Re-renders only when that key changes.
47
-
48
- ```tsx
49
- const count = useAppState('count', 0)
50
- const user = useAppState<User>('user', null)
51
- const temp = useAppState('draft', '', true) // removed from the store on unmount
52
- ```
53
-
54
- ### `setAppState(key, value | updater, silent?)`
55
-
56
- Write a key from anywhere. A plain value **replaces**; a function is an **updater** `(prev) => next`.
57
-
58
- ```tsx
59
- setAppState('count', 42) // replace
60
- setAppState('count', (n) => n + 1) // updater
61
- setAppState('user', { name: 'Jane' }) // replaces the whole value
62
- setAppState('user', (u) => ({ ...u, name: 'Jane' })) // merge — via updater
63
- setAppState('items', (list) => [...list, item]) // append — via updater
64
- ```
65
-
66
- Each key is independent: writing `count` never touches `user`. Pass `silent` to update without notifying subscribers.
67
-
68
- ### `getAppState(key?)`
69
-
70
- Read without subscribing — no re-render. Handy in callbacks and utilities.
71
-
72
- ```tsx
73
- getAppState('count') // one key
74
- getAppState() // the whole store
75
- ```
76
-
77
- ### `deleteAppState(key)`
78
-
79
- Remove a key and re-render its subscribers (they fall back to their default).
80
-
81
- ### `$getAppState()` — console helper
82
-
83
- Exposed on `globalThis` for debugging in the browser console.
84
-
85
- ```js
86
- $getAppState() // the whole store
87
- $getAppState('count') // one key
88
- ```
89
-
90
- ## Comparison
91
-
92
- | | Hank-Zilla | Context API | Redux | Zustand |
93
- | --- | --- | --- | --- | --- |
94
- | Provider needed | No | Yes | Yes | No |
95
- | Boilerplate | None | Some | High | Low |
96
- | Global access | Yes | Provider scope | Yes | Yes |
97
- | Bundle (gzip) | ~0.7 KB | built-in | large | ~1 KB |
98
- | TypeScript | Full | Manual | Full | Full |
99
-
100
- ## Migration
101
-
102
- ```tsx
103
- // Local state
104
- const [count, setCount] = useState(0)
105
- setCount((n) => n + 1)
106
-
107
- // Global state
108
- const count = useAppState('count', 0)
109
- setAppState('count', (n) => n + 1)
110
- ```
111
-
112
- ## License
113
-
114
- MIT — see [LICENSE](LICENSE).
115
-
116
- Built by [phamdung2209](https://github.com/phamdung2209) 🦖
1
+ # 🦖 Hank-Zilla
2
+
3
+ Global React state with the ergonomics of `useState` — no Provider, no boilerplate, no dependencies.
4
+
5
+ [![npm version](https://badge.fury.io/js/hank-zilla.svg)](https://badge.fury.io/js/hank-zilla)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
+ [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
8
+
9
+ ## Features
10
+
11
+ - **No Provider** — read and write the same state from any component
12
+ - **Familiar** — `useAppState` reads like `useState`, but global
13
+ - **Tiny** — zero dependencies, ~0.7 KB gzipped
14
+ - **Correct** — built on `useSyncExternalStore`, concurrent-safe
15
+ - **Typed** — full TypeScript inference
16
+
17
+ ## Install
18
+
19
+ ```bash
20
+ npm install hank-zilla
21
+ ```
22
+
23
+ ## Quick start
24
+
25
+ `useAppState` returns the **value** and subscribes to it. Write with `setAppState` from anywhere — no props, no context.
26
+
27
+ ```tsx
28
+ import { useAppState, setAppState } from 'hank-zilla'
29
+
30
+ function Counter() {
31
+ const count = useAppState('count', 0)
32
+ return <button onClick={() => setAppState('count', (n) => n + 1)}>{count}</button>
33
+ }
34
+
35
+ // Another component, same state — nothing passed down
36
+ function Readout() {
37
+ const count = useAppState('count')
38
+ return <p>Count is {count}</p>
39
+ }
40
+ ```
41
+
42
+ ## API
43
+
44
+ ### `useAppState<T>(key, defaultValue?, removeOnUnmount?, silent?) → T`
45
+
46
+ Subscribe to a key and get its current value. Re-renders only when that key changes.
47
+
48
+ ```tsx
49
+ const count = useAppState('count', 0)
50
+ const user = useAppState<User>('user', null)
51
+ const temp = useAppState('draft', '', true) // removed from the store on unmount
52
+ ```
53
+
54
+ ### `setAppState(key, value | updater, silent?)`
55
+
56
+ Write a key from anywhere. A plain value **replaces**; a function is an **updater** `(prev) => next`.
57
+
58
+ ```tsx
59
+ setAppState('count', 42) // replace
60
+ setAppState('count', (n) => n + 1) // updater
61
+ setAppState('user', { name: 'Jane' }) // replaces the whole value
62
+ setAppState('user', (u) => ({ ...u, name: 'Jane' })) // merge — via updater
63
+ setAppState('items', (list) => [...list, item]) // append — via updater
64
+ ```
65
+
66
+ Each key is independent: writing `count` never touches `user`. Pass `silent` to update without notifying subscribers.
67
+
68
+ ### `getAppState(key?)`
69
+
70
+ Read without subscribing — no re-render. Handy in callbacks and utilities.
71
+
72
+ ```tsx
73
+ getAppState('count') // one key
74
+ getAppState() // the whole store
75
+ ```
76
+
77
+ ### `deleteAppState(key)`
78
+
79
+ Remove a key and re-render its subscribers (they fall back to their default).
80
+
81
+ ### `$getAppState()` — console helper
82
+
83
+ Exposed on `globalThis` for debugging in the browser console.
84
+
85
+ ```js
86
+ $getAppState() // the whole store
87
+ $getAppState('count') // one key
88
+ ```
89
+
90
+ ## Comparison
91
+
92
+ | | Hank-Zilla | Context API | Redux | Zustand |
93
+ | --- | --- | --- | --- | --- |
94
+ | Provider needed | No | Yes | Yes | No |
95
+ | Boilerplate | None | Some | High | Low |
96
+ | Global access | Yes | Provider scope | Yes | Yes |
97
+ | Bundle (gzip) | ~0.7 KB | built-in | large | ~1 KB |
98
+ | TypeScript | Full | Manual | Full | Full |
99
+
100
+ ## Migration
101
+
102
+ ```tsx
103
+ // Local state
104
+ const [count, setCount] = useState(0)
105
+ setCount((n) => n + 1)
106
+
107
+ // Global state
108
+ const count = useAppState('count', 0)
109
+ setAppState('count', (n) => n + 1)
110
+ ```
111
+
112
+ ## License
113
+
114
+ MIT — see [LICENSE](LICENSE).
115
+
116
+ Built by [phamdung2209](https://github.com/phamdung2209) 🦖
package/dist/README.md CHANGED
@@ -1,116 +1,116 @@
1
- # 🦖 Hank-Zilla
2
-
3
- Global React state with the ergonomics of `useState` — no Provider, no boilerplate, no dependencies.
4
-
5
- [![npm version](https://badge.fury.io/js/hank-zilla.svg)](https://badge.fury.io/js/hank-zilla)
6
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
- [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
8
-
9
- ## Features
10
-
11
- - **No Provider** — read and write the same state from any component
12
- - **Familiar** — `useAppState` reads like `useState`, but global
13
- - **Tiny** — zero dependencies, ~0.7 KB gzipped
14
- - **Correct** — built on `useSyncExternalStore`, concurrent-safe
15
- - **Typed** — full TypeScript inference
16
-
17
- ## Install
18
-
19
- ```bash
20
- npm install hank-zilla
21
- ```
22
-
23
- ## Quick start
24
-
25
- `useAppState` returns the **value** and subscribes to it. Write with `setAppState` from anywhere — no props, no context.
26
-
27
- ```tsx
28
- import { useAppState, setAppState } from 'hank-zilla'
29
-
30
- function Counter() {
31
- const count = useAppState('count', 0)
32
- return <button onClick={() => setAppState('count', (n) => n + 1)}>{count}</button>
33
- }
34
-
35
- // Another component, same state — nothing passed down
36
- function Readout() {
37
- const count = useAppState('count')
38
- return <p>Count is {count}</p>
39
- }
40
- ```
41
-
42
- ## API
43
-
44
- ### `useAppState<T>(key, defaultValue?, removeOnUnmount?, silent?) → T`
45
-
46
- Subscribe to a key and get its current value. Re-renders only when that key changes.
47
-
48
- ```tsx
49
- const count = useAppState('count', 0)
50
- const user = useAppState<User>('user', null)
51
- const temp = useAppState('draft', '', true) // removed from the store on unmount
52
- ```
53
-
54
- ### `setAppState(key, value | updater, silent?)`
55
-
56
- Write a key from anywhere. A plain value **replaces**; a function is an **updater** `(prev) => next`.
57
-
58
- ```tsx
59
- setAppState('count', 42) // replace
60
- setAppState('count', (n) => n + 1) // updater
61
- setAppState('user', { name: 'Jane' }) // replaces the whole value
62
- setAppState('user', (u) => ({ ...u, name: 'Jane' })) // merge — via updater
63
- setAppState('items', (list) => [...list, item]) // append — via updater
64
- ```
65
-
66
- Each key is independent: writing `count` never touches `user`. Pass `silent` to update without notifying subscribers.
67
-
68
- ### `getAppState(key?)`
69
-
70
- Read without subscribing — no re-render. Handy in callbacks and utilities.
71
-
72
- ```tsx
73
- getAppState('count') // one key
74
- getAppState() // the whole store
75
- ```
76
-
77
- ### `deleteAppState(key)`
78
-
79
- Remove a key and re-render its subscribers (they fall back to their default).
80
-
81
- ### `$getAppState()` — console helper
82
-
83
- Exposed on `globalThis` for debugging in the browser console.
84
-
85
- ```js
86
- $getAppState() // the whole store
87
- $getAppState('count') // one key
88
- ```
89
-
90
- ## Comparison
91
-
92
- | | Hank-Zilla | Context API | Redux | Zustand |
93
- | --- | --- | --- | --- | --- |
94
- | Provider needed | No | Yes | Yes | No |
95
- | Boilerplate | None | Some | High | Low |
96
- | Global access | Yes | Provider scope | Yes | Yes |
97
- | Bundle (gzip) | ~0.7 KB | built-in | large | ~1 KB |
98
- | TypeScript | Full | Manual | Full | Full |
99
-
100
- ## Migration
101
-
102
- ```tsx
103
- // Local state
104
- const [count, setCount] = useState(0)
105
- setCount((n) => n + 1)
106
-
107
- // Global state
108
- const count = useAppState('count', 0)
109
- setAppState('count', (n) => n + 1)
110
- ```
111
-
112
- ## License
113
-
114
- MIT — see [LICENSE](LICENSE).
115
-
116
- Built by [phamdung2209](https://github.com/phamdung2209) 🦖
1
+ # 🦖 Hank-Zilla
2
+
3
+ Global React state with the ergonomics of `useState` — no Provider, no boilerplate, no dependencies.
4
+
5
+ [![npm version](https://badge.fury.io/js/hank-zilla.svg)](https://badge.fury.io/js/hank-zilla)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
+ [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
8
+
9
+ ## Features
10
+
11
+ - **No Provider** — read and write the same state from any component
12
+ - **Familiar** — `useAppState` reads like `useState`, but global
13
+ - **Tiny** — zero dependencies, ~0.7 KB gzipped
14
+ - **Correct** — built on `useSyncExternalStore`, concurrent-safe
15
+ - **Typed** — full TypeScript inference
16
+
17
+ ## Install
18
+
19
+ ```bash
20
+ npm install hank-zilla
21
+ ```
22
+
23
+ ## Quick start
24
+
25
+ `useAppState` returns the **value** and subscribes to it. Write with `setAppState` from anywhere — no props, no context.
26
+
27
+ ```tsx
28
+ import { useAppState, setAppState } from 'hank-zilla'
29
+
30
+ function Counter() {
31
+ const count = useAppState('count', 0)
32
+ return <button onClick={() => setAppState('count', (n) => n + 1)}>{count}</button>
33
+ }
34
+
35
+ // Another component, same state — nothing passed down
36
+ function Readout() {
37
+ const count = useAppState('count')
38
+ return <p>Count is {count}</p>
39
+ }
40
+ ```
41
+
42
+ ## API
43
+
44
+ ### `useAppState<T>(key, defaultValue?, removeOnUnmount?, silent?) → T`
45
+
46
+ Subscribe to a key and get its current value. Re-renders only when that key changes.
47
+
48
+ ```tsx
49
+ const count = useAppState('count', 0)
50
+ const user = useAppState<User>('user', null)
51
+ const temp = useAppState('draft', '', true) // removed from the store on unmount
52
+ ```
53
+
54
+ ### `setAppState(key, value | updater, silent?)`
55
+
56
+ Write a key from anywhere. A plain value **replaces**; a function is an **updater** `(prev) => next`.
57
+
58
+ ```tsx
59
+ setAppState('count', 42) // replace
60
+ setAppState('count', (n) => n + 1) // updater
61
+ setAppState('user', { name: 'Jane' }) // replaces the whole value
62
+ setAppState('user', (u) => ({ ...u, name: 'Jane' })) // merge — via updater
63
+ setAppState('items', (list) => [...list, item]) // append — via updater
64
+ ```
65
+
66
+ Each key is independent: writing `count` never touches `user`. Pass `silent` to update without notifying subscribers.
67
+
68
+ ### `getAppState(key?)`
69
+
70
+ Read without subscribing — no re-render. Handy in callbacks and utilities.
71
+
72
+ ```tsx
73
+ getAppState('count') // one key
74
+ getAppState() // the whole store
75
+ ```
76
+
77
+ ### `deleteAppState(key)`
78
+
79
+ Remove a key and re-render its subscribers (they fall back to their default).
80
+
81
+ ### `$getAppState()` — console helper
82
+
83
+ Exposed on `globalThis` for debugging in the browser console.
84
+
85
+ ```js
86
+ $getAppState() // the whole store
87
+ $getAppState('count') // one key
88
+ ```
89
+
90
+ ## Comparison
91
+
92
+ | | Hank-Zilla | Context API | Redux | Zustand |
93
+ | --- | --- | --- | --- | --- |
94
+ | Provider needed | No | Yes | Yes | No |
95
+ | Boilerplate | None | Some | High | Low |
96
+ | Global access | Yes | Provider scope | Yes | Yes |
97
+ | Bundle (gzip) | ~0.7 KB | built-in | large | ~1 KB |
98
+ | TypeScript | Full | Manual | Full | Full |
99
+
100
+ ## Migration
101
+
102
+ ```tsx
103
+ // Local state
104
+ const [count, setCount] = useState(0)
105
+ setCount((n) => n + 1)
106
+
107
+ // Global state
108
+ const count = useAppState('count', 0)
109
+ setAppState('count', (n) => n + 1)
110
+ ```
111
+
112
+ ## License
113
+
114
+ MIT — see [LICENSE](LICENSE).
115
+
116
+ Built by [phamdung2209](https://github.com/phamdung2209) 🦖
@@ -1 +1 @@
1
- import{useEffect,useRef,useSyncExternalStore}from"react";import init$ from"./init$";const listeners=new Set,store={state:{},getState:()=>store.state,subscribe:t=>(listeners.add(t),()=>listeners.delete(t)),setState:(t,e)=>{const s={...store.state};for(const[e,r]of Object.entries(t))s[e]="function"==typeof r?r(store.state[e]):r;store.state=s,e||listeners.forEach(t=>t())}};export const useAppState=(t,e,s=!1,r)=>{const o=useRef(e).current;return useEffect(()=>(t in store.state||void 0===o||store.setState({[t]:o},r),()=>{s&&deleteAppState(t)}),[t,s,o,r]),useSyncExternalStore(store.subscribe,()=>store.state[t]??o,()=>o)};export const setAppState=(t,e,s)=>{store.setState({[t]:e},s)};export const getAppState=t=>void 0===t?store.getState():store.getState()[t];export const deleteAppState=t=>{t in store.state&&(delete store.state[t],listeners.forEach(t=>t()))};init$({getAppState:getAppState});export default store;
1
+ import{useEffect,useSyncExternalStore}from"react";import init$ from"./init$";const listeners=new Set,store={state:{},getState:()=>store.state,subscribe:t=>(listeners.add(t),()=>listeners.delete(t)),setState:(t,e)=>{const s={...store.state};for(const[e,o]of Object.entries(t)){const t="function"==typeof o?o(store.state[e]):o;void 0===t?delete s[e]:s[e]=t}store.state=s,e||listeners.forEach(t=>t())}};export const useAppState=(t,e,s=!1,o)=>(t in store.state||void 0===e||store.setState({[t]:e},o),useEffect(()=>()=>{s&&deleteAppState(t)},[t,s]),useSyncExternalStore(store.subscribe,()=>store.state[t]??e,()=>e));export const setAppState=(t,e,s)=>{store.setState({[t]:e},s)};export const getAppState=t=>void 0===t?store.getState():store.getState()[t];export const deleteAppState=t=>{t in store.state&&(delete store.state[t],listeners.forEach(t=>t()))};init$({getAppState:getAppState});export default store;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hank-zilla",
3
- "version": "3.0.0",
3
+ "version": "3.0.3",
4
4
  "description": "A lightweight React state management library with modular architecture",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",