@frui.ts/views
Advanced tools
Comparing version 1.0.0-beta.1 to 1.0.0-beta.2
@@ -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; | ||
} |
@@ -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>; |
@@ -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]; |
@@ -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 {}; |
@@ -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 |
@@ -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 |
@@ -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"; |
@@ -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); |
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>; |
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 {}; |
@@ -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" | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage 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
Major refactor
Supply chain riskPackage 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 riskA 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
8
1
77789
405
+ Added@tanstack/react-location@3.7.4(transitive)
+ Addedmobx-react-lite@3.4.3(transitive)
- Removed@frui.ts/screens@^1.0.0-beta.1
- Removedhistory@^5.3.0
- Removedreact-router@^6.3.0
- Removed@frui.ts/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)