feat(*): Tweak debugLog output into columns

src/angularjs/ReactUIViewAdapterComponent.tsx

@@ -12,7 +12,7 @@ hybridModule.directive('uiView', function() {
     compile: function(tElem, tAttrs) {
       let { name, uiView } = tAttrs;
       name = name || uiView || '$default';
-      debugLog('angularjs ui-view', '', '.compile()', 'Creating react-ui-view-adapter', tElem);
+      debugLog('angularjs', 'ui-view', '?', '.compile()', 'Creating react-ui-view-adapter', tElem);
       tElem.html(`<react-ui-view-adapter name="${name}"></react-ui-view-adapter>`);
     },
   };
@@ -28,7 +28,7 @@ hybridModule.directive('reactUiViewAdapter', function() {
     restrict: 'E',
     link: function(scope, elem, attrs) {
       const debug = (method: string, message: string, ...args) =>
-        debugLog('angularjs react-ui-view-adapter', `${$id}/${attrs.name}`, method, message, ...args);
+        debugLog('angularjs', 'react-ui-view-adapter', `${$id}/${attrs.name}`, method, message, ...args);
 
       const el = elem[0];
       let _ref = null;

src/debug.ts

@@ -1,4 +1,19 @@
-export const debug = (component: string, id: string, method: string, message: string, ...args) => {
+import { padString } from '@uirouter/core';
+
+export const debug = (
+  angularOrReact: 'angularjs' | 'react',
+  component: string,
+  id: string,
+  method: string,
+  message: string,
+  ...args
+) => {
   if (window && window['debugReactHybrid'] !== true) return;
-  console.log(`${component}[${id}]${method}: ${message}`, ...args);
+  console.log(
+    `${padString(12, angularOrReact)} ${padString(40, `${component}[${id}]`)} ${padString(
+      35,
+      `${method}:`
+    )} ${message}`,
+    ...args
+  );
 };

src/react/ReactUIView.tsx

@@ -6,7 +6,7 @@ import { debug as debugLog } from '../debug';
 const InternalUIView = UIView.__internalViewComponent;
 
 const ReactUIView = ({ refFn, ...props }) => {
-  debugLog('react     ReactUIView', `?/${props['name']}`, '.render()', '');
+  debugLog('react', 'ReactUIView', `?/${props['name']}`, '.render()', '');
 
   return (
     <UIRouterContextComponent parentContextLevel="3" inherited={false}>

src/react/UIViewMonkeyPatch.tsx

@@ -34,7 +34,7 @@ class PortalView extends React.PureComponent {
   };
 
   private debug = (method: string, message: string, ...args) =>
-    debugLog('react     PortalView', `${this.$id}/${this.props['name']}`, method, message, ...args);
+    debugLog('react', 'PortalView', `${this.$id}/${this.props['name']}`, method, message, ...args);
 
   public componentWillUnmount() {
     this.debug('.componentWillUnmount()', '');
@@ -74,7 +74,7 @@ class PortalView extends React.PureComponent {
 
 UIView.prototype.render = function() {
   if (this.props.wrap === false) {
-    debugLog('react     UIView', `${this.$id}/${this.props['name']}`, '.render()', 'realRender.apply(this, arguments)');
+    debugLog('react', 'UIView', `${this.$id}/${this.props['name']}`, '.render()', 'realRender.apply(this, arguments)');
     return <div className="UIView">{realRender.apply(this, arguments)}</div>;
   }