mobx-react-lite - npm Package Compare versions

Comparing version 0.3.4 to 0.3.5

dist/custom.js

@@ -8,6 +8,6 @@ (function (global, factory) {
     if (!react.useState) {
-        throw new Error("mobx-react-lite requires React 16.7 to be available");
+        throw new Error("mobx-react-lite requires React with Hooks support (alpha versions)");
     }
     if (!mobx.spy) {
-        throw new Error("mobx-react-lite requires mobx 4 to be available");
+        throw new Error("mobx-react-lite requires mobx at least version 4 to be available");
     }
@@ -14,0 +14,0 @@

dist/custom.module.js

@@ -5,6 +5,6 @@ import { spy, observable, Reaction, computed } from 'mobx';
 if (!useState) {
-    throw new Error("mobx-react-lite requires React 16.7 to be available");
+    throw new Error("mobx-react-lite requires React with Hooks support (alpha versions)");
 }
 if (!spy) {
-    throw new Error("mobx-react-lite requires mobx 4 to be available");
+    throw new Error("mobx-react-lite requires mobx at least version 4 to be available");
 }
@@ -11,0 +11,0 @@

dist/index.js

@@ -8,6 +8,6 @@ (function (global, factory) {
     if (!react.useState) {
-        throw new Error("mobx-react-lite requires React 16.7 to be available");
+        throw new Error("mobx-react-lite requires React with Hooks support (alpha versions)");
     }
     if (!mobx.spy) {
-        throw new Error("mobx-react-lite requires mobx 4 to be available");
+        throw new Error("mobx-react-lite requires mobx at least version 4 to be available");
     }
@@ -14,0 +14,0 @@

dist/index.min.js

@@ -1,1 +0,1 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("mobx"),require("react")):"function"==typeof define&&define.amd?define(["exports","mobx","react"],r):r(e.mobxReact={},e.mobx,e.React)}(this,function(e,r,t){"use strict";if(!t.useState)throw new Error("mobx-react-lite requires React 16.7 to be available");if(!r.spy)throw new Error("mobx-react-lite requires mobx 4 to be available");function n(e,r=[]){const n=t.useRef(void 0);return t.useMemo(()=>{n.current=e()},r),t.useEffect(()=>()=>{n.current&&"function"==typeof n.current&&n.current()},r),n.current}let o=!1;function u(){return o}const i=[];function c(e,n="observed"){if(u())return e();const o=function(){const[e,r]=t.useState(1);return t.useCallback(()=>{r(e+1)},[])}(),c=t.useRef(new r.Reaction(`observer(${n})`,()=>{o()}));let s;return function(e){t.useEffect(()=>e,i)}(()=>{c.current.dispose()}),c.current.track(()=>{s=e()}),s}function s({children:e,render:r}){const t=e||r;return"function"!=typeof t?null:c(t)}function f(e,r,t,n,o){const u="children"===r?"render":"children",i="function"==typeof e[r],c="function"==typeof e[u];return i&&c?new Error("MobX Observer: Do not use children and render in the same time in`"+t):i||c?null:new Error("Invalid prop `"+o+"` of type `"+typeof e[r]+"` supplied to `"+t+"`, expected `function`.")}s.propTypes={children:f,render:f},s.displayName="Observer",e.useObservable=function(e){return t.useRef(r.observable(e)).current},e.useComputed=function(e,n=[]){return t.useMemo(()=>r.computed(e),n).get()},e.useDisposable=n,e.useObservableEffect=function(e,r=[]){return n(e,r)},e.isUsingStaticRendering=u,e.useStaticRendering=function(e){o=e},e.observer=function(e,r){if(u())return e;const n=Object.assign({forwardRef:!1},r),o=e.displayName||e.name,i=(r,t)=>c(()=>e(r,t),o);let s;return(s=n.forwardRef?t.memo(t.forwardRef(i)):t.memo(i)).displayName=o,s},e.useObserver=c,e.Observer=s,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("mobx"),require("react")):"function"==typeof define&&define.amd?define(["exports","mobx","react"],r):r(e.mobxReact={},e.mobx,e.React)}(this,function(e,r,t){"use strict";if(!t.useState)throw new Error("mobx-react-lite requires React with Hooks support (alpha versions)");if(!r.spy)throw new Error("mobx-react-lite requires mobx at least version 4 to be available");function n(e,r=[]){const n=t.useRef(void 0);return t.useMemo(()=>{n.current=e()},r),t.useEffect(()=>()=>{n.current&&"function"==typeof n.current&&n.current()},r),n.current}let o=!1;function u(){return o}const i=[];function s(e,n="observed"){if(u())return e();const o=function(){const[e,r]=t.useState(1);return t.useCallback(()=>{r(e+1)},[])}(),s=t.useRef(new r.Reaction(`observer(${n})`,()=>{o()}));let c;return function(e){t.useEffect(()=>e,i)}(()=>{s.current.dispose()}),s.current.track(()=>{c=e()}),c}function c({children:e,render:r}){const t=e||r;return"function"!=typeof t?null:s(t)}function f(e,r,t,n,o){const u="children"===r?"render":"children",i="function"==typeof e[r],s="function"==typeof e[u];return i&&s?new Error("MobX Observer: Do not use children and render in the same time in`"+t):i||s?null:new Error("Invalid prop `"+o+"` of type `"+typeof e[r]+"` supplied to `"+t+"`, expected `function`.")}c.propTypes={children:f,render:f},c.displayName="Observer",e.useObservable=function(e){return t.useRef(r.observable(e)).current},e.useComputed=function(e,n=[]){return t.useMemo(()=>r.computed(e),n).get()},e.useDisposable=n,e.useObservableEffect=function(e,r=[]){return n(e,r)},e.isUsingStaticRendering=u,e.useStaticRendering=function(e){o=e},e.observer=function(e,r){if(u())return e;const n=Object.assign({forwardRef:!1},r),o=e.displayName||e.name,i=(r,t)=>s(()=>e(r,t),o);let c;return(c=n.forwardRef?t.memo(t.forwardRef(i)):t.memo(i)).displayName=o,c},e.useObserver=s,e.Observer=c,Object.defineProperty(e,"__esModule",{value:!0})});

dist/index.module.js

@@ -5,6 +5,6 @@ import { spy, observable, Reaction, computed } from 'mobx';
 if (!useState) {
-    throw new Error("mobx-react-lite requires React 16.7 to be available");
+    throw new Error("mobx-react-lite requires React with Hooks support (alpha versions)");
 }
 if (!spy) {
-    throw new Error("mobx-react-lite requires mobx 4 to be available");
+    throw new Error("mobx-react-lite requires mobx at least version 4 to be available");
 }
@@ -11,0 +11,0 @@

dist/native.js

@@ -9,6 +9,6 @@ 'use strict';
 if (!react.useState) {
-    throw new Error("mobx-react-lite requires React 16.7 to be available");
+    throw new Error("mobx-react-lite requires React with Hooks support (alpha versions)");
 }
 if (!mobx.spy) {
-    throw new Error("mobx-react-lite requires mobx 4 to be available");
+    throw new Error("mobx-react-lite requires mobx at least version 4 to be available");
 }
@@ -15,0 +15,0 @@

package.json

 {
   "name": "mobx-react-lite",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Lightweight React bindings for MobX based on experimental React hooks",
@@ -33,3 +33,3 @@ "main": "dist/index.js",
     "mobx": "^4.0.0 || ^5.0.0",
-    "react": "^16.7.0-alpha.0"
+    "react": "16.7.0-alpha.2 || 16.8.0-alpha.0"
   },
@@ -51,4 +51,4 @@ "devDependencies": {
     "prettier": "^1.15.2",
-    "react": "^16.7.0-alpha.2",
-    "react-dom": "^16.7.0-alpha.2",
+    "react": "16.8.0-alpha.0",
+    "react-dom": "16.8.0-alpha.0",
     "react-testing-library": "^5.2.3",
@@ -55,0 +55,0 @@ "rimraf": "^2.6.2",

README.md

@@ -36,3 +36,3 @@ # mobx-react-lite <!-- omit in toc -->
 ```jsx
-import { Observer } from "mobx-react-lite"
+import { Observer, useObservable } from "mobx-react-lite"
 
@@ -57,3 +57,3 @@ function ObservePerson(props) {
 ```jsx
-import { Observer } from "mobx-react-lite"
+import { Observer, useObservable } from "mobx-react-lite"
 
@@ -283,3 +283,3 @@ function ObservePerson(props) {
 
-const userSelector = createSelector(({ user ) => ({
+const userSelector = createSelector(({ user }) => ({
     name: user.name,
@@ -308,3 +308,3 @@ age: user.age
 
-It may look a bit more verbose than a _classic_ inject, but there is nothing stopping you to make your own `inject` HOC which is so much easier since everything is just a funciton.
+It may look a bit more verbose than a _classic_ inject, but there is nothing stopping you to make your own `inject` HOC which is so much easier since everything is just a function.
 
@@ -314,8 +314,10 @@ ```tsx
 
-function inject(useSelector, baseComponent) {
-    const store = useContext(StoreContext)
-    const selected = useSelector(store)
-    // optional memo essentially making a pure component
-    return React.memo(props => baseComponent({ ...selected, ...props }))
-}
+const inject = (useSelector, baseComponent) => (
+    React.useMemo((props) => {
+        const store = useContext(StoreContext)
+        const selected = useSelector(store)
+        
+        return baseComponent({ ...selected, ...props })
+    })
+)
 
@@ -322,0 +324,0 @@ // use the HOC with a selector

Fixed alerts

Major refactor

Supply chain risk

Package 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

Improved metrics

Number of lines in readme file

323

increased by0.62%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

251073

decreased by-0.07%

Number of package files

21

decreased by-12.5%

Lines of code

863

decreased by-1.15%

No dependency changes