refactor: Migrate to uirouter/react 1.x hooks

BREAKING CHANGE: Requires uirouter/react 1.0.0 or higher

Author: christopherthielen

package.json

@@ -16,8 +16,8 @@
   "license": "MIT",
   "dependencies": {
     "@uirouter/angularjs": "1.0.23",
-    "@uirouter/core": "6.0.1",
-    "@uirouter/react": "0.8.10"
+    "@uirouter/core": "6.0.4",
+    "@uirouter/react": "1.0.1"
   },
   "peerDependencies": {
     "angular": "^1.5.0",

src/angularjs/ReactUIViewAdapterComponent.tsx

@@ -42,6 +42,7 @@ hybridModule.directive('reactUiViewAdapter', function() {
       debug('.link()', 'linking react-ui-view-adapter into ', el, attrs);
 
       // The UIView ref callback, which is called after the initial render
+      // the ref value will be the component instance
       const ref = (ref: HTMLElement) => {
         // If refs are the same - don't re-render React component.
         const isSameRef = ref && _ref === ref;
@@ -73,8 +74,8 @@ hybridModule.directive('reactUiViewAdapter', function() {
       };
 
       const provideContextToAngularJSChildren = () => {
-        const $cfg = _ref && _ref.uiViewData && _ref.uiViewData.config;
-        const $uiView = _ref && _ref.uiViewAddress;
+        const $cfg = _ref?.uiViewData?.config;
+        const $uiView = _ref?.uiViewAddress;
 
         debug('.provideContextToAngularJSChildren', '', el, $cfg, $uiView);
 

src/react/ReactUIView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { UIRouterConsumer, UIView, UIViewConsumer, UIViewProps } from '@uirouter/react';
+import { UIView, UIViewProps } from '@uirouter/react';
 import { UIRouterContextComponent } from './UIRouterReactContext';
 import { debugLog } from '../debug';
 
@@ -11,18 +11,9 @@ export interface IReactUIViewProps extends UIViewProps {
 
 export const ReactUIView = ({ refFn, ...props }: IReactUIViewProps) => {
   debugLog('react', 'ReactUIView', `?/${props['name']}`, '.render()', '');
-
   return (
     <UIRouterContextComponent parentContextLevel="3" inherited={false}>
-      <UIRouterConsumer>
-        {router => (
-          <UIViewConsumer>
-            {parentUiView => (
-              <InternalUIView {...props} ref={refFn as any} parentUIView={parentUiView} router={router} />
-            )}
-          </UIViewConsumer>
-        )}
-      </UIRouterConsumer>
+      <InternalUIView {...props} ref={refFn as any} />
     </UIRouterContextComponent>
   );
 };

src/react/UIRouterReactContext.tsx

@@ -1,109 +1,82 @@
-import { UIViewData } from '@uirouter/angularjs/lib/directives/viewDirective';
-import { UIRouterConsumer, UIRouterProvider, UIRouterReact, UIViewConsumer, UIViewProvider } from '@uirouter/react';
 import * as angular from 'angular';
 import * as React from 'react';
-import { ReactElement } from 'react';
-import IInjectorService = angular.auto.IInjectorService;
+import { ReactNode, useContext, useRef, useState } from 'react';
+import { UIViewData } from '@uirouter/angularjs/lib/directives/viewDirective';
+import { UIRouterContext, UIViewContext, UIViewAddress } from '@uirouter/react';
+import { UIRouter } from '@uirouter/core';
 
 export interface IUIRouterContextComponentProps {
   parentContextLevel?: string;
   inherited?: boolean;
 }
 
-export interface IUIRouterContextComponentState {
-  ready: boolean;
-  router?: UIRouterReact;
-  parentUIViewAddress?: any;
+interface IContextFromAngularJS {
+  router: UIRouter;
+  addr: UIViewAddress;
 }
+const initialState: IContextFromAngularJS = { router: undefined, addr: undefined };
 
 /**
  * Provide react context necessary for UIView, UISref and UISrefActive
  *
  * Gets the context from the parent react UIView (if component tree is all react)
  * Gets the context from the from parent angular ui-view if no parent reat UIView is available
  */
-export class UIRouterContextComponent extends React.Component<
-  IUIRouterContextComponentProps,
-  IUIRouterContextComponentState
-> {
-  public static defaultProps: Partial<IUIRouterContextComponentProps> = {
-    parentContextLevel: '0',
-    inherited: true,
-  };
-
-  public state: IUIRouterContextComponentState = {
-    ready: false,
-    router: null,
-    parentUIViewAddress: null,
-  };
-
-  private ref: HTMLElement;
-  private injector: IInjectorService;
-
-  private getRouterFromAngularJS(): UIRouterReact {
-    if (this.injector) return this.injector.get('$uiRouter');
-  }
-
-  private getParentViewFromAngularJS() {
-    let ref = this.ref;
-    let steps = parseInt(this.props.parentContextLevel);
-    steps = isNaN(steps) ? 0 : steps;
-
-    while (ref && steps--) ref = ref.parentElement;
-    const $uiView = ref && angular.element(ref).inheritedData('$uiView');
-    return $uiView && new ParentUIViewAddressAdapter($uiView);
-  }
-
-  public componentDidMount() {
-    this.setState({
-      parentUIViewAddress: this.getParentViewFromAngularJS(),
-    });
-  }
-
-  private refCallback = (ref: HTMLElement) => {
-    if (ref && ref !== this.ref) {
-      this.ref = ref;
-      this.injector = angular.element(ref).injector();
-      const router = this.getRouterFromAngularJS();
-      const parentUIViewAddress = this.getParentViewFromAngularJS();
-      this.setState({ ready: true, router, parentUIViewAddress });
-      // console.log(ref);
+export function UIRouterContextComponent(props: {
+  parentContextLevel: string;
+  inherited: boolean;
+  children: ReactNode;
+}) {
+  const { parentContextLevel, inherited, children } = props;
+  const [contextFromAngularJS, setContextFromAngularJS] = useState(initialState);
+  const routerFromReactContext = useContext(UIRouterContext);
+  const parentUIViewFromReactContext = useContext(UIViewContext);
+  const domRef = useRef(null);
+
+  // Once we have a DOM node, get the AngularJS injector and walk up the DOM to find the AngularJS $uiView
+  const refCallback = (el: HTMLElement) => {
+    if (el && el !== domRef.current) {
+      domRef.current = el;
+      const injector = angular.element(el).injector();
+
+      // get router from angularjs
+      const router = injector?.get('$uiRouter');
+
+      // get parent uiview from angularjs
+      let steps = parseInt(parentContextLevel, 10);
+      steps = isNaN(steps) ? 0 : steps;
+
+      while (el && steps--) el = el.parentElement;
+      const $uiView = el && angular.element(el).inheritedData('$uiView');
+      const addr = $uiView && new ParentUIViewAddressAdapter($uiView);
+
+      setContextFromAngularJS({ router, addr } as IContextFromAngularJS);
     }
   };
 
-  private renderChild(child: ReactElement<any>) {
-    // console.log('renderChild()', child);
-    const inherited = this.props.inherited;
-    return (
-      <UIRouterConsumer>
-        {routerFromReactContext => (
-          <UIRouterProvider value={inherited && routerFromReactContext || this.state.router}>
-            <UIViewConsumer>
-              {parentUIViewFromReactContext => (
-                <UIViewProvider value={inherited && parentUIViewFromReactContext || this.state.parentUIViewAddress}>
-                  {child}
-                </UIViewProvider>
-              )}
-            </UIViewConsumer>
-          </UIRouterProvider>
-        )}
-      </UIRouterConsumer>
-    );
+  // render a div once to get a ref into the dom
+  // Use the dom ref to access the AngularJS state
+  if (!domRef.current) {
+    return <div ref={refCallback} />;
   }
 
-  public render() {
-    const { ready } = this.state;
-    const { children } = this.props;
+  // We know the AngularJS state. Now render the {children}
+  const childrenCount = React.Children.count(children);
 
-    const childrenCount = React.Children.count(children);
-    if (!ready) {
-      return <div ref={this.refCallback} />;
-    }
-
-    return this.renderChild(childrenCount === 1 ? React.Children.only(children) : <div>{children}</div>);
-  }
+  return (
+    <UIRouterContext.Provider value={(inherited && routerFromReactContext) || contextFromAngularJS.router}>
+      <UIViewContext.Provider value={(inherited && parentUIViewFromReactContext) || contextFromAngularJS.addr}>
+        {childrenCount === 1 ? React.Children.only(children) : <div>{children}</div>}
+      </UIViewContext.Provider>
+    </UIRouterContext.Provider>
+  );
 }
 
+UIRouterContextComponent.defaultProps = {
+  parentContextLevel: '0',
+  inherited: true,
+} as IUIRouterContextComponentProps;
+
 /**
  * Get the fqn and context from the parent angularjs ui-view.
  * Uses the ui-view element's data

src/react/UIRouterReactContextDecorator.tsx

@@ -27,9 +27,5 @@ import { UIRouterContextComponent } from './UIRouterReactContext';
  * @param Component the react component to wrap
  */
 export function UIRouterContext(Component: { new (...args: any[]): React.Component<any, any> }): any {
-  return class extends React.Component<any, any> {
-    public render() {
-      return <UIRouterContextComponent>{React.createElement(Component, this.props)}</UIRouterContextComponent>;
-    }
-  };
+  return props => <UIRouterContextComponent>{React.createElement(Component, props)}</UIRouterContextComponent>;
 }