brew-js-react 0.1.11 → 0.2.2

package/mixin.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { extend } from "./include/zeta-dom/util.js";
 import Mixin from "./mixins/Mixin.js";
 import AnimateMixin from "./mixins/AnimateMixin.js";
@@ -34,9 +34,13 @@ export const useLoadingStateMixin = createUseFunction(LoadingStateMixin);
 export const useScrollableMixin = createUseFunction(ScrollableMixin);
 
 export function useMixin(ctor) {
-    return useState(function () {
+    var mixin = useState(function () {
         return new ctor();
     })[0].reset();
+    useEffect(function () {
+        return mixin.dispose.bind(mixin);
+    }, []);
+    return mixin;
 }
 
 export function useMixinRef(mixin) {

package/mixins/FlyoutMixin.d.ts

@@ -4,6 +4,7 @@ import { AnimationEffect } from "./AnimateMixin";
 
 export interface FlyoutMixinOptions {
     modal?: boolean;
+    tabThrough?: boolean;
     swipeToDismiss?: Zeta.Direction;
 }
 

package/mixins/FlyoutMixin.js

@@ -10,6 +10,7 @@ export default function FlyoutMixin() {
     var self = this;
     ClassNameMixin.call(self, ['open', 'closing', 'tweening-in', 'tweening-out']);
     self.modal = false;
+    self.tabThrough = false;
     self.isFlyoutOpened = false;
     self.animating = false;
     self.visible = false;
@@ -36,6 +37,8 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
             'swipe-dismiss': self.swipeToDismiss
         }, self.modal && {
             'is-modal': ''
+        }, self.tabThrough && {
+            'tab-through': ''
         }, self.effects && {
             'animate-on': 'open',
             'animate-in': self.effects.join(' '),

package/mixins/FocusStateMixin.js

@@ -13,9 +13,9 @@ definePrototype(FocusStateMixin, StatefulMixin, {
     initElement: function (element, state) {
         FocusStateMixinSuper.initElement.call(this, element, state);
         dom.on(element, {
-            focusin: function () {
+            focusin: function (e) {
                 state.focused = true;
-                setClass(element, 'focused', true);
+                setClass(element, 'focused', e.source);
             },
             focusout: function () {
                 state.focused = false;

package/mixins/Mixin.d.ts

@@ -30,6 +30,10 @@ export default abstract class Mixin implements ClassNameProvider {
      * @private Internal use.
      */
     getCustomAttributes(): Zeta.Dictionary<string>;
+    /**
+     * @private Internal use.
+     */
+    dispose(): void;
 
     /**
      * Watches a property on the object.

package/mixins/Mixin.js

@@ -16,6 +16,8 @@ definePrototype(Mixin, {
     },
     getCustomAttributes: function () {
         return {};
+    },
+    dispose: function () {
     }
 });
 watchable(Mixin.prototype);

package/mixins/StatefulMixin.js

@@ -1,76 +1,82 @@
-import { createPrivateStore, definePrototype, inherit, randomId, values } from "../include/zeta-dom/util.js";
-import Mixin from "./Mixin.js";
-
-const _ = createPrivateStore();
-
-function MixinRefImpl(mixin) {
-    this.mixin = mixin;
-}
-
-definePrototype(MixinRefImpl, {
-    getMixin: function () {
-        return this.mixin;
-    }
-});
-
-export default function StatefulMixin() {
-    Mixin.call(this);
-    _(this, {
-        states: {},
-        prefix: '',
-        counter: 0
-    });
-}
-
-definePrototype(StatefulMixin, Mixin, {
-    get ref() {
-        const self = this;
-        const state = self.state;
-        self.next();
-        return state.ref || (state.ref = new MixinRefImpl(self.clone()));
-    },
-    get state() {
-        const obj = _(this);
-        const key = obj.prefix + obj.counter;
-        return obj.states[key] || (obj.states[key] = this.initState());
-    },
-    reset: function () {
-        _(this).counter = 0;
-        return this;
-    },
-    next: function () {
-        _(this).counter++;
-        return this;
-    },
-    getRef: function () {
-        const self = this;
-        const state = self.state;
-        return function (current) {
-            if (current && current !== state.element) {
-                state.element = current;
-                self.initElement(current, state);
-            }
-        };
-    },
-    elements: function () {
-        return values(_(this).states).map(function (v) {
-            return v.element;
-        }).filter(function (v) {
-            return v;
-        });
-    },
-    initState: function () {
-        return { element: null };
-    },
-    initElement: function (element, state) {
-    },
-    clone: function () {
-        const clone = inherit(Object.getPrototypeOf(this));
-        _(clone, {
-            states: _(this).states,
-            prefix: randomId() + '.',
-            counter: 0
-        });
-        return clone;
-    }
-});
+import { createPrivateStore, definePrototype, each, inherit, randomId, values } from "../include/zeta-dom/util.js";
+import Mixin from "./Mixin.js";
+
+const _ = createPrivateStore();
+
+function MixinRefImpl(mixin) {
+    this.mixin = mixin;
+}
+
+definePrototype(MixinRefImpl, {
+    getMixin: function () {
+        return this.mixin;
+    }
+});
+
+export default function StatefulMixin() {
+    Mixin.call(this);
+    _(this, {
+        states: {},
+        prefix: '',
+        counter: 0
+    });
+}
+
+definePrototype(StatefulMixin, Mixin, {
+    get ref() {
+        const self = this;
+        const state = self.state;
+        self.next();
+        return state.ref || (state.ref = new MixinRefImpl(self.clone()));
+    },
+    get state() {
+        const obj = _(this);
+        const key = obj.prefix + obj.counter;
+        return obj.states[key] || (obj.states[key] = this.initState());
+    },
+    reset: function () {
+        _(this).counter = 0;
+        return this;
+    },
+    next: function () {
+        _(this).counter++;
+        return this;
+    },
+    getRef: function () {
+        const self = this;
+        const state = self.state;
+        return function (current) {
+            if (current && current !== state.element) {
+                state.element = current;
+                self.initElement(current, state);
+            }
+        };
+    },
+    elements: function () {
+        return values(_(this).states).map(function (v) {
+            return v.element;
+        }).filter(function (v) {
+            return v;
+        });
+    },
+    initState: function () {
+        return { element: null };
+    },
+    initElement: function (element, state) {
+    },
+    clone: function () {
+        const clone = inherit(Object.getPrototypeOf(this));
+        _(clone, {
+            states: _(this).states,
+            prefix: randomId() + '.',
+            counter: 0
+        });
+        return clone;
+    },
+    dispose: function () {
+        var states = _(this).states;
+        each(states, function (i, v) {
+            delete states[i];
+        });
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.1.11",
+  "version": "0.2.2",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -19,8 +19,8 @@
   "dependencies": {
     "brew-js": ">=0.3.2",
     "waterpipe": "^2.5.0",
-    "zeta-dom": ">=0.1.13",
-    "zeta-dom-react": ">=0.1.1"
+    "zeta-dom": ">=0.2.3",
+    "zeta-dom-react": ">=0.2.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/view.d.ts

@@ -1,6 +1,12 @@
 export type ViewComponentRootProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 export type ViewComponent<P> = React.FC<P>;
 
+export interface ViewContainerState {
+    readonly active: boolean;
+}
+
+export function useViewContainerState(): ViewContainerState;
+
 /**
  * Registers view component with specific route paramters.
  * Route parameters will be matched against current route state by {@link renderView}.

package/view.js

@@ -1,11 +1,16 @@
-import React from "react";
+import React, { useRef } from "react";
 import { useAsync } from "zeta-dom-react";
-import { any, definePrototype, each, exclude, extend, isFunction, keys, makeArray, noop, pick, randomId, setImmediate } from "./include/zeta-dom/util.js";
+import dom from "./include/zeta-dom/dom.js";
+import { notifyAsync } from "./include/zeta-dom/domLock.js";
+import { any, defineGetterProperty, definePrototype, each, extend, isFunction, keys, makeArray, noop, pick, randomId, setImmediate } from "./include/zeta-dom/util.js";
 import { animateIn, animateOut } from "./include/brew-js/anim.js";
 import { app } from "./app.js";
+import { ViewStateContainer } from "./hooks.js";
 
+const root = dom.root;
 const routeMap = new Map();
 const usedParams = {};
+const StateContext = React.createContext(Object.freeze({ active: true }));
 
 let stateId;
 
@@ -31,33 +36,58 @@ definePrototype(ViewContainer, React.Component, {
     componentDidMount: function () {
         this.mounted = true;
     },
+    componentDidCatch: function (error) {
+        dom.emit('error', this.parentElement || root, { error }, true);
+    },
     render: function () {
         /** @type {any} */
         var self = this;
+        var resolve;
+        var promise = new Promise(function (_resolve) {
+            resolve = _resolve;
+        });
         var V = self.getViewComponent();
         if (V && V !== self.currentViewComponent) {
             self.currentViewComponent = V;
             if (self.currentView && self.currentElement) {
+                var prevPath = self.currentPath;
+                var prevElement = self.currentElement;
                 self.prevView = self.currentView;
-                self.prevElement = self.currentElement;
                 self.currentElement = undefined;
-                animateOut(self.prevElement, 'show').then(function () {
-                    self.prevElement = undefined;
+                app.emit('pageleave', prevElement, { pathname: prevPath }, true);
+                animateOut(prevElement, 'show').then(function () {
                     self.prevView = undefined;
                     self.forceUpdate();
                 });
             }
-            self.currentView = React.createElement(V, {
+            var providerProps = {
                 key: routeMap.get(V).id,
-                rootProps: self.props.rootProps,
-                onComponentLoaded: function (element) {
-                    self.currentElement = element;
-                    setImmediate(function () {
-                        return animateIn(element, 'show');
-                    });
-                }
+                value: {}
+            };
+            var view = React.createElement(StateContext.Provider, providerProps,
+                React.createElement(ViewStateContainer, null,
+                    React.createElement(V, {
+                        rootProps: self.props.rootProps,
+                        onComponentLoaded: function (element) {
+                            self.currentElement = element;
+                            self.parentElement = element.parentElement;
+                            setImmediate(function () {
+                                resolve();
+                                animateIn(element, 'show');
+                                app.emit('pageenter', element, { pathname: app.path }, true);
+                            });
+                        }
+                    })));
+            defineGetterProperty(providerProps.value, 'active', function () {
+                return self.currentView === view;
             });
+            self.currentPath = app.path;
+            self.currentView = view;
+        } else {
+            app.emit('pageenter', self.currentElement, { pathname: app.path }, true);
+            resolve();
         }
+        notifyAsync(self.parentElement || root, promise);
         return React.createElement(React.Fragment, null, self.prevView, self.currentView);
     },
     getViewComponent: function () {
@@ -66,6 +96,10 @@ definePrototype(ViewContainer, React.Component, {
     }
 });
 
+export function useViewContainerState() {
+    return React.useContext(StateContext);
+}
+
 export function isViewMatched(view) {
     var params = routeMap.get(view);
     return !!params && false === any(params.matchers, function (v, i) {
@@ -76,14 +110,14 @@ export function isViewMatched(view) {
 
 export function registerView(factory, routeParams) {
     var Component = function (props) {
-        var Component = useAsync(factory)[0];
+        var state = useAsync(factory);
+        var ref = useRef();
+        if (state[0] || state[1].error) {
+            (props.onComponentLoaded || noop)(ref.current);
+        }
         return React.createElement('div', extend({}, props.rootProps, {
-            ref: function (element) {
-                if (element && Component) {
-                    (props.onComponentLoaded || noop)(element);
-                }
-            },
-            children: Component && React.createElement(Component.default)
+            ref: ref,
+            children: state[0] && React.createElement(state[0].default)
         }));
     };
     routeParams = extend({}, routeParams);