@amazon-devices/react-navigation__native 2.0.1758683737

package/src/Link.tsx

@@ -0,0 +1,53 @@
+import type { NavigationAction } from '@amazon-devices/react-navigation__core';
+import * as React from 'react';
+import { GestureResponderEvent, Platform, Text, TextProps } from 'react-native';
+
+import useLinkProps from './useLinkProps';
+import type { To } from './useLinkTo';
+
+type Props<ParamList extends ReactNavigation.RootParamList> = {
+  to: To<ParamList>;
+  action?: NavigationAction;
+  target?: string;
+  onPress?: (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
+  ) => void;
+} & (Omit<TextProps, 'disabled'> & {
+  disabled?: boolean | null;
+  children: React.ReactNode;
+});
+
+/**
+ * Component to render link to another screen using a path.
+ * Uses an anchor tag on the web.
+ *
+ * @param props.to Absolute path to screen (e.g. `/feeds/hot`).
+ * @param props.action Optional action to use for in-page navigation. By default, the path is parsed to an action based on linking config.
+ * @param props.children Child elements to render the content.
+ */
+export default function Link<ParamList extends ReactNavigation.RootParamList>({
+  to,
+  action,
+  ...rest
+}: Props<ParamList>) {
+  const props = useLinkProps<ParamList>({ to, action });
+
+  const onPress = (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
+  ) => {
+    if ('onPress' in rest) {
+      rest.onPress?.(e);
+    }
+
+    props.onPress(e);
+  };
+
+  return React.createElement(Text, {
+    ...props,
+    ...rest,
+    ...Platform.select({
+      web: { onClick: onPress } as any,
+      default: { onPress },
+    }),
+  });
+}

package/src/LinkingContext.tsx

@@ -0,0 +1,12 @@
+import type { ParamListBase } from '@amazon-devices/react-navigation__core';
+import * as React from 'react';
+
+import type { LinkingOptions } from './types';
+
+const LinkingContext = React.createContext<{
+  options: LinkingOptions<ParamListBase> | undefined;
+}>({ options: undefined });
+
+LinkingContext.displayName = 'LinkingContext';
+
+export default LinkingContext;

package/src/NavigationContainer.tsx

