one 1.2.0 → 1.2.1

package/src/fallbackViews/Sitemap.tsx

@@ -0,0 +1,244 @@
+import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native'
+
+// import React from 'react'
+// import { Platform, ScrollView, StatusBar, useWindowDimensions } from 'react-native'
+// import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+// import { useOneRouter } from '../global-state/router-store'
+// import { router } from '../imperative-api'
+// import { Link } from '../link/Link'
+// import { matchDeepDynamicRouteName } from '../matchers'
+// import { RouteNode } from '../Route'
+
+const INDENT = 24
+
+export function getNavOptions(): NativeStackNavigationOptions {
+  return {
+    title: 'sitemap',
+    headerShown: false,
+    presentation: 'modal',
+    animation: 'default',
+    headerLargeTitle: false,
+    headerTitleStyle: {
+      color: 'white',
+    },
+    headerTintColor: 'white',
+    headerLargeTitleStyle: {
+      color: 'white',
+    },
+    headerStyle: {
+      backgroundColor: 'black',
+      // @ts-expect-error: mistyped
+      borderBottomColor: '#323232',
+    },
+  }
+}
+
+export function Sitemap() {
+  return <Text>sitemap!!!!!!!!!</Text>
+  //   const { top, bottom } = useSafeAreaInsets()
+  //   const { width } = useWindowDimensions()
+  //   return (
+  //     <View style={styles.container}>
+  //       <StatusBar barStyle="light-content" />
+  //       <View
+  //         style={[
+  //           styles.main,
+  //           {
+  //             minWidth: Math.min(960, width * 0.9),
+  //           },
+  //         ]}
+  //       >
+  //         <ScrollView
+  //           contentContainerStyle={[
+  //             styles.scroll,
+  //             {
+  //               paddingTop: top + 12,
+  //               paddingBottom: bottom + 12,
+  //             },
+  //           ]}
+  //           style={{ flex: 1 }}
+  //         >
+  //           <FileSystemView />
+  //         </ScrollView>
+  //       </View>
+  //     </View>
+  //   )
+  // }
+
+  // function FileSystemView() {
+  //   const routes = useOneRouter().getSortedRoutes()
+
+  //   return (
+  //     <>
+  //       {routes.map((child) => (
+  //         <View key={child.contextKey} style={styles.itemContainer}>
+  //           <FileItem route={child} />
+  //         </View>
+  //       ))}
+  //     </>
+  //   )
+  // }
+
+  // function FileItem({
+  //   route,
+  //   level = 0,
+  //   parents = [],
+  //   isInitial = false,
+  // }: {
+  //   route: RouteNode
+  //   level?: number
+  //   parents?: string[]
+  //   isInitial?: boolean
+  // }) {
+  //   const disabled = route.children.length > 0
+
+  //   const segments = React.useMemo(
+  //     () => [...parents, ...route.route.split('/')],
+  //     [parents, route.route]
+  //   )
+
+  //   const href = React.useMemo(() => {
+  //     return (
+  //       '/' +
+  //       segments
+  //         .map((v) => {
+  //           // add an extra layer of entropy to the url for deep dynamic routes
+  //           if (matchDeepDynamicRouteName(v)) {
+  //             return v + '/' + Date.now()
+  //           }
+  //           // index must be erased but groups can be preserved.
+  //           return v === 'index' ? '' : v
+  //         })
+  //         .filter(Boolean)
+  //         .join('/')
+  //     )
+  //   }, [segments, route.route])
+
+  //   const filename = React.useMemo(() => {
+  //     const segments = route.contextKey.split('/')
+  //     // join last two segments for layout routes
+  //     if (route.contextKey.match(/_layout\.[jt]sx?$/)) {
+  //       return segments[segments.length - 2] + '/' + segments[segments.length - 1]
+  //     }
+
+  //     const segmentCount = route.route.split('/').length
+
+  //     // Join the segment count in reverse order
+  //     // This presents files without layout routes as children with all relevant segments.
+  //     return segments.slice(-segmentCount).join('/')
+  //   }, [route])
+
+  //   const info = isInitial ? 'Initial' : route.generated ? 'Virtual' : ''
+
+  //   return (
+  //     <>
+  //       {!route.internal && (
+  //         <Link
+  //           accessibilityLabel={route.contextKey}
+  //           href={href}
+  //           onPress={() => {
+  //             if (Platform.OS !== 'web' && router.canGoBack()) {
+  //               // Ensure the modal pops
+  //               router.back()
+  //             }
+  //           }}
+  //           style={{ flex: 1, display: 'flex' }}
+  //           disabled={disabled}
+  //           asChild
+  //           // Ensure we replace the history so you can't go back to this page.
+  //           replace
+  //         >
+  //           <Pressable style={{ flex: 1 }}>
+  //             {({ pressed, hovered }) => (
+  //               <View
+  //                 style={[
+  //                   styles.itemPressable,
+  //                   {
+  //                     paddingLeft: INDENT + level * INDENT,
+  //                     backgroundColor: hovered ? 'rgba(255,255,255,0.1)' : 'transparent',
+  //                   },
+  //                   pressed && { backgroundColor: '#323232' },
+  //                   disabled && { opacity: 0.4 },
+  //                 ]}
+  //               >
+  //                 <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+  //                   {route.children.length ? <PkgIcon /> : <FileIcon />}
+  //                   <Text style={styles.filename}>{filename}</Text>
+  //                 </View>
+
+  //                 <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+  //                   {!!info && (
+  //                     <Text style={[styles.virtual, !disabled && { marginRight: 8 }]}>
+  //                       {info}
+  //                     </Text>
+  //                   )}
+  //                   {!disabled && <ForwardIcon />}
+  //                 </View>
+  //               </View>
+  //             )}
+  //           </Pressable>
+  //         </Link>
+  //       )}
+  //       {route.children.map((child) => (
+  //         <FileItem
+  //           key={child.contextKey}
+  //           route={child}
+  //           isInitial={route.initialRouteName === child.route}
+  //           parents={segments}
+  //           level={level + (route.generated ? 0 : 1)}
+  //         />
+  //       ))}
+  //     </>
+  //   )
+}
+
+// function FileIcon() {
+//   return <Image style={styles.image} source={require('router/assets/file.png')} />
+// }
+
+// function PkgIcon() {
+//   return <Image style={styles.image} source={require('router/assets/pkg.png')} />
+// }
+
+// function ForwardIcon() {
+//   return <Image style={styles.image} source={require('router/assets/forward.png')} />
+// }
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'black',
+    flex: 1,
+    alignItems: 'stretch',
+  },
+  main: {
+    marginHorizontal: 'auto',
+    flex: 1,
+
+    alignItems: 'stretch',
+  },
+  scroll: {
+    paddingHorizontal: 12,
+    // flex: 1,
+    // paddingTop: top + 12,
+    alignItems: 'stretch',
+  },
+  itemContainer: {
+    borderWidth: 1,
+    borderColor: '#323232',
+    borderRadius: 19,
+    marginBottom: 12,
+    overflow: 'hidden',
+  },
+  itemPressable: {
+    paddingHorizontal: INDENT,
+    paddingVertical: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  filename: { color: 'white', fontSize: 20, marginLeft: 12 },
+  virtual: { textAlign: 'right', color: 'white' },
+  image: { width: 24, height: 24, resizeMode: 'contain' },
+})

