Comparing version 0.4.1 to 0.5.2
@@ -1,8 +0,210 @@ | ||
export { createAction } from './action'; | ||
export { createStoreManager, GlobalStates, StoreManager } from './manager'; | ||
export { StoreManagerProvider, StoreProvider, useStoreManager } from './provider'; | ||
export { createSelector } from './selector'; | ||
export { createStore } from './store'; | ||
export { useAction, useActionCallback } from './useAction'; | ||
export { useDispatcher } from './useDispathcer'; | ||
export { useStore } from './useStore'; | ||
import React, { SyntheticEvent } from 'react'; | ||
interface DevTool { | ||
log(action: object): void; | ||
disconnect(): void; | ||
} | ||
declare type StateInitiator<T> = T | StateInitiatorFunction<T>; | ||
declare type StateInitiatorFunction<T> = () => T; | ||
interface Store<State> { | ||
/** | ||
* name of the store | ||
*/ | ||
readonly name: string; | ||
/** | ||
* state initiator | ||
*/ | ||
readonly initState: StateInitiatorFunction<State>; | ||
} | ||
declare type StateComparator<T> = (prev: T, current: T) => boolean; | ||
declare function createStore<State>(name: string, initialState: StateInitiator<State>): Store<State>; | ||
declare type GlobalStates = Map<string, unknown>; | ||
declare type SubscriptionCallback = () => void; | ||
interface StoreManager { | ||
/** | ||
* Get current state of a store | ||
* @param store input store | ||
*/ | ||
getState<State>(store: Store<State>): State; | ||
/** @internal */ | ||
commit(states: Map<string, unknown>): void; | ||
/** @internal */ | ||
subscribe(store: Store<unknown>, cb: SubscriptionCallback): () => void; | ||
/** @internal */ | ||
dispatcher: Dispatcher; | ||
/** @internal */ | ||
devTool?: DevTool; | ||
} | ||
declare function createStoreManager(initialStates?: GlobalStates, enableDevTool?: boolean): StoreManager; | ||
interface Dispatcher { | ||
/** | ||
* Invoke action | ||
* | ||
* @param action action that will be invoked | ||
* @param args action arguments | ||
*/ | ||
<State, Args extends any[]>(action: Action<State, Args>, ...args: Args): void; | ||
} | ||
interface DispatchContext<State> { | ||
/** | ||
* State when the action is called. For complex action, please use {@link DispatchContext.getState | getState()} | ||
*/ | ||
state: DeepReadonly<State>; | ||
/** | ||
* Get current state of associated store | ||
*/ | ||
getState(): DeepReadonly<State>; | ||
/** | ||
* | ||
* @param updater the new state, or function that produce new state | ||
* @param forceCommit if true, commit all changes after setting this state | ||
*/ | ||
setState(updater: StateUpdater<State>, forceCommit?: boolean): void; | ||
/** | ||
* Shallow merge current state with `partialState`. | ||
* Only valid for object based State | ||
* | ||
* @param partialState object that will be merged to current state | ||
* @param forceCommit if true, commit all changes after merging | ||
*/ | ||
mergeState(partialState: IfObject<State, Partial<State>>, forceCommit?: boolean): void; | ||
/** | ||
* get current state of the other store | ||
* | ||
* @param store other store | ||
*/ | ||
getStore<OtherState>(store: Store<OtherState>): DeepReadonly<OtherState>; | ||
/** | ||
* dispatch other action | ||
*/ | ||
dispatch: Dispatcher; | ||
/** | ||
* This is helpful to batch react update when you call multiple setState on async context | ||
* | ||
* @param fn Function that call multiple {@link DispatchContext.setState | setState()} multiple times. | ||
*/ | ||
bulkUpdate(fn: () => void): void; | ||
} | ||
declare type IfObject<O, Then, Else = never> = O extends any[] ? Else : O extends object ? Then : Else; | ||
declare type StateUpdater<State> = State | DeepReadonly<State> | StateUpdaterFunction<State>; | ||
declare type StateUpdaterFunction<State> = (prev: DeepReadonly<State>) => State | DeepReadonly<State>; | ||
declare type Builtin = string | number | boolean | bigint | symbol | undefined | null | Function | Date | Error | RegExp; | ||
declare type DeepReadonly<T> = T extends Builtin ? T : T extends Map<infer K, infer V> ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>> : T extends ReadonlyMap<infer K, infer V> ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>> : T extends WeakMap<infer K, infer V> ? WeakMap<DeepReadonly<K>, DeepReadonly<V>> : T extends Set<infer U> ? ReadonlySet<DeepReadonly<U>> : T extends ReadonlySet<infer U> ? ReadonlySet<DeepReadonly<U>> : T extends WeakSet<infer U> ? WeakSet<DeepReadonly<U>> : T extends Promise<infer U> ? Promise<DeepReadonly<U>> : T extends {} ? { | ||
readonly [K in keyof T]: DeepReadonly<T[K]>; | ||
} : Readonly<T>; | ||
interface Action<State, Args extends any[]> { | ||
/** | ||
* store that associated to this action | ||
*/ | ||
store: Store<State>; | ||
/** | ||
* name of this action | ||
* @internal | ||
*/ | ||
name?: String; | ||
/** | ||
* the real action function | ||
*/ | ||
fn: ActionFunction<State, Args>; | ||
} | ||
declare type ActionFunction<State, Args extends any[]> = (ctx: DispatchContext<State>, ...args: Args) => ActionReturn<State>; | ||
declare type ActionReturn<State> = State | void | Promise<void>; | ||
/** | ||
* Create action. | ||
* | ||
* @template State | ||
* @param store store that associated to this action | ||
* @param action function that manipulate the state of the store | ||
*/ | ||
declare function createAction<State, Args extends any[]>(store: Store<State>, fn: ActionFunction<State, Args>): Action<State, Args>; | ||
/** | ||
* Create named action. | ||
* | ||
* @param store store that associated to this action | ||
* @param name this is only for debugging purpose. | ||
* @param action function that manipulate the state of the store | ||
*/ | ||
declare function createAction<State, Args extends any[]>(store: Store<State>, name: string, fn: ActionFunction<State, Args>): Action<State, Args>; | ||
interface ProviderProps { | ||
/** | ||
* Initial global state. Used for client side hidration | ||
*/ | ||
initialStates?: GlobalStates; | ||
/** | ||
* Use custom {@Link StoreManager | StoreManager} | ||
*/ | ||
manager?: StoreManager; | ||
/** | ||
* Enable Redux dev tool integration | ||
*/ | ||
enableDevTool?: boolean; | ||
} | ||
declare const StoreProvider: React.FC<React.PropsWithChildren<ProviderProps>>; | ||
declare function useStoreManager(): StoreManager; | ||
declare type Stores<States extends any[]> = { | ||
[index in keyof States]: Store<States[index]>; | ||
}; | ||
/** | ||
* Create multi-store selector | ||
* | ||
* @param stores list of store that will be used | ||
* @returns a function to create react hook | ||
*/ | ||
declare function createSelector<States extends any[]>(...stores: Stores<States>): <Args extends any[], Return>(select: (states: States, ...args: Args) => Return, comparator?: StateComparator<Return>) => (...args: Args) => Return; | ||
declare type ArgMapper<Args extends any[], Event> = (event: Event) => Args; | ||
/** | ||
* Use action with static arguments. If you need dynamic argument, use {@link useDispatcher} instead, | ||
* or {@link useActionCallback} if you want to use it as component callback paramater | ||
* | ||
* @param action Action that will be called | ||
* @param args Static action argument | ||
*/ | ||
declare function useAction<Args extends any[]>(action: Action<any, Args>, ...args: Args): () => void; | ||
/** | ||
* Use action as callback function. | ||
* | ||
* @param action Action that will be called | ||
* @returns Function that take React synthetic event as argument | ||
*/ | ||
declare function useActionCallback<Event = SyntheticEvent>(action: Action<any, []>): (event: Event) => void; | ||
/** | ||
* Use action as callback function and convert the event to action argument. | ||
* | ||
* @param action Action that will be called | ||
* @param remapArg Convert event argument in to action argument array | ||
* @param deps If remap isn't pure function, list it's dependency here. | ||
* @returns Function that take event as first argument | ||
*/ | ||
declare function useActionCallback<Args extends [any, ...any[]], Event = SyntheticEvent>(action: Action<any, Args>, remapArg: ArgMapper<Args, Event>, deps?: any[]): (event: Event) => void; | ||
declare function useDispatcher(): Dispatcher; | ||
/** | ||
* Get state of single store. | ||
* | ||
* @param store Store whose state will be used | ||
* | ||
* @returns current store's state | ||
*/ | ||
declare function useStore<State>(store: Store<State>): State; | ||
/** | ||
* Get state of single store and transform it using mapState. | ||
* Argument `comparator` is used to compare old & new value, | ||
* if it return false, the component will be rerendered. | ||
* | ||
* @param store Store whose state will be used | ||
* @param mapState Transform state into different value | ||
* @param comparator Compare old & new value returned by mapState | ||
* | ||
* @returns transformed state | ||
*/ | ||
declare function useStore<State, Return = State>(store: Store<State>, mapState: (state: State) => Return, comparator?: StateComparator<Return>): Return; | ||
export { Action, ActionFunction, DispatchContext, Dispatcher, GlobalStates, StateInitiator, Store, StoreManager, StoreProvider, createAction, createSelector, createStore, createStoreManager, useAction, useActionCallback, useDispatcher, useStore, useStoreManager }; |
@@ -0,8 +1,431 @@ | ||
'use strict'; | ||
'use strict' | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
if (process.env.NODE_ENV === 'production') { | ||
module.exports = require('./el-state.cjs.production.min.js') | ||
} else { | ||
module.exports = require('./el-state.cjs.development.js') | ||
var reactDom = require('react-dom'); | ||
var React = require('react'); | ||
var deepEqual = require('fast-deep-equal'); | ||
var withSelector = require('use-sync-external-store/with-selector'); | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
var deepEqual__default = /*#__PURE__*/_interopDefaultLegacy(deepEqual); | ||
// implementation | ||
function createAction(store, arg1, arg2) { | ||
if (typeof arg1 === 'string') { | ||
return { store: store, name: arg1, fn: arg2 }; | ||
} | ||
return { store: store, fn: arg1 }; | ||
} | ||
function getFullActionName(action) { | ||
var name = action.name || action.fn.name || '<unknown>'; | ||
return "".concat(action.store.name, ".").concat(name); | ||
} | ||
function initDevTool(states, subscriptions) { | ||
if (process.env.NODE_ENV === 'production') { | ||
return undefined; | ||
} | ||
var ext = typeof window !== 'undefined' ? window.__REDUX_DEVTOOLS_EXTENSION__ : undefined; | ||
if (!ext) | ||
return undefined; | ||
var connection = ext.connect({ | ||
name: 'el-state', | ||
features: { | ||
pause: true, | ||
lock: true, | ||
export: true, | ||
import: 'custom', | ||
jump: true, | ||
skip: false, | ||
reorder: false, | ||
persist: false, | ||
dispatch: false, | ||
test: false, | ||
}, | ||
}); | ||
connection.init(mapToObject(states)); | ||
connection.subscribe(function (_a) { | ||
var _b; | ||
var type = _a.type, state = _a.state, payload = _a.payload; | ||
if (type === 'DISPATCH' && (payload.type === 'JUMP_TO_STATE' || payload.type === 'JUMP_TO_ACTION')) { | ||
var obj = JSON.parse(state); | ||
states.clear(); | ||
var allSubscription_1 = new Set(); | ||
for (var key in obj) { | ||
states.set(key, obj[key]); | ||
(_b = subscriptions.get(key)) === null || _b === void 0 ? void 0 : _b.forEach(function (fn) { return allSubscription_1.add(fn); }); | ||
} | ||
allSubscription_1.forEach(function (fn) { return fn(); }); | ||
} | ||
}); | ||
return { | ||
log: function (action) { | ||
connection.send(action, mapToObject(states)); | ||
}, | ||
disconnect: function () { | ||
ext.disconnect(connection); | ||
}, | ||
}; | ||
} | ||
function mapToObject(map) { | ||
var obj = {}; | ||
map.forEach(function (value, key) { return (obj[key] = value); }); | ||
return obj; | ||
} | ||
/****************************************************************************** | ||
Copyright (c) Microsoft Corporation. | ||
Permission to use, copy, modify, and/or distribute this software for any | ||
purpose with or without fee is hereby granted. | ||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
PERFORMANCE OF THIS SOFTWARE. | ||
***************************************************************************** */ | ||
var __assign = function() { | ||
__assign = Object.assign || function __assign(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); | ||
}; | ||
function __rest(s, e) { | ||
var t = {}; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) | ||
t[p] = s[p]; | ||
if (s != null && typeof Object.getOwnPropertySymbols === "function") | ||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) | ||
t[p[i]] = s[p[i]]; | ||
} | ||
return t; | ||
} | ||
function __read(o, n) { | ||
var m = typeof Symbol === "function" && o[Symbol.iterator]; | ||
if (!m) return o; | ||
var i = m.call(o), r, ar = [], e; | ||
try { | ||
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); | ||
} | ||
catch (error) { e = { error: error }; } | ||
finally { | ||
try { | ||
if (r && !r.done && (m = i["return"])) m.call(i); | ||
} | ||
finally { if (e) throw e.error; } | ||
} | ||
return ar; | ||
} | ||
function __spreadArray(to, from, pack) { | ||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { | ||
if (ar || !(i in from)) { | ||
if (!ar) ar = Array.prototype.slice.call(from, 0, i); | ||
ar[i] = from[i]; | ||
} | ||
} | ||
return to.concat(ar || Array.prototype.slice.call(from)); | ||
} | ||
function createDispatcher(manager) { | ||
var currentChangesMap; | ||
var isInsideBulkUpdate = false; | ||
function prepareBulkUpdate() { | ||
var isRoot = !isInsideBulkUpdate; | ||
var changesMap = isRoot ? new Map() : currentChangesMap; | ||
if (isRoot) { | ||
isInsideBulkUpdate = true; | ||
currentChangesMap = changesMap; | ||
} | ||
function commit() { | ||
if (changesMap.size > 0) { | ||
manager.commit(changesMap); | ||
changesMap.clear(); | ||
} | ||
} | ||
function done() { | ||
if (isRoot) { | ||
isInsideBulkUpdate = false; | ||
currentChangesMap = undefined; | ||
} | ||
} | ||
return { isRoot: isRoot, changesMap: changesMap, commit: commit, done: done }; | ||
} | ||
function bulkUpdate(fn) { | ||
var _a = prepareBulkUpdate(), isRoot = _a.isRoot, commit = _a.commit, done = _a.done; | ||
fn(); | ||
if (isRoot) { | ||
commit(); | ||
if (process.env.NODE_ENV !== 'production' && manager.devTool) { | ||
manager.devTool.log({ type: '@bulkUpdate' }); | ||
} | ||
} | ||
done(); | ||
} | ||
function getStore(store) { | ||
return ((isInsideBulkUpdate && currentChangesMap && currentChangesMap.get(store.name)) || | ||
manager.getState(store)); | ||
} | ||
function dispatch(action) { | ||
var args = []; | ||
for (var _i = 1; _i < arguments.length; _i++) { | ||
args[_i - 1] = arguments[_i]; | ||
} | ||
var _a = prepareBulkUpdate(), isRoot = _a.isRoot, commit = _a.commit, done = _a.done; | ||
var isInDispatch = true; | ||
var storeName = action.store.name; | ||
var getState = function () { return getStore(action.store); }; | ||
var setState = function (updater, forceCommit) { | ||
if (forceCommit === void 0) { forceCommit = false; } | ||
if (process.env.NODE_ENV !== 'production' && !isInsideBulkUpdate && !isStateUpdaterFunction(updater)) { | ||
console.warn(new Error('You call setState() with plain state outside action, it can make state inconsistent. ' + | ||
'This error might happen when you use async action. Consider using setState() with callback function.')); | ||
} | ||
var bulk = prepareBulkUpdate(); | ||
var state = isStateUpdaterFunction(updater) ? updater(getStore(action.store)) : updater; | ||
bulk.changesMap.set(storeName, state); | ||
if (forceCommit || bulk.isRoot) { | ||
bulk.commit(); | ||
} | ||
if (process.env.NODE_ENV !== 'production' && manager.devTool && !isInDispatch) { | ||
var type = "".concat(getFullActionName(action), " (setState)"); | ||
manager.devTool.log({ type: type, args: args }); | ||
} | ||
bulk.done(); | ||
}; | ||
var state = getState(); | ||
var ctx = { | ||
state: state, | ||
getState: getState, | ||
setState: setState, | ||
mergeState: function (partialState, forceCommit) { | ||
if (typeof state !== 'object' || Array.isArray(state)) { | ||
throw new Error('Merge state only available for object based state'); | ||
} | ||
setState(function (oldState) { return Object.assign(Object.create(null), oldState, partialState); }, forceCommit); | ||
}, | ||
getStore: getStore, | ||
dispatch: dispatch, | ||
bulkUpdate: bulkUpdate, | ||
}; | ||
var newState = action.fn.apply(action, __spreadArray([ctx], __read(args), false)); | ||
if (!isPromise(newState) && newState !== undefined) { | ||
setState(newState); | ||
} | ||
if (isRoot) | ||
commit(); | ||
if (process.env.NODE_ENV !== 'production' && manager.devTool) { | ||
var type = getFullActionName(action); | ||
if (!isRoot) { | ||
type += ' (child)'; | ||
} | ||
manager.devTool.log({ type: type, args: args }); | ||
} | ||
isInDispatch = false; | ||
done(); | ||
} | ||
return dispatch; | ||
} | ||
function isPromise(p) { | ||
return typeof p === 'object' && 'then' in p && typeof p.then === 'function'; | ||
} | ||
function isStateUpdaterFunction(updater) { | ||
return typeof updater === 'function'; | ||
} | ||
function createStoreManager(initialStates, enableDevTool) { | ||
var states = initialStates || new Map(); | ||
var subscriptions = new Map(); | ||
var manager = { | ||
subscribe: function (store, fn) { | ||
var name = store.name; | ||
if (!subscriptions.has(name)) { | ||
subscriptions.set(name, new Set()); | ||
} | ||
var set = subscriptions.get(name); | ||
set.add(fn); | ||
return function () { return set.delete(fn); }; | ||
}, | ||
getState: function (store) { | ||
var name = store.name; | ||
if (states.has(name)) { | ||
return states.get(name); | ||
} | ||
else { | ||
var state = store.initState(); | ||
states.set(name, state); | ||
return state; | ||
} | ||
}, | ||
commit: function (newStates) { | ||
var triggered = new Set(); | ||
newStates.forEach(function (state, name) { | ||
states.set(name, state); | ||
var callbacks = subscriptions.get(name); | ||
if (callbacks) { | ||
callbacks.forEach(function (cb) { return triggered.add(cb); }); | ||
} | ||
}); | ||
if (triggered.size > 0) { | ||
reactDom.unstable_batchedUpdates(function (callbacks) { return callbacks.forEach(function (cb) { return cb(); }); }, triggered); | ||
} | ||
}, | ||
dispatcher: undefined, // will be set below | ||
}; | ||
manager.dispatcher = createDispatcher(manager); | ||
if (enableDevTool) { | ||
manager.devTool = initDevTool(states, subscriptions); | ||
} | ||
return manager; | ||
} | ||
// React context | ||
var Context = React__default["default"].createContext(undefined); | ||
var StoreManagerProvider = Context.Provider; | ||
var StoreProvider = function (_a) { | ||
var initialStates = _a.initialStates, enableDevTool = _a.enableDevTool, customManager = _a.manager, props = __rest(_a, ["initialStates", "enableDevTool", "manager"]); | ||
var manager = React.useMemo(function () { return customManager || createStoreManager(initialStates, enableDevTool); }, [customManager, initialStates, enableDevTool]); | ||
React.useEffect(function () { return function () { var _a; return (_a = manager.devTool) === null || _a === void 0 ? void 0 : _a.disconnect(); }; }, [manager]); | ||
return React__default["default"].createElement(StoreManagerProvider, __assign({}, props, { value: manager })); | ||
}; | ||
function useStoreManager() { | ||
var ctx = React.useContext(Context); | ||
if (!ctx) { | ||
throw new Error('You must wrap the component with <StoreProvider>'); | ||
} | ||
return ctx; | ||
} | ||
/** | ||
* Create multi-store selector | ||
* | ||
* @param stores list of store that will be used | ||
* @returns a function to create react hook | ||
*/ | ||
function createSelector() { | ||
var stores = []; | ||
for (var _i = 0; _i < arguments.length; _i++) { | ||
stores[_i] = arguments[_i]; | ||
} | ||
/** | ||
* Create react hook to use one or more store's state. | ||
* | ||
* @param select Function that fetch stores and return the result | ||
* @param comparator Compare old & new value returned by `select()`. | ||
* @returns React hook that evaluate select() when there is state change event; | ||
*/ | ||
return function (select, comparator) { | ||
if (comparator === void 0) { comparator = deepEqual__default["default"]; } | ||
return function useSelector() { | ||
var args = []; | ||
for (var _i = 0; _i < arguments.length; _i++) { | ||
args[_i] = arguments[_i]; | ||
} | ||
var manager = useStoreManager(); | ||
return withSelector.useSyncExternalStoreWithSelector(function (notify) { | ||
var unsubscribeFunctions = stores.map(function (store) { return manager.subscribe(store, notify); }); | ||
return function () { return unsubscribeFunctions.forEach(function (fn) { return fn(); }); }; | ||
}, function () { return stores.map(function (store) { return manager.getState(store); }); }, undefined, function (states) { return select.apply(void 0, __spreadArray([states], __read(args), false)); }, comparator); | ||
}; | ||
}; | ||
} | ||
var storeImplementation; | ||
function createStore(name, initialState) { | ||
var _a, _b, _c; | ||
if (process.env.NODE_ENV !== 'production') { | ||
storeImplementation = storeImplementation || new Map(); | ||
var oldLocation = storeImplementation.get(name); | ||
var newLocation = (_c = (_b = (_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split('\n')[2]) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : 'at unknown location'; | ||
if (oldLocation !== undefined && oldLocation !== newLocation) { | ||
throw new Error("Store with name \"".concat(name, "\" has already been declared ").concat(storeImplementation.get(name))); | ||
} | ||
storeImplementation.set(name, newLocation); | ||
} | ||
return { | ||
name: name, | ||
initState: isInitiatorFunction(initialState) ? initialState : function () { return initialState; }, | ||
}; | ||
} | ||
function isInitiatorFunction(x) { | ||
return typeof x === 'function'; | ||
} | ||
function useDispatcher() { | ||
var manager = useStoreManager(); | ||
return manager.dispatcher; | ||
} | ||
/** | ||
* Use action with static arguments. If you need dynamic argument, use {@link useDispatcher} instead, | ||
* or {@link useActionCallback} if you want to use it as component callback paramater | ||
* | ||
* @param action Action that will be called | ||
* @param args Static action argument | ||
*/ | ||
function useAction(action) { | ||
var args = []; | ||
for (var _i = 1; _i < arguments.length; _i++) { | ||
args[_i - 1] = arguments[_i]; | ||
} | ||
var dispatch = useDispatcher(); | ||
return React.useCallback(function callAction() { | ||
dispatch.apply(void 0, __spreadArray([action], __read(args), false)); | ||
}, __spreadArray([dispatch, action], __read(args), false)); | ||
} | ||
// real implementation | ||
function useActionCallback(action, remapArg, deps) { | ||
if (deps === void 0) { deps = []; } | ||
var dispatch = useDispatcher(); | ||
return React.useCallback(function actionCallback(event) { | ||
var args = remapArg ? remapArg(event) : []; | ||
if (process.env.NODE_ENV !== 'production') { | ||
// -1 is for dispatch context | ||
var neededArgLength = action.fn.length - 1; | ||
if (neededArgLength > args.length) { | ||
var fullActionName = getFullActionName(action); | ||
throw new Error("Action ".concat(fullActionName, " needs ").concat(neededArgLength, " arguments, but only get ").concat(args.length)); | ||
} | ||
} | ||
dispatch.apply(void 0, __spreadArray([action], __read(args), false)); | ||
}, __spreadArray([dispatch, action], __read(deps), false)); | ||
} | ||
function useStore(store, mapState, comparator) { | ||
// get store manager from context | ||
var manager = useStoreManager(); | ||
// subscribe to store changes | ||
return withSelector.useSyncExternalStoreWithSelector(function (notify) { return manager.subscribe(store, notify); }, function () { return manager.getState(store); }, undefined, (mapState || identityFn), (comparator !== null && comparator !== void 0 ? comparator : mapState) ? deepEqual__default["default"] : strictEqual); | ||
} | ||
function identityFn(states) { | ||
return states; | ||
} | ||
function strictEqual(a, b) { | ||
return a === b; | ||
} | ||
exports.StoreProvider = StoreProvider; | ||
exports.createAction = createAction; | ||
exports.createSelector = createSelector; | ||
exports.createStore = createStore; | ||
exports.createStoreManager = createStoreManager; | ||
exports.useAction = useAction; | ||
exports.useActionCallback = useActionCallback; | ||
exports.useDispatcher = useDispatcher; | ||
exports.useStore = useStore; | ||
exports.useStoreManager = useStoreManager; | ||
//# sourceMappingURL=index.js.map |
{ | ||
"name": "el-state", | ||
"version": "0.4.1", | ||
"version": "0.5.2", | ||
"license": "MIT", | ||
@@ -11,3 +11,3 @@ "homepage": "https://github.com/abihf/el-state#readme", | ||
"main": "dist/index.js", | ||
"module": "dist/el-state.esm.js", | ||
"module": "dist/index.mjs", | ||
"typings": "dist/index.d.ts", | ||
@@ -17,13 +17,13 @@ "sideEffects": false, | ||
"dist", | ||
"!dist/*.test.d.ts" | ||
"src" | ||
], | ||
"scripts": { | ||
"start": "tsdx watch", | ||
"build": "tsdx build", | ||
"test": "tsdx test --env=jsdom --coverage", | ||
"lint": "tsdx lint src" | ||
"build": "rollup -c", | ||
"test": "jest --env=jsdom --coverage", | ||
"lint": "eslint src/**", | ||
"doc": "typedoc src/index.ts" | ||
}, | ||
"peerDependencies": { | ||
"react": "^16.9.0", | ||
"react-dom": "^16.9.0" | ||
"react": "17 || 18", | ||
"react-dom": "17 || 18" | ||
}, | ||
@@ -42,18 +42,30 @@ "husky": { | ||
"devDependencies": { | ||
"@testing-library/react": "^9.4.0", | ||
"@types/jest": "^24.0.18", | ||
"@types/react": "^16.9.2", | ||
"@types/react-dom": "^16.9.5", | ||
"husky": "^3.0.4", | ||
"prettier": "^1.18.2", | ||
"pretty-quick": "^1.11.1", | ||
"react": "^16.12.0", | ||
"react-dom": "^16.12.0", | ||
"tsdx": "^0.12.3", | ||
"tslib": "^1.10.0", | ||
"typescript": "^3.7.5" | ||
"@rollup/plugin-typescript": "^8.3.2", | ||
"@swc/core": "^1.2.170", | ||
"@testing-library/react": "^13.1.1", | ||
"@types/jest": "^27.4.1", | ||
"@types/react": "^18.0.5", | ||
"@types/react-dom": "^18.0.1", | ||
"@types/use-sync-external-store": "^0.0.3", | ||
"eslint": "^8.13.0", | ||
"eslint-config-prettier": "^8.5.0", | ||
"eslint-config-react-app": "^7.0.1", | ||
"husky": "^7.0.4", | ||
"jest": "^27.5.1", | ||
"prettier": "^2.6.2", | ||
"pretty-quick": "^3.1.3", | ||
"react": "^18.0.0", | ||
"react-dom": "^18.0.0", | ||
"rollup": "^2.70.2", | ||
"rollup-plugin-dts": "^4.2.1", | ||
"ts-jest": "^27.1.4", | ||
"tslib": "^2.4.0", | ||
"typedoc": "^0.22.15", | ||
"typescript": "^4.6.3" | ||
}, | ||
"dependencies": { | ||
"fast-deep-equal": "^3.1.1" | ||
} | ||
"fast-deep-equal": "^3.1.3", | ||
"use-sync-external-store": "^1.0.0" | ||
}, | ||
"packageManager": "yarn@3.2.0" | ||
} |
@@ -36,3 +36,3 @@ #  él-staté | ||
```ts | ||
import { createStore, createState } from 'el-state'; | ||
import { createStore } from 'el-state'; | ||
@@ -74,3 +74,3 @@ type CounterState = { | ||
return counter > 1 ? name : ""; | ||
return counter > 1 ? name : ''; | ||
}); | ||
@@ -86,3 +86,2 @@ | ||
} | ||
``` | ||
@@ -89,0 +88,0 @@ |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
1706
1
106010
4
22
21
124
14
1
+ Addedreact@18.3.1(transitive)
+ Addedreact-dom@18.3.1(transitive)
+ Addedscheduler@0.23.2(transitive)
+ Addeduse-sync-external-store@1.4.0(transitive)
- Removedobject-assign@4.1.1(transitive)
- Removedprop-types@15.8.1(transitive)
- Removedreact@16.14.0(transitive)
- Removedreact-dom@16.14.0(transitive)
- Removedreact-is@16.13.1(transitive)
- Removedscheduler@0.19.1(transitive)
Updatedfast-deep-equal@^3.1.3