brew-js-react 0.1.0-beta

package/mixins/AnimateSequenceMixin.js

@@ -0,0 +1,29 @@
+import { definePrototype, extend } from "../include/zeta-dom/util.js";
+import AnimateMixin from "./AnimateMixin.js";
+import AnimateSequenceItemMixin from "./AnimateSequenceItemMixin.js";
+
+const AnimateSequenceMixinSuper = AnimateMixin.prototype;
+var animateSequenceMixinCounter = 0;
+
+export default function AnimateSequenceMixin() {
+    AnimateMixin.call(this);
+    this.className = 'brew-anim-' + (++animateSequenceMixinCounter);
+    this.item = new AnimateSequenceItemMixin(this.className);
+}
+
+definePrototype(AnimateSequenceMixin, AnimateMixin, {
+    reset: function () {
+        this.item.reset();
+        return AnimateSequenceMixinSuper.reset.call(this);
+    },
+    getCustomAttributes: function () {
+        return extend({}, AnimateSequenceMixinSuper.getCustomAttributes.call(this), {
+            'animate-sequence': '.' + this.className
+        });
+    },
+    clone: function () {
+        return extend(AnimateSequenceMixinSuper.clone.call(this), {
+            item: this.item.ref.getMixin()
+        });
+    }
+});

package/mixins/ClassNameMixin.d.ts

@@ -0,0 +1,12 @@
+import StatefulMixin from "./StatefulMixin";
+
+export interface ClassNameMixinState extends MixinState {
+    classNames: Record<string, boolean>;
+}
+
+export default class ClassNameMixin extends StatefulMixin {
+    constructor(classNames: string[] = []);
+
+    protected onClassNameUpdated(element: HTMLElement, prevState: Record<string, boolean>, state: Record<string, boolean>): void;
+}
+

package/mixins/ClassNameMixin.js

@@ -0,0 +1,41 @@
+import { definePrototype, each, equal, extend } from "../include/zeta-dom/util.js";
+import dom from "../include/zeta-dom/dom.js";
+import StatefulMixin from "./StatefulMixin.js";
+
+const ClassNameMixinSuper = StatefulMixin.prototype;
+
+export default function ClassNameMixin(classNames) {
+    StatefulMixin.call(this);
+    this.classNames = classNames || [];
+}
+
+definePrototype(ClassNameMixin, StatefulMixin, {
+    getClassNames: function () {
+        return [this.state.classNames];
+    },
+    initState: function () {
+        return {
+            element: null,
+            classNames: {}
+        };
+    },
+    initElement: function (element, state) {
+        var self = this;
+        dom.watchAttributes(element, ['class'], function (nodes) {
+            if (nodes.includes(element)) {
+                const prev = extend({}, state.classNames);
+                each(self.classNames, function (i, v) {
+                    state.classNames[v] = element.classList.contains(v);
+                });
+                if (!equal(prev, state.classNames)) {
+                    self.onClassNameUpdated(element, prev, state.classNames);
+                }
+            }
+        });
+    },
+    clone: function () {
+        return extend(ClassNameMixinSuper.clone.call(this), { classNames: this.classNames });
+    },
+    onClassNameUpdated: function (element, prevState, state) {
+    }
+});

package/mixins/FlyoutMixin.d.ts

@@ -0,0 +1,14 @@
+import ClassNameMixin from "./ClassNameMixin";
+import { AnimationEffect } from "./AnimateMixin";
+
+export default class FlyoutMixin extends ClassNameMixin {
+    readonly isFlyoutOpened: boolean;
+    readonly animating: boolean;
+    readonly visible: boolean;
+    readonly toggle: ClassNameMixin;
+
+    withEffects(...effects: AnimationEffect[]): this;
+    onOpen(callback: () => void): Zeta.UnregisterCallback;
+    onToggleState(callback: (state: boolean) => void): Zeta.UnregisterCallback;
+    onVisibilityChanged(callback: (state: boolean) => void): Zeta.UnregisterCallback;
+}

package/mixins/FlyoutMixin.js

