fix: Refactor UIView for compatibility with @uirouter/react-hybrid.

BREAKING CHANGE: UIRouterConsumer now is of type `import { UIRouter } from '@uirouter/core'` instead of `import { UIRouterReact } from '@uirouter/react'`

Author: christopherthielen

src/components/UIRouter.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { useRef } from 'react';
 
-import { UIRouterPlugin, servicesPlugin, PluginFactory } from '@uirouter/core';
+import { UIRouter as _UIRouter, UIRouterPlugin, servicesPlugin, PluginFactory } from '@uirouter/core';
 
 import { UIRouterReact } from '../core';
 import { ReactStateDeclaration } from '../interface';
@@ -19,8 +19,8 @@ import { ReactStateDeclaration } from '../interface';
  * </UIRouterContext.Consumer>
  * ```
  */
-export const UIRouterContext = React.createContext<UIRouterReact>(undefined);
-/** @deprecated use [[useRouter]] or React.useContext(UIRouterContext) */
+export const UIRouterContext = React.createContext<_UIRouter>(undefined);
+  /** @deprecated use [[useRouter]] or React.useContext(UIRouterContext) */
 export const UIRouterConsumer = UIRouterContext.Consumer;
 
 export interface UIRouterProps {

src/components/UIView.tsx

@@ -12,6 +12,10 @@ import {
   useEffect,
   useMemo,
   useState,
+  Component,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
 } from 'react';
 import {
   ActiveUIView,
@@ -23,16 +27,14 @@ import {
   ViewConfig,
   ViewContext,
   applyPairs,
+  UIRouter,
 } from '@uirouter/core';
 import { useParentView } from '../hooks/useParentView';
 import { useRouter } from '../hooks/useRouter';
-import { useTransitionHook } from '../hooks/useTransitionHook';
 import { ReactViewConfig } from '../reactViews';
 
 /** @internalapi */
-let id = 0;
-/** @hidden */
-let keyCounter = 0;
+let viewIdCounter = 0;
 
 /** @internalapi */
 export interface UIViewAddress {
@@ -114,17 +116,22 @@ function useResolvesWithStringTokens(resolveContext: ResolveContext, injector: U
 }
 
 /* @hidden These are the props are passed to the routed component. */
-function useChildProps(
+function useRoutedComponentProps(
+  router: UIRouter,
+  stateName: string,
+  viewConfig: ViewConfig,
   component: React.FunctionComponent<any> | React.ComponentClass<any> | React.ClassicComponentClass<any>,
   resolves: TypedMap<any> | {},
   className: string,
   style: Object,
-  transition: any,
-  key: string,
-  setComponentInstance: (instance: any) => void
-): UIViewInjectedProps {
-  return useMemo(() => {
-    const componentProps: UIViewInjectedProps & { key: string } = {
+  transition: any
+): UIViewInjectedProps & { key: string } {
+  const keyCounterRef = useRef(0);
+  // Always re-mount if the viewConfig changes
+  const key = useMemo(() => (++keyCounterRef.current).toString(), [viewConfig]);
+
+  const baseChildProps = useMemo(
+    () => ({
       // spread each string resolve as a separate prop
       ...resolves,
       // if a className prop was passed to the UIView, forward it
@@ -135,63 +142,99 @@ function useChildProps(
       transition,
       // this key updates whenever the state is reloaded, causing the component to remount
       key,
-    };
+    }),
+    [component, resolves, className, style, transition, key]
+  );
+
+  const maybeRefProp = useUiCanExitClassComponentHook(router, stateName, component);
+
+  return useMemo(() => ({ ...baseChildProps, ...maybeRefProp }), [baseChildProps, maybeRefProp]);
+}
 
-    const maybeComponent = component as any;
-    if (maybeComponent?.prototype?.render || !!maybeComponent?.render) {
-      // for class components, add a ref to grab the component instance
-      return { ...componentProps, ref: setComponentInstance };
+function useViewConfig() {
+  const [viewConfig, setViewConfig] = useState<ReactViewConfig>();
+  const viewConfigRef = useRef(viewConfig);
+  viewConfigRef.current = viewConfig;
+  const configUpdated = (newConfig: ViewConfig) => {
+    if (newConfig !== viewConfigRef.current) {
+      setViewConfig(newConfig as ReactViewConfig);
+    }
+  };
+  return { viewConfig, configUpdated };
+}
+
+function useReactHybridApi(ref: React.Ref<unknown>, uiViewData: ActiveUIView, uiViewAddress: UIViewAddress) {
+  const reactHybridApi = useRef({ uiViewData, uiViewAddress });
+  reactHybridApi.current.uiViewData = uiViewData;
+  reactHybridApi.current.uiViewAddress = uiViewAddress;
+  useImperativeHandle(ref, () => reactHybridApi.current);
+}
+
+// If a class component is being rendered, wire up its uiCanExit method
+// Return a { ref: Ref<ClassComponentInstance> } if passed a component class
+// Return an empty object {} if passed anything else
+// The returned object should be spread as props onto the child component
+function useUiCanExitClassComponentHook(router: UIRouter, stateName: string, maybeComponentClass: any) {
+  const ref = useRef<any>();
+  const isComponentClass = maybeComponentClass?.prototype?.render || maybeComponentClass?.render;
+  const componentInstance = isComponentClass && ref.current;
+  const uiCanExit = componentInstance?.uiCanExit;
+
+  useEffect(() => {
+    if (uiCanExit) {
+      const deregister = router.transitionService.onBefore({ exiting: stateName }, uiCanExit.bind(ref.current));
+      return () => deregister();
     } else {
-      setComponentInstance(undefined);
-      return componentProps;
+      return () => undefined;
     }
-  }, [component, resolves, className, style, transition, key]);
+  }, [uiCanExit]);
+
+  return useMemo(() => (isComponentClass ? { ref } : undefined), [isComponentClass, ref]);
 }
 
-export function UIView(props: UIViewProps) {
+const View = forwardRef(function View(props: UIViewProps, forwardedRef) {
   const { children, render, className, style } = props;
 
   const router = useRouter();
   const parent = useParentView();
+  const creationContext = parent.context;
 
-  // If a class component is being rendered, this is the component instance
-  const [componentInstance, setComponentInstance] = useState();
-  const [viewConfig, setViewConfig] = useState<ReactViewConfig>();
+  const { viewConfig, configUpdated } = useViewConfig();
   const component = useMemo(() => viewConfig?.viewDecl?.component, [viewConfig]);
 
   const name = props.name || '$default';
+  const fqn = parent.fqn ? parent.fqn + '.' + name : name;
+  const id = useMemo(() => ++viewIdCounter, []);
 
   // This object contains all the metadata for this UIView
   const uiViewData: ActiveUIView = useMemo(() => {
-    return {
-      $type: 'react',
-      id: ++id,
-      name,
-      fqn: parent.fqn ? parent.fqn + '.' + name : name,
-      creationContext: parent.context,
-      configUpdated: config => setViewConfig(config as ReactViewConfig),
-      config: viewConfig as ViewConfig,
-    };
-  }, [name, parent, viewConfig]);
-
-  const viewContext: ViewContext = uiViewData?.config?.viewDecl?.$context;
-  const uiViewAddress: UIViewAddress = { fqn: uiViewData.fqn, context: viewContext };
-  const stateName: string = uiViewAddress?.context?.name;
+    return { $type: 'react', id, name, fqn, creationContext, configUpdated, config: viewConfig as ViewConfig };
+  }, [id, name, fqn, parent, creationContext, viewConfig]);
+  const viewContext: ViewContext = viewConfig?.viewDecl?.$context;
+  const stateName: string = viewContext?.name;
+  const uiViewAddress: UIViewAddress = { fqn, context: viewContext };
   const resolveContext = useMemo(() => (viewConfig ? new ResolveContext(viewConfig.path) : undefined), [viewConfig]);
   const injector = useMemo(() => resolveContext?.injector(), [resolveContext]);
   const transition = useMemo(() => injector?.get(Transition), [injector]);
   const resolves = useResolvesWithStringTokens(resolveContext, injector);
-  const key = useMemo(() => (++keyCounter).toString(), [viewConfig]);
-  const childProps = useChildProps(component, resolves, className, style, transition, key, setComponentInstance);
+
+  const childProps = useRoutedComponentProps(
+    router,
+    stateName,
+    viewConfig,
+    component,
+    resolves,
+    className,
+    style,
+    transition
+  );
+
+  // temporarily expose a ref with an API on it for @uirouter/react-hybrid to use
+  useReactHybridApi(forwardedRef, uiViewData, uiViewAddress);
 
   // Register/deregister any time the uiViewData changes
   useEffect(() => router.viewService.registerUIView(uiViewData), [uiViewData]);
 
-  // Handle component class with a 'uiCanExit()' method
-  const canExitCallback = componentInstance?.uiCanExit;
-  const hookMatchCriteria = canExitCallback ? { exiting: stateName } : undefined;
-  useTransitionHook('onBefore', hookMatchCriteria, canExitCallback);
-
   const childElement =
     !component && isValidElement(children)
       ? cloneElement(children, childProps)
@@ -201,13 +244,22 @@ export function UIView(props: UIViewProps) {
   const ChildOrRenderFunction =
     typeof render !== 'undefined' && component ? render(component, childProps) : childElement;
   return <UIViewContext.Provider value={uiViewAddress}>{ChildOrRenderFunction}</UIViewContext.Provider>;
-}
+});
 
-UIView.displayName = 'UIView';
-UIView.__internalViewComponent = UIView;
-UIView.propTypes = {
+View.displayName = 'UIView';
+View.propTypes = {
   name: PropTypes.string,
   className: PropTypes.string,
   style: PropTypes.object,
   render: PropTypes.func,
 } as ValidationMap<UIViewProps>;
+
+// A wrapper class for react-hybrid to monkey patch
+export class UIView extends Component<UIViewProps> {
+  static displayName = 'UIView';
+  static propTypes = View.propTypes;
+  static __internalViewComponent: ComponentType<UIViewProps> = View;
+  render() {
+    return <View {...this.props} />;
+  }
+}

src/hooks/useIsActive.ts

@@ -1,14 +1,14 @@
 /** @packageDocumentation @reactapi @module react_hooks */
 
 import { useEffect, useMemo, useState } from 'react';
-import { UIRouterReact } from '../core';
+import { UIRouter } from '@uirouter/core';
 import { useDeepObjectDiff } from './useDeepObjectDiff';
 import { useOnStateChanged } from './useOnStateChanged';
 import { useParentView } from './useParentView';
 import { useRouter } from './useRouter';
 
 /** @hidden */
-function checkIfActive(router: UIRouterReact, stateName: string, params: object, relative: string, exact: boolean) {
+function checkIfActive(router: UIRouter, stateName: string, params: object, relative: string, exact: boolean) {
   return exact
     ? router.stateService.is(stateName, params, { relative })
     : router.stateService.includes(stateName, params, { relative });

src/hooks/useRouter.ts

@@ -1,7 +1,7 @@
 /** @packageDocumentation @reactapi @module react_hooks */
 
 import { useContext } from 'react';
-import { UIRouterReact } from '../core';
+import { UIRouter } from '@uirouter/core';
 import { UIRouterContext } from '../components/UIRouter';
 
 /** @hidden */
@@ -25,7 +25,7 @@ export const UIRouterInstanceUndefinedError = `UIRouter instance is undefined. D
  * }
  * ```
  */
-export function useRouter(): UIRouterReact {
+export function useRouter(): UIRouter {
   const router = useContext(UIRouterContext);
   if (!router) {
     throw new Error(UIRouterInstanceUndefinedError);

src/hooks/useSref.ts

@@ -2,9 +2,8 @@
 
 import * as React from 'react';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { isString, StateDeclaration, TransitionOptions } from '@uirouter/core';
+import { isString, StateDeclaration, TransitionOptions, UIRouter } from '@uirouter/core';
 import { UISrefActiveContext } from '../components';
-import { UIRouterReact } from '../core';
 import { useDeepObjectDiff } from './useDeepObjectDiff';
 import { useParentView } from './useParentView';
 import { useRouter } from './useRouter';
@@ -18,15 +17,15 @@ export interface LinkProps {
 export const IncorrectStateNameTypeError = `The state name passed to useSref must be a string.`;
 
 /** @hidden Gets all StateDeclarations that are registered in the StateRegistry. */
-function useListOfAllStates(router: UIRouterReact) {
+function useListOfAllStates(router: UIRouter) {
   const initial = useMemo(() => router.stateRegistry.get(), []);
   const [states, setStates] = useState(initial);
   useEffect(() => router.stateRegistry.onStatesChanged(() => setStates(router.stateRegistry.get())), []);
   return states;
 }
 
 /** @hidden Gets the StateDeclaration that this sref targets */
-function useTargetState(router: UIRouterReact, stateName: string, relative: string): StateDeclaration {
+function useTargetState(router: UIRouter, stateName: string, relative: string): StateDeclaration {
   // Whenever any states are added/removed from the registry, get the target state again
   const allStates = useListOfAllStates(router);
   return useMemo(() => {