tiny-slice 0.1.0

package/README.md

@@ -0,0 +1,136 @@
+# Tiny Slice
+
+A lightweight state management library for React.
+
+The library internally uses React's `useReducer` which works standalone without a store.
+
+This is not a replacement for Redux. It's a lightweight alternative for simple state management action/reducer.
+
+## Features
+
+- Lightweight
+- TypeScript support
+- Async action handling (like Redux Thunks)
+- Zero dependencies
+- Debug mode
+
+## ExampleUsage
+
+```ts
+import { createTinySlice, createAsyncAction, useTinySlice } from 'tiny-slice'
+
+type CounterState = {
+  value: number
+  loading: boolean
+}
+
+const initialState: CounterState = {
+  value: 0,
+  loading: false,
+}
+
+const counterSlice = createTinySlice<CounterState>({
+  initialState,
+  actions: {
+    increment: (state) => {
+      state.value += 1
+    },
+    decrement: (state) => {
+      state.value -= 1
+    },
+    incrementAsync: createAsyncAction(async (state) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      state.value += 1
+    }, {
+      onPending: (state) => {
+        state.loading = true
+      },
+      onSuccess: (state) => {
+        state.loading = false
+      },
+    }),
+    decrementAsync: createAsyncAction(async (state) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      state.value -= 1
+    }, {
+      onPending: (state) => {
+        state.loading = true
+      },
+      onSuccess: (state) => {
+        state.loading = false
+      },
+  },
+})
+
+const App = () => {
+  const [state, actions] = useTinySlice(counterSlice)
+
+  return (
+    <div>
+      <p>{state.value} {state.loading ? 'Loading...' : ''}</p>
+      <button onClick={() => actions.increment()}>Increment</button>
+      <button onClick={() => actions.decrement()}>Decrement</button>
+      <button onClick={() => actions.incrementAsync()}>Increment Async</button>
+      <button onClick={() => actions.decrementAsync()}>Decrement Async</button>
+    </div>
+  )
+}
+```
+
+## API
+
+### createTinySlice
+
+Creates a tiny slice.
+
+```ts
+const slice = createTinySlice<State, Actions>({
+  initialState,
+  actions,
+})
+```
+
+### createAsyncAction
+
+Creates an async action. Like in Redux Thunks, the async action will trigger the pending, success and error cases.
+
+```ts
+const asyncAction = createAsyncAction(async (payload, { getState, dispatch }) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  let value = getState().value
+  if (payload.type === 'increment') {
+    value += 1
+  } else if (payload.type === 'decrement') {
+    value -= 1
+  }
+  return { value }
+}, {
+  onPending: (state) => {
+    state.loading = true
+  },
+  onSuccess: (state) => {
+    state.loading = false
+  },
+  onError: (state, error) => {
+    state.loading = false
+    state.error = error
+  },
+})
+```
+
+### useTinySlice
+
+A hook to use the slice state and dispatch actions.
+
+```ts
+const [state, actions] = useTinySlice(slice)
+
+return (
+  <div>
+    <p>{state.value}</p>
+    <button onClick={() => actions.increment()}>Increment</button>
+  </div>
+)
+```
+
+

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+export type ActionPayload<T> = T;
+type ActionReducer<State, Payload> = (state: State, payload: Payload) => void;
+type ThunkAction<Result = void> = {
+    type: string;
+    payload: any;
+    async: true;
+    thunk: (dispatch: ThunkDispatch, getState: () => any) => Promise<Result>;
+};
+type Action = {
+    type: string;
+    payload: any;
+    async?: false;
+};
+type ThunkDispatch = <T = void>(action: Action | ThunkAction<T>) => Promise<T>;
+type AsyncActionHelpers<State> = {
+    getState: () => State;
+    dispatch: ThunkDispatch;
+};
+type AsyncActionReducer<State, Payload, Result> = {
+    action: (payload: Payload, helpers: AsyncActionHelpers<State>) => Promise<Result>;
+    onSuccess?: (state: State, payload: Result) => void;
+    onPending?: (state: State) => void;
+    onError?: (state: State, payload: {
+        error: Error;
+    }) => void;
+};
+type ActionReducers<State> = Record<string, ActionReducer<State, any> | AsyncActionReducer<State, any, any>>;
+interface SliceOptions<State, AR extends ActionReducers<State>> {
+    initialState: State;
+    actions: AR;
+    debug?: boolean;
+}
+type ActionCreator<T> = T extends ActionReducer<any, infer P> ? (payload?: P) => Action : T extends AsyncActionReducer<any, infer P, infer R> ? (payload?: P) => ThunkAction<R> : never;
+type SliceActions<AR extends ActionReducers<any>> = {
+    [K in keyof AR]: ActionCreator<AR[K]>;
+};
+export declare function createAsyncAction<Payload, Result, State>(action: (payload: Payload, helpers: AsyncActionHelpers<State>) => Promise<Result>, handlers: {
+    onSuccess?: (state: State, payload: Result) => void;
+    onPending?: (state: State) => void;
+    onError?: (state: State, payload: {
+        error: Error;
+    }) => void;
+}): AsyncActionReducer<State, Payload, Result>;
+export declare function createTinySlice<State, AR extends ActionReducers<State>>(options: SliceOptions<State, AR>): {
+    readonly initialState: State;
+    readonly reducer: (state: State, action: {
+        type: string;
+        payload: any;
+    }) => State;
+    readonly reducers: AR;
+    readonly actions: SliceActions<AR>;
+};
+export declare function useTinySlice<State, AR extends ActionReducers<State>>(slice: ReturnType<typeof createTinySlice<State, AR>>): readonly [State, SliceActions<AR>];
+export {};