@@ -0,0 +1,95 @@
+import { defineAliasProperty, definePrototype, each, extend, makeArray } from "../include/zeta-dom/util.js";
+import { app } from "../app.js";
+import ClassNameMixin from "./ClassNameMixin.js";
+
+const FlyoutMixinSuper = ClassNameMixin.prototype;
+var flyoutMixinCounter = 0;
+
+export default function FlyoutMixin() {
+    ClassNameMixin.call(this, ['open', 'closing', 'tweening-in', 'tweening-out']);
+    this.isFlyoutOpened = false;
+    this.animating = false;
+    this.visible = false;
+    this.toggle = new ClassNameMixin(['target-opened']);
+}
+
+definePrototype(FlyoutMixin, ClassNameMixin, {
+    reset: function () {
+        this.toggle.reset();
+        return FlyoutMixinSuper.reset.call(this);
+    },
+    next: function () {
+        this.effects = undefined;
+        return FlyoutMixinSuper.next.call(this);
+    },
+    withEffects: function () {
+        this.effects = makeArray(arguments);
+        return this;
+    },
+    getCustomAttributes: function () {
+        return extend({}, FlyoutMixinSuper.getCustomAttributes.call(this), {
+            'is-flyout': ''
+        }, this.effects && {
+            'animate-on': 'open',
+            'animate-in': this.effects.join(' '),
+            'animate-out': ''
+        });
+    },
+    onOpen: function (callback) {
+        return this.onToggleState(function (opened) {
+            if (opened) {
+                return callback();
+            }
+        });
+    },
+    onToggleState: function (callback) {
+        return this.watch('isFlyoutOpened', callback);
+    },
+    onVisibilityChanged: function (callback) {
+        return this.watch('visible', callback);
+    },
+    initElement: function (element, state) {
+        var self = this;
+        FlyoutMixinSuper.initElement.call(self, element, state);
+        if (!element.id) {
+            element.id = 'flyout-' + (++flyoutMixinCounter);
+        }
+        app.on(element, {
+            animationstart: function () {
+                self.animating = true;
+            },
+            animationcomplete: function () {
+                self.animating = false;
+            },
+        }, true);
+        setImmediate(function () {
+            each(self.toggle.elements(), function (i, v) {
+                v.setAttribute('toggle', '#' + element.id);
+            });
+        });
+    },
+    clone: function () {
+        var mixin = extend(FlyoutMixinSuper.clone.call(this), {
+            toggle: this.toggle.ref.getMixin()
+        });
+        defineAliasProperty(mixin, 'isFlyoutOpened', this);
+        return mixin;
+    },
+    onClassNameUpdated: function (element, prevState, state) {
+        var self = this;
+        var isAdded = function (v) {
+            return prevState[v] !== state[v] && state[v];
+        };
+        var isRemoved = function (v) {
+            return prevState[v] !== state[v] && !state[v];
+        };
+        if (isAdded('open')) {
+            self.isFlyoutOpened = true;
+            self.visible = true;
+        } else if (isAdded('closing') || isAdded('tweening-out')) {
+            self.isFlyoutOpened = false;
+        } else if (isRemoved('open')) {
+            self.visible = false;
+        }
+    }
+});

package/mixins/FocusStateMixin.d.ts

@@ -0,0 +1,3 @@
+import ClassNameMixin from "./ClassNameMixin";
+
+export default class FocusStateMixin extends ClassNameMixin { }

package/mixins/FocusStateMixin.js

@@ -0,0 +1,24 @@
+import { definePrototype } from "../include/zeta-dom/util.js";
+import { setClass } from "../include/zeta-dom/domUtil.js";
+import dom from "../include/zeta-dom/dom.js";
+import ClassNameMixin from "./ClassNameMixin.js";
+
+const FocusStateMixinSuper = ClassNameMixin.prototype;
+
+export default function FocusStateMixin() {
+    ClassNameMixin.call(this, ['focused']);
+}
+
+definePrototype(FocusStateMixin, ClassNameMixin, {
+    initElement: function (element, state) {
+        FocusStateMixinSuper.initElement.call(this, element, state);
+        dom.on(element, {
+            focusin: function () {
+                setClass(element, 'focused', true);
+            },
+            focusout: function () {
+                setClass(element, 'focused', false);
+            }
+        });
+    }
+});

package/mixins/LoadingStateMixin.d.ts

