brew-js-react 0.4.1 → 0.4.3

package/mixins/ClassNameMixin.js

@@ -1,56 +1,56 @@
-import { definePrototype, each, equal, extend, setImmediate } from "../include/zeta-dom/util.js";
-import { containsOrEquals } from "../include/zeta-dom/domUtil.js";
-import dom from "../include/zeta-dom/dom.js";
-import { watchOwnAttributes } from "../include/zeta-dom/observe.js";
-import StatefulMixin from "./StatefulMixin.js";
-
-const ClassNameMixinSuper = StatefulMixin.prototype;
-
-function checkState(self, element, state, isAsync) {
-    var classNames = state.classNames;
-    var prev = extend({}, classNames);
-    each(self.classNames, function (i, v) {
-        classNames[v] = element.classList.contains(v);
-    });
-    if (!equal(prev, classNames)) {
-        var cb = self.onClassNameUpdated.bind(self, element, prev, extend({}, classNames));
-        if (isAsync) {
-            setImmediate(cb);
-        } else {
-            cb();
-        }
-    }
-}
-
-export default function ClassNameMixin(classNames) {
-    StatefulMixin.call(this);
-    this.classNames = classNames || [];
-}
-
-definePrototype(ClassNameMixin, StatefulMixin, {
-    getClassNames: function () {
-        return [this.state.classNames];
-    },
-    getRef: function () {
-        var self = this;
-        var element = self.state.element;
-        if (element && containsOrEquals(dom.root, element)) {
-            checkState(self, element, self.state, true);
-        }
-        return ClassNameMixinSuper.getRef.call(this);
-    },
-    initState: function () {
-        return {
-            element: null,
-            classNames: {}
-        };
-    },
-    initElement: function (element, state) {
-        var self = this;
-        watchOwnAttributes(element, 'class', function () {
-            checkState(self, element, state);
-        });
-    },
-    onClassNameUpdated: function (element, prevState, state) {
-    }
-});
+import { definePrototype, each, equal, extend, setImmediate } from "../include/zeta-dom/util.js";
+import { containsOrEquals } from "../include/zeta-dom/domUtil.js";
+import dom from "../include/zeta-dom/dom.js";
+import { watchOwnAttributes } from "../include/zeta-dom/observe.js";
+import StatefulMixin from "./StatefulMixin.js";
+
+const ClassNameMixinSuper = StatefulMixin.prototype;
+
+function checkState(self, element, state, isAsync) {
+    var classNames = state.classNames;
+    var prev = extend({}, classNames);
+    each(self.classNames, function (i, v) {
+        classNames[v] = element.classList.contains(v);
+    });
+    if (!equal(prev, classNames)) {
+        var cb = self.onClassNameUpdated.bind(self, element, prev, extend({}, classNames));
+        if (isAsync) {
+            setImmediate(cb);
+        } else {
+            cb();
+        }
+    }
+}
+
+export default function ClassNameMixin(classNames) {
+    StatefulMixin.call(this);
+    this.classNames = classNames || [];
+}
+
+definePrototype(ClassNameMixin, StatefulMixin, {
+    getClassNames: function () {
+        return [this.state.classNames];
+    },
+    getRef: function () {
+        var self = this;
+        var element = self.state.element;
+        if (element && containsOrEquals(dom.root, element)) {
+            checkState(self, element, self.state, true);
+        }
+        return ClassNameMixinSuper.getRef.call(this);
+    },
+    initState: function () {
+        return {
+            element: null,
+            classNames: {}
+        };
+    },
+    initElement: function (element, state) {
+        var self = this;
+        watchOwnAttributes(element, 'class', function () {
+            checkState(self, element, state);
+        });
+    },
+    onClassNameUpdated: function (element, prevState, state) {
+    }
+});

package/mixins/ScrollIntoViewMixin.d.ts

@@ -0,0 +1,5 @@
+import StatefulMixin from "./StatefulMixin";
+
+export default class ScrollIntoViewMixin extends StatefulMixin {
+    when(deps: React.DependencyList): this;
+}

package/mixins/ScrollIntoViewMixin.js

@@ -0,0 +1,21 @@
+import { definePrototype, equal, makeArray, setImmediateOnce } from "../include/zeta-dom/util.js";
+import { scrollIntoView } from "../include/zeta-dom/domUtil.js";
+import StatefulMixin from "./StatefulMixin.js";
+
+export default function ScrollIntoViewMixin() {
+    StatefulMixin.call(this);
+}
+
+definePrototype(ScrollIntoViewMixin, StatefulMixin, {
+    when: function (deps) {
+        var state = this.state;
+        var callback = state.callback || (state.callback = function () {
+            scrollIntoView(state.element);
+        });
+        if (state.deps && !equal(deps, state.deps)) {
+            setImmediateOnce(callback);
+        }
+        state.deps = makeArray(deps);
+        return this;
+    }
+});

