simpler-state - npm Package Compare versions

Comparing version 1.2.0-rc.1 to 1.2.0

es/useEntity.js

@@ -1,3 +0,3 @@
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
-import { strictEqual } from './utils';
+import { useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import { strictEqual, isClientSide } from './utils';
 
@@ -8,4 +8,14 @@ const identity = v => v;
   if (!(entity._subscribers instanceof Set)) throw new Error('Invalid entity.');
-  return useSyncExternalStoreWithSelector(entity._subscribe, entity.get, entity.get, transform, equality);
+  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;
 };
 export default useEntity;

es/utils.js

@@ -18,2 +18,19 @@ /* 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;
 };

lib/useEntity.js

@@ -6,3 +6,3 @@ "use strict";
 
-var _withSelector = require("use-sync-external-store/shim/with-selector");
+var _react = require("react");
 
@@ -25,3 +25,19 @@ var _utils = require("./utils");
   if (!(entity._subscribers instanceof Set)) throw new Error('Invalid entity.');
-  return (0, _withSelector.useSyncExternalStoreWithSelector)(entity._subscribe, entity.get, entity.get, transform, equality);
+
+  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;
 };
@@ -28,0 +44,0 @@

lib/utils.js

 "use strict";
 
 exports.__esModule = true;
-exports.shallowEqual = exports.strictEqual = void 0;
+exports.clearSSR = exports.emulateSSR = exports.isClientSide = exports.isClientDetected = exports.shallowEqual = exports.strictEqual = void 0;
 
@@ -34,2 +34,32 @@ /* 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;

package.json

 {
   "name": "simpler-state",
-  "version": "1.2.0-rc.1",
+  "version": "1.2.0",
   "description": "The simplest app state management for React",
@@ -43,4 +43,3 @@ "keywords": [
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "use-sync-external-store": "^1.0.0"
+    "@babel/runtime": "^7.13.10"
   },
@@ -47,0 +46,0 @@ "devDependencies": {

README.md

@@ -8,17 +8,15 @@ # <img src="https://simpler-state.js.org/assets/simpler-state-logo.png" alt="SimpleR State" width="240"/>
 
-**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**
-- **Fully supports React 18 Concurrent Mode**
-- 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__ 
+- Multiple times __faster__ than context/reducer solution
+- It's tiny, just __around 1 KB__ (minified + gzipped)
 
 Get all these benefits with one dependency install:
-
 ```
@@ -30,3 +28,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)
 
@@ -45,8 +43,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
 
@@ -64,3 +62,3 @@ ```jsx
 
-      <button onClick={() => increment(1)}> + </button>
+      <button onClick={() => increment(1)}> + </button> 
       <button onClick={reset}> Reset </button>
@@ -72,3 +70,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.__ 
 
@@ -81,3 +79,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.__ 😀
 
@@ -84,0 +82,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

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27308

increased by8.97%

Dependency count

2

decreased by-33.33%

Lines of code

557

increased by11.62%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

81

decreased by-2.41%

Dependency changes

• - Removeduse-sync-external-store@^1.0.0

• - Removeduse-sync-external-store@1.2.2(transitive)