brew-js-react 0.5.7 → 0.6.1

package/hooks.js

@@ -1,5 +1,5 @@
 import { createElement, useEffect, useMemo, useRef, useState } from "react";
-import { ViewStateProvider, useMemoizedFunction, useObservableProperty, useUpdateTrigger } from "zeta-dom-react";
+import { ViewStateProvider, useMemoizedFunction, useObservableProperty, useValueTrigger } from "zeta-dom-react";
 import { catchAsync, definePrototype, delay, each, equal, extend, freeze, isFunction, isPlainObject, keys, kv, mapObject, throwNotFunction } from "zeta-dom/util";
 import { ZetaEventContainer } from "zeta-dom/events";
 import { getQueryParam, setQueryParam } from "brew-js/util/common";
@@ -84,20 +84,15 @@ export function useRouteParam(name, defaultValue) {
     const container = useViewContext();
     const params = container.page.params;
     const value = params[name] || '';
-    const ref = useRef(value);
-    const forceUpdate = useUpdateTrigger();
+    const notifyChange = useValueTrigger(value);
     useEffect(function () {
         var setValue = function () {
-            var current = container.page.params[name] || '';
-            if (current !== ref.current) {
-                forceUpdate();
-            }
+            notifyChange(container.page.params[name] || '');
         };
         // route parameter might be changed after state initialization and before useEffect hook is called
         setValue();
         return container.on('pagechange', setValue);
     }, [name]);
-    ref.current = value;
     if (defaultValue && container.active && (!value || (name === 'remainingSegments' && value === '/'))) {
         app.navigate(app.route.getPath(extend({}, params, kv(name, defaultValue))), true);
     }
@@ -129,22 +124,20 @@ export function useQueryParam(key, value, snapshotOnUpdate) {
     }
     var container = useViewContext();
     var getParams = function () {
-        return mapObject(key === false ? value : kv(key, value), function (v, i) {
+        return freeze(mapObject(key === false ? value : kv(key, value), function (v, i) {
             return getQueryParam(i, app.path) || v || '';
-        });
+        }));
     };
-    var state = useState([]);
+    var ref = useRef({});
     useMemo(function () {
-        state[0].splice(0, 2, getParams());
+        ref.current = getParams();
     }, [key]);
-    var current = state[0][0];
-    var trackChanges = function (values) {
-        if (!equal(values, current)) {
-            extend(current, values);
-            state[1]([current]);
-        }
-    };
+    var current = ref.current;
+    var notifyChange = useValueTrigger(current, function (current, params) {
+        return equal(current, params) || !(ref.current = params);
+    });
     var setParams = useMemoizedFunction(function (values) {
+        var current = ref.current;
         if (key !== false) {
             values = kv(key, isFunction(values) ? values(current[key]) : values);
         } else if (isFunction(values)) {
@@ -159,19 +152,19 @@ export function useQueryParam(key, value, snapshotOnUpdate) {
                 if (snapshotOnUpdate) {
                     app.snapshot();
                 }
-                catchAsync(app.navigate(search + url.hash, true));
-                trackChanges(getParams());
+                catchAsync(app.navigate((search || '?') + url.hash, true));
+                notifyChange(getParams());
             }
         }
     });
     useEffect(function () {
         return app.watch('path', function () {
             if (container.active) {
-                trackChanges(getParams());
+                notifyChange(getParams());
             }
         });
     }, [key]);
-    return [key !== false ? current[key] : (state[0][1] || (state[0][1] = freeze(extend({}, current)))), setParams];
+    return [key !== false ? current[key] : current, setParams];
 }
 
 export function ViewStateContainer(props) {

package/mixin.d.ts

@@ -56,7 +56,7 @@ export function useScrollIntoViewMixin(): ScrollIntoViewMixin;
  * Returns a mixin that provides methods controlling the applied element as a flyout.
  * @param options A dictionary specifying options.
  */
-export function useFlyoutMixin(options?: FlyoutMixinOptions): FlyoutMixin;
+export function useFlyoutMixin<S = any, R = any>(options?: FlyoutMixinOptions): FlyoutMixin<S, R>;
 
 /**
  * Returns a mixin that enables intro and/or outro animation for applied elements.

package/mixins/AnimateSequenceMixin.js

@@ -31,9 +31,9 @@ definePrototype(AnimateSequenceMixin, AnimateMixin, {
         var self = this;
         AnimateSequenceMixinSuper.initElement.call(self, element, state);
         if (self.selector) {
-            self.onDispose(watchElements(element, self.selector, function (addedNodes) {
+            state.onDispose(watchElements(element, self.selector, function (addedNodes) {
                 $(addedNodes).attr('is-animate-sequence', '');
-            }));
+            }).dispose);
         }
     }
 });

package/mixins/ClassNameMixin.js

@@ -21,18 +21,13 @@ export default function ClassNameMixin(classNames) {
 }
 
 definePrototype(ClassNameMixin, StatefulMixin, {
-    initState: function () {
-        return {
-            element: null,
-            classNames: fill(this.classNames, false)
-        };
-    },
     initElement: function (element, state) {
         var self = this;
+        state.classNames = fill(self.classNames, false);
         checkState(self, element, state);
-        watchOwnAttributes(element, 'class', function () {
+        state.onDispose(watchOwnAttributes(element, 'class', function () {
             checkState(self, element, state, true);
-        });
+        }).dispose);
     },
     onLayoutEffect: function (element, state) {
         setClass(element, state.classNames);

package/mixins/FlyoutMixin.d.ts

@@ -4,6 +4,8 @@ import Mixin from "./Mixin";
 import { AnimationEffect } from "./AnimateMixin";
 import { useFlyoutMixin } from "../mixin";
 
+export type HintedType<T> = T | {} | number | string | boolean | symbol | bigint | null | undefined;
+
 export interface FlyoutMixinOptions {
     /**
      * Whether flyout is modal.
@@ -34,7 +36,11 @@ export interface FlyoutMixinOptions {
  *
  * Mixin should be created using {@link useFlyoutMixin} and applied to element by {@link Mixin.use}.
  */
-export default class FlyoutMixin extends ClassNameMixin {
+export default class FlyoutMixin<S = any, R = any> extends ClassNameMixin {
+    /**
+     * Gets the flyout element.
+     */
+    readonly element: Element | null;
     /**
      * Gets whether the flyout is open.
      */
@@ -52,7 +58,7 @@ export default class FlyoutMixin extends ClassNameMixin {
      * Gets a {@link FlyoutToggleMixin} object that when applied to an element,
      * clicking that element will toggle the flyout.
      */
-    readonly toggle: FlyoutToggleMixin;
+    readonly toggle: FlyoutToggleMixin<S, R>;
     /**
      * Whether flyout content, or what element, by specifying CSS selector, will be initially focused.
      * Default is `true` if source element is not an text input element.
@@ -73,7 +79,7 @@ export default class FlyoutMixin extends ClassNameMixin {
      * Adds a listener to handle the opening of the flyout.
      * @param callback Callback to be called, receiving value passed to {@link FlyoutMixin.open}.
      */
-    onOpen(callback: (state: any) => void): Zeta.UnregisterCallback;
+    onOpen(callback: (state: HintedType<S>) => void): Zeta.UnregisterCallback;
     /**
      * Adds a listener to monitor the opening and closing of the flyout.
      * It differs from {@link FlyoutMixin.onVisibilityChanged} that the callback is called immediately when the flyout is being closed.
@@ -92,17 +98,24 @@ export default class FlyoutMixin extends ClassNameMixin {
      * @param source Source element that triggered the flyout.
      * @returns A promise that resolves when the flyout is being closed.
      */
-    open(state?: any, source?: Element): Promise<any>;
+    open(state?: S, source?: Element): Promise<HintedType<R>>;
     /**
      * Closes the flyout.
      * @param state Value to be sent to the promise returned by {@link FlyoutMixin.open}.
      * @returns A promise that resolves after closing animation completes.
      */
-    close(state?: any): Promise<void>;
+    close(state?: R): Promise<void>;
+    /**
+     * Toggles the flyout.
+     * @param source Source element which triggered the flyout.
+     * @returns A promise that resolves when the flyout is being closed.
+     */
+    toggleSelf(source?: Element): Promise<HintedType<R>>;
     /**
      * Toggles the flyout.
+     * @param flag Whether the flyout should be open or closed.
      * @param source Source element which triggered the flyout.
      * @returns A promise that resolves when the flyout is being closed.
      */
-    toggleSelf(source?: Element): Promise<any>;
+    toggleSelf(flag: boolean, source?: Element): Promise<HintedType<R>>;
 }

package/mixins/FlyoutMixin.js

@@ -1,5 +1,5 @@
-import { definePrototype, extend, makeArray, pick } from "zeta-dom/util";
-import { closeFlyout, openFlyout, toggleFlyout } from "brew-js/domAction";
+import { definePrototype, extend, makeArray, pick, resolve, throws } from "zeta-dom/util";
+import { closeFlyout, isFlyoutOpen, openFlyout, toggleFlyout } from "brew-js/domAction";
 import { app } from "../app.js";
 import ClassNameMixin from "./ClassNameMixin.js";
 import FlyoutToggleMixin from "./FlyoutToggleMixin.js";
@@ -7,6 +7,14 @@ import FlyoutToggleMixin from "./FlyoutToggleMixin.js";
 const FlyoutMixinSuper = ClassNameMixin.prototype;
 const valueMap = new WeakMap();
 
+function toggleSelf(self, flag, value, source) {
+    if (!flag && !isFlyoutOpen(self.element)) {
+        return resolve();
+    }
+    var options = self.getOptions();
+    return flag ? openFlyout(self.element, value, source, options) : toggleFlyout(self.element, source, options);
+}
+
 export default function FlyoutMixin() {
     var self = this;
     ClassNameMixin.call(self, ['open', 'closing', 'visible', 'tweening-in', 'tweening-out']);
@@ -25,6 +33,9 @@ export default function FlyoutMixin() {
 }
 
 definePrototype(FlyoutMixin, ClassNameMixin, {
+    get element() {
+        return this.elements()[0] || null;
+    },
     getOptions: function () {
         var self = this;
         var options = pick(self, ['closeOnBlur']);
@@ -57,19 +68,22 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
         });
     },
     open: function (value, source) {
-        return openFlyout(this.elements()[0], value, source, this.getOptions());
+        return toggleSelf(this, true, value, source);
     },
     close: function (value) {
-        return closeFlyout(this.elements()[0], value);
+        return closeFlyout(this.element, value);
     },
-    toggleSelf: function (source) {
-        return toggleFlyout(this.elements()[0], source, this.getOptions());
+    toggleSelf: function (flag, source) {
+        if (typeof flag !== 'boolean') {
+            source = flag;
+            flag = !isFlyoutOpen(this.element);
+        }
+        return toggleSelf(this, flag, undefined, source);
     },
     onOpen: function (callback) {
-        var element = this.elements()[0];
         return this.onToggleState(function (opened) {
             if (opened) {
-                return callback(valueMap.get(element));
+                callback(valueMap.get(this.element));
             }
         });
     },
@@ -81,8 +95,11 @@ definePrototype(FlyoutMixin, ClassNameMixin, {
     },
     initElement: function (element, state) {
         var self = this;
+        if (self.elements()[1]) {
+            throws('FlyoutMixin only supports single element');
+        }
         FlyoutMixinSuper.initElement.call(self, element, state);
-        self.onDispose(app.on(element, {
+        state.onDispose(app.on(element, {
             flyoutshow: function (e) {
                 valueMap.set(element, e.data);
                 self.isFlyoutOpened = true;

package/mixins/FlyoutToggleMixin.d.ts

@@ -1,12 +1,12 @@
 import ClassNameMixin from "./ClassNameMixin";
-import FlyoutMixin from "./FlyoutMixin";
+import FlyoutMixin, { HintedType } from "./FlyoutMixin";
 
 /**
  * Enables applied element as toggle buttons for the associated flyout.
  *
  * Instances of this mixin is exposed by {@link FlyoutMixin.toggle}.
  */
-export default class FlyoutToggleMixin extends ClassNameMixin {
+export default class FlyoutToggleMixin<S = any, R = any> extends ClassNameMixin {
     /**
      * Specifies the condition on when the flyout should toggle. It can be either:
      *
@@ -24,17 +24,24 @@ export default class FlyoutToggleMixin extends ClassNameMixin {
      * @param source Source element that triggered the flyout.
      * @returns A promise that resolves when the flyout is being closed.
      */
-    open(state?: any, source?: Element): Promise<any>;
+    open(state?: S, source?: Element): Promise<HintedType<R>>;
     /**
      * Closes the associated flyout.
      * @param state Value to be sent to the promise returned by {@link FlyoutMixin.open}.
      * @returns A promise that resolves after closing animation completes.
      */
-    close(state?: any): Promise<void>;
+    close(state?: R): Promise<void>;
     /**
      * Toggles the associated flyout.
      * @param source Source element which triggered the flyout.
      * @returns A promise that resolves when the flyout is being closed.
      */
-    toggle(source?: Element): Promise<any>;
+    toggle(source?: Element): Promise<HintedType<R>>;
+    /**
+     * Toggles the associated flyout.
+     * @param flag Whether the flyout should be open or closed.
+     * @param source Source element which triggered the flyout.
+     * @returns A promise that resolves when the flyout is being closed.
+     */
+    toggle(flag: boolean, source?: Element): Promise<HintedType<R>>;
 }

package/mixins/FlyoutToggleMixin.js

@@ -26,13 +26,13 @@ definePrototype(FlyoutToggleMixin, ClassNameMixin, {
     close: function (value) {
         return this.flyoutMixin.close(value);
     },
-    toggle: function (source) {
-        return this.flyoutMixin.toggleSelf(source);
+    toggle: function (flag, source) {
+        return this.flyoutMixin.toggleSelf(flag, source);
     },
     initElement: function (element, state) {
         var self = this;
         FlyoutToggleMixinSuper.initElement.call(self, element, state);
-        self.onDispose(dom.on(element, {
+        state.onDispose(dom.on(element, {
             focusin: function () {
                 triggerFlyoutAction(self, state, 'focus', self.open, [null, dom.activeElement]);
             },

package/mixins/FocusStateMixin.js

@@ -23,7 +23,7 @@ definePrototype(FocusStateMixin, StatefulMixin, {
                 callback(arg || target);
             }
         };
-        this.onDispose(dom.on(element, {
+        state.onDispose(dom.on(element, {
             focusin: function (e) {
                 state.focused = e.source;
                 setClass(element, 'focused', e.source);

package/mixins/LoadingStateMixin.js

@@ -16,7 +16,7 @@ definePrototype(LoadingStateMixin, ClassNameMixin, {
         var self = this;
         LoadingStateMixinSuper.initElement.call(self, element, state);
         getDirectiveComponent(element).enableLoadingClass = true;
-        self.onDispose(subscribeAsync(element, function (loading) {
+        state.onDispose(subscribeAsync(element, function (loading) {
             self.loading = loading || !!any(self.elements(), function (v) {
                 return v !== element && getClass(v, 'loading') === true;
             });

package/mixins/ScrollableMixin.d.ts

@@ -52,6 +52,14 @@ export default class ScrollableMixin extends ClassNameMixin implements JQueryScr
      * the element will act as content to be scrolled.
      */
     readonly target: StaticAttributeMixin;
+    /**
+     * Gets the element with scrollable plugin enabled.
+     */
+    readonly element: Element | null;
+    /**
+     * Gets the element which its scrolling position is currently controlled.
+     */
+    readonly contentElement: Element | null;
     /**
      * Gets the index of the currently visible element matched by {@link ScrollableMixinOptions.pagedItemSelector} options.
      */

package/mixins/ScrollableMixin.js

@@ -1,4 +1,4 @@
-import { defineHiddenProperty, definePrototype, each, extend } from "zeta-dom/util";
+import { defineHiddenProperty, definePrototype, each, extend, throws } from "zeta-dom/util";
 import { getDirectiveComponent } from "brew-js/directive";
 import { app } from "../app.js";
 import Mixin from "./Mixin.js";
@@ -15,6 +15,13 @@ export default function ScrollableMixin() {
 }
 
 definePrototype(ScrollableMixin, ClassNameMixin, {
+    get element() {
+        return this.elements()[0] || null;
+    },
+    get contentElement() {
+        var element = this.element;
+        return element && getDirectiveComponent(element).scrollable.scrollTarget;
+    },
     withOptions: function (options) {
         this.options = options;
         return this;
@@ -35,8 +42,11 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
     },
     initElement: function (element, state) {
         var self = this;
+        if (self.elements()[1]) {
+            throws('ScrollableMixin only supports single element');
+        }
         ScrollableMixinSuper.initElement.call(self, element, state);
-        self.onDispose(app.on(element, {
+        state.onDispose(app.on(element, {
             scrollIndexChange: function (e) {
                 self.pageIndex = e.newIndex;
             },
@@ -52,7 +62,7 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
 
 each('destroy enable disable setOptions setStickyPosition refresh scrollPadding stop scrollLeft scrollTop scrollBy scrollTo scrollByPage scrollToPage scrollToElement', function (i, v) {
     defineHiddenProperty(ScrollableMixin.prototype, v, function () {
-        var obj = getDirectiveComponent(this.elements()[0]);
+        var obj = getDirectiveComponent(this.element);
         return obj.scrollable[v].apply(null, arguments);
     });
 });

package/mixins/StatefulMixin.d.ts

@@ -9,6 +9,12 @@ export interface MixinState {
      * Additional state.
      */
     [x: string]: any;
+
+    /**
+     * Registers callback to clean up resources when the element is unmounted.
+     * @param callback A callback.
+     */
+    onDispose(callback: Zeta.UnregisterCallback): void;
 }
 
 export interface MixinRef<T extends StatefulMixin = StatefulMixin> {
@@ -29,7 +35,7 @@ export default abstract class StatefulMixin<T extends MixinState = MixinState> e
      * By default, existing values on the actual state object will be overwritten in subsequent update.
      * To handle changes, overrides the {@link StatefulMixin.mergeState} method.
      */
-    protected get state(): Exclude<Partial<T>, 'element'>;
+    protected get state(): Exclude<Partial<T>, 'element' | 'onDispose'>;
 
     /**
      * Gets an array of mounted elements which this mixin has been applied.
@@ -37,12 +43,14 @@ export default abstract class StatefulMixin<T extends MixinState = MixinState> e
     elements(): HTMLElement[];
     /**
      * Registers callback to clean up resources when the host component is unmounted.
+     * For individual element, use {@link MixinState.onDispose}.
      * @param callback A callback.
      */
     onDispose(callback: Zeta.UnregisterCallback): void;
 
     /**
      * Override this method to create state object with initial values.
+     * @deprecated Initialize state in {@link StatefulMixin.initElement} instead.
      */
     protected initState(): T;
     /**

package/mixins/StatefulMixin.js

@@ -1,7 +1,26 @@
-import { combineFn, createPrivateStore, definePrototype, extend, keys, map, pipe, watch } from "zeta-dom/util";
+import { arrRemove, combineFn, createPrivateStore, definePrototype, each, extend, keys, setImmediateOnce, throwNotFunction, watch } from "zeta-dom/util";
 import Mixin from "./Mixin.js";
 
 const _ = createPrivateStore();
+const unmounted = new Set();
+
+function disposeUnmountedStates() {
+    each(unmounted, function (i, v) {
+        combineFn(_(v).splice(0))();
+    });
+    unmounted.clear();
+}
+
+function MixinState(parent, element) {
+    _(this, [parent.delete.bind(parent, element)]);
+    parent.set(element, this);
+}
+
+definePrototype(MixinState, {
+    onDispose: function (callback) {
+        _(this).push(throwNotFunction(callback));
+    }
+});
 
 function MixinRefImpl(mixin) {
     this.mixin = mixin;
@@ -17,8 +36,8 @@ export default function StatefulMixin() {
     Mixin.call(this);
     _(this, {
         pending: {},
-        elements: new Set(),
-        states: new WeakMap(),
+        elements: [],
+        states: new Map(),
         flush: watch(this, false),
         dispose: []
     });
@@ -44,34 +63,35 @@ definePrototype(StatefulMixin, Mixin, {
         var self = this;
         var obj = _(self);
         var newState = obj.pending;
-        var state;
+        var element, state;
         return function (current) {
             if (current) {
-                state = obj.states.get(current) || extend(self.initState(), newState);
-                if (state.element !== current) {
-                    state.element = current;
-                    self.initElement(current, state);
-                    obj.states.set(current, state);
+                element = current;
+                state = obj.states.get(element) || new MixinState(obj.states, element);
+                obj.elements.push(element);
+                if (!state.element) {
+                    self.initElement(element, extend(state, self.initState(), newState, { element }));
                 } else if (keys(newState)[0]) {
-                    self.mergeState(current, state, newState);
+                    self.mergeState(element, state, newState);
                 }
-                self.onLayoutEffect(current, state);
-                obj.elements.add(current);
+                self.onLayoutEffect(element, state);
+                unmounted.delete(state);
             } else if (state) {
-                var prev = state.element;
-                self.onBeforeUpdate(prev, state);
-                obj.elements.delete(prev);
+                unmounted.add(state);
+                self.onBeforeUpdate(element, state);
+                arrRemove(obj.elements, element);
             }
+            setImmediateOnce(disposeUnmountedStates);
         };
     },
     elements: function () {
-        return map(_(this).elements, pipe);
+        return _(this).elements.slice();
     },
     onDispose: function (callback) {
         _(this).dispose.push(callback);
     },
     initState: function () {
-        return { element: null };
+        return {};
     },
     initElement: function (element, state) {
     },
@@ -87,9 +107,12 @@ definePrototype(StatefulMixin, Mixin, {
     },
     dispose: function () {
         var state = _(this);
+        each(state.states, function (i, v) {
+            unmounted.add(v);
+        });
+        setImmediateOnce(disposeUnmountedStates);
         combineFn(state.dispose.splice(0))();
         state.flush();
-        state.states = {};
         state.pending = {};
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.5.7",
+  "version": "0.6.1",
   "description": "",
   "type": "module",
   "main": "index.js",
@@ -15,8 +15,8 @@
     "@misonou/react-dom-client": "^1.1.1",
     "brew-js": ">=0.6.5",
     "waterpipe": "^2.5.0",
-    "zeta-dom": ">=0.4.10",
-    "zeta-dom-react": ">=0.4.14"
+    "zeta-dom": ">=0.5.1",
+    "zeta-dom-react": ">=0.5.6"
   },
   "peerDependencies": {
     "react": ">=16.8.0",