mobx-react-lite - npm Package Compare versions

Comparing version 0.3.7 to 1.0.0

dist/custom.js

 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('mobx'), require('react')) :
     typeof define === 'function' && define.amd ? define(['exports', 'mobx', 'react'], factory) :
-    (factory((global.mobxReact = {}),global.mobx,global.React));
-}(this, (function (exports,mobx,react) { 'use strict';
+    (global = global || self, factory(global.mobxReact = {}, global.mobx, global.React));
+}(this, function (exports, mobx, react) { 'use strict';
 
     if (!react.useState) {
-        throw new Error("mobx-react-lite requires React with Hooks support (alpha versions)");
+        throw new Error("mobx-react-lite requires React with Hooks support");
     }
@@ -104,5 +104,5 @@ if (!mobx.spy) {
     function useForceUpdate() {
-        const [, setTick] = react.useState(null);
+        const [, setTick] = react.useState(0);
         const update = react.useCallback(() => {
-            setTick(null);
+            setTick(tick => tick + 1);
         }, []);
@@ -209,2 +209,2 @@ return update;
 
-})));
+}));

dist/custom.module.js

@@ -1,6 +0,6 @@
-import { spy, observable, Reaction, computed } from 'mobx';
-import { useState, useRef, useMemo, useEffect, useCallback, forwardRef, memo } from 'react';
+import { spy, observable, computed, Reaction } from 'mobx';
+import { useState, useRef, useMemo, useEffect, useCallback, memo, forwardRef } from 'react';
 
 if (!useState) {
-    throw new Error("mobx-react-lite requires React with Hooks support (alpha versions)");
+    throw new Error("mobx-react-lite requires React with Hooks support");
 }
@@ -101,5 +101,5 @@ if (!spy) {
 function useForceUpdate() {
-    const [, setTick] = useState(null);
+    const [, setTick] = useState(0);
     const update = useCallback(() => {
-        setTick(null);
+        setTick(tick => tick + 1);
     }, []);
@@ -106,0 +106,0 @@ return update;

dist/index.js

 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('mobx'), require('react')) :
     typeof define === 'function' && define.amd ? define(['exports', 'mobx', 'react'], factory) :
-    (factory((global.mobxReact = {}),global.mobx,global.React));
-}(this, (function (exports,mobx,react) { 'use strict';
+    (global = global || self, factory(global.mobxReact = {}, global.mobx, global.React));
+}(this, function (exports, mobx, react) { 'use strict';
 
     if (!react.useState) {
-        throw new Error("mobx-react-lite requires React with Hooks support (alpha versions)");
+        throw new Error("mobx-react-lite requires React with Hooks support");
     }
@@ -104,5 +104,5 @@ if (!mobx.spy) {
     function useForceUpdate() {
-        const [, setTick] = react.useState(null);
+        const [, setTick] = react.useState(0);
         const update = react.useCallback(() => {
-            setTick(null);
+            setTick(tick => tick + 1);
         }, []);
@@ -209,2 +209,2 @@ return update;
 
-})));
+}));

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

dist/index.module.js

@@ -1,6 +0,6 @@
-import { spy, observable, Reaction, computed } from 'mobx';
-import { useState, useRef, useMemo, useEffect, useCallback, forwardRef, memo } from 'react';
+import { spy, observable, computed, Reaction } from 'mobx';
+import { useState, useRef, useMemo, useEffect, useCallback, memo, forwardRef } from 'react';
 
 if (!useState) {
-    throw new Error("mobx-react-lite requires React with Hooks support (alpha versions)");
+    throw new Error("mobx-react-lite requires React with Hooks support");
 }
