brew-js-react 0.2.3 → 0.2.6

package/hooks.js

@@ -1,113 +1,119 @@
-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, watch } 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 (current !== ref.current) {
+                if (container.active) {
+                    ref.current = current;
+                    forceUpdate({});
+                } else {
+                    watch(container, 'active', setValue);
+                }
+            }
+        };
+        // 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/include/brew-js/util/path.js

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

package/mixins/FlyoutMixin.d.ts

@@ -5,7 +5,7 @@ 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 {

package/mixins/FlyoutMixin.js

@@ -1,12 +1,11 @@
-import { defineAliasProperty, definePrototype, each, extend, kv, makeArray, randomId } from "../include/zeta-dom/util.js";
+import { defineAliasProperty, definePrototype, each, extend, makeArray } 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();
+const valueMap = new WeakMap();
 var flyoutMixinCounter = 0;
 
 export default function FlyoutMixin() {
@@ -49,7 +48,9 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
         });
     },
     open: function (value) {
-        return openFlyout(this.elements()[0], kv(varname, value));
+        var element = this.elements()[0];
+        valueMap.set(element, value);
+        return openFlyout(element);
     },
     close: function (value) {
         return closeFlyout(this.elements()[0], value);
@@ -58,7 +59,7 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
         var element = this.elements()[0];
         return this.onToggleState(function (opened) {
             if (opened) {
-                return callback(getVar(element, varname));
+                return callback(valueMap.get(element));
             }
         });
     },
@@ -73,7 +74,6 @@ 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/StatefulMixin.js

@@ -1,4 +1,4 @@
-import { createPrivateStore, definePrototype, each, inherit, randomId, values } from "../include/zeta-dom/util.js";
+import { createPrivateStore, definePrototype, each, extend, inherit, randomId, setAdd, values } from "../include/zeta-dom/util.js";
 import Mixin from "./Mixin.js";
 
 const _ = createPrivateStore();
@@ -16,6 +16,7 @@ definePrototype(MixinRefImpl, {
 export default function StatefulMixin() {
     Mixin.call(this);
     _(this, {
+        elements: new WeakSet(),
         states: {},
         prefix: '',
         counter: 0
@@ -46,8 +47,8 @@ definePrototype(StatefulMixin, Mixin, {
         const self = this;
         const state = self.state;
         return function (current) {
-            if (current && current !== state.element) {
-                state.element = current;
+            state.element = current;
+            if (current && setAdd(_(self).elements, current)) {
                 self.initElement(current, state);
             }
         };
@@ -67,11 +68,10 @@ definePrototype(StatefulMixin, Mixin, {
     clone: function () {
         const self = this;
         const clone = inherit(Object.getPrototypeOf(self), self);
-        _(clone, {
-            states: _(self).states,
+        _(clone, extend({}, _(self), {
             prefix: randomId() + '.',
             counter: 0
-        });
+        }));
         return clone;
     },
     dispose: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.2.3",
+  "version": "0.2.6",
   "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.11",
     "waterpipe": "^2.5.0",
     "zeta-dom": ">=0.2.3",
     "zeta-dom-react": ">=0.2.1"

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}.