brew-js-react 0.2.0 → 0.2.3

package/i18n.d.ts

@@ -63,6 +63,13 @@ export function makeTranslation<T extends Zeta.Dictionary<object>, K extends key
     type ResourceKey<T> = { [P in ResourcePrefix]: StringKeysOf<ResourceObject[P]> }[T];
     type ResourceGlobalKey = { [P in ResourcePrefix]: `${P}.${StringKeysOf<ResourceObject[P]>}` }[ResourcePrefix];
 
+    interface GetKeys {
+        /**
+         * Gets the list of translation key under the given prefix.
+         */
+        <T extends ResourcePrefix>(prefix: T): ResourceKey<T>[];
+    }
+
     interface GetTranslation {
         /**
          * Create translation callback which only looks up all prefixes.
@@ -89,8 +96,9 @@ export function makeTranslation<T extends Zeta.Dictionary<object>, K extends key
         <T extends readonly ResourcePrefix[]>(...args: T): Translation<ResourceKey<ArrayMember<T>>>;
     }
 
+    declare const keys: GetKeys;
     declare const translate: Translate<ResourceGlobalKey>;
     declare const getTranslation: GetTranslation;
     declare const useTranslation: UseTranslationHook;
-    return { translate, getTranslation, useTranslation };
+    return { keys, translate, getTranslation, useTranslation };
 }

package/i18n.js

@@ -1,6 +1,6 @@
 import { useObservableProperty } from "zeta-dom-react";
 import waterpipe from "./include/external/waterpipe.js"
-import { extend, makeArray, single } from "./include/zeta-dom/util.js";
+import { extend, keys, makeArray, single } from "./include/zeta-dom/util.js";
 import { app } from "./app.js";
 
 const empty = Object.create(null);
@@ -18,7 +18,8 @@ if (toPrimitive) {
 
 function createCallback(translate) {
     var callback = function (key, data) {
-        return translate(key, data, true);
+        var result = translate(key, data, true);
+        return result !== undefined ? result : key;
     };
     return extend(callback, {
         html: function (id, data) {
@@ -38,27 +39,33 @@ export function makeTranslation(resources, defaultLang) {
     const re = new RegExp('^(' + Object.keys(resources[defaultLang]).join('|') + ')\\.');
     const cache = {};
 
-    function getTranslation(prefix, name, data, noEncode) {
-        var str = ((resources[app.language] || empty)[prefix] || empty)[name] || ((resources[defaultLang] || empty)[prefix] || empty)[name] || '';
-        if (str && (!noEncode || data !== undefined)) {
-            return waterpipe(str, data, { noEncode });
+    function getTranslation(prefix, name, data, noEncode, lang) {
+        var str = ((resources[lang] || empty)[prefix] || empty)[name];
+        if (typeof str === 'string') {
+            if (str && (!noEncode || data !== undefined)) {
+                return waterpipe(str, data, { noEncode });
+            }
+            return str;
+        }
+        if (lang !== defaultLang) {
+            return getTranslation(prefix, name, data, noEncode, defaultLang);
         }
-        return str;
     }
 
     function translate(key, data, noEncode) {
         var prefix = re.test(key) ? RegExp.$1 : '';
         var name = prefix ? key.slice(RegExp.lastMatch.length) : key;
-        return getTranslation(prefix, name, data, noEncode) || key;
+        return getTranslation(prefix, name, data, noEncode, app.language);
     }
 
     function getTranslationCallback() {
         var prefix = makeArray(arguments);
         var key = prefix.join(' ');
         return cache[key] || (cache[key] = createCallback(function (key, data, noEncode) {
+            var lang = app.language;
             return single(prefix, function (v) {
-                return getTranslation(v, key, data, noEncode);
-            }) || key;
+                return getTranslation(v, key, data, noEncode, lang);
+            });
         }));
     }
 
@@ -72,6 +79,9 @@ export function makeTranslation(resources, defaultLang) {
     return {
         translate: cache[''],
         getTranslation: getTranslationCallback,
-        useTranslation
+        useTranslation: useTranslation,
+        keys: function (prefix) {
+            return keys(resources[defaultLang][prefix] || empty);
+        }
     };
 }

package/include/brew-js/var.js

@@ -0,0 +1 @@
+export * from "brew-js/var";

package/include/zeta-dom/domLock.js

@@ -0,0 +1 @@
+export * from "zeta-dom/domLock";

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/ClassNameMixin.js

@@ -52,9 +52,6 @@ definePrototype(ClassNameMixin, StatefulMixin, {
             }
         });
     },
-    clone: function () {
-        return extend(ClassNameMixinSuper.clone.call(this), { classNames: this.classNames });
-    },
     onClassNameUpdated: function (element, prevState, state) {
     }
 });

package/mixins/FlyoutMixin.d.ts

@@ -4,6 +4,7 @@ import { AnimationEffect } from "./AnimateMixin";
 
 export interface FlyoutMixinOptions {
     modal?: boolean;
+    tabThrough?: boolean;
     swipeToDismiss?: Zeta.Direction;
 }
 
@@ -11,11 +12,13 @@ export default class FlyoutMixin extends ClassNameMixin {
     readonly isFlyoutOpened: boolean;
     readonly animating: boolean;
     readonly visible: boolean;
-    readonly toggle: ClassNameMixin;
+    readonly toggle: FlyoutToggleMixin;
     modal: boolean;
 
     withEffects(...effects: AnimationEffect[]): this;
-    onOpen(callback: () => void): Zeta.UnregisterCallback;
+    onOpen(callback: (state: any) => void): Zeta.UnregisterCallback;
     onToggleState(callback: (state: boolean) => void): Zeta.UnregisterCallback;
     onVisibilityChanged(callback: (state: boolean) => void): Zeta.UnregisterCallback;
+    open(state?: any): Promise<any>;
+    close(state?: any): Promise<void>;
 }

package/mixins/FlyoutMixin.js

@@ -1,15 +1,19 @@
-import { defineAliasProperty, definePrototype, each, extend, makeArray } from "../include/zeta-dom/util.js";
+import { defineAliasProperty, definePrototype, each, extend, kv, makeArray, randomId } from "../include/zeta-dom/util.js";
+import { closeFlyout, openFlyout } from "../include/brew-js/domAction.js";
+import { declareVar, getVar } from "../include/brew-js/var.js";
 import { app } from "../app.js";
 import ClassNameMixin from "./ClassNameMixin.js";
 import FlyoutToggleMixin from "./FlyoutToggleMixin.js";
 
 const FlyoutMixinSuper = ClassNameMixin.prototype;
+const varname = '__flyout' + randomId();
 var flyoutMixinCounter = 0;
 
 export default function FlyoutMixin() {
     var self = this;
-    ClassNameMixin.call(self, ['open', 'closing', 'tweening-in', 'tweening-out']);
+    ClassNameMixin.call(self, ['open', 'closing', 'visible', 'tweening-in', 'tweening-out']);
     self.modal = false;
+    self.tabThrough = false;
     self.isFlyoutOpened = false;
     self.animating = false;
     self.visible = false;
@@ -36,16 +40,25 @@ 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(' '),
             'animate-out': ''
         });
     },
+    open: function (value) {
+        return openFlyout(this.elements()[0], kv(varname, value));
+    },
+    close: function (value) {
+        return closeFlyout(this.elements()[0], value);
+    },
     onOpen: function (callback) {
+        var element = this.elements()[0];
         return this.onToggleState(function (opened) {
             if (opened) {
-                return callback();
+                return callback(getVar(element, varname));
             }
         });
     },
@@ -60,6 +73,7 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
         FlyoutMixinSuper.initElement.call(self, element, state);
         if (!element.id) {
             element.id = 'flyout-' + (++flyoutMixinCounter);
+            declareVar(element, varname, undefined);
         }
         app.on(element, {
             animationstart: function () {

package/mixins/FlyoutToggleMixin.d.ts

@@ -1,3 +1,6 @@
 import ClassNameMixin from "./ClassNameMixin";
 
-export default class FlyoutToggleMixin extends ClassNameMixin { }
+export default class FlyoutToggleMixin extends ClassNameMixin {
+    open(state?: any): Promise<any>;
+    close(state?: any): Promise<void>;
+}

package/mixins/FlyoutToggleMixin.js

@@ -9,13 +9,16 @@ export default function FlyoutToggleMixin(mixin) {
 }
 
 definePrototype(FlyoutToggleMixin, ClassNameMixin, {
+    open: function (value) {
+        return this.flyoutMixin.open(value);
+    },
+    close: function (value) {
+        return this.flyoutMixin.close(value);
+    },
     getCustomAttributes: function () {
         var element = this.flyoutMixin.elements()[0];
         return extend({}, FlyoutToggleMixinSuper.getCustomAttributes.call(this), {
             'toggle': element && ('#' + element.id)
         });
-    },
-    clone: function () {
-        return extend(FlyoutToggleMixinSuper.clone.call(this), { flyoutMixin: this.flyoutMixin });
     }
 });

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,4 +1,4 @@
-import { createPrivateStore, definePrototype, inherit, randomId, values } from "../include/zeta-dom/util.js";
+import { createPrivateStore, definePrototype, each, inherit, randomId, values } from "../include/zeta-dom/util.js";
 import Mixin from "./Mixin.js";
 
 const _ = createPrivateStore();
@@ -65,12 +65,19 @@ definePrototype(StatefulMixin, Mixin, {
     initElement: function (element, state) {
     },
     clone: function () {
-        const clone = inherit(Object.getPrototypeOf(this));
+        const self = this;
+        const clone = inherit(Object.getPrototypeOf(self), self);
         _(clone, {
-            states: _(this).states,
+            states: _(self).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.2.0",
+  "version": "0.2.3",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -19,7 +19,7 @@
   "dependencies": {
     "brew-js": ">=0.3.2",
     "waterpipe": "^2.5.0",
-    "zeta-dom": ">=0.1.13",
+    "zeta-dom": ">=0.2.3",
     "zeta-dom-react": ">=0.2.1"
   },
   "peerDependencies": {
@@ -40,6 +40,7 @@
     "cross-env": "^7.0.2",
     "glob": "^7.2.0",
     "jest": "^27.0.6",
+    "jest-environment-jsdom": "^27.4.6",
     "ncp": "^2.0.0",
     "regenerator-runtime": "^0.13.9",
     "webpack": "^5.3.0",

package/view.js

@@ -1,11 +1,13 @@
-import React from "react";
+import React, { useRef } from "react";
 import { useAsync } from "zeta-dom-react";
 import dom from "./include/zeta-dom/dom.js";
-import { any, defineGetterProperty, definePrototype, each, extend, isFunction, keys, makeArray, noop, pick, randomId, setImmediate } from "./include/zeta-dom/util.js";
+import { notifyAsync } from "./include/zeta-dom/domLock.js";
+import { any, defineGetterProperty, definePrototype, each, either, extend, grep, isFunction, keys, makeArray, map, 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 }));
@@ -25,6 +27,7 @@ function ViewContainer() {
     }
     self.componentWillUnmount = app.on('navigate', function () {
         if (self.mounted && self.getViewComponent()) {
+            self.isForceUpdate = true;
             self.forceUpdate();
         }
     });
@@ -35,20 +38,25 @@ definePrototype(ViewContainer, React.Component, {
         this.mounted = true;
     },
     componentDidCatch: function (error) {
-        dom.emit('error', this.parentElement || dom.root, { error }, true);
+        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();
                 });
@@ -65,23 +73,74 @@ definePrototype(ViewContainer, React.Component, {
                             self.currentElement = element;
                             self.parentElement = element.parentElement;
                             setImmediate(function () {
-                                return animateIn(element, 'show');
+                                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 {
+            if (self.isForceUpdate) {
+                self.isForceUpdate = false;
+                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 () {
         var props = this.props;
-        return any(props.views, isViewMatched) || (history.state === stateId && void redirectTo(props.defaultView));
+        var matched = any(props.views, isViewMatched) || props.defaultView;
+        if (history.state === stateId) {
+            // ensure the current path actually corresponds to the matched view
+            // when some views are not included in the list of allowed views
+            var targetPath = linkTo(matched, getCurrentParams(matched, true));
+            if (targetPath !== app.path) {
+                app.navigate(targetPath, true);
+                return;
+            }
+        }
+        return matched;
     }
 });
 
+function getCurrentParams(view, includeAll) {
+    var state = routeMap.get(view);
+    if (!state.maxParams) {
+        var matched = map(app.routes, function (v) {
+            var route = app.parseRoute(v);
+            var matched = route.length && !any(state.matchers, function (v, i) {
+                var pos = route.params[i];
+                return (v ? !(pos >= 0) : pos < route.minLength) || (!isFunction(v) && !route.match(i, v));
+            });
+            return matched ? route : null;
+        });
+        if (matched[1]) {
+            matched = grep(matched, function (v) {
+                return !any(v.params, function (v, i) {
+                    return usedParams[i] && !state.matchers[i];
+                });
+            });
+        }
+        if (matched[0]) {
+            var last = matched.slice(-1)[0];
+            state.maxParams = keys(extend.apply(0, [{}].concat(matched.map(function (v) {
+                return v.params;
+            }))));
+            state.minParams = map(last.params, function (v, i) {
+                return state.params[i] || v >= last.minLength ? null : i;
+            });
+        }
+    }
+    return pick(app.route, includeAll ? state.maxParams : state.minParams);
+}
+
 export function useViewContainerState() {
     return React.useContext(StateContext);
 }
@@ -96,14 +155,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);
@@ -135,17 +194,11 @@ export function renderView() {
 }
 
 export function linkTo(view, params) {
-    var viewParams = (routeMap.get(view) || {}).params;
-    var newParams = {};
-    for (var i in app.route) {
-        if (viewParams && i in viewParams) {
-            newParams[i] = viewParams[i];
-        } else if (params && i in params) {
-            newParams[i] = params[i];
-        } else if (!usedParams[i]) {
-            newParams[i] = app.route[i];
-        }
+    var state = routeMap.get(view);
+    if (!state) {
+        return '/';
     }
+    var newParams = extend(getCurrentParams(view), params, state.params);
     return app.route.getPath(newParams);
 }