@@ -0,0 +1,152 @@
+import {
+  BaseNavigationContainer,
+  getActionFromState,
+  getPathFromState,
+  getStateFromPath,
+  NavigationContainerProps,
+  NavigationContainerRef,
+  ParamListBase,
+  validatePathConfig,
+} from '@amazon-devices/react-navigation__core';
+import * as React from 'react';
+
+import LinkingContext from './LinkingContext';
+import DefaultTheme from './theming/DefaultTheme';
+import ThemeProvider from './theming/ThemeProvider';
+import type { DocumentTitleOptions, LinkingOptions, Theme } from './types';
+import useBackButton from './useBackButton';
+import useDocumentTitle from './useDocumentTitle';
+import useLinking from './useLinking';
+import useThenable from './useThenable';
+
+declare global {
+  var REACT_NAVIGATION_DEVTOOLS: WeakMap<
+    NavigationContainerRef<any>,
+    { readonly linking: LinkingOptions<any> }
+  >;
+}
+
+global.REACT_NAVIGATION_DEVTOOLS = new WeakMap();
+
+type Props<ParamList extends {}> = NavigationContainerProps & {
+  theme?: Theme;
+  linking?: LinkingOptions<ParamList>;
+  fallback?: React.ReactNode;
+  documentTitle?: DocumentTitleOptions;
+  onReady?: () => void;
+};
+
+/**
+ * Container component which holds the navigation state designed for React Native apps.
+ * This should be rendered at the root wrapping the whole app.
+ *
+ * @param props.initialState Initial state object for the navigation tree. When deep link handling is enabled, this will override deep links when specified. Make sure that you don't specify an `initialState` when there's a deep link (`Linking.getInitialURL()`).
+ * @param props.onReady Callback which is called after the navigation tree mounts.
+ * @param props.onStateChange Callback which is called with the latest navigation state when it changes.
+ * @param props.theme Theme object for the navigators.
+ * @param props.linking Options for deep linking. Deep link handling is enabled when this prop is provided, unless `linking.enabled` is `false`.
+ * @param props.fallback Fallback component to render until we have finished getting initial state when linking is enabled. Defaults to `null`.
+ * @param props.documentTitle Options to configure the document title on Web. Updating document title is handled by default unless `documentTitle.enabled` is `false`.
+ * @param props.children Child elements to render the content.
+ * @param props.ref Ref object which refers to the navigation object containing helper methods.
+ */
+function NavigationContainerInner(
+  {
+    theme = DefaultTheme,
+    linking,
+    fallback = null,
+    documentTitle,
+    onReady,
+    ...rest
+  }: Props<ParamListBase>,
+  ref?: React.Ref<NavigationContainerRef<ParamListBase> | null>
+) {
+  const isLinkingEnabled = linking ? linking.enabled !== false : false;
+
+  if (linking?.config) {
+    validatePathConfig(linking.config);
+  }
+
+  const refContainer =
+    React.useRef<NavigationContainerRef<ParamListBase>>(null);
+
+  useBackButton(refContainer);
+  useDocumentTitle(refContainer, documentTitle);
+
+  const { getInitialState } = useLinking(refContainer, {
+    independent: rest.independent,
+    enabled: isLinkingEnabled,
+    prefixes: [],
+    ...linking,
+  });
+
+  // Add additional linking related info to the ref
+  // This will be used by the devtools
+  React.useEffect(() => {
+    if (refContainer.current) {
+      REACT_NAVIGATION_DEVTOOLS.set(refContainer.current, {
+        get linking() {
+          return {
+            ...linking,
+            enabled: isLinkingEnabled,
+            prefixes: linking?.prefixes ?? [],
+            getStateFromPath: linking?.getStateFromPath ?? getStateFromPath,
+            getPathFromState: linking?.getPathFromState ?? getPathFromState,
+            getActionFromState:
+              linking?.getActionFromState ?? getActionFromState,
+          };
+        },
+      });
+    }
+  });
+
+  const [isResolved, initialState] = useThenable(getInitialState);
+
+  React.useImperativeHandle(ref, () => refContainer.current);
+
+  const linkingContext = React.useMemo(() => ({ options: linking }), [linking]);
+
+  const isReady = rest.initialState != null || !isLinkingEnabled || isResolved;
+
+  const onReadyRef = React.useRef(onReady);
+
+  React.useEffect(() => {
+    onReadyRef.current = onReady;
+  });
+
+  React.useEffect(() => {
+    if (isReady) {
+      onReadyRef.current?.();
+    }
+  }, [isReady]);
+
+  if (!isReady) {
+    // This is temporary until we have Suspense for data-fetching
+    // Then the fallback will be handled by a parent `Suspense` component
+    return fallback as React.ReactElement;
+  }
+
+  return (
+    <LinkingContext.Provider value={linkingContext}>
+      <ThemeProvider value={theme}>
+        <BaseNavigationContainer
+          {...rest}
+          initialState={
+            rest.initialState == null ? initialState : rest.initialState
+          }
+          ref={refContainer}
+        />
+      </ThemeProvider>
+    </LinkingContext.Provider>
+  );
+}
+
+const NavigationContainer = React.forwardRef(NavigationContainerInner) as <
+  RootParamList extends {} = ReactNavigation.RootParamList
+>(
+  props: Props<RootParamList> & {
+    ref?: React.Ref<NavigationContainerRef<RootParamList>>;
+  }
+) => React.ReactElement;
+
+export default NavigationContainer;

package/src/ServerContainer.tsx

@@ -0,0 +1,56 @@
+import { CurrentRenderContext } from '@amazon-devices/react-navigation__core';
+import * as React from 'react';
+
+import ServerContext, { ServerContextType } from './ServerContext';
+import type { ServerContainerRef } from './types';
+
+type Props = ServerContextType & {
+  children: React.ReactNode;
+};
+
+/**
+ * Container component for server rendering.
+ *
+ * @param props.location Location object to base the initial URL for SSR.
+ * @param props.children Child elements to render the content.
+ * @param props.ref Ref object which contains helper methods.
+ */
+export default React.forwardRef(function ServerContainer(
+  { children, location }: Props,
+  ref: React.Ref<ServerContainerRef>
+) {
+  React.useEffect(() => {
+    console.error(
+      "'ServerContainer' should only be used on the server with 'react-dom/server' for SSR."
+    );
+  }, []);
+
+  const current: { options?: object } = {};
+
+  if (ref) {
+    const value = {
+      getCurrentOptions() {
+        return current.options;
+      },
+    };
+
+    // We write to the `ref` during render instead of `React.useImperativeHandle`
+    // This is because `useImperativeHandle` will update the ref after 'commit',
+    // and there's no 'commit' phase during SSR.
+    // Mutating ref during render is unsafe in concurrent mode, but we don't care about it for SSR.
+    if (typeof ref === 'function') {
+      ref(value);
+    } else {
+      // @ts-expect-error: the TS types are incorrect and say that ref.current is readonly
+      ref.current = value;
+    }
+  }
+
+  return (
+    <ServerContext.Provider value={{ location }}>
+      <CurrentRenderContext.Provider value={current}>
+        {children}
+      </CurrentRenderContext.Provider>
+    </ServerContext.Provider>
+  );
+});

