brew-js-react 0.3.0 → 0.3.2

package/mixin.d.ts

@@ -25,7 +25,7 @@ export * from "./mixins/ScrollableMixin";
 export {
     Mixin,
     AnimateMixin,
-    AnimateSequenceItemMixin,
+    AnimateSequenceMixin,
     AnimateSequenceItemMixin,
     ClassNameMixin,
     FlyoutMixin,

package/package.json

@@ -1,24 +1,19 @@
 {
   "name": "brew-js-react",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "",
   "type": "module",
   "main": "index.js",
   "types": "index.d.ts",
   "unpkg": "dist/brew-js-react.min.js",
-  "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"
-  },
+  "scripts": {},
   "author": "misonou",
   "license": "ISC",
   "homepage": "https://hackmd.io/@misonou/brew-js-react",
   "repository": "github:misonou/brew-js-react",
   "dependencies": {
-    "brew-js": ">=0.4.5",
+    "@misonou/react-dom-client": "^1.0.3",
+    "brew-js": ">=0.4.7",
     "waterpipe": "^2.5.0",
     "zeta-dom": ">=0.3.1",
     "zeta-dom-react": ">=0.2.1"
@@ -32,6 +27,7 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@jest/globals": "^26.6.2",
+    "@misonou/test-utils": "^1.0.2",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",

package/view.d.ts

@@ -2,10 +2,26 @@ export type ViewComponentRootProps = React.DetailedHTMLProps<React.HTMLAttribute
 export type ViewComponent<P> = React.FC<P>;
 
 export interface ViewContainerState {
+    readonly container: HTMLElement;
     readonly view: ViewComponent<any>;
     readonly active: boolean;
 }
 
+export interface ErrorViewProps {
+    /**
+     * Gets the original view component in which error has thrown.
+     */
+    view: ViewComponent<any>;
+    /**
+     * Gets the error thrown from the original view component.
+     */
+    error: any;
+    /**
+     * Re-renders the original view component with initial state.
+     */
+    reset(): void;
+}
+
 export function useViewContainerState(): ViewContainerState;
 
 /**
@@ -16,6 +32,21 @@ export function useViewContainerState(): ViewContainerState;
  */
 export function registerView<P>(factory: () => Promise<{ default: React.ComponentType<P> }>, params: Zeta.Dictionary<null | string | RegExp | ((value: string) => boolean)>): ViewComponent<P>;
 
+/**
+ * Registers view component with specific route paramters.
+ * Route parameters will be matched against current route state by {@link renderView}.
+ * @param component A React component.
+ * @param params A dictionary containing route parameters.
+ */
+export function registerView<P>(component: React.ComponentType<P>, params: Zeta.Dictionary<null | string | RegExp | ((value: string) => boolean)>): ViewComponent<P>;
+
+/**
+ * Registers a default error view to be displayed when view component failed to render.
+ * The previous registered error view, if any, will be overriden when called multiple times.
+ * @param component A react component.
+ */
+export function registerErrorView(component: React.ComponentType<ErrorViewProps>): void;
+
 /**
  * Determines whether a registered view component matches current route state.
  * However it does not imply if the view is in fact being rendered.

package/view.js

@@ -1,225 +1,277 @@
-import React, { useRef } from "react";
-import { combineRef, useAsync } from "zeta-dom-react";
-import dom from "./include/zeta-dom/dom.js";
-import { notifyAsync } from "./include/zeta-dom/domLock.js";
-import { any, combineFn, defineObservableProperty, definePrototype, each, exclude, executeOnce, extend, grep, isFunction, keys, makeArray, map, noop, pick, randomId, setImmediate, single, watch } from "./include/zeta-dom/util.js";
-import { animateIn, animateOut } from "./include/brew-js/anim.js";
-import { removeQueryAndHash } from "./include/brew-js/util/path.js";
-import { app } from "./app.js";
-import { ViewStateContainer } from "./hooks.js";
-
-const root = dom.root;
-const routeMap = new Map();
-const usedParams = {};
-const sortedViews = [];
-const StateContext = React.createContext(Object.freeze({ active: true }));
-
-function ViewContainer() {
-    React.Component.apply(this, arguments);
-    this.stateId = history.state;
-}
-
-definePrototype(ViewContainer, React.Component, {
-    componentDidMount: function () {
-        /** @type {any} */
-        var self = this;
-        self.componentWillUnmount = combineFn(
-            watch(app.route, function () {
-                self.setActive(self.getViewComponent() === self.currentViewComponent);
-            }),
-            app.on('beforepageload', function (e) {
-                self.waitFor = e.waitFor;
-                self.stateId = history.state;
-                self.forceUpdate();
-            })
-        );
-    },
-    componentDidCatch: function (error) {
-        dom.emit('error', this.parentElement || root, { error }, true);
-    },
-    render: function () {
-        /** @type {any} */
-        var self = this;
-        if (history.state !== self.stateId) {
-            return self.lastChild || null;
-        }
-        var V = self.getViewComponent();
-        if (V) {
-            // ensure the current path actually corresponds to the matched view
-            // when some views are not included in the list of allowed views
-            var targetPath = linkTo(V, getCurrentParams(V, true));
-            if (targetPath !== removeQueryAndHash(app.path)) {
-                app.navigate(targetPath, true);
-            }
-        }
-        if (V && V !== self.currentViewComponent) {
-            var prevElement = self.currentElement;
-            if (prevElement) {
-                self.setActive(false);
-                self.prevView = self.currentView;
-                self.currentElement = undefined;
-                app.emit('pageleave', prevElement, { pathname: self.currentPath }, true);
-                animateOut(prevElement, 'show').then(function () {
-                    self.prevView = undefined;
-                    self.forceUpdate();
-                });
-            }
-            var resolve;
-            var promise = new Promise(function (resolve_) {
-                resolve = resolve_;
-            });
-            var state = { view: V };
-            var view = React.createElement(StateContext.Provider, { key: routeMap.get(V).id, value: state },
-                React.createElement(ViewStateContainer, null,
-                    React.createElement(V, {
-                        rootProps: self.props.rootProps,
-                        onComponentLoaded: executeOnce(function (element) {
-                            self.currentElement = element;
-                            self.parentElement = element.parentElement;
-                            setImmediate(function () {
-                                resolve();
-                                animateIn(element, 'show');
-                                app.emit('pageenter', element, { pathname: app.path }, true);
-                            });
-                        })
-                    })));
-            extend(self, {
-                currentPath: app.path,
-                currentView: view,
-                currentViewComponent: V,
-                setActive: defineObservableProperty(state, 'active', true, true)
-            });
-            (self.waitFor || noop)(promise);
-            notifyAsync(self.parentElement || root, promise);
-        }
-        var child = React.createElement(React.Fragment, null, self.prevView, self.currentView);
-        self.lastChild = child;
-        return child;
-    },
-    getViewComponent: function () {
-        var props = this.props;
-        return any(props.views, isViewMatched) || props.defaultView;
-    }
-});
-
-function getCurrentParams(view, includeAll, params) {
-    var state = routeMap.get(view);
-    if (!state.maxParams) {
-        var matchers = exclude(state.matchers, ['remainingSegments']);
-        var matched = map(app.routes, function (v) {
-            var route = app.parseRoute(v);
-            var matched = route.length && !any(matchers, function (v, i) {
-                var pos = route.params[i];
-                return (v ? !(pos >= 0) : pos < route.minLength) || (!isFunction(v) && !route.match(i, v));
-            });
-            return matched ? route : null;
-        });
-        if (matched[1]) {
-            matched = grep(matched, function (v) {
-                return !single(v.params, function (v, i) {
-                    return usedParams[i] && !matchers[i];
-                });
-            });
-        }
-        if (matched[0]) {
-            var last = matched.slice(-1)[0];
-            state.maxParams = keys(extend.apply(0, [{}].concat(matched.map(function (v) {
-                return v.params;
-            }))));
-            state.minParams = map(last.params, function (v, i) {
-                return state.params[i] || v >= last.minLength ? null : i;
-            });
-        }
-    }
-    return pick(params || app.route, includeAll ? state.maxParams : state.minParams);
-}
-
-function sortViews(a, b) {
-    return (routeMap.get(b) || {}).matchCount - (routeMap.get(a) || {}).matchCount;
-}
-
-function matchViewParams(view, route) {
-    var params = routeMap.get(view);
-    return !!params && !single(params.matchers, function (v, i) {
-        var value = route[i] || '';
-        return isFunction(v) ? !v(value) : (v || '') !== value;
-    });
-}
-
-export function useViewContainerState() {
-    return React.useContext(StateContext);
-}
-
-export function isViewMatched(view) {
-    return matchViewParams(view, app.route);
-}
-
-export function matchView(path, views) {
-    var route = app.route;
-    if (typeof path === 'string') {
-        route = route.parse(path);
-    } else {
-        views = path;
-    }
-    views = views ? makeArray(views).sort(sortViews) : sortedViews;
-    return any(views, function (v) {
-        return matchViewParams(v, route);
-    }) || undefined;
-}
-
-export function registerView(factory, routeParams) {
-    var Component = function (props) {
-        var state = useAsync(factory);
-        var ref = useRef();
-        if (state[0] || state[1].error) {
-            (props.onComponentLoaded || noop)(ref.current);
-        }
-        return React.createElement('div', extend({}, props.rootProps, {
-            ref: combineRef(ref, state[1].elementRef),
-            children: state[0] && React.createElement(state[0].default)
-        }));
-    };
-    routeParams = extend({}, routeParams);
-    each(routeParams, function (i, v) {
-        usedParams[i] = true;
-        if (v instanceof RegExp) {
-            routeParams[i] = v.test.bind(v);
-        }
-    });
-    routeMap.set(Component, {
-        id: randomId(),
-        matchCount: keys(routeParams).length,
-        matchers: routeParams,
-        params: pick(routeParams, function (v) {
-            return typeof v === 'string';
-        })
-    });
-    sortedViews.push(Component);
-    sortedViews.sort(sortViews);
-    return Component;
-}
-
-export function renderView() {
-    var views = makeArray(arguments);
-    var rootProps = isFunction(views[0]) ? {} : views.shift();
-    var defaultView = views[0];
-    views.sort(sortViews);
-    return React.createElement(ViewContainer, { rootProps, views, defaultView });
-}
-
-export function linkTo(view, params) {
-    var state = routeMap.get(view);
-    if (!state) {
-        return '/';
-    }
-    var newParams = extend(getCurrentParams(view), getCurrentParams(view, true, params), state.params);
-    return app.route.getPath(newParams);
-}
-
-export function navigateTo(view, params) {
-    return app.navigate(linkTo(view, params));
-}
-
-export function redirectTo(view, params) {
-    return app.navigate(linkTo(view, params), true);
-}
+import React from "react";
+import { useAsync } from "zeta-dom-react";
+import dom from "./include/zeta-dom/dom.js";
+import { notifyAsync } from "./include/zeta-dom/domLock.js";
+import { any, combineFn, defineObservableProperty, definePrototype, each, exclude, executeOnce, extend, grep, isFunction, isThenable, isUndefinedOrNull, keys, makeArray, map, noop, pick, randomId, single, throwNotFunction, watch } from "./include/zeta-dom/util.js";
+import { animateIn, animateOut } from "./include/brew-js/anim.js";
+import { removeQueryAndHash } from "./include/brew-js/util/path.js";
+import { app } from "./app.js";
+import { ViewStateContainer } from "./hooks.js";
+
+const root = dom.root;
+const routeMap = new Map();
+const usedParams = {};
+const sortedViews = [];
+const StateContext = React.createContext(Object.freeze({ container: root, active: true }));
+
+var errorView;
+
+function ErrorBoundary() {
+    React.Component.apply(this, arguments);
+    this.state = {};
+}
+ErrorBoundary.contextType = StateContext;
+
+definePrototype(ErrorBoundary, React.Component, {
+    componentDidCatch: function (error) {
+        var self = this;
+        if (errorView && !self.state.error) {
+            self.setState({ error });
+        } else {
+            dom.emit('error', self.context.container, { error }, true);
+        }
+    },
+    render: function () {
+        var self = this;
+        var props = {
+            view: self.context.view,
+            error: self.state.error,
+            reset: self.reset.bind(self)
+        };
+        var onComponentLoaded = self.props.onComponentLoaded;
+        if (props.error) {
+            return React.createElement(errorView, { onComponentLoaded, viewProps: props });
+        }
+        return React.createElement(props.view, { onComponentLoaded });
+    },
+    reset: function () {
+        this.setState({ error: null });
+    }
+});
+
+function ViewContainer() {
+    React.Component.apply(this, arguments);
+    this.stateId = history.state;
+}
+
+definePrototype(ViewContainer, React.Component, {
+    componentDidMount: function () {
+        /** @type {any} */
+        var self = this;
+        self.componentWillUnmount = combineFn(
+            watch(app.route, function () {
+                self.setActive(self.getViewComponent() === self.currentViewComponent);
+            }),
+            app.on('beforepageload', function (e) {
+                self.waitFor = e.waitFor;
+                self.stateId = history.state;
+                self.forceUpdate();
+            })
+        );
+    },
+    render: function () {
+        /** @type {any} */
+        var self = this;
+        if (history.state !== self.stateId) {
+            return self.lastChild || null;
+        }
+        var V = self.getViewComponent();
+        if (V) {
+            // ensure the current path actually corresponds to the matched view
+            // when some views are not included in the list of allowed views
+            var targetPath = linkTo(V, getCurrentParams(V, true));
+            if (targetPath !== removeQueryAndHash(app.path)) {
+                app.navigate(targetPath, true);
+            }
+        }
+        if (V && V !== self.currentViewComponent) {
+            var prevElement = self.currentElement;
+            if (prevElement) {
+                self.setActive(false);
+                self.prevView = self.currentView;
+                self.currentElement = undefined;
+                app.emit('pageleave', prevElement, { pathname: self.currentPath }, true);
+                animateOut(prevElement, 'show').then(function () {
+                    self.prevView = undefined;
+                    self.forceUpdate();
+                });
+            }
+            var onComponentLoaded;
+            var promise = new Promise(function (resolve) {
+                onComponentLoaded = resolve;
+            });
+            var initElement = executeOnce(function (element) {
+                self.currentElement = element;
+                state.container = element;
+                promise.then(function () {
+                    animateIn(element, 'show');
+                    app.emit('pageenter', element, { pathname: app.path }, true);
+                });
+                notifyAsync(element, promise);
+            });
+            var state = { view: V };
+            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(ErrorBoundary, { onComponentLoaded }))));
+            extend(self, {
+                currentPath: app.path,
+                currentView: view,
+                currentViewComponent: V,
+                setActive: defineObservableProperty(state, 'active', true, true)
+            });
+            (self.waitFor || noop)(promise);
+        }
+        var child = React.createElement(React.Fragment, null, self.prevView, self.currentView);
+        self.lastChild = child;
+        return child;
+    },
+    getViewComponent: function () {
+        var props = this.props;
+        return any(props.views, isViewMatched) || props.defaultView;
+    }
+});
+
+function getCurrentParams(view, includeAll, params) {
+    var state = routeMap.get(view);
+    if (!state.maxParams) {
+        var matchers = exclude(state.matchers, ['remainingSegments']);
+        var matched = map(app.routes, function (v) {
+            var route = app.parseRoute(v);
+            var matched = route.length && !any(matchers, function (v, i) {
+                var pos = route.params[i];
+                return (v ? !(pos >= 0) : pos < route.minLength) || (!isFunction(v) && !route.match(i, v));
+            });
+            return matched ? route : null;
+        });
+        if (matched[1]) {
+            matched = grep(matched, function (v) {
+                return !single(v.params, function (v, i) {
+                    return usedParams[i] && !matchers[i];
+                });
+            });
+        }
+        if (matched[0]) {
+            var last = matched.slice(-1)[0];
+            state.maxParams = keys(extend.apply(0, [{ remainingSegments: true }].concat(matched.map(function (v) {
+                return v.params;
+            }))));
+            state.minParams = map(last.params, function (v, i) {
+                return state.params[i] || v >= last.minLength ? null : i;
+            });
+        }
+    }
+    return pick(params || app.route, includeAll ? state.maxParams : state.minParams);
+}
+
+function sortViews(a, b) {
+    return (routeMap.get(b) || {}).matchCount - (routeMap.get(a) || {}).matchCount;
+}
+
+function matchViewParams(view, route) {
+    var params = routeMap.get(view);
+    return !!params && !single(params.matchers, function (v, i) {
+        var value = route[i] || '';
+        return isFunction(v) ? !v(value) : (v || '') !== value;
+    });
+}
+
+function createViewComponent(factory) {
+    var promise;
+    throwNotFunction(factory);
+    if (factory.prototype instanceof React.Component) {
+        factory = React.createElement.bind(null, factory);
+    }
+    return function (props) {
+        var viewProps = Object.freeze(props.viewProps || {});
+        var children = !promise && factory(viewProps);
+        if (isThenable(children)) {
+            promise = children;
+            children = null;
+        }
+        var state = useAsync(function () {
+            return promise.then(function (s) {
+                return React.createElement(s.default, viewProps);
+            });
+        }, !!promise)[1];
+        if (!promise || !state.loading) {
+            props.onComponentLoaded();
+            if (state.error) {
+                throw state.error;
+            }
+        }
+        return children || state.value || React.createElement(React.Fragment);
+    };
+}
+
+export function useViewContainerState() {
+    return React.useContext(StateContext);
+}
+
+export function isViewMatched(view) {
+    return matchViewParams(view, app.route);
+}
+
+export function matchView(path, views) {
+    var route = app.route;
+    if (typeof path === 'string') {
+        route = route.parse(path);
+    } else {
+        views = path;
+    }
+    views = views ? makeArray(views).sort(sortViews) : sortedViews;
+    return any(views, function (v) {
+        return matchViewParams(v, route);
+    }) || undefined;
+}
+
+export function registerView(factory, routeParams) {
+    var Component = createViewComponent(factory);
+    routeParams = extend({}, routeParams);
+    each(routeParams, function (i, v) {
+        usedParams[i] = true;
+        if (v instanceof RegExp) {
+            routeParams[i] = v.test.bind(v);
+        }
+    });
+    routeMap.set(Component, {
+        id: randomId(),
+        matchCount: keys(routeParams).length,
+        matchers: routeParams,
+        params: pick(routeParams, function (v) {
+            return isUndefinedOrNull(v) || typeof v === 'string';
+        })
+    });
+    sortedViews.push(Component);
+    sortedViews.sort(sortViews);
+    return Component;
+}
+
+export function registerErrorView(factory) {
+    errorView = createViewComponent(factory);
+}
+
+export function renderView() {
+    var views = makeArray(arguments);
+    var rootProps = isFunction(views[0]) ? {} : views.shift();
+    var defaultView = views[0];
+    views.sort(sortViews);
+    return React.createElement(ViewContainer, { rootProps, views, defaultView });
+}
+
+export function linkTo(view, params) {
+    var state = routeMap.get(view);
+    if (!state) {
+        return '/';
+    }
+    var newParams = extend(getCurrentParams(view), getCurrentParams(view, true, params || {}), state.params);
+    return app.route.getPath(newParams);
+}
+
+export function navigateTo(view, params) {
+    return app.navigate(linkTo(view, params));
+}
+
+export function redirectTo(view, params) {
+    return app.navigate(linkTo(view, params), true);
+}

package/include/external/package.json

@@ -1,3 +0,0 @@
-{
-    "type": "commonjs"
-}