@@ -0,0 +1,3 @@
+import ClassNameMixin from "./ClassNameMixin";
+
+export default class LoadingStateMixin extends ClassNameMixin { }

package/mixins/LoadingStateMixin.js

@@ -0,0 +1,27 @@
+import { definePrototype } from "../include/zeta-dom/util.js";
+import { setClass } from "../include/zeta-dom/domUtil.js";
+import dom from "../include/zeta-dom/dom.js";
+import ClassNameMixin from "./ClassNameMixin.js";
+
+const LoadingStateMixinSuper = ClassNameMixin.prototype;
+
+export default function LoadingStateMixin() {
+    ClassNameMixin.call(this, ['loading']);
+}
+
+definePrototype(LoadingStateMixin, ClassNameMixin, {
+    initElement: function (element, state) {
+        LoadingStateMixinSuper.initElement.call(this, element, state);
+        dom.on(element, {
+            asyncStart: function () {
+                setClass(element, 'loading', true);
+            },
+            asyncEnd: function () {
+                setClass(element, 'loading', false);
+            },
+            cancelled: function () {
+                setClass(element, 'loading', false);
+            }
+        });
+    }
+});

package/mixins/Mixin.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import { ClassName, ClassNameProvider } from "zeta-dom-react";
+import StaticAttributeMixin from "./StaticAttributeMixin";
+
+interface MixinProps {
+    ref: React.RefCallback<Element>;
+    className: string;
+}
+
+export default abstract class Mixin implements ClassNameProvider {
+    static readonly scrollableTarget: StaticAttributeMixin;
+
+    static readonly use(ref: React.ForwardedRef<any>, ...args: (Mixin | string)[]): MixinProps;
+    static readonly use(ref: Mixin, ...args: (Mixin | string)[]): MixinProps;
+    static readonly use(...args: Mixin[]): MixinProps;
+
+    /**
+     * @private Internal use.
+     */
+    next(): this;
+    /**
+     * @private Internal use.
+     */
+    getRef(): React.RefCallback<Element>;
+    /**
+     * @private Internal use.
+     */
+    getClassNames(): ClassName[];
+    /**
+     * @private Internal use.
+     */
+    getCustomAttributes(): Zeta.Dictionary<string>;
+
+    /**
+     * Watches a property on the object.
+     * @param prop Property name.
+     * @param handler Callback to be fired and the property is changed.
+     * @param fireInit Optionally fire the handler immediately.
+     */
+    watch<P extends keyof this>(prop: P, handler?: (this: this, newValue: this[P], oldValue: this[P], prop: P, obj: this) => void, fireInit?: boolean): Zeta.UnregisterCallback;
+    /**
+     * Watches a property and resolves when the property is changed.
+     * @param prop Property name.
+     * @param handler Callback to be fired when the property is changed.
+     */
+    watchOnce<P extends keyof this>(prop: P, handler?: (this: this, newValue: this[P], oldValue: this[P], prop: P, obj: this) => void): Promise<this[P]>;
+}

package/mixins/Mixin.js

@@ -0,0 +1,61 @@
+import { classNames } from "zeta-dom-react";
+import { combineFn, define, definePrototype, each, extend, makeArray, noop, watchable } from "../include/zeta-dom/util.js";
+import StaticAttributeMixin from "./StaticAttributeMixin.js";
+
+export default function Mixin() {
+}
+
+definePrototype(Mixin, {
+    next: function () {
+    },
+    getRef: function () {
+        return noop;
+    },
+    getClassNames: function () {
+        return [];
+    },
+    getCustomAttributes: function () {
+        return {};
+    }
+});
+watchable(Mixin.prototype);
+
+define(Mixin, {
+    get scrollableTarget() {
+        return new StaticAttributeMixin({ 'scrollable-target': '' });
+    },
+    use: function () {
+        const args = makeArray(arguments);
+        const ref = args[0];
+        const props = {};
+        const mixins = args.filter(function (v) {
+            return v instanceof Mixin;
+        });
+        const refs = mixins.map(function (v) {
+            return v.getRef();
+        });
+        if (ref && !(ref instanceof Mixin)) {
+            if (typeof ref !== 'function') {
+                refs.push(function (v) {
+                    ref.current = v;
+                });
+            } else {
+                refs.push(ref);
+            }
+            args.shift();
+        } else if (!ref) {
+            args.shift();
+        }
+        each(mixins, function (i, v) {
+            extend(props, v.getCustomAttributes());
+        });
+        extend(props, {
+            ref: combineFn(refs),
+            className: classNames.apply(null, args)
+        });
+        each(mixins, function (i, v) {
+            v.next();
+        });
+        return props;
+    }
+});