package/src/fallbackViews/Unmatched.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import { StyleSheet, Text } from 'react-native'
+
+function NoSSR({ children }: { children: React.ReactNode }) {
+  const [render, setRender] = React.useState(false)
+  React.useEffect(() => {
+    setRender(true)
+  }, [])
+
+  if (!render) {
+    return null
+  }
+
+  return <>{children}</>
+}
+
+/** Default screen for unmatched routes. */
+export function Unmatched() {
+  return <Text>unmmatched!!!!!!!!!</Text>
+  // const router = useRouter()
+  // const navigation = useNavigation()
+  // const pathname = usePathname()
+  // const url = createURL(pathname)
+
+  // useLayoutEffect(() => {
+  //   navigation.setOptions({
+  //     title: 'Not Found',
+  //   })
+  // }, [navigation])
+
+  // return (
+  //   <View style={styles.container}>
+  //     <Text role="heading" aria-level={1} style={styles.title}>
+  //       Unmatched Route
+  //     </Text>
+  //     <Text role="heading" aria-level={2} style={styles.subtitle}>
+  //       Page could not be found.{' '}
+  //       <Text
+  //         onPress={() => {
+  //           if (router.canGoBack()) {
+  //             router.back()
+  //           } else {
+  //             router.replace('/')
+  //           }
+  //         }}
+  //         style={styles.link}
+  //       >
+  //         Go back.
+  //       </Text>
+  //     </Text>
+
+  //     <NoSSR>
+  //       <Link href={pathname} replace style={styles.link}>
+  //         {url}
+  //       </Link>
+  //     </NoSSR>
+
+  //     <Link href="/_sitemap" replace style={[styles.link, { marginTop: 8 }]}>
+  //       Sitemap
+  //     </Link>
+  //   </View>
+  // )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'black',
+    padding: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    color: 'white',
+    fontSize: 36,
+    paddingBottom: 12,
+    marginBottom: 12,
+    borderBottomColor: '#323232',
+    borderBottomWidth: 1,
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  subtitle: {
+    color: 'white',
+    fontSize: 18,
+    marginBottom: 12,
+    textAlign: 'center',
+  },
+  link: { color: 'rgba(255,255,255,0.4)', textAlign: 'center' },
+})

