brew-js-react 0.3.2 → 0.3.4

package/hooks.js

@@ -1,6 +1,7 @@
 import { createElement, useEffect, useRef, useState } from "react";
 import { ViewStateProvider } from "zeta-dom-react";
 import { definePrototype, extend, kv, setImmediateOnce, throwNotFunction, watch } from "./include/zeta-dom/util.js";
+import { bind } from "./include/zeta-dom/domUtil.js";
 import { ZetaEventContainer } from "./include/zeta-dom/events.js";
 import { app } from "./app.js";
 import { useViewContainerState } from "./view.js";
@@ -77,13 +78,27 @@ export function useRouteParam(name, defaultValue) {
     return value;
 }
 
-export function useRouteState(key, defaultValue) {
-    const container = useViewContainerState();
-    const cur = getCurrentStates();
-    const state = useState(key in cur ? cur[key] : defaultValue);
-    if (container.active) {
+export function useRouteState(key, defaultValue, snapshotOnUpdate) {
+    var container = useViewContainerState();
+    var cur = getCurrentStates();
+    var state = useState(key in cur ? cur[key] : defaultValue);
+    if (container.active && cur[key] !== state[0]) {
+        if (snapshotOnUpdate && key in cur) {
+            app.snapshot();
+            cur = getCurrentStates();
+        }
         cur[key] = state[0];
     }
+    useEffect(function () {
+        if (snapshotOnUpdate) {
+            return bind(window, 'popstate', function () {
+                if (container.active) {
+                    var cur = getCurrentStates();
+                    state[1](key in cur ? cur[key] : defaultValue);
+                }
+            });
+        }
+    }, [container, snapshotOnUpdate]);
     return state;
 }
 

package/mixin.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { extend } from "./include/zeta-dom/util.js";
+import { extend, setImmediate } from "./include/zeta-dom/util.js";
 import Mixin from "./mixins/Mixin.js";
 import AnimateMixin from "./mixins/AnimateMixin.js";
 import AnimateSequenceItemMixin from "./mixins/AnimateSequenceItemMixin.js";
@@ -24,6 +24,15 @@ function createUseFunction(ctor) {
     };
 }
 
+function disposeMixin(mixin) {
+    mixin.disposed = true;
+    setImmediate(function () {
+        if (mixin.disposed) {
+            mixin.dispose();
+        }
+    });
+}
+
 export const useAnimateMixin = createUseFunction(AnimateMixin);
 export const useAnimateSequenceMixin = createUseFunction(AnimateSequenceMixin);
 export const useFlyoutMixin = createUseFunction(FlyoutMixin);
@@ -36,7 +45,8 @@ export function useMixin(ctor) {
         return new ctor();
     })[0].reset();
     useEffect(function () {
-        return mixin.dispose.bind(mixin);
+        mixin.disposed = false;
+        return disposeMixin.bind(0, mixin);
     }, []);
     return mixin;
 }

package/mixins/FlyoutMixin.js

@@ -79,14 +79,14 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
         if (!element.id) {
             element.id = 'flyout-' + (++flyoutMixinCounter);
         }
-        app.on(element, {
+        self.onDispose(app.on(element, {
             animationstart: function () {
                 self.animating = true;
             },
             animationcomplete: function () {
                 self.animating = false;
             },
-        }, true);
+        }, true));
         setImmediate(function () {
             each(self.toggle.elements(), function (i, v) {
                 v.setAttribute('toggle', '#' + element.id);

package/mixins/FocusStateMixin.js

@@ -12,7 +12,7 @@ export default function FocusStateMixin() {
 definePrototype(FocusStateMixin, StatefulMixin, {
     initElement: function (element, state) {
         FocusStateMixinSuper.initElement.call(this, element, state);
-        dom.on(element, {
+        this.onDispose(dom.on(element, {
             focusin: function (e) {
                 state.focused = true;
                 setClass(element, 'focused', e.source);
@@ -21,7 +21,7 @@ definePrototype(FocusStateMixin, StatefulMixin, {
                 state.focused = false;
                 setClass(element, 'focused', false);
             }
-        });
+        }));
     },
     getClassNames: function () {
         return [{ focused: !!this.state.focused }];

package/mixins/LoadingStateMixin.js

@@ -14,7 +14,7 @@ definePrototype(LoadingStateMixin, StatefulMixin, {
     initElement: function (element, state) {
         LoadingStateMixinSuper.initElement.call(this, element, state);
         lock(element);
-        dom.on(element, {
+        this.onDispose(dom.on(element, {
             asyncStart: function () {
                 state.loading = true;
                 setClass(element, 'loading', true);
@@ -27,7 +27,7 @@ definePrototype(LoadingStateMixin, StatefulMixin, {
                 state.loading = false;
                 setClass(element, 'loading', false);
             }
-        });
+        }));
     },
     getClassNames: function () {
         return [{ loading: !!this.state.loading }];

package/mixins/ScrollableMixin.js

@@ -35,7 +35,7 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
     },
     initElement: function (element, state) {
         var self = this;
-        app.on(element, {
+        self.onDispose(app.on(element, {
             statechange: function (e) {
                 if ('pageIndex' in e.newValues) {
                     extend(self, { pageIndex: e.newValues.pageIndex });
@@ -47,7 +47,7 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
             scrollStop: function() {
                 self.scrolling = false;
             }
-        }, true);
+        }, true));
     },
     clone: function () {
         var mixin = ScrollableMixinSuper.clone.call(this);

package/mixins/StatefulMixin.js

@@ -16,7 +16,7 @@ definePrototype(MixinRefImpl, {
 export default function StatefulMixin() {
     Mixin.call(this);
     _(this, {
-        elements: new WeakSet(),
+        elements: new Set(),
         flush: watch(this, false),
         dispose: [],
         states: {},
@@ -84,6 +84,7 @@ definePrototype(StatefulMixin, Mixin, {
         var states = state.states;
         combineFn(state.dispose.splice(0))();
         state.flush();
+        state.elements.clear();
         each(states, function (i, v) {
             delete states[i];
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -13,7 +13,7 @@
   "repository": "github:misonou/brew-js-react",
   "dependencies": {
     "@misonou/react-dom-client": "^1.0.3",
-    "brew-js": ">=0.4.7",
+    "brew-js": ">=0.4.10",
     "waterpipe": "^2.5.0",
     "zeta-dom": ">=0.3.1",
     "zeta-dom-react": ">=0.2.1"
@@ -43,6 +43,9 @@
     "webpack": "^5.3.0",
     "webpack-cli": "^4.1.0"
   },
+  "sideEffects": [
+    "./src/app.js"
+  ],
   "keywords": [
     "html",
     "dom",

package/view.d.ts

@@ -1,5 +1,7 @@
+import { useRouteState } from "./hooks";
+
 export type ViewComponentRootProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export type ViewComponent<P> = React.FC<P>;
+export type ViewComponent<P> = React.FC<ViewProps<P>>;
 
 export interface ViewContainerState {
     readonly container: HTMLElement;
@@ -7,6 +9,16 @@ export interface ViewContainerState {
     readonly active: boolean;
 }
 
+export interface ViewProps<S = {}> {
+    /**
+     * Gets the additional data passed from {@link navigateTo} or {@link redirectTo}.
+     *
+     * The data object is read-only, to use incoming data as mutable view states,
+     * pass individual data to {@link React.useState} or {@link useRouteState}.
+     */
+    viewData: { readonly [P in keyof S]?: S[P] };
+}
+
 export interface ErrorViewProps {
     /**
      * Gets the original view component in which error has thrown.
@@ -30,7 +42,7 @@ export function useViewContainerState(): ViewContainerState;
  * @param factory A callback that returns a promise resolving a React component, typically using async `import`.
  * @param params A dictionary containing route parameters.
  */
-export function registerView<P>(factory: () => Promise<{ default: React.ComponentType<P> }>, params: Zeta.Dictionary<null | string | RegExp | ((value: string) => boolean)>): ViewComponent<P>;
+export function registerView<P>(factory: () => Promise<{ default: React.ComponentType<P> }>, params: Zeta.Dictionary<null | string | RegExp | ((value: string) => boolean)>): ViewComponent<P extends ViewProps<infer S> ? S : {}>;
 
 /**
  * Registers view component with specific route paramters.
@@ -38,7 +50,7 @@ export function registerView<P>(factory: () => Promise<{ default: React.Componen
  * @param component A React component.
  * @param params A dictionary containing route parameters.
  */
-export function registerView<P>(component: React.ComponentType<P>, params: Zeta.Dictionary<null | string | RegExp | ((value: string) => boolean)>): ViewComponent<P>;
+export function registerView<P>(component: React.ComponentType<P>, params: Zeta.Dictionary<null | string | RegExp | ((value: string) => boolean)>): ViewComponent<P extends ViewProps<infer S> ? S : {}>;
 
 /**
  * Registers a default error view to be displayed when view component failed to render.
@@ -94,12 +106,31 @@ export function renderView(...args: ViewComponent<any>[]): JSX.Element;
 export function renderView(props: ViewComponentRootProps, ...args: ViewComponent<any>[]): JSX.Element;
 
 /**
- * Returns pathname that will render the specified view.
+ * Returns the app path that will render the specified view.
+ *
  * The pathname is resolved using route parameters given to {@link registerView},
  * current route parameters, as well as any supplemeneted route parameters
  * against registered routes in {@link Brew.RouterOptions.routes}.
+ *
+ * This is used by methods such as {@link linkTo} and {@link navigateTo}.
+ *
+ * @param view A view component created by {@link registerView}.
+ * @param params Extra route parameters that supplements or overrides current route parameters.
+ */
+export function resolvePath(view: ViewComponent<any>, params?: Zeta.Dictionary<string>): string;
+
+/**
+ * Returns a link usable in `href` attribute or method such as `window.open`
+ * that when visiting the link through browser the specifed view will be rendered.
+ *
+ * This function wraps {@link resolvePath} with {@link Brew.WithRouter.toHref}.
+ * The returned link will depend on `urlMode` and related options initializing the router.
+ * When `urlMode` is set to `none`, {@link navigateTo} should always be used instead as
+ * navigation through link is disabled in such case.
+ *
  * @param view A view component created by {@link registerView}.
  * @param params Extra route parameters that supplements or overrides current route parameters.
+ * @see {@link resolvePath}.
  */
 export function linkTo(view: ViewComponent<any>, params?: Zeta.Dictionary<string>): string;
 
@@ -107,14 +138,16 @@ export function linkTo(view: ViewComponent<any>, params?: Zeta.Dictionary<string
  * Navigates to path that will render the specified view.
  * @param view A view component created by {@link registerView}.
  * @param params Extra route parameters that supplements or overrides current route parameters.
- * @see {@link linkTo}.
+ * @param data Additional data to be passed to view component, analogous to making form post to server rendering page.
+ * @see {@link resolvePath}.
  */
-export function navigateTo(view: ViewComponent<any>, params?: Zeta.Dictionary<string>): Promise<Brew.NavigateResult>;
+export function navigateTo<T>(view: ViewComponent<T>, params?: Zeta.Dictionary<string> | null, data?: T): Promise<Brew.NavigateResult>;
 
 /**
  * Navigates to path that will render the specified view, replacing current state in browser history.
  * @param view A view component created by {@link registerView}.
  * @param params Extra route parameters that supplements or overrides current route parameters.
- * @see {@link linkTo}.
+ * @param data Additional data to be passed to view component, analogous to making form post to server rendering page.
+ * @see {@link resolvePath}.
  */
-export function redirectTo(view: ViewComponent<any>, params?: Zeta.Dictionary<string>): Promise<Brew.NavigateResult>;
+export function redirectTo<T>(view: ViewComponent<T>, params?: Zeta.Dictionary<string> | null, data?: T): Promise<Brew.NavigateResult>;

package/view.js

@@ -2,11 +2,11 @@ import React from "react";
 import { useAsync } from "zeta-dom-react";
 import dom from "./include/zeta-dom/dom.js";
 import { notifyAsync } from "./include/zeta-dom/domLock.js";
-import { any, combineFn, defineObservableProperty, definePrototype, each, exclude, executeOnce, extend, grep, isFunction, isThenable, isUndefinedOrNull, keys, makeArray, map, noop, pick, randomId, single, throwNotFunction, watch } from "./include/zeta-dom/util.js";
+import { any, combineFn, defineObservableProperty, definePrototype, each, exclude, executeOnce, extend, freeze, grep, isFunction, isThenable, isUndefinedOrNull, keys, makeArray, map, noop, pick, randomId, setImmediate, single, throwNotFunction, watch } from "./include/zeta-dom/util.js";
 import { animateIn, animateOut } from "./include/brew-js/anim.js";
 import { removeQueryAndHash } from "./include/brew-js/util/path.js";
 import { app } from "./app.js";
-import { ViewStateContainer } from "./hooks.js";
+import { ViewStateContainer, useRouteState } from "./hooks.js";
 
 const root = dom.root;
 const routeMap = new Map();
@@ -28,7 +28,11 @@ definePrototype(ErrorBoundary, React.Component, {
         if (errorView && !self.state.error) {
             self.setState({ error });
         } else {
-            dom.emit('error', self.context.container, { error }, true);
+            // emit error in next tick as ref callback may yet to be invoked
+            // if error is thrown synchronously in first render
+            setImmediate(function () {
+                dom.emit('error', self.context.container, { error }, true);
+            });
         }
     },
     render: function () {
@@ -42,7 +46,7 @@ definePrototype(ErrorBoundary, React.Component, {
         if (props.error) {
             return React.createElement(errorView, { onComponentLoaded, viewProps: props });
         }
-        return React.createElement(props.view, { onComponentLoaded });
+        return React.createElement(props.view, { onComponentLoaded, viewData: self.props.viewData });
     },
     reset: function () {
         this.setState({ error: null });
@@ -65,6 +69,7 @@ definePrototype(ViewContainer, React.Component, {
             app.on('beforepageload', function (e) {
                 self.waitFor = e.waitFor;
                 self.stateId = history.state;
+                self.updateView(e.data);
                 self.forceUpdate();
             })
         );
@@ -72,14 +77,18 @@ definePrototype(ViewContainer, React.Component, {
     render: function () {
         /** @type {any} */
         var self = this;
-        if (history.state !== self.stateId) {
-            return self.lastChild || null;
+        if (history.state === self.stateId) {
+            self.updateView();
         }
+        return React.createElement(React.Fragment, null, self.prevView, self.currentView);
+    },
+    updateView: function (viewData) {
+        var self = this;
         var V = self.getViewComponent();
         if (V) {
             // ensure the current path actually corresponds to the matched view
             // when some views are not included in the list of allowed views
-            var targetPath = linkTo(V, getCurrentParams(V, true));
+            var targetPath = resolvePath(V, getCurrentParams(V, true));
             if (targetPath !== removeQueryAndHash(app.path)) {
                 app.navigate(targetPath, true);
             }
@@ -113,7 +122,7 @@ definePrototype(ViewContainer, React.Component, {
             var view = React.createElement(StateContext.Provider, { key: routeMap.get(V).id, value: state },
                 React.createElement(ViewStateContainer, null,
                     React.createElement('div', extend({}, self.props.rootProps, { ref: initElement }),
-                        React.createElement(ErrorBoundary, { onComponentLoaded }))));
+                        React.createElement(ErrorBoundary, { onComponentLoaded, viewData }))));
             extend(self, {
                 currentPath: app.path,
                 currentView: view,
@@ -122,9 +131,6 @@ definePrototype(ViewContainer, React.Component, {
             });
             (self.waitFor || noop)(promise);
         }
-        var child = React.createElement(React.Fragment, null, self.prevView, self.currentView);
-        self.lastChild = child;
-        return child;
     },
     getViewComponent: function () {
         var props = this.props;
@@ -182,8 +188,10 @@ function createViewComponent(factory) {
     if (factory.prototype instanceof React.Component) {
         factory = React.createElement.bind(null, factory);
     }
-    return function (props) {
-        var viewProps = Object.freeze(props.viewProps || {});
+    return function fn(props) {
+        var viewProps = props.viewProps || {
+            viewData: useRouteState('_d_' + routeMap.get(fn).id, props.viewData || {})[0]
+        };
         var children = !promise && factory(viewProps);
         if (isThenable(children)) {
             promise = children;
@@ -259,7 +267,7 @@ export function renderView() {
     return React.createElement(ViewContainer, { rootProps, views, defaultView });
 }
 
-export function linkTo(view, params) {
+export function resolvePath(view, params) {
     var state = routeMap.get(view);
     if (!state) {
         return '/';
@@ -268,10 +276,14 @@ export function linkTo(view, params) {
     return app.route.getPath(newParams);
 }
 
-export function navigateTo(view, params) {
-    return app.navigate(linkTo(view, params));
+export function linkTo(view, params) {
+    return app.toHref(resolvePath(view, params));
+}
+
+export function navigateTo(view, params, data, replace) {
+    return app.navigate(resolvePath(view, params), replace, data && freeze(extend({}, data)));
 }
 
-export function redirectTo(view, params) {
-    return app.navigate(linkTo(view, params), true);
+export function redirectTo(view, params, data) {
+    return navigateTo(view, params, data, true);
 }