@frui.ts/views - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

dist/binding/bindingComponent.d.ts

@@ -1,8 +0,9 @@
-import type { BindingProperty, BindingTarget } from "@frui.ts/helpers";
+import type { BindingTarget, TypedBindingProperty } 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(): (TTarget extends Map<any, infer V> ? V : TTarget[BindingProperty<TTarget>]) | undefined;
-    protected setValue(value: any): void;
+import type { WithBindingProps } from "./bindingProps";
+export declare abstract class BindingComponent<TProps, TBindingTypeRestriction, TTarget extends BindingTarget, TProperty extends TypedBindingProperty<TTarget, TBindingTypeRestriction>> extends React.Component<WithBindingProps<TProps, TBindingTypeRestriction, TTarget, TProperty>> {
+    constructor(props: WithBindingProps<TProps, TBindingTypeRestriction, TTarget, TProperty>);
+    protected get inheritedProps(): import("./bindingProps").ExcludeBindingProps<Readonly<WithBindingProps<TProps, TBindingTypeRestriction, TTarget, TProperty>>>;
+    protected get value(): TBindingTypeRestriction | undefined;
+    protected setValue(value: TBindingTypeRestriction): void;
 }

dist/binding/bindingProps.d.ts

@@ -1,8 +0,9 @@
-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>> {
+import type { BindingTarget, PropertyType, TypedBindingProperty } from "@frui.ts/helpers";
+export interface IBindingProps<TTypeRestriction, TTarget extends BindingTarget, TProperty extends TypedBindingProperty<TTarget, TTypeRestriction>> {
     target?: TTarget;
     property?: TProperty;
-    onValueChanged?: (value: TValue, property: TProperty, target: TTarget) => void;
+    onValueChanged?: (value: PropertyType<TTarget, TProperty>, property: TProperty, target: TTarget) => void;
 }
-export declare type ExcludeBindingProps<T> = Omit<T, keyof IBindingProps<any>>;
-export declare function omitBindingProps<TProps extends IBindingProps<any, any>>(props: TProps): ExcludeBindingProps<TProps>;
+export declare type ExcludeBindingProps<T> = Omit<T, keyof IBindingProps<any, any, any>>;
+export declare type WithBindingProps<T, TTypeRestriction, TTarget extends BindingTarget, TProperty extends TypedBindingProperty<TTarget, any>> = IBindingProps<TTypeRestriction, TTarget, TProperty> & Omit<T, keyof IBindingProps<TTypeRestriction, TTarget, TProperty>>;
+export declare function omitBindingProps<T>(props: T): ExcludeBindingProps<T>;

dist/binding/useBinding.d.ts

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

dist/errorBoundary.d.ts

@@ -11,2 +11,3 @@ import React from "react";
     fallback?: React.ReactNode | FallbackRender;
+    children?: React.ReactNode;
 }
@@ -21,4 +22,4 @@ interface ErrorBoundaryState {
     componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-    render(): {};
+    render(): string | number | true | React.ReactFragment | JSX.Element;
 }
 export {};

dist/fruits-views.es.js

