@frui.ts/views - npm Package Compare versions

Comparing version 1.0.0-alpha.10 to 1.0.0-alpha.11

dist/assignDefaultProps.d.ts

@@ -0,1 +1,2 @@
+import type React from "react";
 export default function assignDefaultProps<TControl extends React.ElementType>(control: TControl, props: Partial<React.ComponentPropsWithoutRef<TControl>>): void;

dist/assignDefaultProps.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 function assignDefaultProps(control, props) {
-    var controlWithDefaultProps = control;
+    const controlWithDefaultProps = control;
     if (controlWithDefaultProps.defaultProps) {
@@ -6,0 +6,0 @@ Object.assign(controlWithDefaultProps.defaultProps, props);

dist/bindingComponent.d.ts

@@ -1,7 +0,8 @@
-import * as React from "react";
-import { ExcludeBindingProps, IBindingProps } from "./bindingProps";
-export declare abstract class BindingComponent<TTarget, TProps extends IBindingProps<TTarget>> extends React.Component<TProps> {
+import type { BindingProperty, BindingTarget } from "@frui.ts/helpers";
+import React from "react";
+import type { ExcludeBindingProps, IBindingProps } from "./bindingProps";
+export declare abstract class BindingComponent<TTarget extends BindingTarget, TProps extends IBindingProps<TTarget>> extends React.Component<TProps> {
     protected get inheritedProps(): Partial<ExcludeBindingProps<TProps>>;
-    protected get value(): any;
+    protected get value(): (TTarget extends Map<any, infer V> ? V : TTarget[BindingProperty<TTarget>]) | undefined;
     protected setValue(value: any): void;
 }

dist/bindingComponent.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -24,51 +11,35 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var mobx_1 = require("mobx");
-var React = __importStar(require("react"));
-var bindingProps_1 = require("./bindingProps");
-var useBinding_1 = require("./useBinding");
-var BindingComponent = (function (_super) {
-    __extends(BindingComponent, _super);
-    function BindingComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
+exports.BindingComponent = void 0;
+const mobx_1 = require("mobx");
+const react_1 = __importDefault(require("react"));
+const bindingProps_1 = require("./bindingProps");
+const useBinding_1 = require("./useBinding");
+class BindingComponent extends react_1.default.Component {
+    get inheritedProps() {
+        return (0, bindingProps_1.omitBindingProps)(this.props);
     }
-    Object.defineProperty(BindingComponent.prototype, "inheritedProps", {
-        get: function () {
-            return bindingProps_1.omitBindingProps(this.props);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BindingComponent.prototype, "value", {
-        get: function () {
-            if (!this.props.target) {
-                console.warn("'target' has not been set");
-                return undefined;
-            }
-            return useBinding_1.getValue(this.props.target, this.props.property);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    BindingComponent.prototype.setValue = function (value) {
-        var _a = this.props, target = _a.target, property = _a.property, onValueChanged = _a.onValueChanged;
-        useBinding_1.setValue(target, property, value);
+    get value() {
+        if (!this.props.target) {
+            console.warn("'target' has not been set");
+            return undefined;
+        }
+        return (0, useBinding_1.getValue)(this.props.target, this.props.property);
+    }
+    setValue(value) {
+        const { target, property, onValueChanged } = this.props;
+        (0, useBinding_1.setValue)(target, property, value);
         onValueChanged === null || onValueChanged === void 0 ? void 0 : onValueChanged(value, property, target);
-    };
-    __decorate([
-        mobx_1.action.bound,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], BindingComponent.prototype, "setValue", null);
-    return BindingComponent;
-}(React.Component));
+    }
+}
+__decorate([
+    mobx_1.action.bound,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], BindingComponent.prototype, "setValue", null);
 exports.BindingComponent = BindingComponent;
 //# sourceMappingURL=bindingComponent.js.map

dist/bindingProps.d.ts

@@ -1,3 +0,3 @@
-import { BindingProperty, PropertyType } from "@frui.ts/helpers";
-export interface IBindingProps<TTarget, TProperty extends BindingProperty<TTarget> = BindingProperty<TTarget>, TValue = PropertyType<TTarget, TProperty>> {
+import type { BindingTarget, BindingProperty, PropertyType } from "@frui.ts/helpers";
+export interface IBindingProps<TTarget extends BindingTarget, TProperty extends BindingProperty<TTarget> = BindingProperty<TTarget>, TValue = PropertyType<TTarget, TProperty>> {
     target?: TTarget;
@@ -4,0 +4,0 @@ property?: TProperty;

dist/bindingProps.js

@@ -14,4 +14,5 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.omitBindingProps = void 0;
 function omitBindingProps(props) {
-    var target = props.target, property = props.property, onValueChanged = props.onValueChanged, rest = __rest(props, ["target", "property", "onValueChanged"]);
+    const { target, property, onValueChanged } = props, rest = __rest(props, ["target", "property", "onValueChanged"]);
     return rest;
@@ -18,0 +19,0 @@ }

dist/dataIdHandler.d.ts

@@ -1,16 +0,4 @@
-/// <reference types="lodash/common/common" />
-/// <reference types="lodash/common/array" />
-/// <reference types="lodash/common/collection" />
-/// <reference types="lodash/common/date" />
-/// <reference types="lodash/common/function" />
-/// <reference types="lodash/common/lang" />
-/// <reference types="lodash/common/math" />
-/// <reference types="lodash/common/number" />
-/// <reference types="lodash/common/object" />
-/// <reference types="lodash/common/seq" />
-/// <reference types="lodash/common/string" />
-/// <reference types="lodash/common/util" />
-import * as React from "react";
-declare function dataIdHandler(handler: (id: number) => any): (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+import type React from "react";
+declare function dataIdHandler(handler: (id: number) => any): (e: React.MouseEvent<HTMLElement>) => void;
 declare const _default: typeof dataIdHandler & import("lodash").MemoizedFunction;
 export default _default;

dist/dataIdHandler.js

@@ -6,7 +6,6 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var memoize_1 = __importDefault(require("lodash/memoize"));
+const memoize_1 = __importDefault(require("lodash/memoize"));
 function dataIdHandler(handler) {
-    return function (e) {
-        var _a;
-        var id = (_a = e.currentTarget.dataset) === null || _a === void 0 ? void 0 : _a.id;
+    return (e) => {
+        const id = e.currentTarget.dataset.id;
         if (id !== undefined) {
@@ -17,3 +16,3 @@ handler(+id);
 }
-exports.default = memoize_1.default(dataIdHandler);
+exports.default = (0, memoize_1.default)(dataIdHandler);
 //# sourceMappingURL=dataIdHandler.js.map

dist/errorBoundary.d.ts

@@ -1,2 +0,2 @@
-import * as React from "react";
+import React from "react";
 export declare type FallbackRender = (errorData: {
@@ -20,4 +20,4 @@ error: Error;
     componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-    render(): any;
+    render(): {};
 }
 export {};

dist/errorBoundary.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var INITIAL_STATE = Object.freeze({
+const react_1 = __importDefault(require("react"));
+const INITIAL_STATE = Object.freeze({
     errorInfo: null,
     error: null,
 });
-var ErrorBoundary = (function (_super) {
-    __extends(ErrorBoundary, _super);
-    function ErrorBoundary() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = INITIAL_STATE;
-        _this.resetErrorBoundary = function () {
-            var onReset = _this.props.onReset;
+class ErrorBoundary extends react_1.default.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = INITIAL_STATE;
+        this.resetErrorBoundary = () => {
+            const { onReset } = this.props;
             if (onReset) {
-                var _a = _this.state, error = _a.error, errorInfo = _a.errorInfo;
+                const { error, errorInfo } = this.state;
                 onReset(error, errorInfo);
             }
-            _this.setState(INITIAL_STATE);
+            this.setState(INITIAL_STATE);
         };
-        return _this;
     }
-    ErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
+    componentDidCatch(error, errorInfo) {
         var _a, _b;
         (_b = (_a = this.props).onError) === null || _b === void 0 ? void 0 : _b.call(_a, error, errorInfo);
-        this.setState({ error: error, errorInfo: errorInfo });
-    };
-    ErrorBoundary.prototype.render = function () {
+        this.setState({ error, errorInfo });
+    }
+    render() {
         if (this.state.error) {
-            var _a = this.state, error = _a.error, errorInfo = _a.errorInfo;
-            var fallback = this.props.fallback;
-            var element = typeof fallback === "function" ? fallback({ error: error, errorInfo: errorInfo, resetError: this.resetErrorBoundary }) : fallback;
-            if (element !== undefined) {
+            const { error, errorInfo } = this.state;
+            const { fallback } = this.props;
+            const element = typeof fallback === "function"
+                ? fallback({ error, errorInfo, resetError: this.resetErrorBoundary })
+                : fallback;
+            if (element) {
                 return element;
             }
-            return React.createElement("p", null, "Something went wrong :-(");
+            return react_1.default.createElement("p", null, "Something went wrong :-(");
         }
-        return React.createElement(React.Fragment, null, this.props.children);
-    };
-    return ErrorBoundary;
-}(React.PureComponent));
+        return react_1.default.createElement(react_1.default.Fragment, null, this.props.children);
+    }
+}
 exports.default = ErrorBoundary;
 //# sourceMappingURL=errorBoundary.js.map

dist/fieldHelpers.d.ts

@@ -1,12 +0,13 @@
-import * as React from "react";
-import { IBindingProps } from "./bindingProps";
-export interface IComponentInChildrenProps<TTarget, TChildProps> {
+import type { BindingTarget } from "@frui.ts/helpers";
+import React from "react";
+import type { IBindingProps } from "./bindingProps";
+export interface IComponentInChildrenProps<TTarget extends BindingTarget, TChildProps> {
     children(bidingProps: IBindingProps<TTarget>, childProps: TChildProps): React.ComponentType;
 }
-export interface IComponentInAttributeProps<TTarget> {
+export interface IComponentInAttributeProps<TTarget extends BindingTarget> {
     component?: React.ComponentType<IBindingProps<TTarget>>;
     componentprops?: any;
 }
-export declare type IFormFieldProps<TTarget, TChildProps> = IBindingProps<TTarget> & (IComponentInChildrenProps<TTarget, TChildProps> | IComponentInAttributeProps<TTarget>);
-export declare function extractBindingProps<TTarget>(props: IBindingProps<TTarget>): IBindingProps<TTarget>;
-export declare function getInnerComponent<TTarget, TChildProps>(props: IFormFieldProps<TTarget, TChildProps>, childProps: TChildProps): JSX.Element | React.ComponentClass<{}, any> | React.FunctionComponent<{}> | undefined;
+export declare type IFormFieldProps<TTarget extends BindingTarget, TChildProps> = IBindingProps<TTarget> & (IComponentInChildrenProps<TTarget, TChildProps> | IComponentInAttributeProps<TTarget>);
+export declare function extractBindingProps<TTarget extends BindingTarget>(props: IBindingProps<TTarget>): IBindingProps<TTarget>;
+export declare function getInnerComponent<TTarget extends BindingTarget, TChildProps>(props: IFormFieldProps<TTarget, TChildProps>, childProps: TChildProps): JSX.Element | React.ComponentType<{}> | undefined;

dist/fieldHelpers.js

 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(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);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
+exports.getInnerComponent = exports.extractBindingProps = void 0;
+const react_1 = __importDefault(require("react"));
 function extractBindingProps(props) {
@@ -31,12 +17,12 @@ return {
 function hasComponentInChildren(object) {
-    return !!object.children && typeof object.children === "function";
+    return !!(object === null || object === void 0 ? void 0 : object.children) && typeof object.children === "function";
 }
 function hasComponentInAttribute(object) {
-    return !!object.component;
+    return !!(object === null || object === void 0 ? void 0 : object.component);
 }
 function getInnerComponent(props, childProps) {
-    var bindingProps = extractBindingProps(props);
+    const bindingProps = extractBindingProps(props);
     if (hasComponentInAttribute(props)) {
-        var Component = props.component;
-        return React.createElement(Component, __assign({}, props.componentprops, childProps, bindingProps));
+        const Component = props.component;
+        return react_1.default.createElement(Component, Object.assign({}, props.componentprops, childProps, bindingProps));
     }
@@ -43,0 +29,0 @@ else if (hasComponentInChildren(props)) {

dist/index.d.ts

@@ -8,3 +8,2 @@ export { default as assignDefaultProps } from "./assignDefaultProps";
 export { default as preventDefault } from "./preventDefault";
-export * from "./routeLink";
 export * from "./types";
@@ -11,0 +10,0 @@ export * from "./useBinding";

dist/index.js

 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.View = exports.useScreenLifecycle = exports.useDisposable = exports.preventDefault = exports.createMemoizedHandler = exports.createDataIdHandler = exports.assignDefaultProps = void 0;
 var assignDefaultProps_1 = require("./assignDefaultProps");
-exports.assignDefaultProps = assignDefaultProps_1.default;
-__export(require("./bindingComponent"));
-__export(require("./bindingProps"));
+Object.defineProperty(exports, "assignDefaultProps", { enumerable: true, get: function () { return __importDefault(assignDefaultProps_1).default; } });
+__exportStar(require("./bindingComponent"), exports);
+__exportStar(require("./bindingProps"), exports);
 var dataIdHandler_1 = require("./dataIdHandler");
-exports.createDataIdHandler = dataIdHandler_1.default;
-__export(require("./fieldHelpers"));
+Object.defineProperty(exports, "createDataIdHandler", { enumerable: true, get: function () { return __importDefault(dataIdHandler_1).default; } });
+__exportStar(require("./fieldHelpers"), exports);
 var memoizedDataHandler_1 = require("./memoizedDataHandler");
-exports.createMemoizedHandler = memoizedDataHandler_1.default;
+Object.defineProperty(exports, "createMemoizedHandler", { enumerable: true, get: function () { return __importDefault(memoizedDataHandler_1).default; } });
 var preventDefault_1 = require("./preventDefault");
-exports.preventDefault = preventDefault_1.default;
-__export(require("./routeLink"));
-__export(require("./useBinding"));
+Object.defineProperty(exports, "preventDefault", { enumerable: true, get: function () { return __importDefault(preventDefault_1).default; } });
+__exportStar(require("./types"), exports);
+__exportStar(require("./useBinding"), exports);
 var useDisposable_1 = require("./useDisposable");
-exports.useDisposable = useDisposable_1.default;
+Object.defineProperty(exports, "useDisposable", { enumerable: true, get: function () { return __importDefault(useDisposable_1).default; } });
 var useScreenLifecycle_1 = require("./useScreenLifecycle");
-exports.useScreenLifecycle = useScreenLifecycle_1.default;
+Object.defineProperty(exports, "useScreenLifecycle", { enumerable: true, get: function () { return __importDefault(useScreenLifecycle_1).default; } });
 var view_1 = require("./view");
-exports.View = view_1.default;
-__export(require("./viewLocator"));
+Object.defineProperty(exports, "View", { enumerable: true, get: function () { return __importDefault(view_1).default; } });
+__exportStar(require("./viewLocator"), exports);
 //# sourceMappingURL=index.js.map

dist/memoizedDataHandler.d.ts

@@ -1,14 +0,2 @@
-/// <reference types="lodash/common/common" />
-/// <reference types="lodash/common/array" />
-/// <reference types="lodash/common/collection" />
-/// <reference types="lodash/common/date" />
-/// <reference types="lodash/common/function" />
-/// <reference types="lodash/common/lang" />
-/// <reference types="lodash/common/math" />
-/// <reference types="lodash/common/number" />
-/// <reference types="lodash/common/object" />
-/// <reference types="lodash/common/seq" />
-/// <reference types="lodash/common/string" />
-/// <reference types="lodash/common/util" />
-import * as React from "react";
-export default function createMemoizedHandler(datasetKey: string): ((handler: (data: string) => any) => (e: React.MouseEvent<HTMLElement, MouseEvent>) => void) & import("lodash").MemoizedFunction;
+import type { SyntheticEvent } from "react";
+export default function createMemoizedHandler(datasetKey: string): ((handler: (data: string) => any) => (e: SyntheticEvent<HTMLElement>) => void) & import("lodash").MemoizedFunction;

dist/memoizedDataHandler.js

@@ -6,7 +6,7 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var memoize_1 = __importDefault(require("lodash/memoize"));
+const memoize_1 = __importDefault(require("lodash/memoize"));
 function createMemoizedHandler(datasetKey) {
-    return memoize_1.default(function (handler) {
-        return function (e) {
-            var key = e.currentTarget.dataset[datasetKey];
+    return (0, memoize_1.default)((handler) => {
+        return (e) => {
+            const key = e.currentTarget.dataset[datasetKey];
             if (key !== undefined) {
@@ -13,0 +13,0 @@ handler(key);

dist/preventDefault.d.ts

@@ -1,2 +0,2 @@
-import { SyntheticEvent } from "react";
-export default function preventDefault(action: () => any): (event: SyntheticEvent<Element, Event>) => void;
+import type { SyntheticEvent } from "react";
+export default function preventDefault(action: () => any): (event: SyntheticEvent) => void;

dist/types.d.ts

@@ -0,1 +1,2 @@
+import type React from "react";
 export interface ISelectItem {
@@ -9,1 +10,2 @@ value: string | number;
 export declare type ViewComponent<TViewModel> = React.FunctionComponent<ViewProps<TViewModel>>;
+export declare type constructor<T> = Function | (new (...args: any[]) => T);

dist/useBinding.d.ts

@@ -1,9 +0,9 @@
-import { BindingProperty, PropertyName, PropertyType } from "@frui.ts/helpers";
-import { IBindingProps } from "./bindingProps";
+import type { BindingProperty, BindingTarget, PropertyName, PropertyType } from "@frui.ts/helpers";
+import type { IBindingProps } from "./bindingProps";
 export declare function getValue<TTarget, TProperty extends PropertyName<TTarget>>(target: TTarget | undefined, property: TProperty | undefined, ensureObservable?: boolean): TTarget[TProperty];
-export declare function getValue<TKey, TValue, TTarget extends Map<TKey, TValue>>(target: TTarget | undefined, key: TKey | undefined): TValue;
-export declare function getValue<TTarget, TProperty extends BindingProperty<TTarget>>(target: TTarget | undefined, property: TProperty | undefined, ensureObservable?: boolean): PropertyType<TTarget, TProperty>;
+export declare function getValue<TKey, TValue, TTarget extends Map<TKey, TValue>>(target: TTarget | undefined, key: TKey | undefined): TValue | undefined;
+export declare function getValue<TTarget extends BindingTarget, TProperty extends BindingProperty<TTarget>>(target: TTarget | undefined, property: TProperty | undefined, ensureObservable?: boolean): PropertyType<TTarget, TProperty> | undefined;
 export declare function setValue<TTarget, TProperty extends PropertyName<TTarget>>(target: TTarget | undefined, property: TProperty | undefined, value: TTarget[TProperty]): void;
 export declare function setValue<TKey, TValue, TTarget extends Map<TKey, TValue>>(target: TTarget | undefined, key: TKey | undefined, value: TValue): void;
-export declare function setValue<TTarget, TProperty extends BindingProperty<TTarget>>(target: TTarget | undefined, property: TProperty | undefined, value: PropertyType<TTarget, TProperty>): void;
-export declare function useBinding<TTarget, TProperty extends BindingProperty<TTarget> = BindingProperty<TTarget>, TValue = PropertyType<TTarget, TProperty>>(props: IBindingProps<TTarget, TProperty, TValue>): readonly [TValue, (value: TValue) => void];
+export declare function setValue<TTarget extends BindingTarget, TProperty extends BindingProperty<TTarget>>(target: TTarget | undefined, property: TProperty | undefined, value: PropertyType<TTarget, TProperty>): void;
+export declare function useBinding<TTarget extends BindingTarget, TProperty extends BindingProperty<TTarget> = BindingProperty<TTarget>, TValue = PropertyType<TTarget, TProperty>>(props: IBindingProps<TTarget, TProperty, TValue>): readonly [TValue, (value: TValue) => void];

dist/useBinding.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var helpers_1 = require("@frui.ts/helpers");
-var mobx_1 = require("mobx");
-function getValue(target, property, ensureObservable) {
-    if (ensureObservable === void 0) { ensureObservable = true; }
+exports.useBinding = exports.setValue = exports.getValue = void 0;
+const helpers_1 = require("@frui.ts/helpers");
+const mobx_1 = require("mobx");
+function getValue(target, property, ensureObservable = true) {
     if (!target) {
@@ -13,15 +13,21 @@ throw new Error("'target' prop has not been set");
     }
-    if (mobx_1.isObservableMap(target)) {
+    if ((0, mobx_1.isObservableMap)(target)) {
         return target.get(property);
     }
-    var propertyName = property;
-    if (!mobx_1.isObservable(target) || !mobx_1.isObservableProp(target, propertyName)) {
-        if (ensureObservable) {
-            mobx_1.action(helpers_1.ensureObservableProperty)(target, propertyName, target[propertyName]);
+    const propertyName = property;
+    if (!(0, mobx_1.isObservable)(target) || !(0, mobx_1.isObservableProp)(target, propertyName)) {
+        if ((0, helpers_1.isMap)(target)) {
+            return target.get(property);
         }
         else {
-            return target[propertyName];
+            const value = target[property];
+            if (ensureObservable) {
+                (0, mobx_1.action)(helpers_1.ensureObservableProperty)(target, propertyName, value);
+            }
+            else {
+                return value;
+            }
         }
     }
-    return mobx_1.get(target, propertyName);
+    return (0, mobx_1.get)(target, propertyName);
 }
@@ -31,3 +37,3 @@ exports.getValue = getValue;
     if (target && property) {
-        mobx_1.action(helpers_1.ensureObservableProperty)(target, property, value);
+        (0, mobx_1.action)(helpers_1.ensureObservableProperty)(target, property, value);
     }
@@ -37,4 +43,10 @@ }
 function useBinding(props) {
-    var value = getValue(props.target, props.property);
-    var setter = function (value) { return setValue(props.target, props.property, value); };
+    const value = getValue(props.target, props.property);
+    const setter = (value) => {
+        var _a;
+        setValue(props.target, props.property, value);
+        if (props.target && props.property) {
+            (_a = props.onValueChanged) === null || _a === void 0 ? void 0 : _a.call(props, value, props.property, props.target);
+        }
+    };
     return [value, setter];
@@ -41,0 +53,0 @@ }

dist/useDisposable.d.ts

@@ -1,2 +0,2 @@
-import { IDisposable } from "@frui.ts/helpers";
+import type { IDisposable } from "@frui.ts/helpers";
 export default function useDisposable(...dependencies: IDisposable[]): void;

dist/useDisposable.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-function useDisposable() {
-    var dependencies = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        dependencies[_i] = arguments[_i];
-    }
-    react_1.useEffect(function () { return function () {
-        dependencies.forEach(function (x) { return x.dispose(); });
-    }; }, []);
+const react_1 = require("react");
+function useDisposable(...dependencies) {
+    (0, react_1.useEffect)(() => () => {
+        dependencies.forEach(x => x.dispose());
+    }, []);
 }
 exports.default = useDisposable;
 //# sourceMappingURL=useDisposable.js.map

dist/useScreenLifecycle.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var screens_1 = require("@frui.ts/screens");
-var react_1 = require("react");
-function useScreenLifecycle(vm, closeOnCleanup) {
-    if (closeOnCleanup === void 0) { closeOnCleanup = true; }
-    react_1.useEffect(function () {
-        if (screens_1.isActivatable(vm)) {
-            vm.activate();
+const screens_1 = require("@frui.ts/screens");
+const react_1 = require("react");
+function useScreenLifecycle(vm, closeOnCleanup = true) {
+    (0, react_1.useEffect)(() => {
+        const navigator = (0, screens_1.getNavigator)(vm);
+        if (!navigator) {
+            return;
         }
-        if (screens_1.isDeactivatable(vm)) {
-            return function () {
-                vm.deactivate(closeOnCleanup);
+        if (!navigator.isActive) {
+            void navigator.navigate([]);
+        }
+        if (navigator.deactivate) {
+            return () => {
+                var _a;
+                void ((_a = navigator.deactivate) === null || _a === void 0 ? void 0 : _a.call(navigator, closeOnCleanup));
             };
@@ -15,0 +19,0 @@ }

dist/view.d.ts

@@ -1,11 +0,12 @@
-import * as React from "react";
-import { ErrorBoundaryProps } from "./errorBoundary";
+import React from "react";
+import type { ErrorBoundaryProps } from "./errorBoundary";
 interface ViewProps {
-    vm: any;
+    vm?: unknown;
     context?: string;
     useLifecycle?: boolean;
 }
+declare const ViewWithErrorBoundary: React.FunctionComponent<ViewProps & ErrorBoundaryProps>;
 declare const View: React.FunctionComponent<ViewProps> & {
-    ErrorBoundary: React.FunctionComponent<ViewProps & ErrorBoundaryProps>;
+    ErrorBoundary: typeof ViewWithErrorBoundary;
 };
 export default View;

dist/view.js

 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(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);
-};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -24,9 +13,2 @@ var t = {};
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -36,30 +18,31 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var errorBoundary_1 = __importDefault(require("./errorBoundary"));
-var useScreenLifecycle_1 = __importDefault(require("./useScreenLifecycle"));
-var viewLocator_1 = require("./viewLocator");
-var PureView = function (props) {
-    var vm = props.vm, children = props.children, context = props.context, useLifecycle = props.useLifecycle;
+const react_1 = __importDefault(require("react"));
+const errorBoundary_1 = __importDefault(require("./errorBoundary"));
+const useScreenLifecycle_1 = __importDefault(require("./useScreenLifecycle"));
+const viewLocator_1 = require("./viewLocator");
+const PureView = props => {
+    const { vm, children, context, useLifecycle } = props;
     if (!vm) {
-        return React.createElement(React.Fragment, null, children);
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
-    var FoundView = children === undefined ? viewLocator_1.getView(vm.constructor, context) : viewLocator_1.tryGetView(vm.constructor, context);
+    const vmConstructor = vm.constructor;
+    const FoundView = children === undefined ? (0, viewLocator_1.getView)(vmConstructor, context) : (0, viewLocator_1.tryGetView)(vmConstructor, context);
     if (!FoundView) {
-        return React.createElement(React.Fragment, null, children);
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
-    if (!!useLifecycle) {
-        useScreenLifecycle_1.default(vm);
+    if (useLifecycle) {
+        (0, useScreenLifecycle_1.default)(vm);
     }
-    return React.createElement(FoundView, { vm: vm });
+    return react_1.default.createElement(FoundView, { vm: vm });
 };
 PureView.displayName = "View";
-var ViewWithErrorBoundary = function (props) {
-    var onError = props.onError, onReset = props.onReset, fallback = props.fallback, rest = __rest(props, ["onError", "onReset", "fallback"]);
-    return (React.createElement(errorBoundary_1.default, { onError: onError, onReset: onReset, fallback: fallback },
-        React.createElement(PureView, __assign({}, rest))));
+const ViewWithErrorBoundary = props => {
+    const { onError, onReset, fallback } = props, rest = __rest(props, ["onError", "onReset", "fallback"]);
+    return (react_1.default.createElement(errorBoundary_1.default, { onError: onError, onReset: onReset, fallback: fallback },
+        react_1.default.createElement(PureView, Object.assign({}, rest))));
 };
 ViewWithErrorBoundary.displayName = "View.ErrorBoundary";
-var View = PureView;
+const View = PureView;
 View.ErrorBoundary = ViewWithErrorBoundary;
 exports.default = View;
 //# sourceMappingURL=view.js.map

dist/viewLocator.d.ts

@@ -1,17 +0,9 @@
-import { ComponentType } from "react";
-declare type constructor<T> = new (...args: any[]) => T;
+import type { ComponentType } from "react";
+import type { constructor } from "./types";
 declare type viewComponent<TViewModel> = ComponentType<{
     vm: TViewModel;
 }>;
-export declare function registerView<TViewModel>(view: viewComponent<TViewModel>, viewModelConstructor: constructor<TViewModel>, context?: string): ComponentType<{
-    vm: TViewModel;
-}>;
-export declare function getView(viewModelConstructor: constructor<unknown>, context?: string): ComponentType<{
-    vm: any;
-}>;
-export declare function tryGetView(viewModelConstructor: constructor<unknown>, context?: string): import("react").ComponentClass<{
-    vm: any;
-}, any> | import("react").FunctionComponent<{
-    vm: any;
-}> | null;
+export declare function registerView<TViewModel>(view: viewComponent<TViewModel>, viewModelConstructor: constructor<TViewModel>, context?: string): viewComponent<TViewModel>;
+export declare function getView<TViewModel = unknown>(viewModelConstructor: constructor<TViewModel>, context?: string): viewComponent<TViewModel>;
+export declare function tryGetView<TViewModel = unknown>(viewModelConstructor: constructor<TViewModel>, context?: string): viewComponent<TViewModel> | null;
 export {};

dist/viewLocator.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var DEFAULT_CONTEXT = "default";
-var viewsRegistry = new Map();
-function registerView(view, viewModelConstructor, context) {
-    var _a;
-    if (context === void 0) { context = DEFAULT_CONTEXT; }
-    var currentViewModelViews = viewsRegistry.get(viewModelConstructor);
+exports.tryGetView = exports.getView = exports.registerView = void 0;
+const DEFAULT_CONTEXT = "default";
+const viewsRegistry = new Map();
+function registerView(view, viewModelConstructor, context = DEFAULT_CONTEXT) {
+    const currentViewModelViews = viewsRegistry.get(viewModelConstructor);
     if (currentViewModelViews) {
@@ -13,3 +12,3 @@ currentViewModelViews[context] = view;
     else {
-        viewsRegistry.set(viewModelConstructor, (_a = {}, _a[context] = view, _a));
+        viewsRegistry.set(viewModelConstructor, { [context]: view });
     }
@@ -19,11 +18,10 @@ return view;
 exports.registerView = registerView;
-function getView(viewModelConstructor, context) {
-    if (context === void 0) { context = DEFAULT_CONTEXT; }
-    var currentViewModelViews = viewsRegistry.get(viewModelConstructor);
+function getView(viewModelConstructor, context = DEFAULT_CONTEXT) {
+    const currentViewModelViews = viewsRegistry.get(viewModelConstructor);
     if (!currentViewModelViews) {
         throw new Error("No view has been registered for view model " + viewModelConstructor.name);
     }
-    var view = currentViewModelViews[context];
+    const view = currentViewModelViews[context];
     if (!view) {
-        throw new Error("No view has been registered for view model " + viewModelConstructor.name + " and context " + context);
+        throw new Error(`No view has been registered for view model ${viewModelConstructor.name} and context ${context}`);
     }
@@ -33,9 +31,8 @@ return view;
 exports.getView = getView;
-function tryGetView(viewModelConstructor, context) {
-    if (context === void 0) { context = DEFAULT_CONTEXT; }
-    var currentViewModelViews = viewsRegistry.get(viewModelConstructor);
+function tryGetView(viewModelConstructor, context = DEFAULT_CONTEXT) {
+    const currentViewModelViews = viewsRegistry.get(viewModelConstructor);
     if (!currentViewModelViews) {
         return null;
     }
-    var view = currentViewModelViews[context];
+    const view = currentViewModelViews[context];
     if (!view) {
@@ -42,0 +39,0 @@ return null;

package.json

@@ -6,3 +6,3 @@ {
   },
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.11",
   "description": "Frui.ts presentation related components based on React",
@@ -39,15 +39,15 @@ "keywords": [
   "devDependencies": {
-    "@types/lodash": "^4.14.149",
-    "@types/react": "^16.9.38"
+    "@types/lodash": "^4.14.176",
+    "@types/react": "^17.0.33"
   },
   "dependencies": {
-    "@frui.ts/helpers": "^1.0.0-alpha.10",
-    "@frui.ts/screens": "^1.0.0-alpha.10",
-    "lodash": "^4.17.15"
+    "@frui.ts/helpers": "^1.0.0-alpha.11",
+    "@frui.ts/screens": "^1.0.0-alpha.11",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
     "mobx": "^4.0.0 || ^5.0.0",
-    "react": "^16.13.0"
+    "react": "^17.0.2"
   },
-  "gitHead": "5454d007244bb9cdd28be5207a9f125f04a9ac43"
+  "gitHead": "f9f70e1d4bcbe45b8b37f11f5dcdfd2ed9a523c7"
 }

README.md

@@ -36,3 +36,4 @@ # `@frui.ts/views`
 ```tsx
-class RootViewModel extends ConductorSingleChild<LoginViewModel | DataViewModel> {
+class RootViewModel extends ScreenBase<
+  OneOfListActiveConductor<LoginViewModel | DataViewModel> {
   ...
@@ -48,9 +49,16 @@ }
 <aside>
-  <View vm={vm.activeChild} context="sidebar" fallbackMode="empty" />
+  <View vm={vm.navigator.activeChild} context="sidebar" />
 </aside>
 <main>
-  <View vm={vm.activeChild} />
+  <View vm={vm.navigator.activeChild} />
 </main>
 ```
+# Two-way binding
 
+If you want to create a component supporting two-way binding, you can use the `useBinding` hook or extend the `BindingComponent` class.
+
+## useBinding
+
+
+
 # BindingComponent
@@ -66,3 +74,3 @@
 
-## Example
+### Example
 
@@ -69,0 +77,0 @@ ```tsx

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

101

increased by8.6%

Worsened metrics

Total package byte prevSize

59781

decreased by-1.75%

Number of package files

48

decreased by-5.88%

Lines of code

514

decreased by-16.83%

Dependency changes

• + Addedreact@17.0.2(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• [e-mail]/helpers@^1.0.0-alpha.11

• [e-mail]/screens@^1.0.0-alpha.11

• Updatedlodash@^4.17.21