package/src/fork/NavigationContainer.tsx

@@ -0,0 +1,201 @@
+/**
+ * This file is copied from the react-navigation repo:
+ * https://github.com/react-navigation/react-navigation/blob/%40react-navigation/core%407.1.2/packages/core/src/getPathFromState.tsx
+ *
+ * Please refrain from making changes to this file, as it will make merging updates from the upstream harder.
+ * All modifications except formatting should be marked with `// @modified` comment.
+ */
+
+import {
+  BaseNavigationContainer,
+  getActionFromState,
+  getPathFromState,
+  getStateFromPath,
+  type NavigationContainerProps,
+  type NavigationContainerRef,
+  type NavigationState,
+  type ParamListBase,
+  ThemeProvider,
+  validatePathConfig,
+} from '@react-navigation/core'
+// @modified - start
+// import { LinkingContext } from './LinkingContext'
+// import { LocaleDirContext } from './LocaleDirContext'
+// import { DefaultTheme } from './theming/DefaultTheme'
+// import type { DocumentTitleOptions, LinkingOptions, LocaleDirection } from './types'
+// import { UnhandledLinkingContext } from './UnhandledLinkingContext'
+import {
+  DefaultTheme,
+  type DocumentTitleOptions,
+  LinkingContext,
+  type LinkingOptions,
+  LocaleDirContext,
+  type LocaleDirection,
+  UNSTABLE_UnhandledLinkingContext as UnhandledLinkingContext,
+} from '@react-navigation/native'
+import * as React from 'react'
+import { I18nManager } from 'react-native'
+import useLatestCallback from 'use-latest-callback'
+// @modified - end
+import { useBackButton } from './useBackButton'
+import { useDocumentTitle } from './useDocumentTitle'
+import { useLinking } from './useLinking'
+import { useThenable } from './useThenable'
+
+declare global {
+  // eslint-disable-next-line no-var
+  var REACT_NAVIGATION_DEVTOOLS: WeakMap<
+    NavigationContainerRef<any>,
+    { readonly linking: LinkingOptions<any> }
+  >
+}
+
+globalThis.REACT_NAVIGATION_DEVTOOLS = new WeakMap()
+
+type Props<ParamList extends {}> = NavigationContainerProps & {
+  direction?: LocaleDirection
+  linking?: LinkingOptions<ParamList>
+  fallback?: React.ReactNode
+  documentTitle?: DocumentTitleOptions
+}
+
+/**
+ * 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.onUnhandledAction Callback which is called when an action is not handled.
+ * @param props.direction Text direction of the components. Defaults to `'ltr'`.
+ * @param props.theme Theme object for the UI elements.
+ * @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(
+  {
+    direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
+    theme = DefaultTheme,
+    linking,
+    fallback = null,
+    documentTitle,
+    onReady,
+    onStateChange,
+    ...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>(null)
+
+  useBackButton(refContainer)
+  useDocumentTitle(refContainer, documentTitle)
+
+  const [lastUnhandledLink, setLastUnhandledLink] = React.useState<string | undefined>()
+
+  const { getInitialState } = useLinking(
+    refContainer,
+    {
+      enabled: isLinkingEnabled,
+      prefixes: [],
+      ...linking,
+    },
+    setLastUnhandledLink
+  )
+
+  const linkingContext = React.useMemo(() => ({ options: linking }), [linking])
+
+  const unhandledLinkingContext = React.useMemo(
+    () => ({ lastUnhandledLink, setLastUnhandledLink }),
+    [lastUnhandledLink, setLastUnhandledLink]
+  )
+
+  const onReadyForLinkingHandling = useLatestCallback(() => {
+    // If the screen path matches lastUnhandledLink, we do not track it
+    const path = refContainer.current?.getCurrentRoute()?.path
+    setLastUnhandledLink((previousLastUnhandledLink) => {
+      if (previousLastUnhandledLink === path) {
+        return undefined
+      }
+      return previousLastUnhandledLink
+    })
+    onReady?.()
+  })
+
+  const onStateChangeForLinkingHandling = useLatestCallback(
+    (state: Readonly<NavigationState> | undefined) => {
+      // If the screen path matches lastUnhandledLink, we do not track it
+      const path = refContainer.current?.getCurrentRoute()?.path
+      setLastUnhandledLink((previousLastUnhandledLink) => {
+        if (previousLastUnhandledLink === path) {
+          return undefined
+        }
+        return previousLastUnhandledLink
+      })
+      onStateChange?.(state)
+    }
+  )
+  // 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 isLinkingReady = rest.initialState != null || !isLinkingEnabled || isResolved
+
+  if (!isLinkingReady) {
+    // This is temporary until we have Suspense for data-fetching
+    // Then the fallback will be handled by a parent `Suspense` component
+    return <ThemeProvider value={theme}>{fallback}</ThemeProvider>
+  }
+
+  return (
+    <LocaleDirContext.Provider value={direction}>
+      <UnhandledLinkingContext.Provider value={unhandledLinkingContext}>
+        <LinkingContext.Provider value={linkingContext}>
+          <BaseNavigationContainer
+            {...rest}
+            theme={theme}
+            onReady={onReadyForLinkingHandling}
+            onStateChange={onStateChangeForLinkingHandling}
+            initialState={rest.initialState == null ? initialState : rest.initialState}
+            ref={refContainer}
+          />
+        </LinkingContext.Provider>
+      </UnhandledLinkingContext.Provider>
+    </LocaleDirContext.Provider>
+  )
+}
+
+export const NavigationContainer = React.forwardRef(NavigationContainerInner) as <
+  RootParamList extends {} = ReactNavigation.RootParamList,
+>(
+  props: Props<RootParamList> & {
+    ref?: React.Ref<NavigationContainerRef<RootParamList>>
+  }
+) => React.ReactElement

package/src/fork/__tests__/README.md

@@ -0,0 +1,8 @@
+# Upstream Tests
+
+Tests here are basically copied from the `react-navigation` repo.
+
+* https://github.com/react-navigation/react-navigation/tree/main/packages/core/src/__tests__
+* https://github.com/react-navigation/react-navigation/tree/main/packages/native/src/__tests__
+
+Our own test cases are in `*.test.*` files locating next to the source files.