brew-js-react 0.7.1 → 0.7.2

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.2",
   "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.
@@ -253,6 +258,11 @@ export function renderView(...args: ViewComponent<any>[]): JSX.Element;
  */
 export function renderView(props: ViewComponentRootProps, ...args: ViewComponent<any>[]): JSX.Element;
 
+/**
+ * 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

@@ -72,6 +72,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 +132,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 });
@@ -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)) {