brew-js-react 0.1.0-beta → 0.1.3

package/mixin.js

@@ -4,46 +4,30 @@ import AnimateMixin from "./mixins/AnimateMixin.js";
 import AnimateSequenceItemMixin from "./mixins/AnimateSequenceItemMixin.js";
 import AnimateSequenceMixin from "./mixins/AnimateSequenceMixin.js";
 import ClassNameMixin from "./mixins/ClassNameMixin.js";
+import ErrorHandlerMixin from "./mixins/ErrorHandlerMixin.js";
 import FlyoutMixin from "./mixins/FlyoutMixin.js";
 import FocusStateMixin from "./mixins/FocusStateMixin.js";
 import LoadingStateMixin from "./mixins/LoadingStateMixin.js";
 import StatefulMixin from "./mixins/StatefulMixin.js";
 import ScrollableMixin from "./mixins/ScrollableMixin.js";
 
-export function useScrollableMixin(options) {
-    return useState(function () {
-        return new ScrollableMixin();
-    })[0].reset().withOptions(options);
+function createUseFunction(ctor) {
+    return function () {
+        return useState(function () {
+            return new ctor();
+        })[0].reset();
+    };
 }
 
-export function useFlyoutMixin() {
-    return useState(function () {
-        return new FlyoutMixin();
-    })[0].reset();
-}
+export const useAnimateMixin = createUseFunction(AnimateMixin);
+export const useAnimateSequenceMixin = createUseFunction(AnimateSequenceMixin);
+export const useErrorHandlerMixin = createUseFunction(ErrorHandlerMixin);
+export const useFlyoutMixin = createUseFunction(FlyoutMixin);
+export const useFocusStateMixin = createUseFunction(FocusStateMixin);
+export const useLoadingStateMixin = createUseFunction(LoadingStateMixin);
 
-export function useAnimateMixin() {
-    return useState(function () {
-        return new AnimateMixin();
-    })[0].reset();
-}
-
-export function useAnimateSequenceMixin() {
-    return useState(function () {
-        return new AnimateSequenceMixin();
-    })[0].reset();
-}
-
-export function useFocusStateMixin() {
-    return useState(function () {
-        return new FocusStateMixin();
-    })[0].reset();
-}
-
-export function useLoadingStateMixin() {
-    return useState(() => {
-        return new LoadingStateMixin();
-    })[0].reset();
+export function useScrollableMixin(options) {
+    return createUseFunction(ScrollableMixin)().withOptions(options);
 }
 
 export function useMixinRef(mixin) {
@@ -56,6 +40,7 @@ export {
     AnimateSequenceItemMixin,
     AnimateSequenceMixin,
     ClassNameMixin,
+    ErrorHandlerMixin,
     FlyoutMixin,
     FocusStateMixin,
     LoadingStateMixin,

package/mixins/ErrorHandlerMixin.d.ts

@@ -0,0 +1,34 @@
+import dom from "../include/zeta-dom/dom";
+import StatefulMixin from "./StatefulMixin";
+
+export default class ErrorHandlerMixin extends StatefulMixin {
+    /**
+     * Catches errors from promises registered to descandant elements by {@link dom.lock}.
+     * Unfiltered handlers are called after filtered handlers, registered by other overloads, regardless of order.
+     *
+     * If handler returns a value other than `undefined`, including promises resolving to whatever values,
+     * the error is marked as handled and no further handlers are called nor will be propagated up the DOM tree.
+     * @param handler Callback to be invoked.
+     */
+    catch(handler: (e: any) => any): Zeta.UnregisterCallback;
+
+    /**
+     * Catches errors with property `code` matching the specified code, from promises registered to descandant elements by {@link dom.lock}.
+     *
+     * If handler returns a value other than `undefined`, including promises resolving to whatever values,
+     * the error is marked as handled and no further handlers are called nor will be propagated up the DOM tree.
+     * @param code Value to be matched against.
+     * @param handler Callback to be invoked when the criteria matches.
+     */
+    catch(code: string, handler: (e: Error) => any): Zeta.UnregisterCallback;
+
+    /**
+     * Catches errors that are instances of the specified error type, from promises registered to descandant elements by {@link dom.lock}.
+     *
+     * If handler returns a value other than `undefined`, including promises resolving to whatever values,
+     * the error is marked as handled and no further handlers are called nor will be propagated up the DOM tree.
+     * @param type Constructor of a specific error type.
+     * @param handler Callback to be invoked when the criteria matches.
+     */
+    catch<T extends Error>(type: typeof T, handler: (e: T) => any): Zeta.UnregisterCallback;
+}

package/mixins/ErrorHandlerMixin.js

@@ -0,0 +1,40 @@
+import dom from "../include/zeta-dom/dom.js";
+import { ZetaEventContainer } from "../include/zeta-dom/events.js";
+import { definePrototype, is, isFunction } from "../include/zeta-dom/util.js";
+import StatefulMixin from "./StatefulMixin.js";
+
+const ErrorHandlerMixinSuper = StatefulMixin.prototype;
+const emitter = new ZetaEventContainer();
+
+function isErrorMatched(filter, error) {
+    if (isFunction(filter)) {
+        return is(error, filter);
+    }
+    return error && error.code === filter;
+}
+
+export default function ErrorHandlerMixin() {
+    StatefulMixin.call(this);
+}
+
+definePrototype(ErrorHandlerMixin, StatefulMixin, {
+    catch: function (filter, callback) {
+        if (!callback) {
+            callback = filter;
+            filter = null;
+        }
+        return emitter.add(this, filter ? 'error' : 'default', function (e) {
+            if (!filter || isErrorMatched(filter, e.error)) {
+                return callback(e.error);
+            }
+        });
+    },
+    initElement: function (element, state) {
+        var self = this;
+        ErrorHandlerMixinSuper.initElement.call(self, element, state);
+        dom.on(element, 'error', function (e) {
+            var data = { error: e.error };
+            return emitter.emit('error', self, data) || emitter.emit('default', self, data);
+        });
+    }
+});

package/mixins/FocusStateMixin.js

@@ -1,24 +1,29 @@
 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";
+import StatefulMixin from "./StatefulMixin.js";
 
-const FocusStateMixinSuper = ClassNameMixin.prototype;
+const FocusStateMixinSuper = StatefulMixin.prototype;
 
 export default function FocusStateMixin() {
-    ClassNameMixin.call(this, ['focused']);
+    StatefulMixin.call(this);
 }
 
-definePrototype(FocusStateMixin, ClassNameMixin, {
+definePrototype(FocusStateMixin, StatefulMixin, {
     initElement: function (element, state) {
         FocusStateMixinSuper.initElement.call(this, element, state);
         dom.on(element, {
             focusin: function () {
+                state.focused = true;
                 setClass(element, 'focused', true);
             },
             focusout: function () {
+                state.focused = false;
                 setClass(element, 'focused', false);
             }
         });
+    },
+    getClassNames: function () {
+        return [{ focused: !!this.state.focused }];
     }
 });

package/mixins/LoadingStateMixin.js

@@ -1,27 +1,33 @@
 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";
+import StatefulMixin from "./StatefulMixin.js";
 
-const LoadingStateMixinSuper = ClassNameMixin.prototype;
+const LoadingStateMixinSuper = StatefulMixin.prototype;
 
 export default function LoadingStateMixin() {
-    ClassNameMixin.call(this, ['loading']);
+    StatefulMixin.call(this);
 }
 
-definePrototype(LoadingStateMixin, ClassNameMixin, {
+definePrototype(LoadingStateMixin, StatefulMixin, {
     initElement: function (element, state) {
         LoadingStateMixinSuper.initElement.call(this, element, state);
         dom.on(element, {
             asyncStart: function () {
+                state.loading = true;
                 setClass(element, 'loading', true);
             },
             asyncEnd: function () {
+                state.loading = false;
                 setClass(element, 'loading', false);
             },
             cancelled: function () {
+                state.loading = false;
                 setClass(element, 'loading', false);
             }
         });
+    },
+    getClassNames: function () {
+        return [{ loading: !!this.state.loading }];
     }
 });

package/mixins/StatefulMixin.js

@@ -41,11 +41,9 @@ definePrototype(StatefulMixin, Mixin, {
         const self = this;
         const state = self.state;
         return function (current) {
-            if (current !== state.element) {
+            if (current && current !== state.element) {
                 state.element = current;
-                if (current) {
-                    self.initElement(current, state);
-                }
+                self.initElement(current, state);
             }
         };
     },

package/package.json

@@ -1,35 +1,47 @@
 {
   "name": "brew-js-react",
-  "version": "0.1.0-beta",
+  "version": "0.1.3",
   "description": "",
   "type": "module",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
     "build": "webpack",
+    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules npx jest",
+    "snapshot": "npm run test -- -u",
     "version": "npm run build && git add -A dist",
     "release": "node ./npm-publish.cjs"
   },
   "author": "misonou",
   "license": "ISC",
-  "repository": "github:misonou/brew-react",
+  "homepage": "https://hackmd.io/@misonou/brew-js-react",
+  "repository": "github:misonou/brew-js-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"
+    "brew-js": ">=0.2.1",
+    "waterpipe": "^2.4.2",
+    "zeta-dom": ">=0.1.13",
+    "zeta-dom-react": ">=0.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
     "@jest/globals": "^26.6.2",
+    "@testing-library/dom": "^8.11.3",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^7.0.2",
     "@types/jest": "^26.0.15",
     "babel-loader": "^8.2.1",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.2",
+    "glob": "^7.2.0",
     "jest": "^27.0.6",
     "ncp": "^2.0.0",
+    "regenerator-runtime": "^0.13.9",
     "webpack": "^5.3.0",
     "webpack-cli": "^4.1.0"
   },

package/view.d.ts

@@ -9,6 +9,13 @@ export type ViewComponent<P> = React.FC<P>;
  */
 export function registerView<P>(factory: () => Promise<{ default: React.ComponentType<P> }>, params: Zeta.Dictionary<string>): ViewComponent<P>;
 
+/**
+ * Determines whether a registered view component matches current route state.
+ * However it does not imply if the view is in fact being rendered.
+ * @param view A view component returned from {@link registerView}.
+ */
+export function isViewMatched(view: ViewComponent<any>): boolean;
+
 /**
  * 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}.
@@ -31,3 +38,19 @@ export function renderView(props: ViewComponentRootProps, ...args: ViewComponent
  * @param params Extra route parameters that supplements or overrides current route parameters.
  */
 export function linkTo(view: ViewComponent<any>, params?: Zeta.Dictionary<string>): string;
+
+/**
+ * Navigates to path that will render the specified view.
+ * @param view A view component created by {@link registerView}.
+ * @param params Extra route parameters that supplements or overrides current route parameters.
+ * @see {@link linkTo}.
+ */
+export function navigateTo(view: ViewComponent<any>, params?: Zeta.Dictionary<string>): Promise<Brew.NavigateResult>;
+
+/**
+ * Navigates to path that will render the specified view, replacing current state in browser history.
+ * @param view A view component created by {@link registerView}.
+ * @param params Extra route parameters that supplements or overrides current route parameters.
+ * @see {@link linkTo}.
+ */
+export function redirectTo(view: ViewComponent<any>, params?: Zeta.Dictionary<string>): Promise<Brew.NavigateResult>;

package/view.js

@@ -1,7 +1,7 @@
 import React from "react";
-import brew from "brew-js";
 import { useAsync } from "zeta-dom-react";
 import { any, definePrototype, equal, exclude, extend, keys, makeArray, noop, pick, setImmediate } from "./include/zeta-dom/util.js";
+import { animateIn, animateOut } from "./include/brew-js/anim.js";
 import { app } from "./app.js";
 
 const routeMap = new Map();
@@ -32,7 +32,7 @@ definePrototype(ViewContainer, React.Component, {
                 self.prevView = self.currentView;
                 self.prevElement = self.currentElement;
                 self.currentElement = undefined;
-                brew.animateOut(self.prevElement, 'show').then(function () {
+                animateOut(self.prevElement, 'show').then(function () {
                     self.prevElement = undefined;
                     self.prevView = undefined;
                     self.forceUpdate();
@@ -44,7 +44,7 @@ definePrototype(ViewContainer, React.Component, {
                 onComponentLoaded: function (element) {
                     self.currentElement = element;
                     setImmediate(function () {
-                        return brew.animateIn(element, 'show');
+                        return animateIn(element, 'show');
                     });
                 }
             });
@@ -53,14 +53,15 @@ definePrototype(ViewContainer, React.Component, {
     },
     getViewComponent: function () {
         var views = this.props.views;
-        var V = any(views, function (V) {
-            var params = routeMap.get(V);
-            return params && equal(params, pick(app.route, keys(params)));
-        });
-        return V || void app.navigate(linkTo(views[0]), true);
+        return any(views, isViewMatched) || void redirectTo(views[0]);
     }
 });
 
+export function isViewMatched(view) {
+    var params = routeMap.get(view);
+    return !!params && equal(params, pick(app.route, keys(params)));
+}
+
 export function registerView(factory, routeParams) {
     var Component = function (props) {
         var childProps = exclude(props, ['rootProps', 'onComponentLoaded']);
@@ -90,3 +91,11 @@ export function renderView() {
 export function linkTo(view, params) {
     return app.route.getPath(extend({}, app.route, params, routeMap.get(view)));
 }
+
+export function navigateTo(view, params) {
+    return app.navigate(linkTo(view, params));
+}
+
+export function redirectTo(view, params) {
+    return app.navigate(linkTo(view, params), true);
+}