package/mixins/ScrollableMixin.d.ts

@@ -0,0 +1,17 @@
+import ClassNameMixin from "./ClassNameMixin";
+import StaticAttributeMixin from "./StaticAttributeMixin";
+
+export interface ScrollableMixinOptions {
+    direction?: 'x-only' | 'y-only' | 'both';
+    handle?: 'auto' | 'scrollbar' | 'content';
+    paged?: 'always' | 'landscape' | 'portrait';
+    pagedItemSelector?: string;
+}
+
+export default class ScrollableMixin extends ClassNameMixin {
+    readonly target: StaticAttributeMixin;
+    readonly pageIndex: number;
+
+    withOptions(options?: ScrollableMixinOptions): this;
+    onPageIndexChanged(callback: (index: number) => void): Zeta.UnregisterCallback;
+}

package/mixins/ScrollableMixin.js

@@ -0,0 +1,46 @@
+import { defineAliasProperty, definePrototype, extend } from "../include/zeta-dom/util.js";
+import { app } from "../app.js";
+import Mixin from "./Mixin.js";
+import ClassNameMixin from "./ClassNameMixin.js";
+
+const ScrollableMixinSuper = ClassNameMixin.prototype;
+
+export default function ScrollableMixin() {
+    ClassNameMixin.call(this, ['scrollable-x', 'scrollable-x-l', 'scrollable-x-r', 'scrollable-y', 'scrollable-y-d', 'scrollable-y-u']);
+    this.target = Mixin.scrollableTarget;
+    this.pageIndex = 0;
+}
+
+definePrototype(ScrollableMixin, ClassNameMixin, {
+    withOptions: function (options) {
+        this.options = options;
+        return this;
+    },
+    getCustomAttributes: function () {
+        var options = this.options || {};
+        return extend({}, ScrollableMixinSuper.getCustomAttributes.call(this), {
+            'scrollable': [options.direction || 'both', options.handle || 'auto'].join(' '),
+        }, options.paged && {
+            'var': '{ pageIndex: 0 }',
+            'scroller-snap-page': options.paged,
+            'scroller-page': options.pagedItemSelector,
+            'scroller-state': 'pageIndex'
+        });
+    },
+    onPageIndexChanged: function (callback) {
+        return this.watch('pageIndex', callback);
+    },
+    initElement: function (element, state) {
+        var self = this;
+        app.on(element, 'statechange', function (e) {
+            if ('pageIndex' in e.newValues) {
+                extend(self, { pageIndex: e.newValues.pageIndex });
+            }
+        }, true);
+    },
+    clone: function () {
+        var mixin = ScrollableMixinSuper.clone.call(this);
+        defineAliasProperty(mixin, 'pageIndex', this);
+        return mixin;
+    }
+});

package/mixins/StatefulMixin.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import Mixin from "./Mixin";
+
+interface MixinState {
+    element: HTMLElement | null;
+    ref?: MixinRef;
+}
+
+export interface MixinRef<T extends StatefulMixin = StatefulMixin> { }
+
+export default abstract class StatefulMixin extends Mixin {
+    get ref(): MixinRef<typeof this>;
+    protected get state(): MixinState;
+
+    reset(): this;
+    next(): this;
+    getRef(): React.RefCallback<HTMLElement>;
+    elements(): HTMLElement[];
+
+    protected initState(): MixinState;
+    protected initElement(element: HTMLElement, state: MixinState): void;
+    protected clone(): this;
+}

package/mixins/StatefulMixin.js