@@ -101,5 +101,5 @@ if (!spy) {
 function useForceUpdate() {
-    const [, setTick] = useState(null);
+    const [, setTick] = useState(0);
     const update = useCallback(() => {
-        setTick(null);
+        setTick(tick => tick + 1);
     }, []);
@@ -106,0 +106,0 @@ return update;

dist/native.js

@@ -9,3 +9,3 @@ 'use strict';
 if (!react.useState) {
-    throw new Error("mobx-react-lite requires React with Hooks support (alpha versions)");
+    throw new Error("mobx-react-lite requires React with Hooks support");
 }
@@ -106,5 +106,5 @@ if (!mobx.spy) {
 function useForceUpdate() {
-    const [, setTick] = react.useState(null);
+    const [, setTick] = react.useState(0);
     const update = react.useCallback(() => {
-        setTick(null);
+        setTick(tick => tick + 1);
     }, []);
@@ -111,0 +111,0 @@ return update;

dist/ObserverComponent.d.ts

@@ -6,3 +6,3 @@ import { ReactElement } from "react";
 }
-declare function ObserverComponent({ children, render }: IObserverProps): ReactElement<any> | null;
+declare function ObserverComponent({ children, render }: IObserverProps): ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | null;
 declare namespace ObserverComponent {
@@ -9,0 +9,0 @@ var propTypes: {

package.json

 {
   "name": "mobx-react-lite",
-  "version": "0.3.7",
+  "version": "1.0.0",
   "description": "Lightweight React bindings for MobX based on experimental React hooks",
@@ -33,9 +33,9 @@ "main": "dist/index.js",
     "mobx": "^4.0.0 || ^5.0.0",
-    "react": "16.7.0-alpha.2 || 16.8.0-alpha.0"
+    "react": "^16.8.0"
   },
   "devDependencies": {
-    "@types/jest": "^23.3.9",
-    "@types/node": "^10.0.0",
-    "@types/react": "^16.7.2",
-    "@types/react-dom": "^16.0.9",
+    "@types/jest": "23.3.12",
+    "@types/node": "^10.12.21",
+    "@types/react": "^16.8.2",
+    "@types/react-dom": "^16.8.0",
     "coveralls": "^3.0.2",
@@ -47,22 +47,22 @@ "husky": "^1.1.3",
     "jest-mock-console": "^0.4.2",
-    "lint-staged": "^8.0.4",
+    "lint-staged": "^8.1.3",
     "lodash": "^4.17.11",
     "mobx": "^5.0.0",
-    "prettier": "^1.15.2",
-    "react": "16.8.0-alpha.0",
-    "react-dom": "16.8.0-alpha.0",
-    "react-testing-library": "^5.2.3",
+    "prettier": "^1.16.4",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-testing-library": "^5.5.3",
     "rimraf": "^2.6.2",
-    "rollup": "^1.1.0",
+    "rollup": "^1.1.2",
     "rollup-plugin-alias": "^1.4.0",
     "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-filesize": "^6.0.0",
+    "rollup-plugin-filesize": "^6.0.1",
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-replace": "^2.1.0",
-    "rollup-plugin-terser": "^4.0.0",
-    "rollup-plugin-typescript2": "^0.19.0",
+    "rollup-plugin-terser": "^4.0.4",
+    "rollup-plugin-typescript2": "^0.19.2",
     "ts-jest": "^23.10.4",
     "tslint": "^5.11.0",
-    "tslint-config-prettier": "^1.15.0",
-    "typescript": "^3.1.6"
+    "tslint-config-prettier": "^1.18.0",
+    "typescript": "^3.3.1"
   },
@@ -75,3 +75,7 @@ "keywords": [
     "reactjs",
-    "reactive"
+    "reactive",
+    "hooks",
+    "observer",
+    "useObserver",
+    "useComputer"
   ],
@@ -78,0 +82,0 @@ "lint-staged": {

README.md

@@ -9,6 +9,4 @@ # mobx-react-lite <!-- omit in toc -->
 
-**You need React version 16.7.0-alpha.2 or 16.8.0-alpha.0 which is highly experimental and not recommended for production.**
+**You need React version 16.8.0 and above**
 
-**Do not use React 16.7 as it's [missing Hooks support](https://reactjs.org/blog/2018/12/19/react-v-16-7.html)!**
-
 [![NPM](https://nodei.co/npm/mobx-react-lite.png)](https://www.npmjs.com/package/mobx-react-lite)
@@ -234,3 +232,3 @@
 ```typescript
-import {reaction} from 'mobx'
+import { reaction } from "mobx"
 import { observer, useComputed, useDisposable } from "mobx-react-lite"
@@ -237,0 +235,0 @@

Fixed alerts

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

265593

increased by1.47%

Lines of code

1026

increased by0.1%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Number of lines in readme file

341

decreased by-0.58%

No dependency changes