package/src/ServerContext.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export type ServerContextType = {
+  location?: {
+    pathname: string;
+    search: string;
+  };
+};
+
+const ServerContext = React.createContext<ServerContextType | undefined>(
+  undefined
+);
+
+export default ServerContext;

package/src/__mocks__/window.tsx

@@ -0,0 +1,77 @@
+const location = new URL('', 'http://example.com');
+
+let listeners: (() => void)[] = [];
+let entries = [{ state: null, href: location.href }];
+let index = 0;
+
+let currentState: any = null;
+
+const history = {
+  get state() {
+    return currentState;
+  },
+
+  pushState(state: any, _: string, path: string) {
+    Object.assign(location, new URL(path, location.origin));
+
+    currentState = state;
+    entries = entries.slice(0, index + 1);
+    entries.push({ state, href: location.href });
+    index = entries.length - 1;
+  },
+
+  replaceState(state: any, _: string, path: string) {
+    Object.assign(location, new URL(path, location.origin));
+
+    currentState = state;
+    entries[index] = { state, href: location.href };
+  },
+
+  go(n: number) {
+    setTimeout(() => {
+      if (
+        (n > 0 && n < entries.length - index) ||
+        (n < 0 && Math.abs(n) <= index)
+      ) {
+        index += n;
+        const entry = entries[index];
+        Object.assign(location, new URL(entry.href));
+        currentState = entry.state;
+        listeners.forEach((cb) => cb());
+      }
+    }, 0);
+  },
+
+  back() {
+    this.go(-1);
+  },
+
+  forward() {
+    this.go(1);
+  },
+};
+
+const addEventListener = (type: 'popstate', listener: () => void) => {
+  if (type === 'popstate') {
+    listeners.push(listener);
+  }
+};
+
+const removeEventListener = (type: 'popstate', listener: () => void) => {
+  if (type === 'popstate') {
+    listeners = listeners.filter((cb) => cb !== listener);
+  }
+};
+
+const window = {
+  document: { title: '' },
+  location,
+  history,
+  addEventListener,
+  removeEventListener,
+  get window() {
+    return window;
+  },
+};
+
+export default window;

package/src/createMemoryHistory.tsx

