brew-js-react 0.4.8 → 0.5.0

package/mixins/ScrollableMixin.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="jq-scrollable" />
 
 import ClassNameMixin from "./ClassNameMixin";
+import Mixin from "./Mixin";
 import StaticAttributeMixin from "./StaticAttributeMixin";
+import { useScrollableMixin } from "../mixin";
 
 export interface ScrollableMixinOptions {
     /**
@@ -39,6 +41,11 @@ export interface ScrollableMixinOptions {
     persistScroll?: boolean;
 }
 
+/**
+ * Enables scrollable plugin on the applied element.
+ *
+ * Mixin should be created using {@link useScrollableMixin} and applied to element by {@link Mixin.use}.
+ */
 export default class ScrollableMixin extends ClassNameMixin implements JQueryScrollable {
     /**
      * Gets a mixin object that when applied to descecant element

package/mixins/ScrollableMixin.js

@@ -1,11 +1,10 @@
-import { defineAliasProperty, defineHiddenProperty, definePrototype, each, extend } from "../include/zeta-dom/util.js";
+import { defineHiddenProperty, definePrototype, each, extend } from "../include/zeta-dom/util.js";
 import { getDirectiveComponent } from "../include/brew-js/directive.js";
 import { app } from "../app.js";
 import Mixin from "./Mixin.js";
 import ClassNameMixin from "./ClassNameMixin.js";
 
 const ScrollableMixinSuper = ClassNameMixin.prototype;
-const aliasProps = 'pageIndex scrolling'.split(' ');
 
 export default function ScrollableMixin() {
     var self = this;
@@ -36,6 +35,7 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
     },
     initElement: function (element, state) {
         var self = this;
+        ScrollableMixinSuper.initElement.call(self, element, state);
         self.onDispose(app.on(element, {
             scrollIndexChange: function (e) {
                 self.pageIndex = e.newIndex;
@@ -47,13 +47,6 @@ definePrototype(ScrollableMixin, ClassNameMixin, {
                 self.scrolling = false;
             }
         }, true));
-    },
-    clone: function () {
-        var mixin = ScrollableMixinSuper.clone.call(this);
-        each(aliasProps, function (i, v) {
-            defineAliasProperty(mixin, v, self);
-        });
-        return mixin;
     }
 });
 

package/mixins/StatefulMixin.d.ts

@@ -1,24 +1,72 @@
-import React from "react";
 import Mixin from "./Mixin";
 
-interface MixinState {
-    element: HTMLElement | null;
-    ref?: MixinRef;
+export interface MixinState {
+    /**
+     * Gets the element associated to this state object.
+     */
+    readonly element: HTMLElement;
+    /**
+     * Additional state.
+     */
+    [x: string]: any;
 }
 
-export interface MixinRef<T extends StatefulMixin = StatefulMixin> { }
+export interface MixinRef<T extends StatefulMixin = StatefulMixin> {
+    /**
+     * @private
+     */
+    getMixin(): T;
+}
 
 export default abstract class StatefulMixin<T extends MixinState = MixinState> extends Mixin {
+    /**
+     * Gets a {@link MixinRef} object that can be passed to child components.
+     */
     get ref(): MixinRef<typeof this>;
-    protected get state(): MixinState;
+    /**
+     * Gets a pending state object to store values before element is mounted.
+     *
+     * 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'>;
 
-    reset(): this;
-    next(): this;
-    getRef(): React.RefCallback<HTMLElement>;
+    /**
+     * Gets an array of mounted elements which this mixin has been applied.
+     */
     elements(): HTMLElement[];
+    /**
+     * Registers callback to clean up resources when the host component is unmounted.
+     * @param callback A callback.
+     */
     onDispose(callback: Zeta.UnregisterCallback): void;
 
+    /**
+     * Override this method to create state object with initial values.
+     */
     protected initState(): T;
+    /**
+     * Override this method to initialize resources when the element is first mounted, e.g. attach event listeners.
+     * @param element A DOM element.
+     * @param state Persisted state object associated with the element.
+     */
     protected initElement(element: HTMLElement, state: T): void;
+    /**
+     * Override this method to handle state changes.
+     * When overriden, new states are required to copied manually to the persisted state object.
+     * @param element A DOM element.
+     * @param state Persisted state object associated with the element.
+     * @param newState New states passed from {@link StatefulMixin.state}.
+     */
+    protected mergeState(element: HTMLElement, state: T, newState: Partial<T>): void;
+    /**
+     * Override this method to apply changes to mounted element.
+     * @param element A DOM element.
+     * @param state Persisted state object associated with the element.
+     */
+    protected onLayoutEffect(element: HTMLElement, state: T): void;
+    /**
+     * @deprecated This method is no longer used.
+     */
     protected clone(): this;
 }

package/mixins/StatefulMixin.js

@@ -1,4 +1,4 @@
-import { combineFn, createPrivateStore, definePrototype, each, extend, inherit, randomId, setAdd, values, watch } from "../include/zeta-dom/util.js";
+import { combineFn, createPrivateStore, definePrototype, extend, keys, map, pipe, watch } from "../include/zeta-dom/util.js";
 import Mixin from "./Mixin.js";
 
 const _ = createPrivateStore();
@@ -16,51 +16,53 @@ definePrototype(MixinRefImpl, {
 export default function StatefulMixin() {
     Mixin.call(this);
     _(this, {
-        elements: new WeakSet(),
+        elements: new Set(),
+        states: new WeakMap(),
         flush: watch(this, false),
-        dispose: [],
-        states: {},
-        prefix: '',
-        counter: 0
+        dispose: []
     });
 }
 
 definePrototype(StatefulMixin, Mixin, {
     get ref() {
-        const self = this;
-        const state = self.state;
-        self.next();
-        return state.ref || (state.ref = new MixinRefImpl(self.clone()));
+        const state = _(this);
+        return state.ref || (state.ref = new MixinRefImpl(this));
     },
     get state() {
-        const obj = _(this);
-        const key = obj.prefix + obj.counter;
-        return obj.states[key] || (obj.states[key] = this.initState());
+        return _(this).pending;
     },
     reset: function () {
-        _(this).counter = 0;
+        _(this).pending = {};
         return this;
     },
     next: function () {
-        _(this).counter++;
+        _(this).pending = {};
         return this;
     },
     getRef: function () {
-        const self = this;
-        const state = self.state;
+        var self = this;
+        var obj = _(self);
+        var newState = obj.pending;
+        var state;
         return function (current) {
-            state.element = current;
-            if (current && setAdd(_(self).elements, current)) {
-                self.initElement(current, state);
+            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);
+                } else if (keys(newState)[0]) {
+                    self.mergeState(current, state, newState);
+                }
+                self.onLayoutEffect(current, state);
+                obj.elements.add(current);
+            } else {
+                obj.elements.delete(state.element);
             }
         };
     },
     elements: function () {
-        return values(_(this).states).map(function (v) {
-            return v.element;
-        }).filter(function (v) {
-            return v;
-        });
+        return map(_(this).elements, pipe);
     },
     onDispose: function (callback) {
         _(this).dispose.push(callback);
@@ -70,23 +72,19 @@ definePrototype(StatefulMixin, Mixin, {
     },
     initElement: function (element, state) {
     },
+    mergeState: function (element, state, newState) {
+        extend(state, newState);
+    },
+    onLayoutEffect: function (element, state) {
+    },
     clone: function () {
-        const self = this;
-        const clone = inherit(Object.getPrototypeOf(self), self);
-        _(clone, extend({}, _(self), {
-            prefix: randomId() + '.',
-            counter: 0
-        }));
-        return clone;
+        return this;
     },
     dispose: function () {
         var state = _(this);
-        var states = state.states;
         combineFn(state.dispose.splice(0))();
         state.flush();
-        state.elements = new WeakSet();
-        each(states, function (i, v) {
-            delete states[i];
-        });
+        state.states = {};
+        state.pending = {};
     }
 });

package/mixins/UnmanagedClassNameMixin.d.ts

@@ -0,0 +1,18 @@
+import ClassNameMixin from "./ClassNameMixin"
+import Mixin from "./Mixin";
+import { useUnmanagedClassNameMixin } from "../mixin"
+
+/**
+ * Keeps track and preserves the presence of specified CSS classes on applied elements
+ * while the host component is re-rendered.
+ *
+ * Mixin should be created using {@link useUnmanagedClassNameMixin} and applied to element by {@link Mixin.use}.
+ */
+export default class UnmanagedClassNameMixin extends ClassNameMixin {
+    /**
+     * Memorizes which specified CSS class names are present on the element,
+     * and re-apply them in the next render.
+     * @param classes A list of CSS class names.
+     */
+    memorize(...classes: string[]): this;
+}

package/mixins/UnmanagedClassNameMixin.js

@@ -0,0 +1,13 @@
+import { definePrototype, makeArray } from "../include/zeta-dom/util.js";
+import ClassNameMixin from "./ClassNameMixin.js";
+
+export default function UnmanagedClassNameMixin() {
+    ClassNameMixin.call(this);
+}
+
+definePrototype(UnmanagedClassNameMixin, ClassNameMixin, {
+    memorize: function () {
+        this.classNames = makeArray(arguments);
+        return this;
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brew-js-react",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "description": "",
   "type": "module",
   "main": "index.js",

package/view.js

@@ -168,7 +168,7 @@ definePrototype(ViewContainer, React.Component, {
                 self.currentElement = element;
                 state.container = element;
                 promise.then(function () {
-                    animateIn(element, 'show');
+                    animateIn(element, 'show', '[brew-view]', true);
                     app.emit('pageenter', element, { pathname: app.path }, true);
                 });
                 notifyAsync(element, promise);
@@ -181,7 +181,7 @@ definePrototype(ViewContainer, React.Component, {
             });
             var view = React.createElement(StateContext.Provider, { key: routeMap.get(V).id, value: state },
                 React.createElement(ViewStateContainer, null,
-                    React.createElement('div', extend({}, self.props.rootProps, { ref: initElement }),
+                    React.createElement('div', extend({}, self.props.rootProps, { ref: initElement, 'brew-view': '' }),
                         React.createElement(ErrorBoundary, { onComponentLoaded, viewProps }))));
             extend(self, _(state), {
                 cancelPrevious: onComponentLoaded,