mobx-react-lite - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

dist/custom.js

@@ -11,3 +11,3 @@ (function (global, factory) {
     if (!mobx.spy) {
-        throw new Error("mobx-react-lite requires mobx to be available");
+        throw new Error("mobx-react-lite requires mobx 4 to be available");
     }
@@ -120,6 +120,6 @@
         const component = children || render;
-        if (typeof component === "undefined") {
+        if (typeof component !== "function") {
             return null;
         }
-        return component();
+        return useObserver(component);
     }
@@ -131,3 +131,2 @@ ObserverComponent.propTypes = {
     ObserverComponent.displayName = "Observer";
-    const Observer = observer(ObserverComponent);
     function ObserverPropsCheck(props, key, componentName, location, propFullName) {
@@ -160,3 +159,3 @@ const extraKey = key === "children" ? "render" : "children";
     exports.useObserver = useObserver;
-    exports.Observer = Observer;
+    exports.Observer = ObserverComponent;
 
@@ -163,0 +162,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

dist/custom.module.js

@@ -8,3 +8,3 @@ import { spy, observable, Reaction, computed } from 'mobx';
 if (!spy) {
-    throw new Error("mobx-react-lite requires mobx to be available");
+    throw new Error("mobx-react-lite requires mobx 4 to be available");
 }
@@ -117,6 +117,6 @@
     const component = children || render;
-    if (typeof component === "undefined") {
+    if (typeof component !== "function") {
         return null;
     }
-    return component();
+    return useObserver(component);
 }
@@ -128,3 +128,2 @@ ObserverComponent.propTypes = {
 ObserverComponent.displayName = "Observer";
-const Observer = observer(ObserverComponent);
 function ObserverPropsCheck(props, key, componentName, location, propFullName) {
@@ -150,2 +149,2 @@ const extraKey = key === "children" ? "render" : "children";
 
-export { useObservable, useComputed, useObservableEffect, isUsingStaticRendering, useStaticRendering, observer, useObserver, Observer };
+export { useObservable, useComputed, useObservableEffect, isUsingStaticRendering, useStaticRendering, observer, useObserver, ObserverComponent as Observer };

dist/index.d.ts

 import "./assertEnvironment";
 export { useObservable } from "./useObservable";
 export { useComputed } from "./useComputed";
-export { observer, useStaticRendering } from "./observer";
+export { useObservableEffect } from "./useObservableEffect";
+export { isUsingStaticRendering, useStaticRendering } from "./staticRendering";
+export { observer, IObserverOptions } from "./observer";
+export { useObserver } from "./useObserver";
 export { Observer } from "./ObserverComponent";

dist/index.js

@@ -11,3 +11,3 @@ (function (global, factory) {
     if (!mobx.spy) {
-        throw new Error("mobx-react-lite requires mobx to be available");
+        throw new Error("mobx-react-lite requires mobx 4 to be available");
     }
@@ -120,6 +120,6 @@
         const component = children || render;
-        if (typeof component === "undefined") {
+        if (typeof component !== "function") {
             return null;
         }
-        return component();
+        return useObserver(component);
     }
@@ -131,3 +131,2 @@ ObserverComponent.propTypes = {
     ObserverComponent.displayName = "Observer";
-    const Observer = observer(ObserverComponent);
     function ObserverPropsCheck(props, key, componentName, location, propFullName) {
@@ -160,3 +159,3 @@ const extraKey = key === "children" ? "render" : "children";
     exports.useObserver = useObserver;
-    exports.Observer = Observer;
+    exports.Observer = ObserverComponent;
 
@@ -163,0 +162,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

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 to be available");let n=!1;function o(){return n}const u=[];function i(e,n="observed"){if(o())return e();const i=function(){const[e,r]=t.useState(1);return t.useCallback(()=>{r(e+1)},[])}(),c=t.useRef(new r.Reaction(`observer(${n})`,()=>{i()}));let s;return function(e){t.useEffect(()=>e,u)}(()=>{c.current.dispose()}),c.current.track(()=>{s=e()}),s}function c(e,r){if(o())return e;const n=Object.assign({forwardRef:!1},r),u=e.displayName||e.name,c=(r,t)=>i(()=>e(r,t),u);let s;return(s=n.forwardRef?t.memo(t.forwardRef(c)):t.memo(c)).displayName=u,s}function s({children:e,render:r}){const t=e||r;return void 0===t?null:t()}s.propTypes={children:a,render:a},s.displayName="Observer";const f=c(s);function a(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`.")}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.useObservableEffect=function(e,r=[]){const n=t.useRef(void 0);return t.useMemo(()=>{n.current=e()},r),t.useEffect(()=>()=>{n.current&&n.current()},r),n.current},e.isUsingStaticRendering=o,e.useStaticRendering=function(e){n=e},e.observer=c,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.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");let n=!1;function o(){return n}const u=[];function i(e,n="observed"){if(o())return e();const i=function(){const[e,r]=t.useState(1);return t.useCallback(()=>{r(e+1)},[])}(),c=t.useRef(new r.Reaction(`observer(${n})`,()=>{i()}));let s;return function(e){t.useEffect(()=>e,u)}(()=>{c.current.dispose()}),c.current.track(()=>{s=e()}),s}function c({children:e,render:r}){const t=e||r;return"function"!=typeof t?null:i(t)}function s(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`.")}c.propTypes={children:s,render:s},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.useObservableEffect=function(e,r=[]){const n=t.useRef(void 0);return t.useMemo(()=>{n.current=e()},r),t.useEffect(()=>()=>{n.current&&n.current()},r),n.current},e.isUsingStaticRendering=o,e.useStaticRendering=function(e){n=e},e.observer=function(e,r){if(o())return e;const n=Object.assign({forwardRef:!1},r),u=e.displayName||e.name,c=(r,t)=>i(()=>e(r,t),u);let s;return(s=n.forwardRef?t.memo(t.forwardRef(c)):t.memo(c)).displayName=u,s},e.useObserver=i,e.Observer=c,Object.defineProperty(e,"__esModule",{value:!0})});

dist/index.module.js

@@ -8,3 +8,3 @@ import { spy, observable, Reaction, computed } from 'mobx';
 if (!spy) {
-    throw new Error("mobx-react-lite requires mobx to be available");
+    throw new Error("mobx-react-lite requires mobx 4 to be available");
 }
@@ -117,6 +117,6 @@
     const component = children || render;
-    if (typeof component === "undefined") {
+    if (typeof component !== "function") {
         return null;
     }
-    return component();
+    return useObserver(component);
 }
@@ -128,3 +128,2 @@ ObserverComponent.propTypes = {
 ObserverComponent.displayName = "Observer";
-const Observer = observer(ObserverComponent);
 function ObserverPropsCheck(props, key, componentName, location, propFullName) {
@@ -150,2 +149,2 @@ const extraKey = key === "children" ? "render" : "children";
 
-export { useObservable, useComputed, useObservableEffect, isUsingStaticRendering, useStaticRendering, observer, useObserver, Observer };
+export { useObservable, useComputed, useObservableEffect, isUsingStaticRendering, useStaticRendering, observer, useObserver, ObserverComponent as Observer };

dist/native.js

@@ -12,3 +12,3 @@ 'use strict';
 if (!mobx.spy) {
-    throw new Error("mobx-react-lite requires mobx to be available");
+    throw new Error("mobx-react-lite requires mobx 4 to be available");
 }
@@ -121,6 +121,6 @@
     const component = children || render;
-    if (typeof component === "undefined") {
+    if (typeof component !== "function") {
         return null;
     }
-    return component();
+    return useObserver(component);
 }
@@ -132,3 +132,2 @@ ObserverComponent.propTypes = {
 ObserverComponent.displayName = "Observer";
-const Observer = observer(ObserverComponent);
 function ObserverPropsCheck(props, key, componentName, location, propFullName) {
@@ -161,2 +160,2 @@ const extraKey = key === "children" ? "render" : "children";
 exports.useObserver = useObserver;
-exports.Observer = Observer;
+exports.Observer = ObserverComponent;

dist/observer.d.ts

@@ -1,3 +0,8 @@
-import { FunctionComponent } from "react";
-export declare function useStaticRendering(enable: boolean): void;
-export declare function observer<P>(baseComponent: FunctionComponent<P>): FunctionComponent<P>;
+/// <reference types="react" />
+export interface IObserverOptions {
+    readonly forwardRef?: boolean;
+}
+export declare function observer<P extends object, TRef = {}>(baseComponent: React.RefForwardingComponent<TRef, P>, options: IObserverOptions & {
+    forwardRef: true;
+}): React.MemoExoticComponent<React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<TRef>>>;
+export declare function observer<P extends object>(baseComponent: React.FunctionComponent<P>, options?: IObserverOptions): React.NamedExoticComponent<P>;

dist/ObserverComponent.d.ts

@@ -6,3 +6,13 @@ import { ReactElement } from "react";
 }
-export declare const Observer: import("react").FunctionComponent<IObserverProps>;
-export {};
+declare function ObserverComponent({ children, render }: IObserverProps): ReactElement<any> | null;
+declare namespace ObserverComponent {
+    var propTypes: {
+        children: typeof ObserverPropsCheck;
+        render: typeof ObserverPropsCheck;
+    };
+    var displayName: string;
+}
+export { ObserverComponent as Observer };
+declare function ObserverPropsCheck(props: {
+    [k: string]: any;
+}, key: string, componentName: string, location: any, propFullName: string): Error | null;

dist/useComputed.d.ts

@@ -1,1 +0,1 @@
-export declare function useComputed<T>(initialValue: () => T, inputs?: ReadonlyArray<unknown>): T;
+export declare function useComputed<T>(func: () => T, inputs?: ReadonlyArray<any>): T;

dist/useObservable.d.ts

@@ -1,3 +0,3 @@
-declare type SupportedValues = object | Map<unknown, unknown> | Array<unknown>;
+declare type SupportedValues = object | Map<any, any> | any[];
 export declare function useObservable<T extends SupportedValues>(initialValue: T): T;
 export {};

package.json

 {
   "name": "mobx-react-lite",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Lightweight React bindings for MobX based on experimental React hooks",
@@ -18,7 +18,8 @@ "main": "dist/index.js",
     "lint": "tslint --project .",
-    "validate": "tsc --noEmit --pretty",
+    "validate": "tsc --noEmit",
     "test": "jest --watch",
-    "test:travis": "yarn validate && yarn lint && jest",
-    "build": "node build-rollup.js",
-    "release": "np"
+    "test:travis": "yarn validate && yarn lint && yarn coverage",
+    "coverage": "jest --coverage",
+    "prebuild": "rimraf dist",
+    "build": "node build-rollup.js"
   },
@@ -40,2 +41,3 @@ "author": "Daniel K.",
     "@types/react-dom": "^16.0.9",
+    "coveralls": "^3.0.2",
     "husky": "^1.1.3",
@@ -45,7 +47,6 @@ "jest": "^23.6.0",
     "jest-environment-jsdom": "^23.4.0",
+    "jest-mock-console": "^0.4.0",
     "lint-staged": "^8.0.4",
     "lodash": "^4.17.11",
     "mobx": "^5.0.0",
-    "np": "^3.0.4",
-    "opn-cli": "^3.1.0",
     "prettier": "^1.15.2",
@@ -55,4 +56,3 @@ "react": "^16.7.0-alpha.2",
     "react-testing-library": "^5.2.3",
-    "regenerator-runtime": "^0.12.1",
-    "request": "^2.88.0",
+    "rimraf": "^2.6.2",
     "rollup": "^0.67.0",
@@ -66,4 +66,2 @@ "rollup-plugin-alias": "^1.4.0",
     "rollup-plugin-typescript2": "^0.17.2",
-    "shelljs": "^0.8.2",
-    "shx": "^0.3.2",
     "ts-jest": "^23.10.4",
@@ -70,0 +68,0 @@ "tslint": "^5.11.0",

README.md

 # mobx-react-lite <!-- omit in toc -->
 
-[![Build Status](https://travis-ci.org/mobxjs/mobx-react-lite.svg?branch=master)](https://travis-ci.org/mobxjs/mobx-react)
+[![Build Status](https://travis-ci.org/mobxjs/mobx-react-lite.svg?branch=master)](https://travis-ci.org/mobxjs/mobx-react)[![Coverage Status](https://coveralls.io/repos/github/mobxjs/mobx-react-lite/badge.svg)](https://coveralls.io/github/mobxjs/mobx-react-lite)
 
@@ -5,0 +5,0 @@ [![Join the chat at https://gitter.im/mobxjs/mobx](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/mobxjs/mobx?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

No alert changes

Improved metrics

Dev dependency count

30

decreased by-9.09%

Worsened metrics

Total package byte prevSize

246013

decreased by-9.16%

Number of package files

23

decreased by-36.11%

Lines of code

785

decreased by-1.75%

No dependency changes