@@ -0,0 +1,224 @@
+import type { NavigationState } from '@amazon-devices/react-navigation__core';
+import { nanoid } from 'nanoid/non-secure';
+
+type HistoryRecord = {
+  // Unique identifier for this record to match it with window.history.state
+  id: string;
+  // Navigation state object for the history entry
+  state: NavigationState;
+  // Path of the history entry
+  path: string;
+};
+
+export default function createMemoryHistory() {
+  let index = 0;
+  let items: HistoryRecord[] = [];
+
+  // Pending callbacks for `history.go(n)`
+  // We might modify the callback stored if it was interrupted, so we have a ref to identify it
+  const pending: { ref: unknown; cb: (interrupted?: boolean) => void }[] = [];
+
+  const interrupt = () => {
+    // If another history operation was performed we need to interrupt existing ones
+    // This makes sure that calls such as `history.replace` after `history.go` don't happen
+    // Since otherwise it won't be correct if something else has changed
+    pending.forEach((it) => {
+      const cb = it.cb;
+      it.cb = () => cb(true);
+    });
+  };
+
+  const history = {
+    get index(): number {
+      // We store an id in the state instead of an index
+      // Index could get out of sync with in-memory values if page reloads
+      const id = window.history.state?.id;
+
+      if (id) {
+        const index = items.findIndex((item) => item.id === id);
+
+        return index > -1 ? index : 0;
+      }
+
+      return 0;
+    },
+
+    get(index: number) {
+      return items[index];
+    },
+
+    backIndex({ path }: { path: string }) {
+      // We need to find the index from the element before current to get closest path to go back to
+      for (let i = index - 1; i >= 0; i--) {
+        const item = items[i];
+
+        if (item.path === path) {
+          return i;
+        }
+      }
+
+      return -1;
+    },
+
+    push({ path, state }: { path: string; state: NavigationState }) {
+      interrupt();
+
+      const id = nanoid();
+
+      // When a new entry is pushed, all the existing entries after index will be inaccessible
+      // So we remove any existing entries after the current index to clean them up
+      items = items.slice(0, index + 1);
+
+      items.push({ path, state, id });
+      index = items.length - 1;
+
+      // We pass empty string for title because it's ignored in all browsers except safari
+      // We don't store state object in history.state because:
+      // - browsers have limits on how big it can be, and we don't control the size
+      // - while not recommended, there could be non-serializable data in state
+      window.history.pushState({ id }, '', path);
+    },
+
+    replace({ path, state }: { path: string; state: NavigationState }) {
+      interrupt();
+
+      const id = window.history.state?.id ?? nanoid();
+
+      // Need to keep the hash part of the path if there was no previous history entry
+      // or the previous history entry had the same path
+      let pathWithHash = path;
+
+      if (!items.length || items.findIndex((item) => item.id === id) < 0) {
+        // There are two scenarios for creating an array with only one history record:
+        // - When loaded id not found in the items array, this function by default will replace
+        //   the first item. We need to keep only the new updated object, otherwise it will break
+        //   the page when navigating forward in history.
+        // - This is the first time any state modifications are done
+        //   So we need to push the entry as there's nothing to replace
+        pathWithHash = pathWithHash + location.hash;
+        items = [{ path: pathWithHash, state, id }];
+        index = 0;
+      } else {
+        if (items[index].path === path) {
+          pathWithHash = pathWithHash + location.hash;
+        }
+        items[index] = { path, state, id };
+      }
+
+      window.history.replaceState({ id }, '', pathWithHash);
+    },
+
+    // `history.go(n)` is asynchronous, there are couple of things to keep in mind:
+    // - it won't do anything if we can't go `n` steps, the `popstate` event won't fire.
+    // - each `history.go(n)` call will trigger a separate `popstate` event with correct location.
+    // - the `popstate` event fires before the next frame after calling `history.go(n)`.
+    // This method differs from `history.go(n)` in the sense that it'll go back as many steps it can.
+    go(n: number) {
+      interrupt();
+
+      // To guard against unexpected navigation out of the app we will assume that browser history is only as deep as the length of our memory
+      // history. If we don't have an item to navigate to then update our index and navigate as far as we can without taking the user out of the app.
+      const nextIndex = index + n;
+      const lastItemIndex = items.length - 1;
+      if (n < 0 && !items[nextIndex]) {
+        // Attempted to navigate beyond the first index. Negating the current index will align the browser history with the first item.
+        n = -index;
+        index = 0;
+      } else if (n > 0 && nextIndex > lastItemIndex) {
+        // Attempted to navigate past the last index. Calculate how many indices away from the last index and go there.
+        n = lastItemIndex - index;
+        index = lastItemIndex;
+      } else {
+        index = nextIndex;
+      }
+
+      if (n === 0) {
+        return;
+      }
+
+      // When we call `history.go`, `popstate` will fire when there's history to go back to
+      // So we need to somehow handle following cases:
+      // - There's history to go back, `history.go` is called, and `popstate` fires
+      // - `history.go` is called multiple times, we need to resolve on respective `popstate`
+      // - No history to go back, but `history.go` was called, browser has no API to detect it
+      return new Promise<void>((resolve, reject) => {
+        const done = (interrupted?: boolean) => {
+          clearTimeout(timer);
+
+          if (interrupted) {
+            reject(new Error('History was changed during navigation.'));
+            return;
+          }
+
+          // There seems to be a bug in Chrome regarding updating the title
+          // If we set a title just before calling `history.go`, the title gets lost
+          // However the value of `document.title` is still what we set it to
+          // It's just not displayed in the tab bar
+          // To update the tab bar, we need to reset the title to something else first (e.g. '')
+          // And set the title to what it was before so it gets applied
+          // It won't work without setting it to empty string coz otherwise title isn't changing
+          // Which means that the browser won't do anything after setting the title
+          const { title } = window.document;
+
+          window.document.title = '';
+          window.document.title = title;
+
+          resolve();
+        };
+
+        pending.push({ ref: done, cb: done });
+
+        // If navigation didn't happen within 100ms, assume that it won't happen
+        // This may not be accurate, but hopefully it won't take so much time
+        // In Chrome, navigation seems to happen instantly in next microtask
+        // But on Firefox, it seems to take much longer, around 50ms from our testing
+        // We're using a hacky timeout since there doesn't seem to be way to know for sure
+        const timer = setTimeout(() => {
+          const index = pending.findIndex((it) => it.ref === done);
+
+          if (index > -1) {
+            pending[index].cb();
+            pending.splice(index, 1);
+          }
+        }, 100);
+
+        const onPopState = () => {
+          const id = window.history.state?.id;
+          const currentIndex = items.findIndex((item) => item.id === id);
+
+          // Fix createMemoryHistory.index variable's value
+          // as it may go out of sync when navigating in the browser.
+          index = Math.max(currentIndex, 0);
+
+          const last = pending.pop();
+
+          window.removeEventListener('popstate', onPopState);
+          last?.cb();
+        };
+
+        window.addEventListener('popstate', onPopState);
+        window.history.go(n);
+      });
+    },
+
+    // The `popstate` event is triggered when history changes, except `pushState` and `replaceState`
+    // If we call `history.go(n)` ourselves, we don't want it to trigger the listener
+    // Here we normalize it so that only external changes (e.g. user pressing back/forward) trigger the listener
+    listen(listener: () => void) {
+      const onPopState = () => {
+        if (pending.length) {
+          // This was triggered by `history.go(n)`, we shouldn't call the listener
+          return;
+        }
+
+        listener();
+      };
+
+      window.addEventListener('popstate', onPopState);
+
+      return () => window.removeEventListener('popstate', onPopState);
+    },
+  };
+
+  return history;
+}