@@ -0,0 +1,71 @@
+import { definePrototype, inherit, randomId, values } from "../include/zeta-dom/util.js";
+import Mixin from "./Mixin.js";
+
+function MixinRefImpl(mixin) {
+    this.mixin = mixin;
+}
+
+definePrototype(MixinRefImpl, {
+    getMixin: function () {
+        return this.mixin;
+    }
+});
+
+export default function StatefulMixin() {
+    Mixin.call(this);
+    this.states = {};
+    this.prefix = '';
+    this.counter = 0;
+}
+
+definePrototype(StatefulMixin, Mixin, {
+    get ref() {
+        const state = this.state;
+        this.next();
+        return state.ref || (state.ref = new MixinRefImpl(this.clone()));
+    },
+    get state() {
+        const self = this;
+        const key = self.prefix + self.counter;
+        return self.states[key] || (self.states[key] = self.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 !== state.element) {
+                state.element = current;
+                if (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 () {
+        return inherit(Object.getPrototypeOf(this), {
+            states: this.states,
+            prefix: randomId() + '.',
+            counter: 0
+        });
+    }
+});

package/mixins/StaticAttributeMixin.d.ts

@@ -0,0 +1,5 @@
+import Mixin from "./Mixin";
+
+export default class StaticAttributeMixin extends Mixin {
+    constructor(attributes: Record<string, string> = {});
+}

package/mixins/StaticAttributeMixin.js

@@ -0,0 +1,13 @@
+import { definePrototype, extend } from "../include/zeta-dom/util.js";
+import Mixin from "./Mixin.js";
+
+export default function StaticAttributeMixin(attributes) {
+    Mixin.call(this);
+    this.attributes = attributes || {};
+}
+
+definePrototype(StaticAttributeMixin, Mixin, {
+    getCustomAttributes: function () {
+        return extend({}, this.attributes);
+    }
+});

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "brew-js-react",
+  "version": "0.1.0-beta",
+  "description": "",
+  "type": "module",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "webpack",
+    "version": "npm run build && git add -A dist",
+    "release": "node ./npm-publish.cjs"
+  },
+  "author": "misonou",
+  "license": "ISC",
+  "repository": "github:misonou/brew-react",
+  "dependencies": {
+    "brew-js": "^0.2.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "zeta-dom": "^0.1.13",
+    "zeta-dom-react": "^0.1.0-beta"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
+    "@jest/globals": "^26.6.2",
+    "@types/jest": "^26.0.15",
+    "babel-loader": "^8.2.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "cross-env": "^7.0.2",
+    "jest": "^27.0.6",
+    "ncp": "^2.0.0",
+    "webpack": "^5.3.0",
+    "webpack-cli": "^4.1.0"
+  },
+  "keywords": [
+    "html",
+    "dom",
+    "ui",
+    "router",
+    "render",
+    "scaffolding",
+    "react",
+    "spa"
+  ]
+}

package/view.d.ts

@@ -0,0 +1,33 @@
+export type ViewComponentRootProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export type ViewComponent<P> = React.FC<P>;
+
+/**
+ * Registers view component with specific route paramters.
+ * Route parameters will be matched against current route state by {@link renderView}.
+ * @param factory A callback that returns a promise resolving a React component, typically using async `import`.
+ * @param params A dictionary containing route parameters.
+ */
+export function registerView<P>(factory: () => Promise<{ default: React.ComponentType<P> }>, params: Zeta.Dictionary<string>): ViewComponent<P>;
+
+/**
+ * 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}.
+ */
+export function renderView(...args: ViewComponent<any>[]): JSX.Element;
+
+/**
+ * Renders view by matching current route state against registered route parameters of each supplied views.
+ * @param props Optional parameters passed to the root element rendered by the function.
+ * @param args A list of view components created by {@link registerView}.
+ */
+export function renderView(props: ViewComponentRootProps, ...args: ViewComponent<any>[]): JSX.Element;
+
+/**
+ * Returns pathname that will render the specified view.
+ * The pathname is resolved using route parameters given to {@link registerView},
+ * current route parameters, as well as any supplemeneted route parameters
+ * against registered routes in {@link Brew.RouterOptions.routes}.
+ * @param view A view component created by {@link registerView}.
+ * @param params Extra route parameters that supplements or overrides current route parameters.
+ */
+export function linkTo(view: ViewComponent<any>, params?: Zeta.Dictionary<string>): string;