brew-js-react 0.6.5 → 0.6.7

package/mixin.d.ts

@@ -9,10 +9,15 @@ import FlyoutToggleMixin from "./mixins/FlyoutToggleMixin";
 import FocusStateMixin from "./mixins/FocusStateMixin";
 import LoadingStateMixin from "./mixins/LoadingStateMixin";
 import StatefulMixin, { MixinRef } from "./mixins/StatefulMixin";
+import StaticAttributeMixin from "./mixins/StaticAttributeMixin";
 import ScrollableMixin, { ScrollableMixinOptions } from "./mixins/ScrollableMixin";
 import ScrollIntoViewMixin from "./mixins/ScrollIntoViewMixin";
 import UnmanagedClassNameMixin from "./mixins/UnmanagedClassNameMixin";
 
+export interface WithOptions<T> {
+    withOptions(options: T): this;
+}
+
 export * from "./mixins/Mixin";
 export * from "./mixins/AnimateMixin";
 export * from "./mixins/AnimateSequenceItemMixin";
@@ -36,6 +41,7 @@ export {
     FocusStateMixin,
     LoadingStateMixin,
     StatefulMixin,
+    StaticAttributeMixin,
     ScrollableMixin,
     ScrollIntoViewMixin,
     UnmanagedClassNameMixin,
@@ -100,6 +106,13 @@ export function useClassNameToggleMixin<T extends Zeta.Dictionary<boolean>>(dict
  */
 export function useMixin<T extends typeof Mixin>(mixin: T): InstanceType<T>;
 
+/**
+ * Creates a mixin of the specified type within the lifetime of current component.
+ * @param mixin Constructor of the mixin type.
+ * @param options A dictionary specifying options.
+ */
+export function useMixin<T extends typeof Mixin>(mixin: T, options: InstanceType<T> extends WithOptions<infer U> ? U : never): InstanceType<T>;
+
 /**
  * Uses mixin passed from parent component.
  * @param mixin A {@link MixinRef} object.

package/mixin.js

@@ -11,6 +11,7 @@ import FlyoutToggleMixin from "./mixins/FlyoutToggleMixin.js";
 import FocusStateMixin from "./mixins/FocusStateMixin.js";
 import LoadingStateMixin from "./mixins/LoadingStateMixin.js";
 import StatefulMixin from "./mixins/StatefulMixin.js";
+import StaticAttributeMixin from "./mixins/StaticAttributeMixin.js";
 import ScrollableMixin from "./mixins/ScrollableMixin.js";
 import ScrollIntoViewMixin from "./mixins/ScrollIntoViewMixin.js";
 import UnmanagedClassNameMixin from "./mixins/UnmanagedClassNameMixin.js";
@@ -20,11 +21,7 @@ function extendSelf(options) {
 }
 
 function createUseFunction(ctor) {
-    return function () {
-        var mixin = useMixin(ctor);
-        (mixin.withOptions || extendSelf).apply(mixin, arguments);
-        return mixin;
-    };
+    return useMixin.bind(0, ctor);
 }
 
 export const useAnimateMixin = /*#__PURE__*/ createUseFunction(AnimateMixin);
@@ -37,10 +34,12 @@ export const useScrollableMixin = /*#__PURE__*/ createUseFunction(ScrollableMixi
 export const useScrollIntoViewMixin = /*#__PURE__*/ createUseFunction(ScrollIntoViewMixin);
 export const useUnmanagedClassNameMixin = /*#__PURE__*/ createUseFunction(UnmanagedClassNameMixin);
 
-export function useMixin(ctor) {
-    return useSingleton(function () {
+export function useMixin(ctor, options) {
+    var mixin = useSingleton(function () {
         return new ctor();
-    }).reset();
+    }, []).reset();
+    (mixin.withOptions || extendSelf).call(mixin, options);
+    return mixin;
 }
 
 export function useMixinRef(mixin) {
@@ -59,6 +58,7 @@ export {
     FocusStateMixin,
     LoadingStateMixin,
     StatefulMixin,
+    StaticAttributeMixin,
     ScrollableMixin,
     ScrollIntoViewMixin,
     UnmanagedClassNameMixin,

package/package.json

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

package/view.d.ts

@@ -139,7 +139,11 @@ export interface ErrorViewProps<T = any> {
     reset(): void;
 }
 
-export interface ViewComponentRootProps extends Omit<React.ComponentProps<'div'>, 'onError'> {
+export interface ViewComponentRootProps extends Omit<React.ComponentProps<'div'>, 'onError' | 'ref'> {
+    /**
+     * Specifies a ref object that can retrieve the active view context.
+     */
+    ref?: React.RefObject<ViewContext>;
     /**
      * Specifies initial loader if the first matched view is lazy-loaded.
      */
@@ -148,6 +152,7 @@ export interface ViewComponentRootProps extends Omit<React.ComponentProps<'div'>
      * Specifies callback to handle error raised within the view.
      * @param event Error event.
      * @param context Associated view context.
+     * @deprecated
      */
     onError?: (event: Zeta.ZetaErrorEvent<HTMLElement, ViewContext>, context: ViewContext) => any;
 }

package/view.js

@@ -107,7 +107,7 @@ definePrototype(ErrorBoundary, Component, {
             setImmediate(function () {
                 extend(self, createAsyncScope(context.container));
                 dom.on(context.container, 'error', function (e) {
-                    return emitter.emit(e, context, { error: e.error });
+                    return emitter.emit(e, context, { error: e.error }, false);
                 });
                 self.forceUpdate();
             });
@@ -162,6 +162,14 @@ definePrototype(ViewContainer, Component, {
         parent.push(self);
         self.setActive(true);
     },
+    componentDidUpdate: function (prevProps) {
+        (prevProps.rootProps.ref || {}).current = null;
+        this.setContext(this.currentContext);
+    },
+    setContext: function (context) {
+        this.currentContext = context;
+        (this.props.rootProps.ref || {}).current = context;
+    },
     render: function () {
         /** @type {any} */
         var self = this;
@@ -200,7 +208,12 @@ definePrototype(ViewContainer, Component, {
             var rootProps = self.props.rootProps;
             var initElement = executeOnce(function (element) {
                 defineOwnProperty(context, 'container', element, true);
-                self.currentContext = self.currentContext || context;
+                dom.on(element, 'error', function (e) {
+                    if (context !== self.currentContext) {
+                        e.handled();
+                    }
+                });
+                self.setContext(self.currentContext || context);
             });
             var onLoad = executeOnce(function () {
                 var element = context.container;
@@ -218,14 +231,14 @@ definePrototype(ViewContainer, Component, {
                     app.emit('pageenter', element, { pathname: context.page.path, view: V }, true);
                 });
                 self.views.shift();
-                self.currentContext = context;
+                self.setContext(context);
                 extend(self, _(context));
                 state.rendered++;
                 animateIn(element, 'show', '[brew-view]', true);
                 resolve();
             });
             context.on('error', function () {
-                return (rootProps.onError || noop).apply(this, arguments);
+                return (self.props.rootProps.onError || noop).apply(this, arguments);
             });
             self.abort = resolve;
             self.views[2] = createElement(StateContext.Provider, { key: state.id, value: context },