refactoring ts interfaces / setting dependencies for hooks

Author: facostaembrace

package-lock.json

@@ -107,7 +107,7 @@ export default App;
 
 ### React Native Navigation from Wix
 
-If you are using `wix/react-native-navigation` you are also able to track navigation changes by importing and implement the `NativeNavigationTracker` component. The purpose in here is to wrap the entire application with the exposed component.
+If you are using `wix/react-native-navigation` you are also able to track navigation changes by importing and implement the `NativeNavigationTracker` component. The purpose in here is to wrap the entry view with the exposed component.
 
 ```javascript
 import {FC, useRef} from 'react';
@@ -156,7 +156,7 @@ const HomeScreen: FC = () => {
   return (
     <NativeNavigationTracker ref={navigationRef} provider={provider} config={config}>
       {/* content of the app goes here */}
-    </NavigationTracker>
+    </NativeNavigationTracker>
   );
 };
 

plugins/node/instrumentation-react-native-navigation/README.md

@@ -13,27 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { forwardRef, ReactNode } from 'react';
-import { TracerProvider } from '@opentelemetry/api';
+import * as React from 'react';
+import { forwardRef } from 'react';
 
 import useTracerRef from '../utils/hooks/useTracerRef';
+import { TrackerProps } from '../types/navigation';
 import useNativeNavigationTracker, {
-  NativeNavRef,
+  NativeNavRef as NativeNavigationTrackerRef,
 } from '../hooks/useNativeNavigationTracker';
-import { NavigationTrackerConfig } from '../types/navigation';
-
-type NativeNavigationTrackerRef = NativeNavRef;
-
-interface NativeNavigationTrackerProps {
-  children: ReactNode;
-  // selected provider, should be configured by the app consumer
-  provider?: TracerProvider;
-  config?: NavigationTrackerConfig;
-}
 
 const NativeNavigationTracker = forwardRef<
   NativeNavigationTrackerRef,
-  NativeNavigationTrackerProps
+  TrackerProps
 >(({ children, provider, config }, ref) => {
   // Initializing a Trace instance
   const tracer = useTracerRef(provider, config);

plugins/node/instrumentation-react-native-navigation/src/components/NativeNavigationTracker.tsx

@@ -13,33 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { forwardRef, ReactNode } from 'react';
-import { TracerProvider } from '@opentelemetry/api';
+import * as React from 'react';
+import { forwardRef } from 'react';
 
 import useTracerRef from '../utils/hooks/useTracerRef';
-import useNavigationTracker, { NavRef } from '../hooks/useNavigationTracker';
-import { NavigationTrackerConfig } from '../types/navigation';
+import { TrackerProps } from '../types/navigation';
+import useNavigationTracker, {
+  NavRef as NavigationTrackerRef,
+} from '../hooks/useNavigationTracker';
 
-type NavigationTrackerRef = NavRef;
+const NavigationTracker = forwardRef<NavigationTrackerRef, TrackerProps>(
+  ({ children, provider, config }, ref) => {
+    // Initializing a Trace instance
+    const tracer = useTracerRef(provider, config);
 
-interface NavigationTrackerProps {
-  children: ReactNode;
-  // selected provider, configured by the app consumer if global tracer is not enough
-  provider?: TracerProvider;
-  config?: NavigationTrackerConfig;
-}
+    useNavigationTracker(ref, tracer, config);
 
-const NavigationTracker = forwardRef<
-  NavigationTrackerRef,
-  NavigationTrackerProps
->(({ children, provider, config }, ref) => {
-  // Initializing a Trace instance
-  const tracer = useTracerRef(provider, config);
-
-  useNavigationTracker(ref, tracer, config);
-
-  return <>{children}</>;
-});
+    return <>{children}</>;
+  }
+);
 
 NavigationTracker.displayName = 'NavigationTracker';
 

plugins/node/instrumentation-react-native-navigation/src/components/NavigationTracker.tsx

@@ -15,10 +15,11 @@
  */
 import { AppState, AppStateStatus } from 'react-native';
 import { MutableRefObject, useCallback, useEffect } from 'react';
+import { Attributes } from '@opentelemetry/api';
+
 import { spanCreatorAppState } from '../utils/spanFactory';
 import { TracerRef } from '../utils/hooks/useTracerRef';
 import { SpanRef } from '../utils/hooks/useSpanRef';
-import { Attributes } from '@opentelemetry/api';
 
 const useAppStateListener = (
   tracer: TracerRef,
@@ -39,7 +40,7 @@ const useAppStateListener = (
 
       appStateHandler(view?.current, currentState);
     },
-    [span, tracer, attributes]
+    [tracer, span, attributes, view]
   );
 
   /**

plugins/node/instrumentation-react-native-navigation/src/hooks/useAppStateListener.ts

@@ -13,35 +13,31 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import { ForwardedRef, useEffect, useMemo, useRef } from 'react';
 
 import { spanCreator, spanEnd } from '../utils/spanFactory';
 import { TracerRef } from '../utils/hooks/useTracerRef';
 import useSpanRef from '../utils/hooks/useSpanRef';
-import {
-  INativeNavigationContainer,
-  NavigationTrackerConfig,
-} from '../types/navigation';
+import useConsole from '../utils/hooks/useConsole';
+import { INativeNavigationContainer, TrackerConfig } from '../types/navigation';
 
 import useAppStateListener from './useAppStateListener';
-import useConsole from '../utils/hooks/useConsole';
 
 export type NativeNavRef = INativeNavigationContainer;
 
 const useNativeNavigationTracker = (
   ref: ForwardedRef<NativeNavRef>,
   tracer: TracerRef,
-  config?: NavigationTrackerConfig
+  config?: TrackerConfig
 ) => {
   const navigationElRef = useMemo(() => {
     const isMutableRef = ref !== null && typeof ref !== 'function';
     return isMutableRef ? ref?.current : undefined;
   }, [ref]);
 
   const { attributes: customAttributes, debug } = config ?? {};
-  const console = useConsole(!!debug);
 
+  const console = useRef(useConsole(!!debug));
   const view = useRef<string | null>(null);
   const span = useSpanRef();
 
@@ -50,7 +46,7 @@ const useNativeNavigationTracker = (
    */
   const initNativeNavigationSpan = useMemo(
     () => spanCreator(tracer, span, view, customAttributes),
-    [customAttributes]
+    [customAttributes, span, tracer]
   );
 
   /**
@@ -59,7 +55,7 @@ const useNativeNavigationTracker = (
    */
   useEffect(() => {
     if (!navigationElRef) {
-      console.warn(
+      console.current.warn(
         'Navigation ref is not available. Make sure this is properly configured.'
       );
 
@@ -69,7 +65,7 @@ const useNativeNavigationTracker = (
 
     navigationElRef.registerComponentDidAppearListener(({ componentName }) => {
       if (!componentName) {
-        console.warn(
+        console.current.warn(
           'Navigation component name is not available. Make sure this is properly configured.'
         );
 
@@ -83,7 +79,7 @@ const useNativeNavigationTracker = (
     navigationElRef.registerComponentDidDisappearListener(
       ({ componentName }) => {
         if (!componentName) {
-          console.warn(
+          console.current.warn(
             'Navigation component name is not available. Make sure this is properly configured.'
           );
 

plugins/node/instrumentation-react-native-navigation/src/hooks/useNativeNavigationTracker.ts

@@ -13,34 +13,30 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import { ForwardedRef, useEffect, useMemo, useRef } from 'react';
 
 import { spanCreator, spanEnd } from '../utils/spanFactory';
 import { TracerRef } from '../utils/hooks/useTracerRef';
 import useSpanRef from '../utils/hooks/useSpanRef';
-import {
-  INavigationContainer,
-  NavigationTrackerConfig,
-} from '../types/navigation';
+import useConsole from '../utils/hooks/useConsole';
+import { INavigationContainer, TrackerConfig } from '../types/navigation';
 
 import useAppStateListener from './useAppStateListener';
-import useConsole from '../utils/hooks/useConsole';
 
 export type NavRef = INavigationContainer;
 
 const useNavigationTracker = (
   ref: ForwardedRef<NavRef>,
   tracer: TracerRef,
-  config?: NavigationTrackerConfig
+  config?: TrackerConfig
 ) => {
   const navigationElRef = useMemo(() => {
     const isMutableRef = ref !== null && typeof ref !== 'function';
     return isMutableRef ? ref?.current : undefined;
   }, [ref]);
 
   const { attributes: customAttributes, debug } = config ?? {};
-  const console = useConsole(!!debug);
+  const console = useRef(useConsole(!!debug));
 
   const span = useSpanRef();
   const view = useRef<string | null>(null);
@@ -50,7 +46,7 @@ const useNavigationTracker = (
    */
   const initNavigationSpan = useMemo(
     () => spanCreator(tracer, span, view, customAttributes),
-    [customAttributes]
+    [customAttributes, span, tracer]
   );
 
   /**
@@ -59,7 +55,7 @@ const useNavigationTracker = (
    */
   useEffect(() => {
     if (!navigationElRef) {
-      console.warn(
+      console.current.warn(
         'Navigation ref is not available. Make sure this is properly configured.'
       );
 
@@ -71,7 +67,7 @@ const useNavigationTracker = (
         const { name: routeName } = navigationElRef.getCurrentRoute() ?? {};
 
         if (!routeName) {
-          console.warn(
+          console.current.warn(
             'Navigation route name is not available. Make sure this is properly configured.'
           );
 

plugins/node/instrumentation-react-native-navigation/src/hooks/useNavigationTracker.ts

@@ -13,35 +13,30 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Attributes, TracerOptions } from '@opentelemetry/api';
-import { useNavigationContainerRef as useReactNativeNavigationContainerRef } from '@react-navigation/native';
-import { useNavigationContainerRef as useReactNativeNavigationExpoContainerRef } from 'expo-router';
-import { Navigation } from 'react-native-navigation';
+import { EventsRegistry } from 'react-native-navigation';
+import { ReactNode } from 'react';
+import { EventConsumer, EventMapBase, Route } from '@react-navigation/native';
+import { Attributes, TracerOptions, TracerProvider } from '@opentelemetry/api';
 
-/*
- * Copyright The OpenTelemetry Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export type INativeNavigationContainer = ReturnType<typeof Navigation.events>;
+export type INativeNavigationContainer = Pick<
+  EventsRegistry,
+  'registerComponentDidDisappearListener' | 'registerComponentDidAppearListener'
+>;
 
-export type INavigationContainer =
-  | ReturnType<typeof useReactNativeNavigationContainerRef>
-  | ReturnType<typeof useReactNativeNavigationExpoContainerRef>['current'];
+export type INavigationContainer = Pick<
+  EventConsumer<EventMapBase>,
+  'addListener'
+> & { getCurrentRoute: () => Route<string> | undefined };
 
-export interface NavigationTrackerConfig {
+export interface TrackerConfig {
   attributes?: Attributes;
   tracerOptions?: TracerOptions;
   debug?: boolean; // enabling `debug` mode will print console messages (info and warns). useful for debugging
 }
+
+export interface TrackerProps {
+  children: ReactNode;
+  // selected provider, should be configured by the app consumer
+  provider?: TracerProvider;
+  config?: TrackerConfig;
+}

plugins/node/instrumentation-react-native-navigation/src/types/navigation.ts

@@ -15,16 +15,17 @@
  */
 import { MutableRefObject, useEffect, useRef } from 'react';
 import { trace, Tracer, TracerProvider } from '@opentelemetry/api';
-/** @knipignore */
+
 import { PACKAGE_NAME, PACKAGE_VERSION } from '../../version';
+import { TrackerConfig } from '../../types/navigation';
+
 import useConsole from './useConsole';
-import { NavigationTrackerConfig } from '../../types/navigation';
 
 export type TracerRef = MutableRefObject<Tracer | null>;
 
 const useTracerRef = (
   provider?: TracerProvider,
-  config?: NavigationTrackerConfig
+  config?: TrackerConfig
 ): TracerRef => {
   const { debug, tracerOptions } = config ?? {};
   const tracerRef = useRef<Tracer | null>(null);
@@ -44,7 +45,7 @@ const useTracerRef = (
           trace.getTracer(PACKAGE_NAME, PACKAGE_VERSION);
     }
 
-    // this is useful in cases where the provider is passed but it's still `null` or `undefined` (given a re-render or something specific of the lyfecycle of the app that implements the library)
+    // this is useful in cases where the provider is passed but it's still `null` or `undefined` (given a re-render or something specific of the lifecycle of the app that implements the library)
     if (
       tracerRef.current !== null &&
       provider !== undefined &&
@@ -58,7 +59,7 @@ const useTracerRef = (
 
       console.info('Updated TracerProvider. Switching to the new instance.');
     }
-  }, [provider, tracerOptions]);
+  }, [console, provider, tracerOptions]);
 
   return tracerRef;
 };

plugins/node/instrumentation-react-native-navigation/src/utils/hooks/useTracerRef.ts

@@ -15,10 +15,10 @@
  */
 import { AppStateStatus } from 'react-native';
 import { MutableRefObject } from 'react';
+import { Attributes } from '@opentelemetry/api';
 
 import { TracerRef } from './hooks/useTracerRef';
 import { SpanRef } from './hooks/useSpanRef';
-import { Attributes } from '@opentelemetry/api';
 
 const ATTRIBUTES = {
   initialView: 'view.launch',
@@ -68,7 +68,7 @@ const spanEnd = (
 
     span.current.end();
 
-    // make sure we destroy any existent span
+    // make sure we destroy any existing span
     span.current = null;
   }
 };