package/dist/index.js

@@ -0,0 +1,227 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAsyncAction = createAsyncAction;
+exports.createTinySlice = createTinySlice;
+exports.useTinySlice = useTinySlice;
+var react_1 = require("react");
+// Helper function to create async actions
+function createAsyncAction(action, handlers) {
+    return __assign({ action: action }, handlers);
+}
+// Create a tiny slice
+function createTinySlice(options) {
+    var _this = this;
+    function reducer(state, action) {
+        var _a = action.type.split('/'), actionType = _a[0], status = _a[1];
+        var actionReducer = options.actions[actionType];
+        if (options.debug) {
+            console.group("Action: ".concat(action.type));
+            console.log('Payload:', JSON.stringify(action.payload, null, 2));
+            console.log('Previous State:', JSON.stringify(state, null, 2));
+        }
+        var newState = state;
+        if (actionReducer && 'action' in actionReducer) {
+            // Handle async action states
+            switch (status) {
+                case 'pending':
+                    if (actionReducer.onPending) {
+                        newState = __assign({}, state);
+                        actionReducer.onPending(newState);
+                    }
+                    break;
+                case 'fulfilled':
+                    if (actionReducer.onSuccess) {
+                        newState = __assign({}, state);
+                        actionReducer.onSuccess(newState, action.payload);
+                    }
+                    break;
+                case 'rejected':
+                    if (actionReducer.onError) {
+                        newState = __assign({}, state);
+                        actionReducer.onError(newState, action.payload);
+                    }
+                    break;
+            }
+        }
+        else if (actionReducer) {
+            // Handle sync action
+            newState = __assign({}, state);
+            actionReducer(newState, action.payload);
+        }
+        if (options.debug) {
+            console.log('Next State:', JSON.stringify(newState, null, 2));
+            console.groupEnd();
+        }
+        return newState;
+    }
+    // Create action creators that work both in and out of hooks
+    var actions = {};
+    var _loop_1 = function (actionKey) {
+        var actionReducer = options.actions[actionKey];
+        if ('action' in actionReducer) {
+            actions[actionKey] = (function (payload) { return ({
+                type: actionKey,
+                payload: payload,
+                async: true,
+                thunk: function (dispatch, getState) { return __awaiter(_this, void 0, void 0, function () {
+                    var result, error_1;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                _a.trys.push([0, 2, , 3]);
+                                if (options.debug) {
+                                    console.group("Async Action Started: ".concat(actionKey));
+                                    console.log('Payload:', JSON.stringify(payload, null, 2));
+                                    console.log('Current State:', JSON.stringify(getState(), null, 2));
+                                }
+                                if (actionReducer.onPending) {
+                                    dispatch({
+                                        type: "".concat(actionKey, "/pending"),
+                                        payload: null,
+                                    });
+                                }
+                                return [4 /*yield*/, actionReducer.action(payload, {
+                                        getState: getState,
+                                        dispatch: dispatch,
+                                    })];
+                            case 1:
+                                result = _a.sent();
+                                if (actionReducer.onSuccess) {
+                                    dispatch({
+                                        type: "".concat(actionKey, "/fulfilled"),
+                                        payload: result,
+                                    });
+                                }
+                                if (options.debug) {
+                                    console.log('Action Result:', JSON.stringify(result, null, 2));
+                                    console.groupEnd();
+                                }
+                                return [2 /*return*/, result];
+                            case 2:
+                                error_1 = _a.sent();
+                                if (options.debug) {
+                                    console.log('Action Error:', error_1);
+                                    console.groupEnd();
+                                }
+                                if (actionReducer.onError) {
+                                    dispatch({
+                                        type: "".concat(actionKey, "/rejected"),
+                                        payload: { error: error_1 },
+                                    });
+                                }
+                                throw error_1;
+                            case 3: return [2 /*return*/];
+                        }
+                    });
+                }); },
+            }); });
+        }
+        else {
+            actions[actionKey] = (function (payload) { return ({
+                type: actionKey,
+                payload: payload,
+                async: false,
+            }); });
+        }
+    };
+    for (var _i = 0, _a = Object.keys(options.actions); _i < _a.length; _i++) {
+        var actionKey = _a[_i];
+        _loop_1(actionKey);
+    }
+    return {
+        initialState: options.initialState,
+        reducer: reducer,
+        reducers: options.actions,
+        actions: actions,
+    };
+}
+// Hook to use the tiny slice
+function useTinySlice(slice) {
+    var _this = this;
+    var _a = (0, react_1.useReducer)(slice.reducer, slice.initialState), state = _a[0], dispatch = _a[1];
+    var stateRef = (0, react_1.useRef)(state);
+    stateRef.current = state;
+    var actionsRef = (0, react_1.useCallback)(function () {
+        var actions = {};
+        var getState = function () { return stateRef.current; };
+        var enhancedDispatch = function (action) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                if (action.async === true && 'thunk' in action) {
+                    return [2 /*return*/, action.thunk(enhancedDispatch, getState)];
+                }
+                dispatch(action);
+                return [2 /*return*/, Promise.resolve()];
+            });
+        }); };
+        var _loop_2 = function (actionKey) {
+            var actionReducer = slice.reducers[actionKey];
+            if ('action' in actionReducer) {
+                // Handle async action
+                actions[actionKey] = (function (payload) { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        return [2 /*return*/, enhancedDispatch(slice.actions[actionKey](payload))];
+                    });
+                }); });
+            }
+            else {
+                // Handle sync action
+                actions[actionKey] = (function (payload) {
+                    return enhancedDispatch(slice.actions[actionKey](payload));
+                });
+            }
+        };
+        for (var _i = 0, _a = Object.keys(slice.reducers); _i < _a.length; _i++) {
+            var actionKey = _a[_i];
+            _loop_2(actionKey);
+        }
+        return actions;
+    }, [slice]);
+    return [state, actionsRef()];
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "tiny-slice",
+  "version": "0.1.0",
+  "description": "A lightweight state management library for React",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  },
+  "keywords": [
+    "react",
+    "state-management",
+    "typescript"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
+    "eslint": "^8.54.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.0.0"
+  },
+  "license": "MIT"
+}