package/mixins/ScrollableMixin.d.ts

@@ -8,6 +8,7 @@ export interface ScrollableMixinOptions {
     handle?: 'auto' | 'scrollbar' | 'content';
     paged?: 'always' | 'landscape' | 'portrait';
     pagedItemSelector?: string;
+    persistScroll?: boolean;
 }
 
 export default class ScrollableMixin extends ClassNameMixin implements JQueryScrollable {
@@ -31,6 +32,6 @@ export default class ScrollableMixin extends ClassNameMixin implements JQueryScr
     scrollTo(x: number, y: number, duration?: number, callback?: () => void): Promise<void>;
     scrollByPage(x: number, y: number, duration?: number, callback?: () => void): Promise<void>;
     scrollToPage(x: number, y: number, duration?: number, callback?: () => void): Promise<void>;
-    scrollToElement(target: Element, targetOrigin: string, duration: number, callback?: () => void): Promise<void>;
-    scrollToElement(target: Element, targetOrigin?: string, wrapperOrigin?: string, duration?: number, callback?: () => void): Promise<void>;
+    scrollToElement(target: Element | string, targetOrigin: string, duration: number, callback?: () => void): Promise<void>;
+    scrollToElement(target: Element | string, targetOrigin?: string, wrapperOrigin?: string, duration?: number, callback?: () => void): Promise<void>;
 }

package/mixins/ScrollableMixin.js

@@ -28,6 +28,8 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
             'scroller-snap-page': options.paged,
             'scroller-page': options.pagedItemSelector,
             'scroller-state': 'pageIndex'
+        }, options.persistScroll && {
+            'persist-scroll': ''
         });
     },
     onPageIndexChanged: function (callback) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "",
   "type": "module",
   "main": "index.js",

package/view.d.ts

@@ -2,11 +2,28 @@ import { useRouteState } from "./hooks";
 
 export type ViewComponentRootProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 export type ViewComponent<P> = React.FC<ViewProps<P>>;
+/**
+ * @deprecated Alias of {@link ViewContext}
+ */
+export type ViewContainerState = ViewContext;
+
+export interface PageChangeEvent extends Zeta.ZetaEventBase {
+    readonly previousPage: Brew.PageInfo;
+}
 
