hank-zilla 1.0.0 → 1.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 phamdung2209
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 phamdung2209
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/README.md

@@ -0,0 +1,209 @@
+# 🦖 Hank-Zilla
+
+A lightweight React state management library that eliminates the need for Context, Redux, or Providers. Share state across components as easily as `useState` with global accessibility.
+
+[![npm version](https://badge.fury.io/js/hank-zilla.svg)](https://badge.fury.io/js/hank-zilla)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+
+## ✨ Features
+
+-   🚀 **No Provider Required**: Share state globally without wrapping components in Providers
+-   🔄 **Drop-in Replacement**: Replace `useState` with `useAppState` for global state
+-   🎯 **Access Anywhere**: Use the same state in any component, anywhere in your app
+-   🪶 **Lightweight**: Zero dependencies, minimal bundle size (~2.1KB)
+-   ⚡ **Fast**: Built on React's `useSyncExternalStore` for optimal performance
+-   📦 **TypeScript**: Full TypeScript support with type inference
+
+## 📦 Installation
+
+```bash
+npm install hank-zilla
+```
+
+## 🚀 Quick Start
+
+```typescript
+import { useAppState, setAppState, getAppState } from 'hank-zilla'
+
+// Parent Component - Set state
+function ParentComponent() {
+    const user = useAppState('user', { name: '', email: '' })
+
+    return (
+        <div>
+            <button
+                onClick={() => setAppState('user', { name: 'John Doe', email: 'john@example.com' })}
+            >
+                Set User
+            </button>
+            <ChildComponent />
+        </div>
+    )
+}
+
+// Child Component - Access same state (no props needed!)
+function ChildComponent() {
+    const user = useAppState('user')
+
+    return <div>{user ? `Welcome, ${user.name}!` : 'No user logged in'}</div>
+}
+```
+
+## 📖 API Reference
+
+### `useAppState(key, defaultValue?, removeOnUnmount?)`
+
+React hook for managing global state - works exactly like `useState` but globally accessible.
+
+```typescript
+// Basic usage
+const count = useAppState('count', 0)
+
+// Auto-cleanup when component unmounts
+const tempData = useAppState('tempData', null, true)
+
+// TypeScript support
+interface User {
+    name: string
+    email: string
+}
+const user = useAppState<User>('user', null)
+```
+
+### `setAppState(key, value)`
+
+Update state from anywhere in your app - works with values or updater functions.
+
+```typescript
+// Set value directly
+setAppState('count', 42)
+
+// Update with function (like useState)
+setAppState('count', (prev) => prev + 1)
+
+// Update object (shallow merge)
+setAppState('user', { name: 'John' })
+
+// Update array
+setAppState('items', (prev) => [...prev, 'new item'])
+```
+
+### `getAppState(key?)`
+
+Get state value without subscribing to changes (no re-renders).
+
+```typescript
+// Get specific key
+const currentCount = getAppState('count')
+
+// Get all state
+const allState = getAppState()
+
+// ⚠️ Note: This doesn't trigger re-renders when state changes
+```
+
+### `$getAppState` (Console Helper)
+
+Debug helper available in browser console to inspect your app state.
+
+```javascript
+// In browser console
+$getAppState // Returns all state
+$getAppState('key') // Returns specific key
+```
+
+## 🎯 Advanced Usage
+
+### Auto-cleanup with `removeOnUnmount`
+
+```typescript
+function TemporaryComponent() {
+    // This state will be deleted when component unmounts
+    const [data, setData] = useAppState('tempData', [], true)
+
+    return <div>Temporary data: {data.length} items</div>
+}
+```
+
+### TypeScript Support
+
+```typescript
+interface CartItem {
+    id: string
+    name: string
+    price: number
+}
+
+// Type inference
+const [cart, setCart] = useAppState<CartItem[]>('cart', [])
+
+// Add item with type safety
+const addItem = (item: CartItem) => {
+    setCart((prev) => [...prev, item])
+}
+```
+
+### Performance: When to use `getAppState`
+
+```typescript
+// ✅ Good: Use useAppState for UI components
+function Counter() {
+    const [count, setCount] = useAppState('count', 0)
+    return <div>Count: {count}</div> // Re-renders when count changes
+}
+
+// ✅ Good: Use getAppState for utilities/callbacks
+function logCurrentState() {
+    const count = getAppState('count')
+    console.log('Current count:', count) // No re-renders
+}
+```
+
+## 📊 Comparison
+
+| Feature           | Hank-Zilla  | Context API       | Redux              | Zustand     |
+| ----------------- | ----------- | ----------------- | ------------------ | ----------- |
+| **Setup**         | ❌ None     | ✅ Provider       | ✅ Store + Actions | ✅ Store    |
+| **Bundle Size**   | 🟢 ~2.1KB   | 🟢 Built-in       | 🔴 ~45KB           | 🟡 ~8KB     |
+| **Global Access** | ✅ Anywhere | ❌ Provider scope | ✅ Anywhere        | ✅ Anywhere |
+| **TypeScript**    | 🟢 Full     | 🟡 Manual         | 🟢 Full            | 🟢 Full     |
+
+## 🔧 Migration
+
+### From `useState` to `useAppState`
+
+```typescript
+// Before: Local state
+const [count, setCount] = useState(0)
+
+// After: Global state
+const count = useAppState('count', 0)
+```
+
+### From Context API
+
+```typescript
+// Before: Complex setup
+const UserContext = createContext()
+const { user, setUser } = useContext(UserContext)
+
+// After: Direct usage
+const user = useAppState('user', null)
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## 📄 License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+Built with ❤️ by [phamdung2209](https://github.com/phamdung2209) • Special thanks to the React team for `useSyncExternalStore`
+
+---
+
+Made with 🦖 by the Hank-Zilla team

package/dist/useAppState/appState.js

@@ -0,0 +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)=>{store.state={...store.state,...Object.entries(t).reduce((t,[e,s])=>{const r=store.state[e];return t[e]="function"==typeof s?s(r):"object"==typeof s&&null!==s?Array.isArray(s)?Array.isArray(r)?[...r,...s]:[...s]:0===Object.keys(s).length?s:{...r||{},...s}:s,t},{})},e||listeners.forEach(t=>t())}};export const useAppState=(t,e,s=!1,r)=>(t in store.state||void 0===e||store.setState({[t]:e},r),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]};init$({getAppState:getAppState});export default store;

package/dist/useAppState/init$.js

@@ -0,0 +1,17 @@
+const init$ = (() => {
+    const $ = (k, v) => {
+        if (k in globalThis)
+            delete globalThis[k];
+        Object.defineProperty(globalThis, k, { value: v, configurable: true });
+    };
+    const deleteKey = (k) => {
+        if (!k.startsWith('$'))
+            k = `$${k}`;
+        if (k in globalThis)
+            delete globalThis[k];
+    };
+    const service = ((s) => Object.entries(s).forEach(([k, v]) => $(`$${k}`, v)));
+    service.delete = (keys) => Array.isArray(keys) ? keys.forEach(deleteKey) : deleteKey(keys);
+    return service;
+})();
+export default init$;

package/package.json

@@ -1,19 +1,19 @@
 {
     "name": "hank-zilla",
-    "version": "1.0.0",
+    "version": "1.1.1",
     "description": "A lightweight React state management library with modular architecture",
-    "main": "dist/index.min.js",
-    "module": "dist/index.min.js",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
     "types": "dist/index.d.ts",
     "exports": {
         ".": {
-            "import": "./dist/index.min.js",
-            "require": "./dist/index.min.js",
+            "import": "./dist/index.js",
+            "require": "./dist/index.js",
             "types": "./dist/index.d.ts"
         },
         "./useAppState": {
-            "import": "./dist/useAppState/index.min.js",
-            "require": "./dist/useAppState/index.min.js",
+            "import": "./dist/useAppState/index.js",
+            "require": "./dist/useAppState/index.js",
             "types": "./dist/useAppState/index.d.ts"
         },
         "./package.json": "./package.json"
@@ -24,13 +24,17 @@
         "LICENSE"
     ],
     "scripts": {
-        "build": "npm run clean && tsc --project tsconfig.json && npm run minify && npm run cleanup",
-        "minify": "terser dist/index.js --compress --mangle --output dist/index.min.js && terser dist/useAppState/index.js --compress --mangle --output dist/useAppState/index.min.js",
-        "cleanup": "rimraf dist/index.js dist/useAppState/index.js dist/useAppState/appState.js dist/useAppState/init$.js",
+        "build": "npm run clean && tsc && npm run minify && npm run copy-files",
+        "minify": "npm run minify-index && npm run minify-useappstate",
+        "minify-index": "terser dist/index.js -o dist/index.js -c -m",
+        "minify-useappstate": "terser dist/useAppState/index.js -o dist/useAppState/index.js -c -m && terser dist/useAppState/appState.js -o dist/useAppState/appState.js -c -m",
+        "copy-files": "npm run copy-readme && npm run copy-license",
+        "copy-readme": "cp README.md dist/ || copy README.md dist\\",
+        "copy-license": "cp LICENSE dist/ || copy LICENSE dist\\ || echo 'LICENSE not found'",
         "dev": "tsc --watch",
         "clean": "rimraf dist",
-        "prebuild": "npm run clean",
         "prepublishOnly": "npm run build",
+        "postbuild": "ls -la dist || dir dist",
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [