brew-js-react 0.7.0 → 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/mixins/AnimateSequenceMixin.d.ts

@@ -18,5 +18,6 @@ export default class AnimateSequenceMixin extends AnimateMixin {
      * Applies custom attributes to element.
      * @private It is used internally by mixins and is declared for type inference.
      */
+    // @ts-ignore
     getCustomAttributes(): Record<'animate-sequence' | 'animate-sequence-type' | 'animate-out', string>;
 }

package/mixins/Mixin.d.ts

@@ -5,7 +5,7 @@ import StaticAttributeMixin from "./StaticAttributeMixin";
 export type MixinProps<T extends Element, M> = MixinDefaultProps<T> & UnionToIntersection<M extends CustomAttributeProvider<infer P> ? P : never>;
 
 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
-type MixinTypes<T extends unknown[]> = Extract<Zeta.ArrayMember<T>, CustomAttributeProvider>;
+type MixinTypes<T extends readonly unknown[]> = Extract<Zeta.ArrayMember<T>, CustomAttributeProvider>;
 
 interface MixinDefaultProps<T extends Element> {
     ref: React.RefCallback<T>;

package/mixins/StaticAttributeMixin.d.ts

@@ -15,5 +15,6 @@ export default class StaticAttributeMixin<P = {}> extends Mixin {
      * Applies custom attributes to element.
      * @private It is used internally by mixins and is declared for type inference.
      */
+    // @ts-ignore
     getCustomAttributes(): P;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -28,18 +28,18 @@
     "@babel/preset-react": "^7.16.7",
     "@jest/globals": "^26.6.2",
     "@misonou/build-utils": "^1.3.1",
-    "@misonou/test-utils": "^1.0.3",
+    "@misonou/test-utils": "^1.4.3",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
     "@types/jest": "^26.0.15",
     "babel-loader": "^9.1.3",
-    "check-dts": "^0.8.2",
     "cross-env": "^7.0.2",
     "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.
@@ -98,7 +103,14 @@ export class ViewContext implements Zeta.ZetaEventDispatcher<ViewContextEventMap
      * @param event Name of the event.
      * @param handler A callback function to be fired when the specified event is triggered.
      */
-    on<E extends keyof ViewContextEventMap>(event: E, handler: Zeta.ZetaEventHandler<E, ViewContextEventMap, ViewContext>): Zeta.UnregisterCallback;
+    on<E extends Zeta.StringKeyOf<ViewContextEventMap>>(event: E, handler: Zeta.ZetaEventHandler<E, ViewContextEventMap, ViewContext>): Zeta.UnregisterCallback;
+
+    /**
+     * Adds an event handler to a specific event.
+     * @param event Name of the event.
+     * @param handler A callback function to be fired when the specified event is triggered.
+     */
+    on<E extends Zeta.HintedStringKeyOf<ViewContextEventMap>>(event: E, handler: Zeta.ZetaEventHandler<Zeta.WhitespaceDelimited<E>, ViewContextEventMap, ViewContext>): Zeta.UnregisterCallback;
 }
 
 export interface ViewProps<S = {}> {
@@ -246,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);
     }
@@ -105,11 +112,13 @@ definePrototype(ErrorBoundary, Component, {
         var context = self.props.context;
         if (!context.container) {
             setImmediate(function () {
-                extend(self, createAsyncScope(context.container));
-                dom.on(context.container, 'error', function (e) {
-                    return emitter.emit(e, context, { error: e.error }, false);
-                });
-                self.forceUpdate();
+                if (!self.errorHandler) {
+                    extend(self, createAsyncScope(context.container));
+                    dom.on(context.container, 'error', function (e) {
+                        return emitter.emit(e, context, { error: e.error }, false);
+                    });
+                    self.forceUpdate();
+                }
             });
             return null;
         }
@@ -123,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 });
@@ -312,7 +322,7 @@ function createViewComponent(factory) {
     }
     return function fn(props) {
         var children = promise || factory(props.viewProps);
-        if (isThenable(children)) {
+        if (promise || isThenable(children)) {
             promise = children;
             catchAsync(promise);
         } else {
@@ -320,8 +330,8 @@ function createViewComponent(factory) {
             return children;
         }
         var component = useAsync(function () {
-            return promise.then(null, function (error) {
-                promise = null;
+            promise = true;
+            return (isThenable(children) || factory()).then(null, function (error) {
                 props.onError(error);
             });
         })[0];
@@ -397,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)) {