-export interface ViewContainerState {
+export interface ViewContextEventMap {
+    pagechange: PageChangeEvent;
+}
+
+export interface ViewContext extends Zeta.ZetaEventDispatcher<ViewContextEventMap, ViewContext> {
     readonly container: HTMLElement;
     readonly view: ViewComponent<any>;
     readonly active: boolean;
+    /**
+     * Gets information of current page that rendered the view.
+     * Unlike {@link Brew.WithRouter.page}, it will not change when user has navigated away and the current view is going to unmount.
+     */
+    readonly page: Brew.PageInfo;
 }
 
 export interface ViewProps<S = {}> {
@@ -17,6 +34,10 @@ export interface ViewProps<S = {}> {
      * pass individual data to {@link React.useState} or {@link useRouteState}.
      */
     readonly viewData: { readonly [P in keyof S]?: S[P] };
+    /**
+     * Gets information scoped to the rendered view.
+     */
+    readonly viewContext: ViewContext;
     /**
      * Gets how user landed on this view component.
      * @see {@link Brew.RouterEvent.navigationType}
@@ -39,6 +60,11 @@ export interface ErrorViewProps {
     reset(): void;
 }
 
+export function useViewContext(): ViewContext;
+
+/**
+ * @deprecated Alias of {@link useViewContext}
+ */
 export function useViewContainerState(): ViewContainerState;
 
 /**

package/view.js

@@ -2,17 +2,21 @@ 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, freeze, grep, isFunction, isThenable, isUndefinedOrNull, keys, makeArray, map, noop, pick, randomId, setImmediate, single, throwNotFunction, watch } from "./include/zeta-dom/util.js";
+import { ZetaEventContainer } from "./include/zeta-dom/events.js";
+import { any, catchAsync, combineFn, createPrivateStore, defineObservableProperty, defineOwnProperty, 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, onAppInit } from "./app.js";
 import { ViewStateContainer } from "./hooks.js";
 
+const _ = createPrivateStore();
 const root = dom.root;
 const routeMap = new Map();
 const usedParams = {};
 const sortedViews = [];
-const StateContext = React.createContext(Object.freeze({ container: root, active: true }));
+const emitter = new ZetaEventContainer();
+const rootContext = freeze(extend(new ViewContext(null, null), { container: root }));
+const StateContext = React.createContext(rootContext);
 
 var errorView;
 /** @type {Partial<Zeta.ZetaEventType<"beforepageload", Brew.RouterEventMap, Element>>} */
@@ -21,9 +25,28 @@ var event = {};
 onAppInit(function () {
     app.on('beforepageload', function (e) {
         event = e;
+        _(rootContext).setPage(app.page);
     });
 });
 
+function ViewContext(view, page) {
+    var self = this;
+    defineOwnProperty(self, 'view', view, true);
+    _(self, {
+        setPage: defineObservableProperty(self, 'page', page, true),
+        setActive: defineObservableProperty(self, 'active', true, true)
+    });
+    watch(self, 'page', function (page, previousPage) {
+        emitter.emit('pagechange', self, { previousPage });
+    });
+}
+
+definePrototype(ViewContext, {
+    on: function (event, handler) {
+        return emitter.add(this, event, handler);
+    }
+});
+
 function ErrorBoundary() {
     React.Component.apply(this, arguments);
     this.state = {};
@@ -65,6 +88,7 @@ function ViewContainer() {
     React.Component.apply(this, arguments);
     this.stateId = history.state;
 }
+ViewContainer.contextType = StateContext;
 
 definePrototype(ViewContainer, React.Component, {
     componentDidMount: function () {
@@ -72,32 +96,41 @@ definePrototype(ViewContainer, React.Component, {
         var self = this;
         self.componentWillUnmount = combineFn(
             watch(app.route, function () {
-                self.setActive(self.getViewComponent() === self.currentViewComponent);
+                (self.setActive || noop)(self.getViewComponent() === self.currentViewComponent);
             }),
             app.on('beforepageload', function () {
                 self.stateId = history.state;
-                self.updateView();
-                self.forceUpdate();
+                if (self.context === rootContext || self.updateOnNext) {
+                    event.waitFor(new Promise(function (resolve) {
+                        self.onRender = resolve;
+                    }));
+                    self.updateView();
+                    self.forceUpdate();
+                }
             })
         );
     },
     render: function () {
         /** @type {any} */
         var self = this;
-        if (history.state === self.stateId) {
+        if (history.state === self.stateId && self.context.active) {
             self.updateView();
         }
+        (self.onRender || noop)();
         return React.createElement(React.Fragment, null, self.prevView, self.currentView);
     },
     updateView: function () {
         var self = this;
         var V = self.getViewComponent();
+        self.updateOnNext = false;
         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 = resolvePath(V, getCurrentParams(V, true));
             if (targetPath !== removeQueryAndHash(app.path)) {
                 app.navigate(targetPath, true);
+                self.updateOnNext = true;
+                return;
             }
         }
         if (V && V !== self.currentViewComponent) {
@@ -112,6 +145,8 @@ definePrototype(ViewContainer, React.Component, {
                     self.forceUpdate();
                 });
             }
+            (self.cancelPrevious || noop)();
+
             var onComponentLoaded;
             var promise = new Promise(function (resolve) {
                 onComponentLoaded = resolve;
@@ -125,23 +160,25 @@ definePrototype(ViewContainer, React.Component, {
                 });
                 notifyAsync(element, promise);
             });
+            var state = new ViewContext(V, app.page);
             var viewProps = freeze({
                 navigationType: event.navigationType,
+                viewContext: state,
                 viewData: event.data || {}
             });
-            var state = { view: V };
             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, viewProps }))));
-            extend(self, {
+            extend(self, _(state), {
+                cancelPrevious: onComponentLoaded,
                 currentPath: app.path,
                 currentView: view,
-                currentViewComponent: V,
-                setActive: defineObservableProperty(state, 'active', true, true)
+                currentViewComponent: V
             });
             (event.waitFor || noop)(promise);
         }
+        (self.setPage || noop)(app.page);
     },
     getViewComponent: function () {
         var props = this.props;
@@ -205,6 +242,7 @@ function createViewComponent(factory) {
         if (isThenable(children)) {
             promise = children;
             children = null;
+            catchAsync(promise);
         }
         var state = useAsync(function () {
             return promise.then(function (s) {
@@ -221,7 +259,7 @@ function createViewComponent(factory) {
     };
 }
 
-export function useViewContainerState() {
+export function useViewContext() {
     return React.useContext(StateContext);
 }
 
@@ -301,3 +339,7 @@ export function navigateTo(view, params, data, replace) {
 export function redirectTo(view, params, data) {
     return navigateTo(view, params, data, true);
 }
+
+export {
+    useViewContext as useViewContainerState
+}