New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

mobx-react-lite

Package Overview
Dependencies
Maintainers
1
Versions
79
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mobx-react-lite - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

131

dist/custom.js

@@ -15,3 +15,3 @@ (function (global, factory) {

function useObservable(initialValue) {
const observableRef = react.useRef(null);
var observableRef = react.useRef(null);
if (!observableRef.current) {

@@ -23,8 +23,9 @@ observableRef.current = mobx.observable(initialValue);

function useComputed(func, inputs = []) {
const computed = react.useMemo(() => mobx.computed(func), inputs);
function useComputed(func, inputs) {
if (inputs === void 0) { inputs = []; }
var computed = react.useMemo(function () { return mobx.computed(func); }, inputs);
return computed.get();
}
const doNothingDisposer = () => {
var doNothingDisposer = function () {
// empty

@@ -42,6 +43,7 @@ };

*/
function useDisposable(disposerGenerator, inputs = []) {
const disposerRef = react.useRef(null);
const earlyDisposedRef = react.useRef(false);
react.useEffect(() => {
function useDisposable(disposerGenerator, inputs) {
if (inputs === void 0) { inputs = []; }
var disposerRef = react.useRef(null);
var earlyDisposedRef = react.useRef(false);
react.useEffect(function () {
return lazyCreateDisposer(false);

@@ -55,5 +57,5 @@ }, inputs);

if (!disposerRef.current) {
const newDisposer = disposerGenerator();
var newDisposer = disposerGenerator();
if (typeof newDisposer !== "function") {
const error = new Error("generated disposer must be a function");
var error = new Error("generated disposer must be a function");
{

@@ -67,3 +69,3 @@ // tslint:disable-next-line:no-console

}
return () => {
return function () {
if (disposerRef.current) {

@@ -81,18 +83,3 @@ disposerRef.current();

/**
* Adds an observable effect (reaction, autorun, or anything else that returns a disposer) that will be registered upon component creation and disposed upon unmounting.
* Returns the generated disposer for early disposal.
*
* @deprecated Renamed to useDisposable for a more universal use
* @export
* @template D
* @param {() => D} disposerGenerator A function that returns the disposer of the wanted effect.
* @param {ReadonlyArray<any>} [inputs=[]] If you want the effect to be automatically re-created when some variable(s) are changed then pass them in this array.
* @returns {D}
*/
function useObservableEffect(disposerGenerator, inputs = []) {
return useDisposable(disposerGenerator, inputs);
}
let globalIsUsingStaticRendering = false;
var globalIsUsingStaticRendering = false;
function useStaticRendering(enable) {

@@ -105,10 +92,53 @@ globalIsUsingStaticRendering = enable;

const EMPTY_ARRAY = [];
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
var EMPTY_ARRAY = [];
function useUnmount(fn) {
react.useEffect(() => fn, EMPTY_ARRAY);
react.useEffect(function () { return fn; }, EMPTY_ARRAY);
}
function useForceUpdate() {
const [, setTick] = react.useState(0);
const update = react.useCallback(() => {
setTick(tick => tick + 1);
var _a = __read(react.useState(0), 2), setTick = _a[1];
var update = react.useCallback(function () {
setTick(function (tick) { return tick + 1; });
}, []);

@@ -118,14 +148,15 @@ return update;

function useObserver(fn, baseComponentName = "observed") {
function useObserver(fn, baseComponentName) {
if (baseComponentName === void 0) { baseComponentName = "observed"; }
if (isUsingStaticRendering()) {
return fn();
}
const forceUpdate = useForceUpdate();
const reaction = react.useRef(null);
var forceUpdate = useForceUpdate();
var reaction = react.useRef(null);
if (!reaction.current) {
reaction.current = new mobx.Reaction(`observer(${baseComponentName})`, () => {
reaction.current = new mobx.Reaction("observer(" + baseComponentName + ")", function () {
forceUpdate();
});
}
useUnmount(() => {
useUnmount(function () {
reaction.current.dispose();

@@ -136,4 +167,4 @@ });

// can be invalidated (see above) once a dependency changes
let rendering;
reaction.current.track(() => {
var rendering;
reaction.current.track(function () {
rendering = fn();

@@ -150,6 +181,6 @@ });

}
const realOptions = Object.assign({ forwardRef: false }, options);
const baseComponentName = baseComponent.displayName || baseComponent.name;
const wrappedComponent = (props, ref) => {
return useObserver(() => baseComponent(props, ref), baseComponentName);
var realOptions = __assign({ forwardRef: false }, options);
var baseComponentName = baseComponent.displayName || baseComponent.name;
var wrappedComponent = function (props, ref) {
return useObserver(function () { return baseComponent(props, ref); }, baseComponentName);
};

@@ -159,3 +190,3 @@ // memo; we are not intested in deep updates

// this is in observables, which would have been tracked anyway
let memoComponent;
var memoComponent;
if (realOptions.forwardRef) {

@@ -175,4 +206,5 @@ // we have to use forwardRef here because:

function ObserverComponent({ children, render }) {
const component = children || render;
function ObserverComponent(_a) {
var children = _a.children, render = _a.render;
var component = children || render;
if (typeof component !== "function") {

@@ -189,5 +221,5 @@ return null;

function ObserverPropsCheck(props, key, componentName, location, propFullName) {
const extraKey = key === "children" ? "render" : "children";
const hasProp = typeof props[key] === "function";
const hasExtraProp = typeof props[extraKey] === "function";
var extraKey = key === "children" ? "render" : "children";
var hasProp = typeof props[key] === "function";
var hasExtraProp = typeof props[extraKey] === "function";
if (hasProp && hasExtraProp) {

@@ -212,3 +244,2 @@ return new Error("MobX Observer: Do not use children and render in the same time in`" + componentName);

exports.useDisposable = useDisposable;
exports.useObservableEffect = useObservableEffect;
exports.isUsingStaticRendering = isUsingStaticRendering;

@@ -215,0 +246,0 @@ exports.useStaticRendering = useStaticRendering;

132

dist/custom.module.js

@@ -12,3 +12,3 @@ import { spy, observable, computed, Reaction } from 'mobx';

function useObservable(initialValue) {
const observableRef = useRef(null);
var observableRef = useRef(null);
if (!observableRef.current) {

@@ -20,8 +20,9 @@ observableRef.current = observable(initialValue);

function useComputed(func, inputs = []) {
const computed$$1 = useMemo(() => computed(func), inputs);
function useComputed(func, inputs) {
if (inputs === void 0) { inputs = []; }
var computed$$1 = useMemo(function () { return computed(func); }, inputs);
return computed$$1.get();
}
const doNothingDisposer = () => {
var doNothingDisposer = function () {
// empty

@@ -39,6 +40,7 @@ };

*/
function useDisposable(disposerGenerator, inputs = []) {
const disposerRef = useRef(null);
const earlyDisposedRef = useRef(false);
useEffect(() => {
function useDisposable(disposerGenerator, inputs) {
if (inputs === void 0) { inputs = []; }
var disposerRef = useRef(null);
var earlyDisposedRef = useRef(false);
useEffect(function () {
return lazyCreateDisposer(false);

@@ -52,5 +54,5 @@ }, inputs);

if (!disposerRef.current) {
const newDisposer = disposerGenerator();
var newDisposer = disposerGenerator();
if (typeof newDisposer !== "function") {
const error = new Error("generated disposer must be a function");
var error = new Error("generated disposer must be a function");
{

@@ -64,3 +66,3 @@ // tslint:disable-next-line:no-console

}
return () => {
return function () {
if (disposerRef.current) {

@@ -78,18 +80,3 @@ disposerRef.current();

/**
* Adds an observable effect (reaction, autorun, or anything else that returns a disposer) that will be registered upon component creation and disposed upon unmounting.
* Returns the generated disposer for early disposal.
*
* @deprecated Renamed to useDisposable for a more universal use
* @export
* @template D
* @param {() => D} disposerGenerator A function that returns the disposer of the wanted effect.
* @param {ReadonlyArray<any>} [inputs=[]] If you want the effect to be automatically re-created when some variable(s) are changed then pass them in this array.
* @returns {D}
*/
function useObservableEffect(disposerGenerator, inputs = []) {
return useDisposable(disposerGenerator, inputs);
}
let globalIsUsingStaticRendering = false;
var globalIsUsingStaticRendering = false;
function useStaticRendering(enable) {

@@ -102,10 +89,53 @@ globalIsUsingStaticRendering = enable;

const EMPTY_ARRAY = [];
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
var EMPTY_ARRAY = [];
function useUnmount(fn) {
useEffect(() => fn, EMPTY_ARRAY);
useEffect(function () { return fn; }, EMPTY_ARRAY);
}
function useForceUpdate() {
const [, setTick] = useState(0);
const update = useCallback(() => {
setTick(tick => tick + 1);
var _a = __read(useState(0), 2), setTick = _a[1];
var update = useCallback(function () {
setTick(function (tick) { return tick + 1; });
}, []);

@@ -115,14 +145,15 @@ return update;

function useObserver(fn, baseComponentName = "observed") {
function useObserver(fn, baseComponentName) {
if (baseComponentName === void 0) { baseComponentName = "observed"; }
if (isUsingStaticRendering()) {
return fn();
}
const forceUpdate = useForceUpdate();
const reaction = useRef(null);
var forceUpdate = useForceUpdate();
var reaction = useRef(null);
if (!reaction.current) {
reaction.current = new Reaction(`observer(${baseComponentName})`, () => {
reaction.current = new Reaction("observer(" + baseComponentName + ")", function () {
forceUpdate();
});
}
useUnmount(() => {
useUnmount(function () {
reaction.current.dispose();

@@ -133,4 +164,4 @@ });

// can be invalidated (see above) once a dependency changes
let rendering;
reaction.current.track(() => {
var rendering;
reaction.current.track(function () {
rendering = fn();

@@ -147,6 +178,6 @@ });

}
const realOptions = Object.assign({ forwardRef: false }, options);
const baseComponentName = baseComponent.displayName || baseComponent.name;
const wrappedComponent = (props, ref) => {
return useObserver(() => baseComponent(props, ref), baseComponentName);
var realOptions = __assign({ forwardRef: false }, options);
var baseComponentName = baseComponent.displayName || baseComponent.name;
var wrappedComponent = function (props, ref) {
return useObserver(function () { return baseComponent(props, ref); }, baseComponentName);
};

@@ -156,3 +187,3 @@ // memo; we are not intested in deep updates

// this is in observables, which would have been tracked anyway
let memoComponent;
var memoComponent;
if (realOptions.forwardRef) {

@@ -172,4 +203,5 @@ // we have to use forwardRef here because:

function ObserverComponent({ children, render }) {
const component = children || render;
function ObserverComponent(_a) {
var children = _a.children, render = _a.render;
var component = children || render;
if (typeof component !== "function") {

@@ -186,5 +218,5 @@ return null;

function ObserverPropsCheck(props, key, componentName, location, propFullName) {
const extraKey = key === "children" ? "render" : "children";
const hasProp = typeof props[key] === "function";
const hasExtraProp = typeof props[extraKey] === "function";
var extraKey = key === "children" ? "render" : "children";
var hasProp = typeof props[key] === "function";
var hasExtraProp = typeof props[extraKey] === "function";
if (hasProp && hasExtraProp) {

@@ -206,2 +238,2 @@ return new Error("MobX Observer: Do not use children and render in the same time in`" + componentName);

export { useObservable, useComputed, useDisposable, useObservableEffect, isUsingStaticRendering, useStaticRendering, observer, useObserver, ObserverComponent as Observer };
export { useObservable, useComputed, useDisposable, isUsingStaticRendering, useStaticRendering, observer, useObserver, ObserverComponent as Observer };

1

dist/index.d.ts

@@ -5,3 +5,2 @@ import "./assertEnvironment";

export { useDisposable } from "./useDisposable";
export { useObservableEffect } from "./useObservableEffect";
export { isUsingStaticRendering, useStaticRendering } from "./staticRendering";

@@ -8,0 +7,0 @@ export { observer, IObserverOptions } from "./observer";

131

dist/index.js

@@ -15,3 +15,3 @@ (function (global, factory) {

function useObservable(initialValue) {
const observableRef = react.useRef(null);
var observableRef = react.useRef(null);
if (!observableRef.current) {

@@ -23,8 +23,9 @@ observableRef.current = mobx.observable(initialValue);

function useComputed(func, inputs = []) {
const computed = react.useMemo(() => mobx.computed(func), inputs);
function useComputed(func, inputs) {
if (inputs === void 0) { inputs = []; }
var computed = react.useMemo(function () { return mobx.computed(func); }, inputs);
return computed.get();
}
const doNothingDisposer = () => {
var doNothingDisposer = function () {
// empty

@@ -42,6 +43,7 @@ };

*/
function useDisposable(disposerGenerator, inputs = []) {
const disposerRef = react.useRef(null);
const earlyDisposedRef = react.useRef(false);
react.useEffect(() => {
function useDisposable(disposerGenerator, inputs) {
if (inputs === void 0) { inputs = []; }
var disposerRef = react.useRef(null);
var earlyDisposedRef = react.useRef(false);
react.useEffect(function () {
return lazyCreateDisposer(false);

@@ -55,5 +57,5 @@ }, inputs);

if (!disposerRef.current) {
const newDisposer = disposerGenerator();
var newDisposer = disposerGenerator();
if (typeof newDisposer !== "function") {
const error = new Error("generated disposer must be a function");
var error = new Error("generated disposer must be a function");
{

@@ -67,3 +69,3 @@ // tslint:disable-next-line:no-console

}
return () => {
return function () {
if (disposerRef.current) {

@@ -81,18 +83,3 @@ disposerRef.current();

/**
* Adds an observable effect (reaction, autorun, or anything else that returns a disposer) that will be registered upon component creation and disposed upon unmounting.
* Returns the generated disposer for early disposal.
*
* @deprecated Renamed to useDisposable for a more universal use
* @export
* @template D
* @param {() => D} disposerGenerator A function that returns the disposer of the wanted effect.
* @param {ReadonlyArray<any>} [inputs=[]] If you want the effect to be automatically re-created when some variable(s) are changed then pass them in this array.
* @returns {D}
*/
function useObservableEffect(disposerGenerator, inputs = []) {
return useDisposable(disposerGenerator, inputs);
}
let globalIsUsingStaticRendering = false;
var globalIsUsingStaticRendering = false;
function useStaticRendering(enable) {

@@ -105,10 +92,53 @@ globalIsUsingStaticRendering = enable;

const EMPTY_ARRAY = [];
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
var EMPTY_ARRAY = [];
function useUnmount(fn) {
react.useEffect(() => fn, EMPTY_ARRAY);
react.useEffect(function () { return fn; }, EMPTY_ARRAY);
}
function useForceUpdate() {
const [, setTick] = react.useState(0);
const update = react.useCallback(() => {
setTick(tick => tick + 1);
var _a = __read(react.useState(0), 2), setTick = _a[1];
var update = react.useCallback(function () {
setTick(function (tick) { return tick + 1; });
}, []);

@@ -118,14 +148,15 @@ return update;

function useObserver(fn, baseComponentName = "observed") {
function useObserver(fn, baseComponentName) {
if (baseComponentName === void 0) { baseComponentName = "observed"; }
if (isUsingStaticRendering()) {
return fn();
}
const forceUpdate = useForceUpdate();
const reaction = react.useRef(null);
var forceUpdate = useForceUpdate();
var reaction = react.useRef(null);
if (!reaction.current) {
reaction.current = new mobx.Reaction(`observer(${baseComponentName})`, () => {
reaction.current = new mobx.Reaction("observer(" + baseComponentName + ")", function () {
forceUpdate();
});
}
useUnmount(() => {
useUnmount(function () {
reaction.current.dispose();

@@ -136,4 +167,4 @@ });

// can be invalidated (see above) once a dependency changes
let rendering;
reaction.current.track(() => {
var rendering;
reaction.current.track(function () {
rendering = fn();

@@ -150,6 +181,6 @@ });

}
const realOptions = Object.assign({ forwardRef: false }, options);
const baseComponentName = baseComponent.displayName || baseComponent.name;
const wrappedComponent = (props, ref) => {
return useObserver(() => baseComponent(props, ref), baseComponentName);
var realOptions = __assign({ forwardRef: false }, options);
var baseComponentName = baseComponent.displayName || baseComponent.name;
var wrappedComponent = function (props, ref) {
return useObserver(function () { return baseComponent(props, ref); }, baseComponentName);
};

@@ -159,3 +190,3 @@ // memo; we are not intested in deep updates

// this is in observables, which would have been tracked anyway
let memoComponent;
var memoComponent;
if (realOptions.forwardRef) {

@@ -175,4 +206,5 @@ // we have to use forwardRef here because:

function ObserverComponent({ children, render }) {
const component = children || render;
function ObserverComponent(_a) {
var children = _a.children, render = _a.render;
var component = children || render;
if (typeof component !== "function") {

@@ -189,5 +221,5 @@ return null;

function ObserverPropsCheck(props, key, componentName, location, propFullName) {
const extraKey = key === "children" ? "render" : "children";
const hasProp = typeof props[key] === "function";
const hasExtraProp = typeof props[extraKey] === "function";
var extraKey = key === "children" ? "render" : "children";
var hasProp = typeof props[key] === "function";
var hasExtraProp = typeof props[extraKey] === "function";
if (hasProp && hasExtraProp) {

@@ -212,3 +244,2 @@ return new Error("MobX Observer: Do not use children and render in the same time in`" + componentName);

exports.useDisposable = useDisposable;
exports.useObservableEffect = useObservableEffect;
exports.isUsingStaticRendering = isUsingStaticRendering;

@@ -215,0 +246,0 @@ exports.useStaticRendering = useStaticRendering;

2

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=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})});
!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");var t=function(){};var o=!1;function u(){return o}var i=function(){return(i=Object.assign||function(e){for(var r,n=1,t=arguments.length;n<t;n++)for(var o in r=arguments[n])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e}).apply(this,arguments)};var c=[];function f(){var e=function(e,r){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var t,o,u=n.call(e),i=[];try{for(;(void 0===r||r-- >0)&&!(t=u.next()).done;)i.push(t.value)}catch(e){o={error:e}}finally{try{t&&!t.done&&(n=u.return)&&n.call(u)}finally{if(o)throw o.error}}return i}(n.useState(0),2)[1];return n.useCallback(function(){e(function(e){return e+1})},[])}function a(e,t){if(void 0===t&&(t="observed"),u())return e();var o,i=f(),a=n.useRef(null);return a.current||(a.current=new r.Reaction("observer("+t+")",function(){i()})),function(e){n.useEffect(function(){return e},c)}(function(){a.current.dispose()}),a.current.track(function(){o=e()}),o}function s(e){var r=e.children,n=e.render,t=r||n;return"function"!=typeof t?null:a(t)}function l(e,r,n,t,o){var 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`"+n):i||c?null:new Error("Invalid prop `"+o+"` of type `"+typeof e[r]+"` supplied to `"+n+"`, expected `function`.")}s.propTypes={children:l,render:l},s.displayName="Observer",e.useObservable=function(e){var t=n.useRef(null);return t.current||(t.current=r.observable(e)),t.current},e.useComputed=function(e,t){return void 0===t&&(t=[]),n.useMemo(function(){return r.computed(e)},t).get()},e.useDisposable=function(e,r){void 0===r&&(r=[]);var o=n.useRef(null),u=n.useRef(!1);function i(r){if(u.current)return t;if(!o.current){var n=e();if("function"!=typeof n){var i=new Error("generated disposer must be a function");return console.error(i),t}o.current=n}return function(){o.current&&(o.current(),o.current=null),r&&(u.current=!0)}}return n.useEffect(function(){return i(!1)},r),i(!0)},e.isUsingStaticRendering=u,e.useStaticRendering=function(e){o=e},e.observer=function(e,r){if(u())return e;var t,o=i({forwardRef:!1},r),c=e.displayName||e.name,f=function(r,n){return a(function(){return e(r,n)},c)};return(t=o.forwardRef?n.memo(n.forwardRef(f)):n.memo(f)).displayName=c,t},e.useObserver=a,e.Observer=s,Object.defineProperty(e,"__esModule",{value:!0})});

132

dist/index.module.js

@@ -12,3 +12,3 @@ import { spy, observable, computed, Reaction } from 'mobx';

function useObservable(initialValue) {
const observableRef = useRef(null);
var observableRef = useRef(null);
if (!observableRef.current) {

@@ -20,8 +20,9 @@ observableRef.current = observable(initialValue);

function useComputed(func, inputs = []) {
const computed$$1 = useMemo(() => computed(func), inputs);
function useComputed(func, inputs) {
if (inputs === void 0) { inputs = []; }
var computed$$1 = useMemo(function () { return computed(func); }, inputs);
return computed$$1.get();
}
const doNothingDisposer = () => {
var doNothingDisposer = function () {
// empty

@@ -39,6 +40,7 @@ };

*/
function useDisposable(disposerGenerator, inputs = []) {
const disposerRef = useRef(null);
const earlyDisposedRef = useRef(false);
useEffect(() => {
function useDisposable(disposerGenerator, inputs) {
if (inputs === void 0) { inputs = []; }
var disposerRef = useRef(null);
var earlyDisposedRef = useRef(false);
useEffect(function () {
return lazyCreateDisposer(false);

@@ -52,5 +54,5 @@ }, inputs);

if (!disposerRef.current) {
const newDisposer = disposerGenerator();
var newDisposer = disposerGenerator();
if (typeof newDisposer !== "function") {
const error = new Error("generated disposer must be a function");
var error = new Error("generated disposer must be a function");
{

@@ -64,3 +66,3 @@ // tslint:disable-next-line:no-console

}
return () => {
return function () {
if (disposerRef.current) {

@@ -78,18 +80,3 @@ disposerRef.current();

/**
* Adds an observable effect (reaction, autorun, or anything else that returns a disposer) that will be registered upon component creation and disposed upon unmounting.
* Returns the generated disposer for early disposal.
*
* @deprecated Renamed to useDisposable for a more universal use
* @export
* @template D
* @param {() => D} disposerGenerator A function that returns the disposer of the wanted effect.
* @param {ReadonlyArray<any>} [inputs=[]] If you want the effect to be automatically re-created when some variable(s) are changed then pass them in this array.
* @returns {D}
*/
function useObservableEffect(disposerGenerator, inputs = []) {
return useDisposable(disposerGenerator, inputs);
}
let globalIsUsingStaticRendering = false;
var globalIsUsingStaticRendering = false;
function useStaticRendering(enable) {

@@ -102,10 +89,53 @@ globalIsUsingStaticRendering = enable;

const EMPTY_ARRAY = [];
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
var EMPTY_ARRAY = [];
function useUnmount(fn) {
useEffect(() => fn, EMPTY_ARRAY);
useEffect(function () { return fn; }, EMPTY_ARRAY);
}
function useForceUpdate() {
const [, setTick] = useState(0);
const update = useCallback(() => {
setTick(tick => tick + 1);
var _a = __read(useState(0), 2), setTick = _a[1];
var update = useCallback(function () {
setTick(function (tick) { return tick + 1; });
}, []);

@@ -115,14 +145,15 @@ return update;

function useObserver(fn, baseComponentName = "observed") {
function useObserver(fn, baseComponentName) {
if (baseComponentName === void 0) { baseComponentName = "observed"; }
if (isUsingStaticRendering()) {
return fn();
}
const forceUpdate = useForceUpdate();
const reaction = useRef(null);
var forceUpdate = useForceUpdate();
var reaction = useRef(null);
if (!reaction.current) {
reaction.current = new Reaction(`observer(${baseComponentName})`, () => {
reaction.current = new Reaction("observer(" + baseComponentName + ")", function () {
forceUpdate();
});
}
useUnmount(() => {
useUnmount(function () {
reaction.current.dispose();

@@ -133,4 +164,4 @@ });

// can be invalidated (see above) once a dependency changes
let rendering;
reaction.current.track(() => {
var rendering;
reaction.current.track(function () {
rendering = fn();

@@ -147,6 +178,6 @@ });

}
const realOptions = Object.assign({ forwardRef: false }, options);
const baseComponentName = baseComponent.displayName || baseComponent.name;
const wrappedComponent = (props, ref) => {
return useObserver(() => baseComponent(props, ref), baseComponentName);
var realOptions = __assign({ forwardRef: false }, options);
var baseComponentName = baseComponent.displayName || baseComponent.name;
var wrappedComponent = function (props, ref) {
return useObserver(function () { return baseComponent(props, ref); }, baseComponentName);
};

@@ -156,3 +187,3 @@ // memo; we are not intested in deep updates

// this is in observables, which would have been tracked anyway
let memoComponent;
var memoComponent;
if (realOptions.forwardRef) {

@@ -172,4 +203,5 @@ // we have to use forwardRef here because:

function ObserverComponent({ children, render }) {
const component = children || render;
function ObserverComponent(_a) {
var children = _a.children, render = _a.render;
var component = children || render;
if (typeof component !== "function") {

@@ -186,5 +218,5 @@ return null;

function ObserverPropsCheck(props, key, componentName, location, propFullName) {
const extraKey = key === "children" ? "render" : "children";
const hasProp = typeof props[key] === "function";
const hasExtraProp = typeof props[extraKey] === "function";
var extraKey = key === "children" ? "render" : "children";
var hasProp = typeof props[key] === "function";
var hasExtraProp = typeof props[extraKey] === "function";
if (hasProp && hasExtraProp) {

@@ -206,2 +238,2 @@ return new Error("MobX Observer: Do not use children and render in the same time in`" + componentName);

export { useObservable, useComputed, useDisposable, useObservableEffect, isUsingStaticRendering, useStaticRendering, observer, useObserver, ObserverComponent as Observer };
export { useObservable, useComputed, useDisposable, isUsingStaticRendering, useStaticRendering, observer, useObserver, ObserverComponent as Observer };

131

dist/native.js

@@ -16,3 +16,3 @@ 'use strict';

function useObservable(initialValue) {
const observableRef = react.useRef(null);
var observableRef = react.useRef(null);
if (!observableRef.current) {

@@ -24,8 +24,9 @@ observableRef.current = mobx.observable(initialValue);

function useComputed(func, inputs = []) {
const computed = react.useMemo(() => mobx.computed(func), inputs);
function useComputed(func, inputs) {
if (inputs === void 0) { inputs = []; }
var computed = react.useMemo(function () { return mobx.computed(func); }, inputs);
return computed.get();
}
const doNothingDisposer = () => {
var doNothingDisposer = function () {
// empty

@@ -43,6 +44,7 @@ };

*/
function useDisposable(disposerGenerator, inputs = []) {
const disposerRef = react.useRef(null);
const earlyDisposedRef = react.useRef(false);
react.useEffect(() => {
function useDisposable(disposerGenerator, inputs) {
if (inputs === void 0) { inputs = []; }
var disposerRef = react.useRef(null);
var earlyDisposedRef = react.useRef(false);
react.useEffect(function () {
return lazyCreateDisposer(false);

@@ -56,5 +58,5 @@ }, inputs);

if (!disposerRef.current) {
const newDisposer = disposerGenerator();
var newDisposer = disposerGenerator();
if (typeof newDisposer !== "function") {
const error = new Error("generated disposer must be a function");
var error = new Error("generated disposer must be a function");
{

@@ -68,3 +70,3 @@ // tslint:disable-next-line:no-console

}
return () => {
return function () {
if (disposerRef.current) {

@@ -82,18 +84,3 @@ disposerRef.current();

/**
* Adds an observable effect (reaction, autorun, or anything else that returns a disposer) that will be registered upon component creation and disposed upon unmounting.
* Returns the generated disposer for early disposal.
*
* @deprecated Renamed to useDisposable for a more universal use
* @export
* @template D
* @param {() => D} disposerGenerator A function that returns the disposer of the wanted effect.
* @param {ReadonlyArray<any>} [inputs=[]] If you want the effect to be automatically re-created when some variable(s) are changed then pass them in this array.
* @returns {D}
*/
function useObservableEffect(disposerGenerator, inputs = []) {
return useDisposable(disposerGenerator, inputs);
}
let globalIsUsingStaticRendering = false;
var globalIsUsingStaticRendering = false;
function useStaticRendering(enable) {

@@ -106,10 +93,53 @@ globalIsUsingStaticRendering = enable;

const EMPTY_ARRAY = [];
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
var EMPTY_ARRAY = [];
function useUnmount(fn) {
react.useEffect(() => fn, EMPTY_ARRAY);
react.useEffect(function () { return fn; }, EMPTY_ARRAY);
}
function useForceUpdate() {
const [, setTick] = react.useState(0);
const update = react.useCallback(() => {
setTick(tick => tick + 1);
var _a = __read(react.useState(0), 2), setTick = _a[1];
var update = react.useCallback(function () {
setTick(function (tick) { return tick + 1; });
}, []);

@@ -119,14 +149,15 @@ return update;

function useObserver(fn, baseComponentName = "observed") {
function useObserver(fn, baseComponentName) {
if (baseComponentName === void 0) { baseComponentName = "observed"; }
if (isUsingStaticRendering()) {
return fn();
}
const forceUpdate = useForceUpdate();
const reaction = react.useRef(null);
var forceUpdate = useForceUpdate();
var reaction = react.useRef(null);
if (!reaction.current) {
reaction.current = new mobx.Reaction(`observer(${baseComponentName})`, () => {
reaction.current = new mobx.Reaction("observer(" + baseComponentName + ")", function () {
forceUpdate();
});
}
useUnmount(() => {
useUnmount(function () {
reaction.current.dispose();

@@ -137,4 +168,4 @@ });

// can be invalidated (see above) once a dependency changes
let rendering;
reaction.current.track(() => {
var rendering;
reaction.current.track(function () {
rendering = fn();

@@ -151,6 +182,6 @@ });

}
const realOptions = Object.assign({ forwardRef: false }, options);
const baseComponentName = baseComponent.displayName || baseComponent.name;
const wrappedComponent = (props, ref) => {
return useObserver(() => baseComponent(props, ref), baseComponentName);
var realOptions = __assign({ forwardRef: false }, options);
var baseComponentName = baseComponent.displayName || baseComponent.name;
var wrappedComponent = function (props, ref) {
return useObserver(function () { return baseComponent(props, ref); }, baseComponentName);
};

@@ -160,3 +191,3 @@ // memo; we are not intested in deep updates

// this is in observables, which would have been tracked anyway
let memoComponent;
var memoComponent;
if (realOptions.forwardRef) {

@@ -176,4 +207,5 @@ // we have to use forwardRef here because:

function ObserverComponent({ children, render }) {
const component = children || render;
function ObserverComponent(_a) {
var children = _a.children, render = _a.render;
var component = children || render;
if (typeof component !== "function") {

@@ -190,5 +222,5 @@ return null;

function ObserverPropsCheck(props, key, componentName, location, propFullName) {
const extraKey = key === "children" ? "render" : "children";
const hasProp = typeof props[key] === "function";
const hasExtraProp = typeof props[extraKey] === "function";
var extraKey = key === "children" ? "render" : "children";
var hasProp = typeof props[key] === "function";
var hasExtraProp = typeof props[extraKey] === "function";
if (hasProp && hasExtraProp) {

@@ -213,3 +245,2 @@ return new Error("MobX Observer: Do not use children and render in the same time in`" + componentName);

exports.useDisposable = useDisposable;
exports.useObservableEffect = useObservableEffect;
exports.isUsingStaticRendering = isUsingStaticRendering;

@@ -216,0 +247,0 @@ exports.useStaticRendering = useStaticRendering;

4

package.json
{
"name": "mobx-react-lite",
"version": "1.0.0",
"description": "Lightweight React bindings for MobX based on experimental React hooks",
"version": "1.0.1",
"description": "Lightweight React bindings for MobX based on React 16.8 and Hooks",
"main": "dist/index.js",

@@ -6,0 +6,0 @@ "jsnext:main": "dist/index.module.js",

4

README.md

@@ -7,6 +7,8 @@ # mobx-react-lite <!-- omit in toc -->

This is a next iteration of [mobx-react](https://github.com/mobxjs/mobx-react) coming from introducing React hooks which simplifies a lot of internal workings of this package. Class based components **are not supported** except using `<Observer>` directly in its `render` method.
This is a next iteration of [mobx-react](https://github.com/mobxjs/mobx-react) coming from introducing React hooks which simplifies a lot of internal workings of this package.
**You need React version 16.8.0 and above**
Class based components **are not supported** except using `<Observer>` directly in its `render` method. If you want to transition existing projects from classes to hooks (as most of us do), you can use this package alongside the [mobx-react](https://github.com/mobxjs/mobx-react) just fine. The only conflict point is about the `observer` HOC. Subscribe [to this issue](https://github.com/mobxjs/mobx-react/issues/640) for a proper migration guide.
[![NPM](https://nodei.co/npm/mobx-react-lite.png)](https://www.npmjs.com/package/mobx-react-lite)

@@ -13,0 +15,0 @@ 

dist/useObservableEffect.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc