brew-js-react 0.7.1 → 0.7.3

package/hooks.d.ts

@@ -39,6 +39,18 @@ export function useRouteState<T>(key: string | symbol, initialState: T | (() =>
  */
 export function useRouteState<T = undefined>(key: string | symbol): [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>];
 
+/**
+ * Returns a stateful value, and a function to update it.
+ * Same as {@link React.useState}, but the state is persisted in `app.sessionStorage`.
+ */
+export function useAppSessionState<T>(key: string | symbol, initialState: T | (() => T)): [T, React.Dispatch<React.SetStateAction<T>>];
+
+/**
+ * Returns a stateful value, and a function to update it.
+ * Same as {@link React.useState}, but the state is persisted in `app.sessionStorage`.
+ */
+export function useAppSessionState<T = undefined>(key: string | symbol): [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>];
+
 /**
  * Returns value of the specified parameter in query string, and a function to update it.
  *

package/hooks.js

@@ -1,6 +1,6 @@
 import { createElement, useEffect, useMemo, useRef, useState } from "react";
-import { ViewStateProvider, useEagerState, useMemoizedFunction, useObservableProperty, useValueTrigger } from "zeta-dom-react";
-import { catchAsync, definePrototype, delay, each, equal, extend, freeze, isFunction, isPlainObject, keys, kv, mapObject, throwNotFunction } from "zeta-dom/util";
+import { ViewStateProvider, useEagerReducer, useEagerState, useMemoizedFunction, useObservableProperty, useValueTrigger } from "zeta-dom-react";
+import { catchAsync, definePrototype, delay, each, equal, extend, freeze, isFunction, isPlainObject, keys, kv, mapObject, sameValue, throwNotFunction } from "zeta-dom/util";
 import { ZetaEventContainer } from "zeta-dom/events";
 import { getQueryParam, setQueryParam } from "brew-js/util/common";
 import { parsePath } from "brew-js/util/path";
@@ -68,6 +68,20 @@ function useViewContextWithEffect(callback, deps) {
     return container;
 }
 
+function usePersistedState(storage, key, defaultValue) {
+    var state = useEagerReducer(function (prevState, value) {
+        value = isFunction(value) ? value(prevState[1]) : value;
+        return sameValue(value, prevState[1]) ? prevState : [prevState[0], value];
+    }, []);
+    var cur = state[0];
+    useMemo(function () {
+        if (cur[0] !== key) {
+            cur.splice(0, 2, key, storage && storage.has(key) ? storage.get(key) : isFunction(defaultValue) ? defaultValue() : defaultValue);
+        }
+    }, [storage, key]);
+    return [cur[1], state[1]];
+}
+
 export function useAppReady() {
     return useAppReadyState().ready;
 }
@@ -101,7 +115,7 @@ export function useRouteParam(name, defaultValue) {
 
 export function useRouteState(key, defaultValue, snapshotOnUpdate) {
     var cur = getCurrentStates();
-    var state = useEagerState(cur && cur.has(key) ? cur.get(key) : defaultValue);
+    var state = usePersistedState(cur, key, defaultValue);
     var container = useViewContextWithEffect(function (cur) {
         state[1](function (oldValue) {
             return cur.has(key) ? cur.get(key) : (cur.set(key, oldValue), oldValue);
@@ -116,6 +130,13 @@ export function useRouteState(key, defaultValue, snapshotOnUpdate) {
     return state;
 }
 
+export function useAppSessionState(key, defaultValue) {
+    var cur = app.sessionStorage;
+    var state = usePersistedState(cur, key, defaultValue);
+    updatePersistedValue(cur, key, state[0]);
+    return state;
+}
+
 export function useQueryParam(key, value, snapshotOnUpdate) {
     if (isPlainObject(key)) {
         snapshotOnUpdate = value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -38,7 +38,8 @@
     "expect-type": "^0.20.0",
     "jest": "^27.0.6",
     "jest-environment-jsdom": "^27.4.6",
-    "regenerator-runtime": "^0.13.9"
+    "regenerator-runtime": "^0.13.9",
+    "webpack-cli": "^7.0.2"
   },
   "sideEffects": [
     "./src/app.js"

package/view.d.ts

@@ -87,6 +87,11 @@ export class ViewContext implements Zeta.ZetaEventDispatcher<ViewContextEventMap
      */
     setErrorView<T>(errorView: React.ComponentType<ErrorViewProps<T>>, error: T): true | undefined;
 
+    /**
+     * Unmounts and remounts the view component, or re-renders the view component if it is currently replaced by an error view.
+     */
+    resetView(): void;
+
     /**
      * Adds event handlers to multiple events.
      * @param handlers A dictionary which the keys are event names and values are the callback for each event.
@@ -244,14 +249,19 @@ export function matchView(path: string, ...views: ViewComponent<any>[]): ViewCom
  * Renders view by matching current route state against registered route parameters of each supplied views.
  * @param args A list of view components created by {@link registerView}.
  */
-export function renderView(...args: ViewComponent<any>[]): JSX.Element;
+export function renderView(...args: ViewComponent<any>[]): React.ReactElement;
 
 /**
  * Renders view by matching current route state against registered route parameters of each supplied views.
  * @param props Optional parameters passed to the root element rendered by the function.
  * @param args A list of view components created by {@link registerView}.
  */
-export function renderView(props: ViewComponentRootProps, ...args: ViewComponent<any>[]): JSX.Element;
+export function renderView(props: ViewComponentRootProps, ...args: ViewComponent<any>[]): React.ReactElement;
+
+/**
+ * Resets all rendered views by unmounting and remounting the view components, or re-rendering the view components if they are currently replaced by error views.
+ */
+export function resetAllViews(): void;
 
 /**
  * Returns the app path that will render the specified view.

package/view.js

@@ -31,8 +31,7 @@ onAppInit(function () {
         (function updateViewRecursive(next) {
             each(next.children, function (i, v) {
                 e.waitFor(new Promise(function (resolve) {
-                    v.onRender = resolve;
-                    v.forceUpdate();
+                    v.forceUpdate(resolve);
                 }).then(function () {
                     updateViewRecursive(v);
                 }));
@@ -72,6 +71,13 @@ definePrototype(ViewContext, {
         var wrapper = _(this).wrapper;
         return wrapper && errorView && !wrapper.setState({ error, errorView });
     },
+    resetView: function () {
+        var self = this;
+        each(self.parent ? [self] : self.getChildren(), function (i, v) {
+            var wrapper = _(v).wrapper;
+            wrapper.setState({ key: (wrapper.state.key || 0) + 1, errorView: null });
+        });
+    },
     on: function (event, handler) {
         return emitter.add(this, event, handler);
     }
@@ -125,13 +131,14 @@ definePrototype(ErrorBoundary, Component, {
             }));
         }
         var onError = self.componentDidCatch.bind(self);
+        var key = self.state.key || 0;
         var viewProps = {
             errorHandler: self.errorHandler,
             navigationType: event.navigationType,
             viewContext: context,
             viewData: context.page.data || {}
         };
-        return createElement(self.Provider, null, createElement(context.view, extend({ viewProps, onError }, self.props)));
+        return createElement(self.Provider, null, createElement(context.view, extend({ key, viewProps, onError }, self.props)));
     },
     reset: function () {
         this.setState({ errorView: null });
@@ -178,7 +185,6 @@ definePrototype(ViewContainer, Component, {
         if (self.context.active) {
             self.updateView();
         }
-        self.onRender();
         return self.views;
     },
     updateView: function () {
@@ -226,10 +232,12 @@ definePrototype(ViewContainer, Component, {
                     app.emit('pageleave', element, { pathname: context.page.path, view: V }, true);
                     return animateOut(element, 'show').then(function () {
                         self.views[0] = null;
-                        self.forceUpdate();
+                        return new Promise(function (resolve) {
+                            self.forceUpdate(resolve);
+                        });
                     });
                 });
-                always(promise, delay).then(function () {
+                always(promise || delay(), function () {
                     app.emit('pageenter', element, { pathname: context.page.path, view: V }, true);
                 });
                 self.views.shift();
@@ -256,7 +264,7 @@ definePrototype(ViewContainer, Component, {
         }) || props.defaultView;
     }
 });
-fill(ViewContainer.prototype, 'abort onRender setActive setPage unmountView', noop);
+fill(ViewContainer.prototype, 'abort setActive setPage unmountView', noop);
 
 function normalizePart(value, part) {
     return isUndefinedOrNull(value) || value === '' || value === part ? '' : value[0] === part ? value : part + value;
@@ -399,6 +407,10 @@ export function renderView() {
     return createElement(ViewContainer, { rootProps, views, defaultView });
 }
 
+export function resetAllViews() {
+    rootContext.resetView();
+}
+
 export function resolvePath(view, params) {
     var suffix = '';
     if (isArray(params)) {