@@ -1,76 +0,55 @@
-import { isObservableMap, isObservable, isObservableProp, action, get } from "mobx";
-import React, { useEffect, useContext, useState } from "react";
-import { isMap, ensureObservableProperty } from "@frui.ts/helpers";
-import { memoize } from "lodash-es";
-import { UrlRouterBase, getNavigator } from "@frui.ts/screens";
-import { createBrowserHistory } from "history";
-import { observer } from "mobx-react-lite";
-import { useLocation, UNSAFE_RouteContext } from "react-router";
-function assignDefaultProps(control, props) {
-  const controlWithDefaultProps = control;
-  if (controlWithDefaultProps.defaultProps) {
-    Object.assign(controlWithDefaultProps.defaultProps, props);
-  } else {
-    controlWithDefaultProps.defaultProps = props;
-  }
+var O = Object.defineProperty;
+var I = (e, t, r) => t in e ? O(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var c = (e, t, r) => (I(e, typeof t != "symbol" ? t + "" : t, r), r);
+import { isObservableMap as D, isObservable as B, isObservableProp as T, action as l, get as C, makeObservable as R } from "mobx";
+import s, { useEffect as w } from "react";
+import { isMap as _, ensureObservableProperty as v } from "@frui.ts/helpers";
+import { memoize as g } from "lodash-es";
+import { useMatch as F, useSearch as N, Outlet as M } from "@tanstack/react-location";
+import { observer as S } from "mobx-react-lite";
+function j(e) {
+  const { target: t, property: r, onValueChanged: n, ...o } = e;
+  return o;
 }
-function omitBindingProps(props) {
-  const { target, property, onValueChanged, ...rest } = props;
-  return rest;
-}
-function getValue(target, property, ensureObservable = true) {
-  if (!target) {
+function E(e, t, r = !0) {
+  if (!e)
     throw new Error("'target' prop has not been set");
-  }
-  if (property === void 0) {
+  if (t === void 0)
     throw new Error("'property' prop has not been set");
-  }
-  if (isObservableMap(target)) {
-    return target.get(property);
-  }
-  const propertyName = property;
-  if (!isObservable(target) || !isObservableProp(target, propertyName)) {
-    if (isMap(target)) {
-      return target.get(property);
-    } else {
-      const value = target[property];
-      if (ensureObservable) {
-        action(ensureObservableProperty)(target, propertyName, value);
-      } else {
-        return value;
-      }
+  if (D(e))
+    return e.get(t);
+  if (!B(e) || !T(e, t)) {
+    if (_(e))
+      return e.get(t);
+    {
+      const n = e[t];
+      if (r)
+        l(v)(e, t, n);
+      else
+        return n;
     }
   }
-  return get(target, propertyName);
+  return C(e, t);
 }
-function setValue(target, property, value) {
-  if (target && property) {
-    action(ensureObservableProperty)(target, property, value);
-  }
+function V(e, t, r) {
+  e && t && l(v)(e, t, r);
 }
-function useBinding(props) {
-  const value = getValue(props.target, props.property);
-  const setter = (value2) => {
-    var _a;
-    setValue(props.target, props.property, value2);
-    if (props.target && props.property) {
-      (_a = props.onValueChanged) == null ? void 0 : _a.call(props, value2, props.property, props.target);
-    }
-  };
-  return [value, setter];
+function ee(e) {
+  return [E(e.target, e.property), (n) => {
+    var i;
+    const o = n;
+    V(e.target, e.property, o), e.target && e.property && ((i = e.onValueChanged) == null || i.call(e, o, e.property, e.target));
+  }];
 }
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
-  return result;
+var z = Object.defineProperty, A = Object.getOwnPropertyDescriptor, H = (e, t, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? A(t, r) : t, i = e.length - 1, u; i >= 0; i--)
+    (u = e[i]) && (o = (n ? u(t, r, o) : u(o)) || o);
+  return n && o && z(t, r, o), o;
 };
-class BindingComponent extends React.Component {
+class $ extends s.Component {
+  constructor(t) {
+    super(t), R(this);
+  }
   get inheritedProps() {
-    return omitBindingProps(this.props);
+    return j(this.props);
   }
@@ -80,289 +59,188 @@ get value() {
       console.warn("'target' has not been set");
-      return void 0;
+      return;
     }
-    return getValue(this.props.target, this.props.property);
+    return E(this.props.target, this.props.property);
   }
-  setValue(value) {
-    const { target, property, onValueChanged } = this.props;
-    setValue(target, property, value);
-    onValueChanged == null ? void 0 : onValueChanged(value, property, target);
+  setValue(t) {
+    const { target: r, property: n, onValueChanged: o } = this.props, i = t;
+    V(r, n, i), o == null || o(i, n, r);
   }
 }
-__decorateClass([
-  action.bound
-], BindingComponent.prototype, "setValue", 1);
-function dataIdHandler(handler) {
-  return (e) => {
-    const id = e.currentTarget.dataset.id;
-    if (id !== void 0) {
-      handler(+id);
-    }
-  };
+H([
+  l.bound
+], $.prototype, "setValue", 1);
+function te(e, t) {
+  const r = e;
+  r.defaultProps ? Object.assign(r.defaultProps, t) : r.defaultProps = t;
 }
-var dataIdHandler$1 = memoize(dataIdHandler);
-function extractBindingProps(props) {
-  return {
-    target: props.target,
-    property: props.property,
-    onValueChanged: props.onValueChanged
+function L(e) {
+  return (t) => {
+    const r = t.currentTarget.dataset.id;
+    r !== void 0 && e(+r);
   };
 }
-function hasComponentInChildren(object) {
-  return !!(object == null ? void 0 : object.children) && typeof object.children === "function";
+const re = g(L);
+function ne(e) {
+  return g((r) => (n) => {
+    const o = n.currentTarget.dataset[e];
+    o !== void 0 && r(o);
+  });
 }
-function hasComponentInAttribute(object) {
-  return !!(object == null ? void 0 : object.component);
+function oe(e) {
+  return function(t) {
+    t.preventDefault(), t.stopPropagation(), e();
+  };
 }
-function getInnerComponent(props, childProps) {
-  const bindingProps = extractBindingProps(props);
-  if (hasComponentInAttribute(props)) {
-    const Component = props.component;
-    return /* @__PURE__ */ React.createElement(Component, {
-      ...props.componentprops,
-      ...childProps,
-      ...bindingProps
-    });
-  } else if (hasComponentInChildren(props)) {
-    return props.children(bindingProps, childProps);
-  }
-  return void 0;
+function ie(e) {
+  return e.map((t) => b(t));
 }
-class HistoryRouter extends UrlRouterBase {
-  constructor(rootNavigator, history = createBrowserHistory()) {
-    super(rootNavigator);
-    this.history = history;
-  }
-  async initialize() {
-    const location = this.history.location;
-    if (location.pathname) {
-      await this.navigate(getLocationPath(location));
-    } else {
-      await super.initialize();
+function b(e) {
+  var t;
+  return m(e) ? {
+    ...e,
+    children: (t = e.children) == null ? void 0 : t.map((r) => m(r) ? b(r) : r),
+    async loader(r, { parentMatch: n }) {
+      var i;
+      const o = e.vmFactory();
+      return await ((i = o.onInitialize) == null ? void 0 : i.call(o, r, n)), { vm: o };
+    },
+    onMatch(r) {
+      var n, o;
+      (o = (n = r.data.vm) == null ? void 0 : n.onActivate) == null || o.call(n, r);
+    },
+    onTransition(r) {
+      var n, o;
+      (o = (n = r.data.vm) == null ? void 0 : n.onNavigate) == null || o.call(n, r);
+    },
+    unloader: (r) => {
+      var n, o;
+      (o = (n = r.data.vm) == null ? void 0 : n.onDeactivate) == null || o.call(n, r);
     }
-    this.listenDisposer = this.history.listen(({ location: location2 }) => {
-      void this.navigate(getLocationPath(location2));
-    });
-  }
-  stop() {
-    var _a;
-    (_a = this.listenDisposer) == null ? void 0 : _a.call(this);
-  }
-  persistUrl(url) {
-    const currentUrl = getLocationPath(this.history.location);
-    if (currentUrl !== url) {
-      this.history.push(url);
-    }
-  }
-  hrefParams(url, onClick) {
-    return {
-      href: url,
-      onClick: async (event) => {
-        event.preventDefault();
-        onClick == null ? void 0 : onClick(event);
-        await this.navigate(url);
-      }
-    };
-  }
+  } : e;
 }
-function getLocationPath(location) {
-  return location.search ? location.pathname + location.search : location.pathname;
+function m(e) {
+  return !!e.vmFactory;
 }
-function createMemoizedHandler(datasetKey) {
-  const functionImpl = (handler) => {
-    return (e) => {
-      const key = e.currentTarget.dataset[datasetKey];
-      if (key !== void 0) {
-        handler(key);
-      }
-    };
-  };
-  return memoize(functionImpl);
-}
-function preventDefault(action2) {
-  return function(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    action2();
-  };
-}
-function useDisposable(...dependencies) {
-  useEffect(() => () => {
-    dependencies.forEach((x) => x.dispose());
-  }, []);
-}
-function useScreenLifecycle(vm, closeOnCleanup = true) {
-  useEffect(() => {
-    const navigator = getNavigator(vm);
-    if (!navigator) {
-      return void 0;
-    }
-    if (!navigator.isActive) {
-      void navigator.navigate([]);
-    }
-    if (navigator.deactivate) {
-      return () => {
-        var _a;
-        void ((_a = navigator.deactivate) == null ? void 0 : _a.call(navigator, closeOnCleanup));
-      };
-    }
-    return void 0;
-  }, [vm]);
-}
-const INITIAL_STATE = Object.freeze({
+const p = Object.freeze({
   errorInfo: null,
   error: null
 });
-class ErrorBoundary extends React.PureComponent {
+class W extends s.PureComponent {
   constructor() {
     super(...arguments);
-    this.state = INITIAL_STATE;
-    this.resetErrorBoundary = () => {
-      const { onReset } = this.props;
-      if (onReset) {
-        const { error, errorInfo } = this.state;
-        onReset(error, errorInfo);
+    c(this, "state", p);
+    c(this, "resetErrorBoundary", () => {
+      const { onReset: r } = this.props;
+      if (r) {
+        const { error: n, errorInfo: o } = this.state;
+        r(n, o);
       }
-      this.setState(INITIAL_STATE);
-    };
+      this.setState(p);
+    });
   }
-  componentDidCatch(error, errorInfo) {
-    var _a, _b;
-    (_b = (_a = this.props).onError) == null ? void 0 : _b.call(_a, error, errorInfo);
-    this.setState({ error, errorInfo });
+  componentDidCatch(r, n) {
+    var o, i;
+    (i = (o = this.props).onError) == null || i.call(o, r, n), this.setState({ error: r, errorInfo: n });
   }
   render() {
     if (this.state.error) {
-      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 /* @__PURE__ */ React.createElement("p", null, "Something went wrong :-(");
+      const { error: r, errorInfo: n } = this.state, { fallback: o } = this.props, i = typeof o == "function" ? o({ error: r, errorInfo: n, resetError: this.resetErrorBoundary }) : o;
+      return i || /* @__PURE__ */ s.createElement("p", null, "Something went wrong :-(");
     }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, this.props.children);
+    return /* @__PURE__ */ s.createElement(s.Fragment, null, this.props.children);
   }
 }
-const DEFAULT_CONTEXT = "default";
-const viewsRegistry = /* @__PURE__ */ new Map();
-function registerView(view, viewModelConstructor, context = DEFAULT_CONTEXT) {
-  const currentViewModelViews = viewsRegistry.get(viewModelConstructor);
-  if (currentViewModelViews) {
-    currentViewModelViews[context] = view;
-  } else {
-    viewsRegistry.set(viewModelConstructor, { [context]: view });
-  }
-  return view;
+const f = "default", a = /* @__PURE__ */ new Map();
+function x(e, t, r = f) {
+  const n = a.get(t);
+  return n ? n[r] = e : a.set(t, { [r]: e }), e;
 }
-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);
-  }
-  const view = currentViewModelViews[context];
-  if (!view) {
-    throw new Error(`No view has been registered for view model ${viewModelConstructor.name} and context ${context}`);
-  }
-  return view;
+function G(e, t = f) {
+  const r = a.get(e);
+  if (!r)
+    throw new Error("No view has been registered for view model " + e.name);
+  const n = r[t];
+  if (!n)
+    throw new Error(`No view has been registered for view model ${e.name} and context ${t}`);
+  return n;
 }
-function tryGetView(viewModelConstructor, context = DEFAULT_CONTEXT) {
-  const currentViewModelViews = viewsRegistry.get(viewModelConstructor);
-  if (!currentViewModelViews) {
+function U(e, t = f) {
+  const r = a.get(e);
+  if (!r)
     return null;
-  }
-  const view = currentViewModelViews[context];
-  if (!view) {
-    return null;
-  }
-  return view;
+  const n = r[t];
+  return n || null;
 }
-const PureView = (props) => {
-  const { vm, children, context, useLifecycle } = props;
-  if (!vm) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
-  }
-  const vmConstructor = vm.constructor;
-  const FoundView = children === void 0 ? getView(vmConstructor, context) : tryGetView(vmConstructor, context);
-  if (!FoundView) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
-  }
-  if (useLifecycle) {
-    useScreenLifecycle(vm);
-  }
-  return /* @__PURE__ */ React.createElement(FoundView, {
-    vm
-  });
+const d = (e) => {
+  const { vm: t, children: r, context: n } = e;
+  if (!t)
+    return /* @__PURE__ */ s.createElement(s.Fragment, null, r);
+  const o = t.constructor, i = r === void 0 ? G(o, n) : U(o, n);
+  return i ? /* @__PURE__ */ s.createElement(i, {
+    vm: t
+  }) : /* @__PURE__ */ s.createElement(s.Fragment, null, r);
 };
-PureView.displayName = "View";
-const ViewWithErrorBoundary = (props) => {
-  const { onError, onReset, fallback, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(ErrorBoundary, {
-    onError,
-    onReset,
-    fallback
-  }, /* @__PURE__ */ React.createElement(PureView, {
-    ...rest
+d.displayName = "View";
+const y = (e) => {
+  const { onError: t, onReset: r, fallback: n, ...o } = e;
+  return /* @__PURE__ */ s.createElement(W, {
+    onError: t,
+    onReset: r,
+    fallback: n
+  }, /* @__PURE__ */ s.createElement(d, {
+    ...o
   }));
 };
-ViewWithErrorBoundary.displayName = "View.ErrorBoundary";
-const View = PureView;
-View.ErrorBoundary = ViewWithErrorBoundary;
-const DependenciesContext = React.createContext({ createInstance: activateInstance });
-function activateInstance(type) {
-  return new type();
+y.displayName = "View.ErrorBoundary";
+const P = d;
+P.ErrorBoundary = y;
+function se() {
+  const e = F(), t = e.data.vm, r = N();
+  return w(() => {
+    var n;
+    (n = t == null ? void 0 : t.onSearchChanged) == null || n.call(t, r, e);
+  }, [t, r]), /* @__PURE__ */ s.createElement(P, {
+    vm: t
+  }, /* @__PURE__ */ s.createElement(M, null));
 }
-function useViewModel(viewModelType) {
-  const location = useLocation();
-  const routeContext = useContext(UNSAFE_RouteContext);
-  const { createInstance } = useContext(DependenciesContext);
-  const [viewModel2] = useState(() => createInstance(viewModelType));
-  useEffect(() => {
-    const navigator = getNavigator(viewModel2);
-    if (navigator == null ? void 0 : navigator.deactivate) {
-      return () => {
-        var _a;
-        return void ((_a = navigator.deactivate) == null ? void 0 : _a.call(navigator, true));
-      };
-    }
-    return void 0;
-  }, []);
-  useEffect(() => {
-    var _a, _b;
-    const navigator = getNavigator(viewModel2);
-    if (navigator) {
-      const currentRoute = routeContext.matches.length > 0 ? routeContext.matches[routeContext.matches.length - 1] : void 0;
-      void navigator.navigate([{ name: (_b = (_a = currentRoute == null ? void 0 : currentRoute.route.path) != null ? _a : currentRoute == null ? void 0 : currentRoute.pathname) != null ? _b : "", params: currentRoute == null ? void 0 : currentRoute.params }], location);
-    }
-  }, [location]);
-  return viewModel2;
+function X(e) {
+  return S(({ vm: t }) => e(t));
 }
-function createViewFirst(viewModelType, view) {
-  const ObserverView = observer(view);
-  return () => {
-    const vm = useViewModel(viewModelType);
-    return /* @__PURE__ */ React.createElement(ObserverView, {
-      vm
-    });
-  };
+function ae(e, t, r) {
+  return r ? h(e, t, r) : h(e, void 0, t);
 }
-function createViewComponent(render) {
-  return observer(({ vm }) => render(vm));
+function h(e, t, r) {
+  const n = X(r);
+  return x(n, e, t), n;
 }
-function ViewElement(props) {
-  const vm = useViewModel(props.type);
-  return /* @__PURE__ */ React.createElement(View, {
-    vm,
-    context: props.context,
-    useLifecycle: false
-  }, "Could not find view for ", props.type.name);
+function ue(...e) {
+  w(
+    () => () => {
+      e.forEach((t) => t.dispose());
+    },
+    []
+  );
 }
-function viewModel(type, context) {
-  return {
-    element: /* @__PURE__ */ React.createElement(ViewElement, {
-      type,
-      context
-    })
-  };
-}
-export { BindingComponent, DependenciesContext, HistoryRouter, View, ViewElement, assignDefaultProps, dataIdHandler$1 as createDataIdHandler, createMemoizedHandler, createViewComponent, createViewFirst, extractBindingProps, getInnerComponent, getValue, getView, omitBindingProps, preventDefault, registerView, setValue, tryGetView, useBinding, useDisposable, useScreenLifecycle, viewModel };
+export {
+  $ as BindingComponent,
+  se as RouteView,
+  P as View,
+  te as assignDefaultProps,
+  b as buildRoute,
+  ie as buildRoutes,
+  re as createDataIdHandler,
+  ne as createMemoizedHandler,
+  X as createViewComponent,
+  E as getValue,
+  G as getView,
+  m as isViewModelRoute,
+  j as omitBindingProps,
+  oe as preventDefault,
+  x as registerView,
+  ae as registerViewComponent,
+  V as setValue,
+  U as tryGetView,
+  ee as useBinding,
+  ue as useDisposable
+};
 //# sourceMappingURL=fruits-views.es.js.map

dist/fruits-views.umd.js

@@ -1,2 +0,2 @@
-(function(i,c){typeof exports=="object"&&typeof module!="undefined"?c(exports,require("mobx"),require("react"),require("@frui.ts/helpers"),require("lodash-es"),require("@frui.ts/screens"),require("history"),require("mobx-react-lite"),require("react-router")):typeof define=="function"&&define.amd?define(["exports","mobx","react","@frui.ts/helpers","lodash-es","@frui.ts/screens","history","mobx-react-lite","react-router"],c):(i=typeof globalThis!="undefined"?globalThis:i||self,c(i["fruits-views"]={},i.mobx,i.React,i.helpers,i.lodashEs,i.screens,i.history,i.mobxReactLite,i.reactRouter))})(this,function(i,c,l,m,E,d,F,P,C){"use strict";function H(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var s=H(l);function z(e,t){const n=e;n.defaultProps?Object.assign(n.defaultProps,t):n.defaultProps=t}function D(e){const{target:t,property:n,onValueChanged:r,...o}=e;return o}function v(e,t,n=!0){if(!e)throw new Error("'target' prop has not been set");if(t===void 0)throw new Error("'property' prop has not been set");if(c.isObservableMap(e))return e.get(t);const r=t;if(!c.isObservable(e)||!c.isObservableProp(e,r)){if(m.isMap(e))return e.get(t);{const o=e[t];if(n)c.action(m.ensureObservableProperty)(e,r,o);else return o}}return c.get(e,r)}function p(e,t,n){e&&t&&c.action(m.ensureObservableProperty)(e,t,n)}function A(e){return[v(e.target,e.property),r=>{var o;p(e.target,e.property,r),e.target&&e.property&&((o=e.onValueChanged)==null||o.call(e,r,e.property,e.target))}]}var U=Object.defineProperty,$=Object.getOwnPropertyDescriptor,G=(e,t,n,r)=>{for(var o=r>1?void 0:r?$(t,n):t,a=e.length-1,u;a>=0;a--)(u=e[a])&&(o=(r?u(t,n,o):u(o))||o);return r&&o&&U(t,n,o),o};class B extends s.default.Component{get inheritedProps(){return D(this.props)}get value(){if(!this.props.target){console.warn("'target' has not been set");return}return v(this.props.target,this.props.property)}setValue(t){const{target:n,property:r,onValueChanged:o}=this.props;p(n,r,t),o==null||o(t,r,n)}}G([c.action.bound],B.prototype,"setValue",1);function W(e){return t=>{const n=t.currentTarget.dataset.id;n!==void 0&&e(+n)}}var X=E.memoize(W);function I(e){return{target:e.target,property:e.property,onValueChanged:e.onValueChanged}}function J(e){return!!(e!=null&&e.children)&&typeof e.children=="function"}function K(e){return!!(e!=null&&e.component)}function Q(e,t){const n=I(e);if(K(e)){const r=e.component;return s.default.createElement(r,{...e.componentprops,...t,...n})}else if(J(e))return e.children(n,t)}class Y extends d.UrlRouterBase{constructor(t,n=F.createBrowserHistory()){super(t),this.history=n}async initialize(){const t=this.history.location;t.pathname?await this.navigate(w(t)):await super.initialize(),this.listenDisposer=this.history.listen(({location:n})=>{this.navigate(w(n))})}stop(){var t;(t=this.listenDisposer)==null||t.call(this)}persistUrl(t){w(this.history.location)!==t&&this.history.push(t)}hrefParams(t,n){return{href:t,onClick:async r=>{r.preventDefault(),n==null||n(r),await this.navigate(t)}}}}function w(e){return e.search?e.pathname+e.search:e.pathname}function Z(e){const t=n=>r=>{const o=r.currentTarget.dataset[e];o!==void 0&&n(o)};return E.memoize(t)}function j(e){return function(t){t.preventDefault(),t.stopPropagation(),e()}}function R(...e){l.useEffect(()=>()=>{e.forEach(t=>t.dispose())},[])}function b(e,t=!0){l.useEffect(()=>{const n=d.getNavigator(e);if(!!n&&(n.isActive||n.navigate([]),n.deactivate))return()=>{var r;(r=n.deactivate)==null||r.call(n,t)}},[e])}const O=Object.freeze({errorInfo:null,error:null});class k extends s.default.PureComponent{constructor(){super(...arguments),this.state=O,this.resetErrorBoundary=()=>{const{onReset:t}=this.props;if(t){const{error:n,errorInfo:r}=this.state;t(n,r)}this.setState(O)}}componentDidCatch(t,n){var r,o;(o=(r=this.props).onError)==null||o.call(r,t,n),this.setState({error:t,errorInfo:n})}render(){if(this.state.error){const{error:t,errorInfo:n}=this.state,{fallback:r}=this.props,o=typeof r=="function"?r({error:t,errorInfo:n,resetError:this.resetErrorBoundary}):r;return o||s.default.createElement("p",null,"Something went wrong :-(")}return s.default.createElement(s.default.Fragment,null,this.props.children)}}const g="default",h=new Map;function x(e,t,n=g){const r=h.get(t);return r?r[n]=e:h.set(t,{[n]:e}),e}function _(e,t=g){const n=h.get(e);if(!n)throw new Error("No view has been registered for view model "+e.name);const r=n[t];if(!r)throw new Error(`No view has been registered for view model ${e.name} and context ${t}`);return r}function M(e,t=g){const n=h.get(e);if(!n)return null;const r=n[t];return r||null}const y=e=>{const{vm:t,children:n,context:r,useLifecycle:o}=e;if(!t)return s.default.createElement(s.default.Fragment,null,n);const a=t.constructor,u=n===void 0?_(a,r):M(a,r);return u?(o&&b(t),s.default.createElement(u,{vm:t})):s.default.createElement(s.default.Fragment,null,n)};y.displayName="View";const N=e=>{const{onError:t,onReset:n,fallback:r,...o}=e;return s.default.createElement(k,{onError:t,onReset:n,fallback:r},s.default.createElement(y,{...o}))};N.displayName="View.ErrorBoundary";const V=y;V.ErrorBoundary=N;const T=s.default.createContext({createInstance:ee});function ee(e){return new e}function S(e){const t=C.useLocation(),n=l.useContext(C.UNSAFE_RouteContext),{createInstance:r}=l.useContext(T),[o]=l.useState(()=>r(e));return l.useEffect(()=>{const a=d.getNavigator(o);if(a!=null&&a.deactivate)return()=>{var u;return void((u=a.deactivate)==null?void 0:u.call(a,!0))}},[]),l.useEffect(()=>{var u,q;const a=d.getNavigator(o);if(a){const f=n.matches.length>0?n.matches[n.matches.length-1]:void 0;a.navigate([{name:(q=(u=f==null?void 0:f.route.path)!=null?u:f==null?void 0:f.pathname)!=null?q:"",params:f==null?void 0:f.params}],t)}},[t]),o}function te(e,t){const n=P.observer(t);return()=>{const r=S(e);return s.default.createElement(n,{vm:r})}}function ne(e){return P.observer(({vm:t})=>e(t))}function L(e){const t=S(e.type);return s.default.createElement(V,{vm:t,context:e.context,useLifecycle:!1},"Could not find view for ",e.type.name)}function re(e,t){return{element:s.default.createElement(L,{type:e,context:t})}}i.BindingComponent=B,i.DependenciesContext=T,i.HistoryRouter=Y,i.View=V,i.ViewElement=L,i.assignDefaultProps=z,i.createDataIdHandler=X,i.createMemoizedHandler=Z,i.createViewComponent=ne,i.createViewFirst=te,i.extractBindingProps=I,i.getInnerComponent=Q,i.getValue=v,i.getView=_,i.omitBindingProps=D,i.preventDefault=j,i.registerView=x,i.setValue=p,i.tryGetView=M,i.useBinding=A,i.useDisposable=R,i.useScreenLifecycle=b,i.viewModel=re,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(o,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("mobx"),require("react"),require("@frui.ts/helpers"),require("lodash-es"),require("@tanstack/react-location"),require("mobx-react-lite")):typeof define=="function"&&define.amd?define(["exports","mobx","react","@frui.ts/helpers","lodash-es","@tanstack/react-location","mobx-react-lite"],u):(o=typeof globalThis<"u"?globalThis:o||self,u(o["fruits-views"]={},o.mobx,o.React,o.helpers,o.lodashEs,o.reactLocation,o.mobxReactLite))})(this,function(o,u,c,f,E,d,M){"use strict";var X=Object.defineProperty;var J=(o,u,c)=>u in o?X(o,u,{enumerable:!0,configurable:!0,writable:!0,value:c}):o[u]=c;var y=(o,u,c)=>(J(o,typeof u!="symbol"?u+"":u,c),c);const s=(e=>e&&typeof e=="object"&&"default"in e?e:{default:e})(c);function P(e){const{target:t,property:n,onValueChanged:r,...i}=e;return i}function h(e,t,n=!0){if(!e)throw new Error("'target' prop has not been set");if(t===void 0)throw new Error("'property' prop has not been set");if(u.isObservableMap(e))return e.get(t);if(!u.isObservable(e)||!u.isObservableProp(e,t)){if(f.isMap(e))return e.get(t);{const r=e[t];if(n)u.action(f.ensureObservableProperty)(e,t,r);else return r}}return u.get(e,t)}function m(e,t,n){e&&t&&u.action(f.ensureObservableProperty)(e,t,n)}function S(e){return[h(e.target,e.property),r=>{var a;const i=r;m(e.target,e.property,i),e.target&&e.property&&((a=e.onValueChanged)==null||a.call(e,i,e.property,e.target))}]}var j=Object.defineProperty,F=Object.getOwnPropertyDescriptor,N=(e,t,n,r)=>{for(var i=r>1?void 0:r?F(t,n):t,a=e.length-1,b;a>=0;a--)(b=e[a])&&(i=(r?b(t,n,i):b(i))||i);return r&&i&&j(t,n,i),i};class D extends s.default.Component{constructor(t){super(t),u.makeObservable(this)}get inheritedProps(){return P(this.props)}get value(){if(!this.props.target){console.warn("'target' has not been set");return}return h(this.props.target,this.props.property)}setValue(t){const{target:n,property:r,onValueChanged:i}=this.props,a=t;m(n,r,a),i==null||i(a,r,n)}}N([u.action.bound],D.prototype,"setValue",1);function q(e,t){const n=e;n.defaultProps?Object.assign(n.defaultProps,t):n.defaultProps=t}function z(e){return t=>{const n=t.currentTarget.dataset.id;n!==void 0&&e(+n)}}const H=E.memoize(z);function A(e){const t=n=>r=>{const i=r.currentTarget.dataset[e];i!==void 0&&n(i)};return E.memoize(t)}function L(e){return function(t){t.preventDefault(),t.stopPropagation(),e()}}function $(e){return e.map(t=>w(t))}function w(e){var t;return p(e)?{...e,children:(t=e.children)==null?void 0:t.map(n=>p(n)?w(n):n),async loader(n,{parentMatch:r}){var a;const i=e.vmFactory();return await((a=i.onInitialize)==null?void 0:a.call(i,n,r)),{vm:i}},onMatch(n){var r,i;(i=(r=n.data.vm)==null?void 0:r.onActivate)==null||i.call(r,n)},onTransition(n){var r,i;(i=(r=n.data.vm)==null?void 0:r.onNavigate)==null||i.call(r,n)},unloader:n=>{var r,i;(i=(r=n.data.vm)==null?void 0:r.onDeactivate)==null||i.call(r,n)}}:e}function p(e){return!!e.vmFactory}const O=Object.freeze({errorInfo:null,error:null});class G extends s.default.PureComponent{constructor(){super(...arguments);y(this,"state",O);y(this,"resetErrorBoundary",()=>{const{onReset:n}=this.props;if(n){const{error:r,errorInfo:i}=this.state;n(r,i)}this.setState(O)})}componentDidCatch(n,r){var i,a;(a=(i=this.props).onError)==null||a.call(i,n,r),this.setState({error:n,errorInfo:r})}render(){if(this.state.error){const{error:n,errorInfo:r}=this.state,{fallback:i}=this.props,a=typeof i=="function"?i({error:n,errorInfo:r,resetError:this.resetErrorBoundary}):i;return a||s.default.createElement("p",null,"Something went wrong :-(")}return s.default.createElement(s.default.Fragment,null,this.props.children)}}const v="default",l=new Map;function _(e,t,n=v){const r=l.get(t);return r?r[n]=e:l.set(t,{[n]:e}),e}function B(e,t=v){const n=l.get(e);if(!n)throw new Error("No view has been registered for view model "+e.name);const r=n[t];if(!r)throw new Error(`No view has been registered for view model ${e.name} and context ${t}`);return r}function R(e,t=v){const n=l.get(e);if(!n)return null;const r=n[t];return r||null}const g=e=>{const{vm:t,children:n,context:r}=e;if(!t)return s.default.createElement(s.default.Fragment,null,n);const i=t.constructor,a=n===void 0?B(i,r):R(i,r);return a?s.default.createElement(a,{vm:t}):s.default.createElement(s.default.Fragment,null,n)};g.displayName="View";const T=e=>{const{onError:t,onReset:n,fallback:r,...i}=e;return s.default.createElement(G,{onError:t,onReset:n,fallback:r},s.default.createElement(g,{...i}))};T.displayName="View.ErrorBoundary";const V=g;V.ErrorBoundary=T;function W(){const e=d.useMatch(),t=e.data.vm,n=d.useSearch();return c.useEffect(()=>{var r;(r=t==null?void 0:t.onSearchChanged)==null||r.call(t,n,e)},[t,n]),s.default.createElement(V,{vm:t},s.default.createElement(d.Outlet,null))}function C(e){return M.observer(({vm:t})=>e(t))}function k(e,t,n){return n?I(e,t,n):I(e,void 0,t)}function I(e,t,n){const r=C(n);return _(r,e,t),r}function U(...e){c.useEffect(()=>()=>{e.forEach(t=>t.dispose())},[])}o.BindingComponent=D,o.RouteView=W,o.View=V,o.assignDefaultProps=q,o.buildRoute=w,o.buildRoutes=$,o.createDataIdHandler=H,o.createMemoizedHandler=A,o.createViewComponent=C,o.getValue=h,o.getView=B,o.isViewModelRoute=p,o.omitBindingProps=P,o.preventDefault=L,o.registerView=_,o.registerViewComponent=k,o.setValue=m,o.tryGetView=R,o.useBinding=S,o.useDisposable=U,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
 //# sourceMappingURL=fruits-views.umd.js.map

dist/index.d.ts

@@ -1,15 +0,15 @@
-export { default as assignDefaultProps } from "./helpers/assignDefaultProps";
 export * from "./binding/bindingComponent";
 export * from "./binding/bindingProps";
+export * from "./binding/useBinding";
+export { default as assignDefaultProps } from "./helpers/assignDefaultProps";
 export { default as createDataIdHandler } from "./helpers/dataIdHandler";
-export * from "./helpers/fieldHelpers";
-export { default as HistoryRouter } from "./historyRouter";
 export { default as createMemoizedHandler } from "./helpers/memoizedDataHandler";
 export { default as preventDefault } from "./helpers/preventDefault";
+export * from "./router/router";
+export * from "./router/RouteView";
+export * from "./router/types";
 export * from "./types";
-export * from "./binding/useBinding";
+export * from "./view/helpers";
 export { default as useDisposable } from "./view/useDisposable";
-export { default as useScreenLifecycle } from "./view/useScreenLifecycle";
-export * from "./view/useViewModel";
 export { default as View } from "./view/view";
 export * from "./view/viewLocator";

dist/types.d.ts

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

dist/view/view.d.ts

 import React from "react";
 import type { ErrorBoundaryProps } from "../errorBoundary";
 interface ViewProps {
-    vm?: unknown;
+    vm?: object;
     context?: string;
-    useLifecycle?: boolean;
+    children?: React.ReactNode;
 }
@@ -8,0 +8,0 @@ declare const ViewWithErrorBoundary: React.FunctionComponent<ViewProps & ErrorBoundaryProps>;

dist/view/viewLocator.d.ts

 import type { ComponentType } from "react";
-import type { constructor } from "../types";
+import type { Constructor } from "@frui.ts/helpers";
 declare type viewComponent<TViewModel> = ComponentType<{
     vm: TViewModel;
 }>;
-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 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 {};

package.json

@@ -6,3 +6,3 @@ {
   },
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "Frui.ts presentation related components based on React",
@@ -43,21 +43,19 @@ "keywords": [
   "devDependencies": {
-    "@types/lodash": "4.14.182",
+    "@types/lodash": "4.14.186",
     "@types/lodash-es": "4.17.6",
-    "@types/react": "^17.0.33"
+    "@types/react": "^18.0.21"
   },
   "dependencies": {
-    "@frui.ts/helpers": "^1.0.0-beta.1",
-    "@frui.ts/screens": "^1.0.0-beta.1",
-    "history": "^5.3.0",
+    "@frui.ts/helpers": "^1.0.0-beta.2",
+    "@tanstack/react-location": "^3.7.4",
     "inversify": "^6.0.1",
-    "lodash-es": "^4.17.21",
-    "react-router": "^6.3.0"
+    "lodash-es": "^4.17.21"
   },
   "peerDependencies": {
-    "mobx": "^4.0.0 || ^5.0.0",
-    "mobx-react-lite": "^2.2.2",
+    "mobx": "6",
+    "mobx-react-lite": "3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "1a7897ad15a6a5be5adc7e67725f174a1dbc6394"
+  "gitHead": "5d7b8915490794c56dcad28698a47e6e2a904e4e"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Dependency count

8

decreased by-20%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

77789

decreased by-17.02%

Lines of code

405

decreased by-26.63%

Dependency changes

• + Added@tanstack/react-location@^3.7.4

• + Added@tanstack/react-location@3.7.4(transitive)

• + Addedmobx-react-lite@3.4.3(transitive)

• - [e-mail]/screens@^1.0.0-beta.1

• - Removedhistory@^5.3.0

• - Removedreact-router@^6.3.0

• - [e-mail]/screens@1.0.0-beta.1(transitive)

• - Removed@remix-run/router@1.22.0(transitive)

• - Removedmobx@5.15.7(transitive)

• - Removedmobx-react-lite@2.2.2(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreact-router@6.29.0(transitive)

• - Removedroute-parser@0.0.5(transitive)

• [e-mail]/helpers@^1.0.0-beta.2