Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
simpler-state
Advanced tools
simpler-state - npm Package Compare versions
Comparing version 1.2.0 to 1.2.1
@@ -1,3 +0,3 @@ | ||
| import { useState, useCallback, useEffect, useLayoutEffect } from 'react'; | ||
| import { strictEqual, isClientSide } from './utils'; | ||
| import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'; | ||
| import { strictEqual } from './utils'; | ||
@@ -8,14 +8,4 @@ const identity = v => v; | ||
| if (!(entity._subscribers instanceof Set)) throw new Error('Invalid entity.'); | ||
| const [state, setState] = useState(transform(entity._value)); | ||
| const subscriberFn = useCallback(newValue => { | ||
| const newComputed = transform(newValue); | ||
| const hasChanged = !equality(state, newComputed); | ||
| if (hasChanged) setState(newComputed); | ||
| }, [transform, equality, state]); | ||
| const useIsoEffect = isClientSide() ? useLayoutEffect : useEffect; | ||
| useIsoEffect(() => entity._subscribe(subscriberFn), [subscriberFn, entity]); // Re-sync state in case transform function has changed | ||
| subscriberFn(entity._value); | ||
| return state; | ||
| return useSyncExternalStoreWithSelector(entity._subscribe, entity.get, entity.get, transform, equality); | ||
| }; | ||
| export default useEntity; |
@@ -18,19 +18,2 @@ /* Basic equality functions */ | ||
| return true; | ||
| }; | ||
| /* Client-side vs. server-side rendering detection */ | ||
| export const isClientDetected = () => { | ||
| const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); | ||
| const canUseNative = typeof navigator !== 'undefined' && navigator.product === 'ReactNative'; | ||
| return canUseDOM || canUseNative; | ||
| }; | ||
| const isClient = isClientDetected(); | ||
| let fakeSSR = false; | ||
| export const isClientSide = () => isClient && !fakeSSR; | ||
| export const emulateSSR = () => { | ||
| fakeSSR = true; | ||
| }; | ||
| export const clearSSR = () => { | ||
| fakeSSR = false; | ||
| }; |
@@ -6,3 +6,3 @@ "use strict"; | ||
| var _react = require("react"); | ||
| var _withSelector = require("use-sync-external-store/shim/with-selector"); | ||
@@ -25,19 +25,3 @@ var _utils = require("./utils"); | ||
| if (!(entity._subscribers instanceof Set)) throw new Error('Invalid entity.'); | ||
| var _useState = (0, _react.useState)(transform(entity._value)), | ||
| state = _useState[0], | ||
| setState = _useState[1]; | ||
| var subscriberFn = (0, _react.useCallback)(function (newValue) { | ||
| var newComputed = transform(newValue); | ||
| var hasChanged = !equality(state, newComputed); | ||
| if (hasChanged) setState(newComputed); | ||
| }, [transform, equality, state]); | ||
| var useIsoEffect = (0, _utils.isClientSide)() ? _react.useLayoutEffect : _react.useEffect; | ||
| useIsoEffect(function () { | ||
| return entity._subscribe(subscriberFn); | ||
| }, [subscriberFn, entity]); // Re-sync state in case transform function has changed | ||
| subscriberFn(entity._value); | ||
| return state; | ||
| return (0, _withSelector.useSyncExternalStoreWithSelector)(entity._subscribe, entity.get, entity.get, transform, equality); | ||
| }; | ||
@@ -44,0 +28,0 @@ |
| "use strict"; | ||
| exports.__esModule = true; | ||
| exports.clearSSR = exports.emulateSSR = exports.isClientSide = exports.isClientDetected = exports.shallowEqual = exports.strictEqual = void 0; | ||
| exports.shallowEqual = exports.strictEqual = void 0; | ||
@@ -34,32 +34,2 @@ /* Basic equality functions */ | ||
| return true; | ||
| }; | ||
| /* Client-side vs. server-side rendering detection */ | ||
| var isClientDetected = function isClientDetected() { | ||
| var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); | ||
| var canUseNative = typeof navigator !== 'undefined' && navigator.product === 'ReactNative'; | ||
| return canUseDOM || canUseNative; | ||
| }; | ||
| exports.isClientDetected = isClientDetected; | ||
| var isClient = isClientDetected(); | ||
| var fakeSSR = false; | ||
| var isClientSide = function isClientSide() { | ||
| return isClient && !fakeSSR; | ||
| }; | ||
| exports.isClientSide = isClientSide; | ||
| var emulateSSR = function emulateSSR() { | ||
| fakeSSR = true; | ||
| }; | ||
| exports.emulateSSR = emulateSSR; | ||
| var clearSSR = function clearSSR() { | ||
| fakeSSR = false; | ||
| }; | ||
| exports.clearSSR = clearSSR; | ||
| }; |
| { | ||
| "name": "simpler-state", | ||
| "version": "1.2.0", | ||
| "version": "1.2.1", | ||
| "description": "The simplest app state management for React", | ||
@@ -43,3 +43,4 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@babel/runtime": "^7.13.10" | ||
| "@babel/runtime": "^7.13.10", | ||
| "use-sync-external-store": "^1.0.0" | ||
| }, | ||
@@ -46,0 +47,0 @@ "devDependencies": { |
| # <img src="https://simpler-state.js.org/assets/simpler-state-logo.png" alt="SimpleR State" width="240"/> | ||
| [](https://www.npmjs.com/package/simpler-state) | ||
| [](https://travis-ci.org/github/arnelenero/simpler-state) | ||
| [](https://coveralls.io/github/arnelenero/simpler-state) | ||
| [](https://travis-ci.com/github/arnelenero/simpler-state) | ||
| [](https://coveralls.io/github/arnelenero/simpler-state) | ||
| [](https://opensource.org/licenses/MIT) | ||
| __SimpleR State__ is an ultra-lightweight library that provides the _simplest_ state management for React. | ||
| **SimpleR State** is an ultra-lightweight library that provides the _simplest_ state management for React. | ||
| - __Minimalist API__; no complicated concepts or boilerplate | ||
| - Use __plain functions__ to update state (including async) | ||
| - Largely __unopinionated__ with flexible syntax | ||
| - Extremely __simple to unit test__ state logic | ||
| - Highly extensible with __plug-ins__ (e.g. persistence, dev tools) | ||
| - Full __TypeScript__ support with uncomplicated types | ||
| - Made specifically for React, and built on __React Hooks__ | ||
| - Multiple times __faster__ than context/reducer solution | ||
| - It's tiny, just __around 1 KB__ (minified + gzipped) | ||
| - **Minimalist API**; no complicated concepts or boilerplate | ||
| - Use **plain functions** to update state (including async) | ||
| - Largely **unopinionated** with flexible syntax | ||
| - Extremely **simple to unit test** state logic | ||
| - Highly extensible with **plug-ins** (e.g. persistence, dev tools) | ||
| - Full **TypeScript** support with uncomplicated types | ||
| - Made specifically for React, and built on **React Hooks** | ||
| - **Fully supports React 18 Concurrent Mode** | ||
| - Multiple times **faster** than context/reducer solution | ||
| - It's tiny, just **around 1 KB** (minified + gzipped) | ||
| Get all these benefits with one dependency install: | ||
| ``` | ||
@@ -27,3 +29,3 @@ npm install simpler-state | ||
| __Step 1:__ Create an entity (shared state) and actions (updater functions) | ||
| **Step 1:** Create an entity (shared state) and actions (updater functions) | ||
@@ -42,8 +44,8 @@ ```js | ||
| export const increment = by => { | ||
| counter.set(value => value + by) | ||
| // --OR--> counter.set(counter.get() + by) | ||
| counter.set(value => value + by) | ||
| // --OR--> counter.set(counter.get() + by) | ||
| } | ||
| ``` | ||
| __Step 2:__ Use the entity in your components with hooks | ||
| **Step 2:** Use the entity in your components with hooks | ||
@@ -61,3 +63,3 @@ ```jsx | ||
| <button onClick={() => increment(1)}> + </button> | ||
| <button onClick={() => increment(1)}> + </button> | ||
| <button onClick={reset}> Reset </button> | ||
@@ -69,3 +71,3 @@ </> | ||
| It's that simple! __But the library can do a lot more, so check out the docs website.__ | ||
| It's that simple! **But the library can do a lot more, so check out the docs website.** | ||
@@ -78,3 +80,3 @@ ## Documentation | ||
| __If you like this library, the concept, and its simplicity, please give it a star ⭐️ on the [GitHub repo](https://github.com/arnelenero/simpler-state) to let me know.__ 😀 | ||
| **If you like this library, the concept, and its simplicity, please give it a star ⭐️ on the [GitHub repo](https://github.com/arnelenero/simpler-state) to let me know.** 😀 | ||
@@ -81,0 +83,0 @@ The RFC (Request For Comments) has ended, but please feel free to open an issue on GitHub for any concerns/questions/suggestions. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by2.47%
83
Worsened metrics
- Total package byte prevSize
- decreased by-8.22%
25064
- Dependency count
- increased by50%
3
- Lines of code
- decreased by-10.41%
499
Dependency changes
+ Addeduse-sync-external-store@1.2.2(transitive)