brew-js-react 0.2.2 → 0.2.5

package/hooks.js

@@ -1,113 +1,115 @@
-import { createElement, useEffect, useRef, useState } from "react";
-import { ViewStateProvider } from "zeta-dom-react";
-import { definePrototype, extend, kv, setImmediateOnce, throwNotFunction } from "./include/zeta-dom/util.js";
-import { ZetaEventContainer } from "./include/zeta-dom/events.js";
-import { app } from "./app.js";
-import { useViewContainerState } from "./view.js";
-
-const emitter = new ZetaEventContainer();
-const states = {};
-
-function getCurrentStates() {
-    return states[history.state] || (states[history.state] = {});
-}
-
-function ViewState(value) {
-    this.value = value;
-}
-
-definePrototype(ViewState, {
-    get: function () {
-        return this.value;
-    },
-    set: function (value) {
-        this.value = value;
-    },
-    onPopState: function (callback) {
-        throwNotFunction(callback);
-        return emitter.add(this, 'popstate', function (e) {
-            callback.call(this, e.newValue);
-        });
-    }
-});
-
-export function useAppReady() {
-    const sReady = useState(false);
-    const ready = sReady[0], setReady = sReady[1];
-    useEffect(function () {
-        app.ready.then(function () {
-            setReady(true);
-        });
-    }, []);
-    return ready;
-}
-
-export function useRouteParam(name, defaultValue) {
-    const container = useViewContainerState();
-    const route = app.route;
-    const value = route[name] || '';
-    const ref = useRef(value);
-    const forceUpdate = useState()[1];
-    useEffect(function () {
-        var setValue = function () {
-            var current = route[name] || '';
-            if (container.active && current !== ref.current) {
-                ref.current = current;
-                forceUpdate({});
-            }
-        };
-        // route parameter might be changed after state initialization and before useEffect hook is called
-        setValue();
-        if (name in route) {
-            return route.watch(name, function () {
-                setImmediateOnce(setValue);
-            });
-        }
-        console.error('Route parameter ' + name + ' does not exist');
-    }, [name, defaultValue]);
-    ref.current = value;
-    if (!value && defaultValue !== undefined) {
-        app.navigate(route.getPath(extend({}, route, kv(name, defaultValue))), true);
-    }
-    return value;
-}
-
-export function useRouteState(key, defaultValue) {
-    const container = useViewContainerState();
-    const cur = getCurrentStates();
-    const state = useState(key in cur ? cur[key] : defaultValue);
-    if (container.active) {
-        cur[key] = state[0];
-    }
-    return state;
-}
-
-export function ViewStateContainer(props) {
-    const container = useViewContainerState();
-    const provider = useState(function () {
-        const cache = {};
-        return {
-            getState: function (uniqueId, key) {
-                var cur = getCurrentStates();
-                var state = cache[uniqueId] || (cache[uniqueId] = new ViewState(cur[key] && cur[key].value));
-                if (container.active) {
-                    var stateId = state.stateId;
-                    if (stateId && stateId !== history.state) {
-                        var newValue = cur[key] && cur[key].value;
-                        emitter.emit('popstate', state, {
-                            newValue: newValue
-                        });
-                        // detach value in previous history state from current one
-                        var previous = new ViewState(state.value);
-                        states[stateId][key] = previous;
-                        state.value = newValue;
-                    }
-                    state.stateId = history.state;
-                    cur[key] = state;
-                }
-                return state;
-            }
-        };
-    })[0];
-    return createElement(ViewStateProvider, { value: provider }, props.children);
-}
+import { createElement, useEffect, useRef, useState } from "react";
+import { ViewStateProvider } from "zeta-dom-react";
+import { definePrototype, extend, kv, setImmediateOnce, throwNotFunction } from "./include/zeta-dom/util.js";
+import { ZetaEventContainer } from "./include/zeta-dom/events.js";
+import { app } from "./app.js";
+import { useViewContainerState } from "./view.js";
+
+const emitter = new ZetaEventContainer();
+const states = {};
+
+function getCurrentStates() {
+    return states[history.state] || (states[history.state] = {});
+}
+
+function ViewState(key, value) {
+    this.key = key;
+    this.value = value;
+}
+
+definePrototype(ViewState, {
+    get: function () {
+        return this.value;
+    },
+    set: function (value) {
+        this.value = value;
+    },
+    onPopState: function (callback) {
+        throwNotFunction(callback);
+        return emitter.add(this, 'popstate', function (e) {
+            callback.call(this, e.newValue);
+        });
+    }
+});
+
+export function useAppReady() {
+    const sReady = useState(false);
+    const ready = sReady[0], setReady = sReady[1];
+    useEffect(function () {
+        app.ready.then(function () {
+            setReady(true);
+        });
+    }, []);
+    return ready;
+}
+
+export function useRouteParam(name, defaultValue) {
+    const container = useViewContainerState();
+    const route = app.route;
+    const value = route[name] || '';
+    const ref = useRef(value);
+    const forceUpdate = useState()[1];
+    useEffect(function () {
+        var setValue = function () {
+            var current = route[name] || '';
+            if (container.active && current !== ref.current) {
+                ref.current = current;
+                forceUpdate({});
+            }
+        };
+        // route parameter might be changed after state initialization and before useEffect hook is called
+        setValue();
+        if (name in route) {
+            return route.watch(name, function () {
+                setImmediateOnce(setValue);
+            });
+        }
+        console.error('Route parameter ' + name + ' does not exist');
+    }, [name, defaultValue]);
+    ref.current = value;
+    if (!value && defaultValue !== undefined) {
+        app.navigate(route.getPath(extend({}, route, kv(name, defaultValue))), true);
+    }
+    return value;
+}
+
+export function useRouteState(key, defaultValue) {
+    const container = useViewContainerState();
+    const cur = getCurrentStates();
+    const state = useState(key in cur ? cur[key] : defaultValue);
+    if (container.active) {
+        cur[key] = state[0];
+    }
+    return state;
+}
+
+export function ViewStateContainer(props) {
+    const container = useViewContainerState();
+    const provider = useState(function () {
+        const cache = {};
+        return {
+            getState: function (uniqueId, key) {
+                var cur = getCurrentStates();
+                var state = cache[uniqueId] || (cache[uniqueId] = new ViewState(key, cur[key] && cur[key].value));
+                if (container.active) {
+                    var stateId = state.stateId;
+                    if (stateId && (stateId !== history.state || key !== state.key)) {
+                        var newValue = cur[key] && cur[key].value;
+                        emitter.emit('popstate', state, {
+                            newValue: newValue
+                        });
+                        // detach value in previous history state from current one
+                        var previous = new ViewState(state.key, state.value);
+                        states[stateId][previous.key] = previous;
+                        state.value = newValue;
+                        state.key = key;
+                    }
+                    state.stateId = history.state;
+                    cur[key] = state;
+                }
+                return state;
+            }
+        };
+    })[0];
+    return createElement(ViewStateProvider, { value: provider }, props.children);
+}

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);
@@ -79,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/util/path.js

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