package/src/extractPathFromURL.tsx

@@ -0,0 +1,29 @@
+import escapeStringRegexp from 'escape-string-regexp';
+
+export default function extractPathFromURL(prefixes: string[], url: string) {
+  for (const prefix of prefixes) {
+    const protocol = prefix.match(/^[^:]+:/)?.[0] ?? '';
+    const host = prefix
+      .replace(new RegExp(`^${escapeStringRegexp(protocol)}`), '')
+      .replace(/\/+/g, '/') // Replace multiple slash (//) with single ones
+      .replace(/^\//, ''); // Remove extra leading slash
+
+    const prefixRegex = new RegExp(
+      `^${escapeStringRegexp(protocol)}(/)*${host
+        .split('.')
+        .map((it) => (it === '*' ? '[^/]+' : escapeStringRegexp(it)))
+        .join('\\.')}`
+    );
+
+    const [originAndPath, searchParams] = url.split('?');
+    const normalizedURL = originAndPath
+      .replace(/\/+/g, '/')
+      .concat(searchParams ? `?${searchParams}` : '');
+
+    if (prefixRegex.test(normalizedURL)) {
+      return normalizedURL.replace(prefixRegex, '');
+    }
+  }
+
+  return undefined;
+}

package/src/index.tsx

@@ -0,0 +1,14 @@
+export { default as Link } from './Link';
+export { default as LinkingContext } from './LinkingContext';
+export { default as NavigationContainer } from './NavigationContainer';
+export { default as ServerContainer } from './ServerContainer';
+export { default as DarkTheme } from './theming/DarkTheme';
+export { default as DefaultTheme } from './theming/DefaultTheme';
+export { default as ThemeProvider } from './theming/ThemeProvider';
+export { default as useTheme } from './theming/useTheme';
+export * from './types';
+export { default as useLinkBuilder } from './useLinkBuilder';
+export { default as useLinkProps } from './useLinkProps';
+export { default as useLinkTo } from './useLinkTo';
+export { default as useScrollToTop } from './useScrollToTop';
+export * from '@amazon-devices/react-navigation__core';

package/src/theming/DarkTheme.tsx

@@ -0,0 +1,15 @@
+import type { Theme } from '../types';
+
+const DarkTheme: Theme = {
+  dark: true,
+  colors: {
+    primary: 'rgb(10, 132, 255)',
+    background: 'rgb(1, 1, 1)',
+    card: 'rgb(18, 18, 18)',
+    text: 'rgb(229, 229, 231)',
+    border: 'rgb(39, 39, 41)',
+    notification: 'rgb(255, 69, 58)',
+  },
+};
+
+export default DarkTheme;

package/src/theming/DefaultTheme.tsx

@@ -0,0 +1,15 @@
+import type { Theme } from '../types';
+
+const DefaultTheme: Theme = {
+  dark: false,
+  colors: {
+    primary: 'rgb(0, 122, 255)',
+    background: 'rgb(242, 242, 242)',
+    card: 'rgb(255, 255, 255)',
+    text: 'rgb(28, 28, 30)',
+    border: 'rgb(216, 216, 216)',
+    notification: 'rgb(255, 59, 48)',
+  },
+};
+
+export default DefaultTheme;

package/src/theming/ThemeContext.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+import type { Theme } from '../types';
+import DefaultTheme from './DefaultTheme';
+
+const ThemeContext = React.createContext<Theme>(DefaultTheme);
+
+ThemeContext.displayName = 'ThemeContext';
+
+export default ThemeContext;