@wendellhu/redi - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/react-bindings.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@wendellhu/redi')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@wendellhu/redi'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-bindings'] = {}, global.React, global.redi));
-}(this, (function (exports, React, redi) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@wendellhu/redi'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@wendellhu/redi', 'rxjs'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["react-bindings"] = {}, global.React, global.redi, global.rxjs));
+})(this, (function (exports, React, redi, rxjs) { 'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
     function _interopNamespace(e) {
@@ -16,5 +18,3 @@ if (e && e.__esModule) return e;
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
@@ -24,3 +24,3 @@ }
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
@@ -30,2 +30,3 @@ }
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
+    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
@@ -146,3 +147,3 @@ var RediContextCreated = '__RediContextCreated__';
         function ClassComponentNotInRediContextError(component) {
-            return _super.call(this, "You should make \"RediContext\" as " + component.constructor.name + "'s default context type. " +
+            return _super.call(this, "You should make \"RediContext\" as ".concat(component.constructor.name, "'s default context type. ") +
                 'If you want to use multiple context, please check this on React doc site. ' +
@@ -169,2 +170,71 @@ 'https://reactjs.org/docs/context.html#classcontexttype') || this;
 
+    /**
+     * unwrap an observable value, return it to the component for rendering, and
+     * trigger re-render when value changes
+     *
+     * **IMPORTANT**. Parent and child components should not subscribe to the same
+     * observable, otherwise unnecessary re-render would be triggered. Instead, the
+     * top-most component should subscribe and pass value of the observable to
+     * its offspring, by props or context.
+     *
+     * If you have to do that, consider using `useDependencyContext` and
+     * `useDependencyContextValue` instead.
+     */
+    function useDependencyValue(depValue$, defaultValue) {
+        var firstValue = depValue$ instanceof rxjs.BehaviorSubject && typeof defaultValue === 'undefined'
+            ? depValue$.getValue()
+            : defaultValue;
+        var _a = React.useState(firstValue), value = _a[0], setValue = _a[1];
+        React.useEffect(function () {
+            var subscription = depValue$.subscribe(function (val) { return setValue(val); });
+            return function () { return subscription.unsubscribe(); };
+        }, [depValue$]);
+        return value;
+    }
+    /**
+     * subscribe to a signal that emits whenever data updates and re-render
+     *
+     * @param update$ a signal that the data the functional component depends has updated
+     */
+    function useUpdateBinder(update$) {
+        var _a = React.useState(0), dumpSet = _a[1];
+        React.useEffect(function () {
+            var subscription = update$.subscribe(function () { return dumpSet(function (prev) { return prev + 1; }); });
+            return function () { return subscription.unsubscribe(); };
+        }, []);
+    }
+    var DepValueMapProvider = new WeakMap();
+    /**
+     * subscribe to an observable value from a service, creating a context for it so
+     * it child component won't have to subscribe again and cause unnecessary
+     */
+    function useDependencyContext(depValue$, defaultValue) {
+        var depRef = React.useRef(undefined);
+        var value = useDependencyValue(depValue$, defaultValue);
+        var Context = React.useMemo(function () {
+            return React.createContext(value);
+        }, [depValue$]);
+        var Provider = React.useCallback(function (props) {
+            return React__default["default"].createElement(Context.Provider, { value: value }, props.children);
+        }, [depValue$, value]);
+        if (depRef.current !== depValue$) {
+            if (depRef.current) {
+                DepValueMapProvider.delete(depRef.current);
+            }
+            depRef.current = depValue$;
+            DepValueMapProvider.set(depValue$, Context);
+        }
+        return {
+            Provider: Provider,
+            value: value,
+        };
+    }
+    function useDependencyContextValue(depValue$) {
+        var context = DepValueMapProvider.get(depValue$);
+        if (!context) {
+            throw new redi.RediError("try to read context value but no ancestor component subscribed it.");
+        }
+        return React.useContext(context);
+    }
+
     exports.RediConsumer = RediConsumer;
@@ -177,7 +247,11 @@ exports.RediContext = RediContext;
     exports.useDependency = useDependency;
+    exports.useDependencyContext = useDependencyContext;
+    exports.useDependencyContextValue = useDependencyContextValue;
+    exports.useDependencyValue = useDependencyValue;
     exports.useInjector = useInjector;
+    exports.useUpdateBinder = useUpdateBinder;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=react-bindings.js.map

dist/redi.js

 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@wendellhu/redi'] = {}));
-}(this, (function (exports) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@wendellhu/redi"] = {}));
+})(this, (function (exports) { 'use strict';
 
@@ -24,3 +24,3 @@ var IdentifierDecoratorSymbol = Symbol('$$IDENTIFIER_DECORATOR');
     }
-    function isInstanceDependencyItem(thing) {
+    function isValueDependencyItem(thing) {
         if (thing && typeof thing.useValue !== 'undefined') {
@@ -44,2 +44,5 @@ return true;
     function prettyPrintIdentifier(id) {
+        if (typeof id === 'undefined') {
+            return 'undefined';
+        }
         return isCtor(id) && !id[IdentifierDecoratorSymbol] ? id.name : id.toString();
@@ -78,3 +81,3 @@ }
         function RediError(message) {
-            return _super.call(this, "[redi]: " + message) || this;
+            return _super.call(this, "[redi]: ".concat(message)) || this;
         }
@@ -104,6 +107,4 @@ return RediError;
         function DependencyDescriptorNotFoundError(index, target) {
-            var _this = this;
-            var msg = "Could not find dependency registered on the " + (index + 1) + " parameter of the constructor of \"" + prettyPrintIdentifier(target) + "\".";
-            _this = _super.call(this, msg) || this;
-            return _this;
+            var msg = "Could not find dependency registered on the ".concat(index + 1, " parameter of the constructor of \"").concat(prettyPrintIdentifier(target), "\".");
+            return _super.call(this, msg) || this;
         }
@@ -115,6 +116,4 @@ return DependencyDescriptorNotFoundError;
         function IdentifierUndefinedError(target, index) {
-            var _this = this;
-            var msg = "It seems that you register \"undefined\" as dependency on the " + (index + 1) + " parameter of \"" + prettyPrintIdentifier(target) + "\". Please make sure that there is not cyclic dependency among your TypeScript files, or consider using \"forwardRef\".";
-            _this = _super.call(this, msg) || this;
-            return _this;
+            var msg = "It seems that you register \"undefined\" as dependency on the ".concat(index + 1, " parameter of \"").concat(prettyPrintIdentifier(target), "\". Please make sure that there is not cyclic dependency among your TypeScript files, or consider using \"forwardRef\".");
+            return _super.call(this, msg) || this;
         }
@@ -180,3 +179,3 @@ return IdentifierUndefinedError;
         if (knownIdentifiers.has(id)) {
-            throw new RediError("Identifier \"" + id + "\" already exists.");
+            throw new RediError("Identifier \"".concat(id, "\" already exists."));
         }
@@ -216,6 +215,4 @@ else {
         function QuantityCheckError(id, quantity, actual) {
-            var _this = this;
-            var msg = "Expect \"" + quantity + "\" dependency items for id \"" + prettyPrintIdentifier(id) + "\" but get " + actual + ".";
-            _this = _super.call(this, msg) || this;
-            return _this;
+            var msg = "Expect \"".concat(quantity, "\" dependency items for id \"").concat(prettyPrintIdentifier(id), "\" but get ").concat(actual, ".");
+            return _super.call(this, msg) || this;
         }
@@ -303,6 +300,4 @@ return QuantityCheckError;
         function DependencyNotFoundError(id) {
-            var _this = this;
-            var msg = "Cannot find \"" + prettyPrintIdentifier(id) + "\" registered by any injector.";
-            _this = _super.call(this, msg) || this;
-            return _this;
+            var msg = "Cannot find \"".concat(prettyPrintIdentifier(id), "\" registered by any injector.");
+            return _super.call(this, msg) || this;
         }
@@ -587,3 +582,3 @@ return DependencyNotFoundError;
         function DuplicatedRegistrationError(id, item1, item2) {
-            return _super.call(this, "Duplicated registration of " + prettyPrintIdentifier(id) + ", 1. " + item1 + " 2. " + item2 + ".") || this;
+            return _super.call(this, "Duplicated registration of ".concat(prettyPrintIdentifier(id), ", 1. ").concat(item1, " 2. ").concat(item2, ".")) || this;
         }
@@ -653,3 +648,3 @@ return DuplicatedRegistrationError;
         function CircularDependencyError(id) {
-            return _super.call(this, "Detecting cyclic dependency. The last identifier is \"" + prettyPrintIdentifier(id) + "\".") || this;
+            return _super.call(this, "Detecting cyclic dependency. The last identifier is \"".concat(prettyPrintIdentifier(id), "\".")) || this;
         }
@@ -668,3 +663,3 @@ return CircularDependencyError;
         function AsyncItemReturnAsyncItemError(id) {
-            return _super.call(this, "Async item \"" + prettyPrintIdentifier(id) + "\" returns another async item.") || this;
+            return _super.call(this, "Async item \"".concat(prettyPrintIdentifier(id), "\" returns another async item.")) || this;
         }
@@ -676,3 +671,3 @@ return AsyncItemReturnAsyncItemError;
         function GetAsyncItemFromSyncApiError(id) {
-            return _super.call(this, "Cannot get async item \"" + prettyPrintIdentifier(id) + "\" from sync api.") || this;
+            return _super.call(this, "Cannot get async item \"".concat(prettyPrintIdentifier(id), "\" from sync api.")) || this;
         }
@@ -716,3 +711,3 @@ return GetAsyncItemFromSyncApiError;
                     isClassDependencyItem(item) ||
-                    isInstanceDependencyItem(item) ||
+                    isValueDependencyItem(item) ||
                     isFactoryDependencyItem(item)) {
@@ -792,4 +787,4 @@ this.dependencyCollection.add(dependency, item);
         Injector.prototype.resolveDependency = function (id, item) {
-            if (isInstanceDependencyItem(item)) {
-                return this.resolveInstanceDependency(id, item);
+            if (isValueDependencyItem(item)) {
+                return this.resolveValueDependency(id, item);
             }
@@ -806,3 +801,3 @@ else if (isFactoryDependencyItem(item)) {
         };
-        Injector.prototype.resolveInstanceDependency = function (id, item) {
+        Injector.prototype.resolveValueDependency = function (id, item) {
             var thing = item.useValue;
@@ -869,3 +864,3 @@ this.resolvedDependencyCollection.add(id, thing);
             if (args.length !== firstDependencyArgIndex) {
-                console.warn("[redi]: Expect " + firstDependencyArgIndex + " custom parameter(s) but get " + args.length + ".");
+                console.warn("[redi]: Expect ".concat(firstDependencyArgIndex, " custom parameter(s) but get ").concat(args.length, "."));
                 var delta = firstDependencyArgIndex - args.length;
@@ -1047,3 +1042,3 @@ if (delta > 0) {
     exports.isFactoryDependencyItem = isFactoryDependencyItem;
-    exports.isInstanceDependencyItem = isInstanceDependencyItem;
+    exports.isValueDependencyItem = isValueDependencyItem;
     exports.registerSingleton = registerSingleton;
@@ -1054,3 +1049,3 @@ exports.setDependencies = setDependencies;
 
-})));
+}));
 //# sourceMappingURL=redi.js.map

esm/decorators.js

@@ -25,6 +25,4 @@ var __extends = (this && this.__extends) || (function () {
     function DependencyDescriptorNotFoundError(index, target) {
-        var _this = this;
-        var msg = "Could not find dependency registered on the " + (index + 1) + " parameter of the constructor of \"" + prettyPrintIdentifier(target) + "\".";
-        _this = _super.call(this, msg) || this;
-        return _this;
+        var msg = "Could not find dependency registered on the ".concat(index + 1, " parameter of the constructor of \"").concat(prettyPrintIdentifier(target), "\".");
+        return _super.call(this, msg) || this;
     }
@@ -36,6 +34,4 @@ return DependencyDescriptorNotFoundError;
     function IdentifierUndefinedError(target, index) {
-        var _this = this;
-        var msg = "It seems that you register \"undefined\" as dependency on the " + (index + 1) + " parameter of \"" + prettyPrintIdentifier(target) + "\". Please make sure that there is not cyclic dependency among your TypeScript files, or consider using \"forwardRef\".";
-        _this = _super.call(this, msg) || this;
-        return _this;
+        var msg = "It seems that you register \"undefined\" as dependency on the ".concat(index + 1, " parameter of \"").concat(prettyPrintIdentifier(target), "\". Please make sure that there is not cyclic dependency among your TypeScript files, or consider using \"forwardRef\".");
+        return _super.call(this, msg) || this;
     }
@@ -102,3 +98,3 @@ return IdentifierUndefinedError;
     if (knownIdentifiers.has(id)) {
-        throw new RediError("Identifier \"" + id + "\" already exists.");
+        throw new RediError("Identifier \"".concat(id, "\" already exists."));
     }
@@ -105,0 +101,0 @@ else {

esm/dependencyCollection.js

@@ -27,6 +27,4 @@ var __extends = (this && this.__extends) || (function () {
     function DependencyNotFoundError(id) {
-        var _this = this;
-        var msg = "Cannot find \"" + prettyPrintIdentifier(id) + "\" registered by any injector.";
-        _this = _super.call(this, msg) || this;
-        return _this;
+        var msg = "Cannot find \"".concat(prettyPrintIdentifier(id), "\" registered by any injector.");
+        return _super.call(this, msg) || this;
     }
@@ -33,0 +31,0 @@ return DependencyNotFoundError;

esm/dependencyItem.d.ts

@@ -18,2 +18,3 @@ import { DependencyIdentifier } from './dependencyIdentifier';
     useFactory: (...deps: any[]) => T;
+    dynamic?: true;
     deps?: FactoryDep<any>[];
@@ -25,3 +26,3 @@ }
 }
-export declare function isInstanceDependencyItem<T>(thing: unknown): thing is ValueDependencyItem<T>;
+export declare function isValueDependencyItem<T>(thing: unknown): thing is ValueDependencyItem<T>;
 export interface AsyncDependencyItem<T> {
@@ -28,0 +29,0 @@ useAsync: () => Promise<T | Ctor<T> | [DependencyIdentifier<T>, SyncDependencyItem<T>]>;

esm/dependencyItem.js

@@ -17,3 +17,3 @@ import { IdentifierDecoratorSymbol } from './dependencyIdentifier';
 }
-export function isInstanceDependencyItem(thing) {
+export function isValueDependencyItem(thing) {
     if (thing && typeof thing.useValue !== 'undefined') {
@@ -37,4 +37,7 @@ return true;
 export function prettyPrintIdentifier(id) {
+    if (typeof id === 'undefined') {
+        return 'undefined';
+    }
     return isCtor(id) && !id[IdentifierDecoratorSymbol] ? id.name : id.toString();
 }
 //# sourceMappingURL=dependencyItem.js.map

esm/dependencyQuantity.js

@@ -23,6 +23,4 @@ var __extends = (this && this.__extends) || (function () {
     function QuantityCheckError(id, quantity, actual) {
-        var _this = this;
-        var msg = "Expect \"" + quantity + "\" dependency items for id \"" + prettyPrintIdentifier(id) + "\" but get " + actual + ".";
-        _this = _super.call(this, msg) || this;
-        return _this;
+        var msg = "Expect \"".concat(quantity, "\" dependency items for id \"").concat(prettyPrintIdentifier(id), "\" but get ").concat(actual, ".");
+        return _super.call(this, msg) || this;
     }
@@ -29,0 +27,0 @@ return QuantityCheckError;

esm/dependencySingletons.js

@@ -23,3 +23,3 @@ var __extends = (this && this.__extends) || (function () {
     function DuplicatedRegistrationError(id, item1, item2) {
-        return _super.call(this, "Duplicated registration of " + prettyPrintIdentifier(id) + ", 1. " + item1 + " 2. " + item2 + ".") || this;
+        return _super.call(this, "Duplicated registration of ".concat(prettyPrintIdentifier(id), ", 1. ").concat(item1, " 2. ").concat(item2, ".")) || this;
     }
@@ -26,0 +26,0 @@ return DuplicatedRegistrationError;

esm/error.js

@@ -19,3 +19,3 @@ var __extends = (this && this.__extends) || (function () {
     function RediError(message) {
-        return _super.call(this, "[redi]: " + message) || this;
+        return _super.call(this, "[redi]: ".concat(message)) || this;
     }
@@ -22,0 +22,0 @@ return RediError;

esm/injector.d.ts

@@ -44,3 +44,3 @@ import { Dependency, DependencyPair } from './dependencyCollection';
     private resolveDependency;
-    private resolveInstanceDependency;
+    private resolveValueDependency;
     private resolveClass;
@@ -47,0 +47,0 @@ private resolveClass_;

esm/injector.js

@@ -39,3 +39,3 @@ var __extends = (this && this.__extends) || (function () {
 import { normalizeFactoryDeps } from './dependencyDescriptor';
-import { isClassDependencyItem, isFactoryDependencyItem, isInstanceDependencyItem, isAsyncDependencyItem, isAsyncHook, isCtor, prettyPrintIdentifier, } from './dependencyItem';
+import { isClassDependencyItem, isFactoryDependencyItem, isValueDependencyItem, isAsyncDependencyItem, isAsyncHook, isCtor, prettyPrintIdentifier, } from './dependencyItem';
 import { normalizeForwardRef } from './dependencyForwardRef';
@@ -51,3 +51,3 @@ import { IdleValue } from './idleValue';
     function CircularDependencyError(id) {
-        return _super.call(this, "Detecting cyclic dependency. The last identifier is \"" + prettyPrintIdentifier(id) + "\".") || this;
+        return _super.call(this, "Detecting cyclic dependency. The last identifier is \"".concat(prettyPrintIdentifier(id), "\".")) || this;
     }
@@ -66,3 +66,3 @@ return CircularDependencyError;
     function AsyncItemReturnAsyncItemError(id) {
-        return _super.call(this, "Async item \"" + prettyPrintIdentifier(id) + "\" returns another async item.") || this;
+        return _super.call(this, "Async item \"".concat(prettyPrintIdentifier(id), "\" returns another async item.")) || this;
     }
@@ -74,3 +74,3 @@ return AsyncItemReturnAsyncItemError;
     function GetAsyncItemFromSyncApiError(id) {
-        return _super.call(this, "Cannot get async item \"" + prettyPrintIdentifier(id) + "\" from sync api.") || this;
+        return _super.call(this, "Cannot get async item \"".concat(prettyPrintIdentifier(id), "\" from sync api.")) || this;
     }
@@ -114,3 +114,3 @@ return GetAsyncItemFromSyncApiError;
                 isClassDependencyItem(item) ||
-                isInstanceDependencyItem(item) ||
+                isValueDependencyItem(item) ||
                 isFactoryDependencyItem(item)) {
@@ -190,4 +190,4 @@ this.dependencyCollection.add(dependency, item);
     Injector.prototype.resolveDependency = function (id, item) {
-        if (isInstanceDependencyItem(item)) {
-            return this.resolveInstanceDependency(id, item);
+        if (isValueDependencyItem(item)) {
+            return this.resolveValueDependency(id, item);
         }
@@ -204,3 +204,3 @@ else if (isFactoryDependencyItem(item)) {
     };
-    Injector.prototype.resolveInstanceDependency = function (id, item) {
+    Injector.prototype.resolveValueDependency = function (id, item) {
         var thing = item.useValue;
@@ -267,3 +267,3 @@ this.resolvedDependencyCollection.add(id, thing);
         if (args.length !== firstDependencyArgIndex) {
-            console.warn("[redi]: Expect " + firstDependencyArgIndex + " custom parameter(s) but get " + args.length + ".");
+            console.warn("[redi]: Expect ".concat(firstDependencyArgIndex, " custom parameter(s) but get ").concat(args.length, "."));
             var delta = firstDependencyArgIndex - args.length;
@@ -270,0 +270,0 @@ if (delta > 0) {

esm/publicApi.d.ts

@@ -12,3 +12,3 @@ export { createIdentifier } from './decorators';
 export { registerSingleton } from './dependencySingletons';
-export { AsyncDependencyItem, ClassDependencyItem, Ctor, FactoryDependencyItem, isAsyncDependencyItem, isAsyncHook, isClassDependencyItem, isCtor, isFactoryDependencyItem, isInstanceDependencyItem, ValueDependencyItem, } from './dependencyItem';
+export { AsyncDependencyItem, ClassDependencyItem, Ctor, DependencyItem, FactoryDependencyItem, isAsyncDependencyItem, isAsyncHook, isClassDependencyItem, isCtor, isFactoryDependencyItem, isValueDependencyItem, SyncDependencyItem, ValueDependencyItem, } from './dependencyItem';
 export { RediError } from './error';

esm/publicApi.js

@@ -9,4 +9,4 @@ export { createIdentifier } from './decorators';
 export { registerSingleton } from './dependencySingletons';
-export { isAsyncDependencyItem, isAsyncHook, isClassDependencyItem, isCtor, isFactoryDependencyItem, isInstanceDependencyItem, } from './dependencyItem';
+export { isAsyncDependencyItem, isAsyncHook, isClassDependencyItem, isCtor, isFactoryDependencyItem, isValueDependencyItem, } from './dependencyItem';
 export { RediError } from './error';
 //# sourceMappingURL=publicApi.js.map

esm/react-bindings/publicApi.d.ts

@@ -5,1 +5,2 @@ export { useInjector, useDependency } from './reactHooks';
 export { WithDependency } from './reactDecorators';
+export * from './reactRx';

esm/react-bindings/publicApi.js

@@ -5,2 +5,3 @@ export { useInjector, useDependency } from './reactHooks';
 export { WithDependency } from './reactDecorators';
+export * from './reactRx';
 //# sourceMappingURL=publicApi.js.map

esm/react-bindings/reactDecorators.js

@@ -20,3 +20,3 @@ var __extends = (this && this.__extends) || (function () {
     function ClassComponentNotInRediContextError(component) {
-        return _super.call(this, "You should make \"RediContext\" as " + component.constructor.name + "'s default context type. " +
+        return _super.call(this, "You should make \"RediContext\" as ".concat(component.constructor.name, "'s default context type. ") +
             'If you want to use multiple context, please check this on React doc site. ' +
@@ -23,0 +23,0 @@ 'https://reactjs.org/docs/context.html#classcontexttype') || this;

fesm/react-bindings.js

 import * as React from 'react';
+import React__default, { useState, useEffect, useRef, useMemo, createContext, useCallback, useContext } from 'react';
 import { RediError, Injector, Quantity } from '@wendellhu/redi';
+import { BehaviorSubject } from 'rxjs';
 
@@ -118,3 +120,3 @@ var RediContextCreated = '__RediContextCreated__';
     function ClassComponentNotInRediContextError(component) {
-        return _super.call(this, "You should make \"RediContext\" as " + component.constructor.name + "'s default context type. " +
+        return _super.call(this, "You should make \"RediContext\" as ".concat(component.constructor.name, "'s default context type. ") +
             'If you want to use multiple context, please check this on React doc site. ' +
@@ -141,3 +143,72 @@ 'https://reactjs.org/docs/context.html#classcontexttype') || this;
 
-export { RediConsumer, RediContext, RediProvider, WithDependency, connectDependencies, connectInjector, useDependency, useInjector };
+/**
+ * unwrap an observable value, return it to the component for rendering, and
+ * trigger re-render when value changes
+ *
+ * **IMPORTANT**. Parent and child components should not subscribe to the same
+ * observable, otherwise unnecessary re-render would be triggered. Instead, the
+ * top-most component should subscribe and pass value of the observable to
+ * its offspring, by props or context.
+ *
+ * If you have to do that, consider using `useDependencyContext` and
+ * `useDependencyContextValue` instead.
+ */
+function useDependencyValue(depValue$, defaultValue) {
+    var firstValue = depValue$ instanceof BehaviorSubject && typeof defaultValue === 'undefined'
+        ? depValue$.getValue()
+        : defaultValue;
+    var _a = useState(firstValue), value = _a[0], setValue = _a[1];
+    useEffect(function () {
+        var subscription = depValue$.subscribe(function (val) { return setValue(val); });
+        return function () { return subscription.unsubscribe(); };
+    }, [depValue$]);
+    return value;
+}
+/**
+ * subscribe to a signal that emits whenever data updates and re-render
+ *
+ * @param update$ a signal that the data the functional component depends has updated
+ */
+function useUpdateBinder(update$) {
+    var _a = useState(0), dumpSet = _a[1];
+    useEffect(function () {
+        var subscription = update$.subscribe(function () { return dumpSet(function (prev) { return prev + 1; }); });
+        return function () { return subscription.unsubscribe(); };
+    }, []);
+}
+var DepValueMapProvider = new WeakMap();
+/**
+ * subscribe to an observable value from a service, creating a context for it so
+ * it child component won't have to subscribe again and cause unnecessary
+ */
+function useDependencyContext(depValue$, defaultValue) {
+    var depRef = useRef(undefined);
+    var value = useDependencyValue(depValue$, defaultValue);
+    var Context = useMemo(function () {
+        return createContext(value);
+    }, [depValue$]);
+    var Provider = useCallback(function (props) {
+        return React__default.createElement(Context.Provider, { value: value }, props.children);
+    }, [depValue$, value]);
+    if (depRef.current !== depValue$) {
+        if (depRef.current) {
+            DepValueMapProvider.delete(depRef.current);
+        }
+        depRef.current = depValue$;
+        DepValueMapProvider.set(depValue$, Context);
+    }
+    return {
+        Provider: Provider,
+        value: value,
+    };
+}
+function useDependencyContextValue(depValue$) {
+    var context = DepValueMapProvider.get(depValue$);
+    if (!context) {
+        throw new RediError("try to read context value but no ancestor component subscribed it.");
+    }
+    return useContext(context);
+}
+
+export { RediConsumer, RediContext, RediProvider, WithDependency, connectDependencies, connectInjector, useDependency, useDependencyContext, useDependencyContextValue, useDependencyValue, useInjector, useUpdateBinder };
 //# sourceMappingURL=react-bindings.js.map

fesm/redi.js

@@ -18,3 +18,3 @@ var IdentifierDecoratorSymbol = Symbol('$$IDENTIFIER_DECORATOR');
 }
-function isInstanceDependencyItem(thing) {
+function isValueDependencyItem(thing) {
     if (thing && typeof thing.useValue !== 'undefined') {
@@ -38,2 +38,5 @@ return true;
 function prettyPrintIdentifier(id) {
+    if (typeof id === 'undefined') {
+        return 'undefined';
+    }
     return isCtor(id) && !id[IdentifierDecoratorSymbol] ? id.name : id.toString();
@@ -72,3 +75,3 @@ }
     function RediError(message) {
-        return _super.call(this, "[redi]: " + message) || this;
+        return _super.call(this, "[redi]: ".concat(message)) || this;
     }
@@ -98,6 +101,4 @@ return RediError;
     function DependencyDescriptorNotFoundError(index, target) {
-        var _this = this;
-        var msg = "Could not find dependency registered on the " + (index + 1) + " parameter of the constructor of \"" + prettyPrintIdentifier(target) + "\".";
-        _this = _super.call(this, msg) || this;
-        return _this;
+        var msg = "Could not find dependency registered on the ".concat(index + 1, " parameter of the constructor of \"").concat(prettyPrintIdentifier(target), "\".");
+        return _super.call(this, msg) || this;
     }
@@ -109,6 +110,4 @@ return DependencyDescriptorNotFoundError;
     function IdentifierUndefinedError(target, index) {
-        var _this = this;
-        var msg = "It seems that you register \"undefined\" as dependency on the " + (index + 1) + " parameter of \"" + prettyPrintIdentifier(target) + "\". Please make sure that there is not cyclic dependency among your TypeScript files, or consider using \"forwardRef\".";
-        _this = _super.call(this, msg) || this;
-        return _this;
+        var msg = "It seems that you register \"undefined\" as dependency on the ".concat(index + 1, " parameter of \"").concat(prettyPrintIdentifier(target), "\". Please make sure that there is not cyclic dependency among your TypeScript files, or consider using \"forwardRef\".");
+        return _super.call(this, msg) || this;
     }
@@ -174,3 +173,3 @@ return IdentifierUndefinedError;
     if (knownIdentifiers.has(id)) {
-        throw new RediError("Identifier \"" + id + "\" already exists.");
+        throw new RediError("Identifier \"".concat(id, "\" already exists."));
     }
@@ -210,6 +209,4 @@ else {
     function QuantityCheckError(id, quantity, actual) {
-        var _this = this;
-        var msg = "Expect \"" + quantity + "\" dependency items for id \"" + prettyPrintIdentifier(id) + "\" but get " + actual + ".";
-        _this = _super.call(this, msg) || this;
-        return _this;
+        var msg = "Expect \"".concat(quantity, "\" dependency items for id \"").concat(prettyPrintIdentifier(id), "\" but get ").concat(actual, ".");
+        return _super.call(this, msg) || this;
     }
@@ -297,6 +294,4 @@ return QuantityCheckError;
     function DependencyNotFoundError(id) {
-        var _this = this;
-        var msg = "Cannot find \"" + prettyPrintIdentifier(id) + "\" registered by any injector.";
-        _this = _super.call(this, msg) || this;
-        return _this;
+        var msg = "Cannot find \"".concat(prettyPrintIdentifier(id), "\" registered by any injector.");
+        return _super.call(this, msg) || this;
     }
@@ -581,3 +576,3 @@ return DependencyNotFoundError;
     function DuplicatedRegistrationError(id, item1, item2) {
-        return _super.call(this, "Duplicated registration of " + prettyPrintIdentifier(id) + ", 1. " + item1 + " 2. " + item2 + ".") || this;
+        return _super.call(this, "Duplicated registration of ".concat(prettyPrintIdentifier(id), ", 1. ").concat(item1, " 2. ").concat(item2, ".")) || this;
     }
@@ -647,3 +642,3 @@ return DuplicatedRegistrationError;
     function CircularDependencyError(id) {
-        return _super.call(this, "Detecting cyclic dependency. The last identifier is \"" + prettyPrintIdentifier(id) + "\".") || this;
+        return _super.call(this, "Detecting cyclic dependency. The last identifier is \"".concat(prettyPrintIdentifier(id), "\".")) || this;
     }
@@ -662,3 +657,3 @@ return CircularDependencyError;
     function AsyncItemReturnAsyncItemError(id) {
-        return _super.call(this, "Async item \"" + prettyPrintIdentifier(id) + "\" returns another async item.") || this;
+        return _super.call(this, "Async item \"".concat(prettyPrintIdentifier(id), "\" returns another async item.")) || this;
     }
@@ -670,3 +665,3 @@ return AsyncItemReturnAsyncItemError;
     function GetAsyncItemFromSyncApiError(id) {
-        return _super.call(this, "Cannot get async item \"" + prettyPrintIdentifier(id) + "\" from sync api.") || this;
+        return _super.call(this, "Cannot get async item \"".concat(prettyPrintIdentifier(id), "\" from sync api.")) || this;
     }
@@ -710,3 +705,3 @@ return GetAsyncItemFromSyncApiError;
                 isClassDependencyItem(item) ||
-                isInstanceDependencyItem(item) ||
+                isValueDependencyItem(item) ||
                 isFactoryDependencyItem(item)) {
@@ -786,4 +781,4 @@ this.dependencyCollection.add(dependency, item);
     Injector.prototype.resolveDependency = function (id, item) {
-        if (isInstanceDependencyItem(item)) {
-            return this.resolveInstanceDependency(id, item);
+        if (isValueDependencyItem(item)) {
+            return this.resolveValueDependency(id, item);
         }
@@ -800,3 +795,3 @@ else if (isFactoryDependencyItem(item)) {
     };
-    Injector.prototype.resolveInstanceDependency = function (id, item) {
+    Injector.prototype.resolveValueDependency = function (id, item) {
         var thing = item.useValue;
@@ -863,3 +858,3 @@ this.resolvedDependencyCollection.add(id, thing);
         if (args.length !== firstDependencyArgIndex) {
-            console.warn("[redi]: Expect " + firstDependencyArgIndex + " custom parameter(s) but get " + args.length + ".");
+            console.warn("[redi]: Expect ".concat(firstDependencyArgIndex, " custom parameter(s) but get ").concat(args.length, "."));
             var delta = firstDependencyArgIndex - args.length;
@@ -1027,3 +1022,3 @@ if (delta > 0) {
 
-export { Inject, Injector, LookUp, Many, Optional, Quantity, RediError, Self, SkipSelf, createIdentifier, forwardRef, isAsyncDependencyItem, isAsyncHook, isClassDependencyItem, isCtor, isFactoryDependencyItem, isInstanceDependencyItem, registerSingleton, setDependencies };
+export { Inject, Injector, LookUp, Many, Optional, Quantity, RediError, Self, SkipSelf, createIdentifier, forwardRef, isAsyncDependencyItem, isAsyncHook, isClassDependencyItem, isCtor, isFactoryDependencyItem, isValueDependencyItem, registerSingleton, setDependencies };
 //# sourceMappingURL=redi.js.map

package.json

 {
   "$schema": "https://raw.githubusercontent.com/wendellhu95/squirrel/master/src/schema/package.schema.json",
   "name": "@wendellhu/redi",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A dependency library for TypeScript and JavaScript, along with a binding for React.",
@@ -19,6 +19,7 @@ "exports": {
   },
-  "author": "wendellhu95 <[e-mail]>",
+  "author": "wendellhu95 <[e-mail]>",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">= 16.8.0"
+    "react": ">= 16.8.0",
+    "rxjs": "^6.2.1"
   },
@@ -25,0 +26,0 @@ "main": "./dist/redi.js",

No alert changes

Improved metrics

Total package byte prevSize

407342

increased by6.11%

Number of package files

78

increased by4%

Lines of code

4108

increased by6.07%

Worsened metrics

Dependency count

2

increased by100%

No dependency changes