package/include/brew-js/var.js

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

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

@@ -5,18 +5,20 @@ import { AnimationEffect } from "./AnimateMixin";
 export interface FlyoutMixinOptions {
     modal?: boolean;
     tabThrough?: boolean;
-    swipeToDismiss?: Zeta.Direction;
+    swipeToDismiss?: 'up' | 'down' | 'left' | 'right';
 }
 
 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,14 +1,16 @@
 import { defineAliasProperty, definePrototype, each, extend, makeArray } from "../include/zeta-dom/util.js";
+import { closeFlyout, openFlyout } from "../include/brew-js/domAction.js";
 import { app } from "../app.js";
 import ClassNameMixin from "./ClassNameMixin.js";
 import FlyoutToggleMixin from "./FlyoutToggleMixin.js";
 
 const FlyoutMixinSuper = ClassNameMixin.prototype;
+const valueMap = new WeakMap();
 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;
@@ -45,10 +47,19 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
             'animate-out': ''
         });
     },
+    open: function (value) {
+        var element = this.elements()[0];
+        valueMap.set(element, value);
+        return openFlyout(element);
+    },
+    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(valueMap.get(element));
             }
         });
     },

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

@@ -1,82 +1,83 @@
-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];
-        });
-    }
-});
+import { createPrivateStore, definePrototype, each, extend, inherit, randomId, setAdd, 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, {
+        elements: new WeakSet(),
+        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) {
+            state.element = current;
+            if (current && setAdd(_(self).elements, 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 self = this;
+        const clone = inherit(Object.getPrototypeOf(self), self);
+        _(clone, extend({}, _(self), {
+            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.2",
+  "version": "0.2.5",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -17,7 +17,7 @@
   "homepage": "https://hackmd.io/@misonou/brew-js-react",
   "repository": "github:misonou/brew-js-react",
   "dependencies": {
-    "brew-js": ">=0.3.2",
+    "brew-js": ">=0.3.10",
     "waterpipe": "^2.5.0",
     "zeta-dom": ">=0.2.3",
     "zeta-dom-react": ">=0.2.1"
@@ -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.d.ts

@@ -2,6 +2,7 @@ export type ViewComponentRootProps = React.DetailedHTMLProps<React.HTMLAttribute
 export type ViewComponent<P> = React.FC<P>;
 
 export interface ViewContainerState {
+    readonly view: ViewComponent<any>;
     readonly active: boolean;
 }
 
@@ -22,6 +23,32 @@ export function registerView<P>(factory: () => Promise<{ default: React.Componen
  */
 export function isViewMatched(view: ViewComponent<any>): boolean;
 
+/**
+ * Gets the view component that matches the current path within all registered views.
+ * However it does not imply if the view is in fact being rendered.
+ */
+export function matchView(): ViewComponent<any> | undefined;
+
+/**
+ * Gets the view component that matches the current path within the given set of views.
+ * However it does not imply if the view is in fact being rendered.
+ * @param views A list of view components.
+ */
+export function matchView(views: ViewComponent<any>[]): ViewComponent<any> | undefined;
+
+/**
+ * Gets the view component that matches the specified path.
+ * @param path A valid path that could navigate to.
+ */
+export function matchView(path: string): ViewComponent<any> | undefined;
+
+/**
+ * Gets the view component that matches the specified path, within the given set of views.
+ * @param path A valid path that could navigate to.
+ * @param views A list of view components.
+ */
+export function matchView(path: string, views: ViewComponent<any>[]): ViewComponent<any> | undefined;
+
 /**
  * Renders view by matching current route state against registered route parameters of each supplied views.
  * @param args A list of view components created by {@link registerView}.