one 1.2.0 → 1.2.2

package/src/getURL.native.ts

@@ -0,0 +1,24 @@
+import getDevServer from 'react-native/Libraries/Core/Devtools/getDevServer'
+
+export function getURL() {
+  let url = process.env.ONE_SERVER_URL
+
+  if (__DEV__) {
+    // We'll be using the development server in development mode, but we still need to warn the user to set SERVER_URL for things to work in production.
+    if (!url) {
+      console.warn(
+        `The ONE_SERVER_URL environment variable is not set. While things will work in development mode as we'll be using your development server, you should still set ONE_SERVER_URL in your .env file for your production builds to work.`
+      )
+    }
+
+    const { url: devServerUrl } = getDevServer() as { url: string }
+    url = devServerUrl
+  }
+
+  if (!url) {
+    // Provide a dummy URL so things won't crash.
+    url = 'http://one-server.example.com'
+  }
+
+  return url.replace(/\/+$/, '') // remove trailing slash for consistency with web
+}

package/src/getURL.ts

@@ -0,0 +1,10 @@
+const CLIENT_BASE_URL =
+  typeof window !== 'undefined' && window.location
+    ? `${window.location.protocol}//${window.location.host}`
+    : ``
+
+export function getURL() {
+  // We should use `CLIENT_BASE_URL` on the client as we can't guarantee how the client is connected to the server - it's possible that the server is listening on `127.0.0.1` and the client is connected via `localhost`. Things might break if URLs don't match due to a JS module being double-loaded via two different URLs.
+  // `process.env.ONE_SERVER_URL` is for the server, where `CLIENT_BASE_URL` will be blank.
+  return CLIENT_BASE_URL || process.env.ONE_SERVER_URL || 'http://localhost'
+}

package/src/head/Head.android.tsx

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from 'react'
+import { HeadModule } from './HeadModule'
+import type { HeadType } from './types'
+
+// @ts-expect-error
+export const Head: HeadType = (props: PropsWithChildren) => null
+
+Object.assign(Head, HeadModule)

package/src/head/Head.ios.tsx

@@ -0,0 +1,320 @@
+import { useIsFocused } from '@react-navigation/core'
+import React, { type JSX } from 'react'
+import { useParams, usePathname, useSegments, useUnstableGlobalHref } from '../hooks'
+import { HeadModule, type UserActivity } from './HeadModule'
+import type { HeadType } from './types'
+import { getStaticUrlFromOneRouter } from './url'
+
+function urlToId(url: string) {
+  return url.replace(/[^a-zA-Z0-9]/g, '-')
+}
+
+function getLastSegment(path: string) {
+  // Remove the extension
+  const lastSegment = path.split('/').pop() ?? ''
+  return lastSegment.replace(/\.[^/.]+$/, '').split('?')[0]
+}
+
+// TODO: Use Head Provider to collect all props so only one Head is rendered for a given route.
+
+function useAddressableLink() {
+  const pathname = useUnstableGlobalHref()
+  const params = useParams<any>()
+  const url = getStaticUrlFromOneRouter(pathname)
+  return { url, pathname, params }
+}
+
+type MetaNode =
+  | React.ReactPortal
+  | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>
+
+function useMetaChildren(children: React.ReactNode) {
+  return React.useMemo(() => {
+    const renderableChildren: React.ReactNode[] = []
+    const metaChildren: MetaNode[] = []
+
+    React.Children.forEach(children, (child) => {
+      if (!React.isValidElement(child)) {
+        return
+      }
+      if (typeof child.type === 'string') {
+        metaChildren.push(child)
+      } else {
+        renderableChildren.push(child)
+      }
+    })
+
+    return { children: renderableChildren, metaChildren }
+  }, [children])
+}
+
+type SerializedMeta = {
+  type: string
+  props: Record<string, string | undefined>
+}
+
+function serializedMetaChildren(meta: MetaNode[]): SerializedMeta[] {
+  const validMeta = meta.filter((child) => child.type === 'meta' || child.type === 'title')
+
+  return validMeta.map((child) => {
+    if (child.type === 'title') {
+      return {
+        type: 'title',
+        props: {
+          children:
+            child.props &&
+            typeof child.props === 'object' &&
+            'children' in child.props &&
+            typeof child.props.children === 'string'
+              ? child.props.children
+              : undefined,
+        },
+      }
+    }
+    return {
+      type: 'meta',
+      props: {
+        property:
+          child.props &&
+          typeof child.props === 'object' &&
+          'property' in child.props &&
+          typeof child.props.property === 'string'
+            ? child.props.property
+            : undefined,
+        content:
+          child.props &&
+          typeof child.props === 'object' &&
+          'content' in child.props &&
+          typeof child.props.content === 'string'
+            ? child.props.content
+            : undefined,
+      },
+    }
+  })
+}
+
+function useActivityFromMetaChildren(meta: MetaNode[]) {
+  const { url: href, pathname } = useAddressableLink()
+
+  const previousMeta = React.useRef<SerializedMeta[]>([])
+  const cachedActivity = React.useRef<Partial<UserActivity>>({})
+
+  const sortedMeta = React.useMemo(() => serializedMetaChildren(meta), [meta])
+
+  const url = React.useMemo(() => {
+    const urlMeta = sortedMeta.find(
+      (child) => child.type === 'meta' && child.props.property === 'og:url'
+    )
+
+    if (urlMeta) {
+      // Support =`/foo/bar` -> `https://example.com/foo/bar`
+      if (urlMeta.props.content?.startsWith('/')) {
+        return getStaticUrlFromOneRouter(urlMeta.props.content)
+      }
+      return urlMeta.props.content
+    }
+    return href
+  }, [sortedMeta, href])
+
+  const title = React.useMemo(() => {
+    const titleTag = sortedMeta.find((child) => child.type === 'title')
+    if (titleTag) {
+      return titleTag.props.children ?? ''
+    }
+    const titleMeta = sortedMeta.find(
+      (child) => child.type === 'meta' && child.props.property === 'og:title'
+    )
+    if (titleMeta) {
+      return titleMeta.props.content ?? ''
+    }
+
+    return getLastSegment(pathname)
+  }, [sortedMeta, pathname])
+
+  const activity = React.useMemo(() => {
+    if (
+      !!previousMeta.current &&
+      !!cachedActivity.current &&
+      deepObjectCompare(previousMeta.current, sortedMeta)
+    ) {
+      return cachedActivity.current
+    }
+    previousMeta.current = sortedMeta
+
+    const userActivity: Partial<UserActivity> = {}
+
+    sortedMeta.forEach((child) => {
+      if (
+        // <meta />
+        child.type === 'meta'
+      ) {
+        const { property, content } = child.props
+
+        switch (property) {
+          case 'og:description':
+            userActivity.description = content
+            break
+          // Custom properties
+          case 'expo:handoff':
+            userActivity.isEligibleForHandoff = isTruthy(content)
+            break
+          case 'expo:spotlight':
+            userActivity.isEligibleForSearch = isTruthy(content)
+            break
+        }
+
+        // // <meta name="keywords" content="foo,bar,baz" />
+        // if (["keywords"].includes(name)) {
+        //   userActivity.keywords = Array.isArray(content)
+        //     ? content
+        //     : content.split(",");
+        // }
+      }
+    })
+
+    cachedActivity.current = userActivity
+    return userActivity
+  }, [sortedMeta])
+
+  const parsedActivity: UserActivity = {
+    keywords: [title],
+    ...activity,
+    title,
+    webpageURL: url,
+    activityType: Head!.activities.INDEXED_ROUTE,
+    userInfo: {
+      // TODO: This may need to be  versioned in the future, e.g. `_v1` if we change the format.
+      href,
+    },
+  }
+
+  return parsedActivity
+}
+
+function isTruthy(value: any): boolean {
+  return [true, 'true'].includes(value)
+}
+
+function HeadNative(props: { children?: React.ReactNode }) {
+  const isFocused = useIsFocused()
+  if (!isFocused) {
+    return <UnfocusedHead />
+  }
+  return <FocusedHead {...props} />
+}
+
+function UnfocusedHead(props: { children?: React.ReactNode }): JSX.Element {
+  const { children } = useMetaChildren(props.children)
+  return <>{children}</>
+}
+
+function FocusedHead(props: { children?: React.ReactNode }): JSX.Element {
+  const { metaChildren, children } = useMetaChildren(props.children)
+  const activity = useActivityFromMetaChildren(metaChildren)
+  useRegisterCurrentActivity(activity)
+  return <>{children}</>
+}
+
+// segments => activity
+const activities: Map<string, UserActivity> = new Map()
+
+function useRegisterCurrentActivity(activity: UserActivity) {
+  // ID is tied to One and agnostic of URLs to ensure dynamic parameters are not considered.
+  // Using all segments ensures that cascading routes are considered.
+  const activityId = urlToId(usePathname() || '/')
+  const cascadingId = urlToId(useSegments().join('-') || '-')
+
+  const cascadingActivity: UserActivity = React.useMemo(() => {
+    // Get all nested activities together, then update the id to match the current pathname.
+    // This enables cases like `/user/[name]/post/[id]` to match all nesting, while still having a URL-specific ID, i.e. `/user/post/123`
+    const cascadingActivity = activities.has(cascadingId)
+      ? {
+          ...activities.get(cascadingId),
+          ...activity,
+          id: activityId,
+        }
+      : {
+          ...activity,
+          id: activityId,
+        }
+    activities.set(cascadingId, cascadingActivity)
+
+    return cascadingActivity
+  }, [cascadingId, activityId, activity])
+
+  const previousActivity = React.useRef<UserActivity | null>(null)
+
+  React.useEffect(() => {
+    if (!cascadingActivity) {
+      return () => {}
+    }
+    if (
+      !!previousActivity.current &&
+      deepObjectCompare(previousActivity.current, cascadingActivity)
+    ) {
+      return () => {}
+    }
+
+    previousActivity.current = cascadingActivity
+    if (!cascadingActivity.id) {
+      throw new Error('Activity must have an ID')
+    }
+
+    // If no features are enabled, then skip registering the activity
+    if (cascadingActivity.isEligibleForHandoff || cascadingActivity.isEligibleForSearch) {
+      Head?.createActivity(cascadingActivity)
+    }
+
+    return () => {}
+  }, [cascadingActivity])
+
+  React.useEffect(() => {
+    return () => {
+      if (activityId) {
+        HeadModule?.suspendActivity(activityId)
+      }
+    }
+  }, [activityId])
+}
+
+function deepObjectCompare(a: any, b: any) {
+  if (typeof a !== typeof b) {
+    return false
+  }
+  if (typeof a === 'object') {
+    if (Array.isArray(a) !== Array.isArray(b)) {
+      return false
+    }
+    if (Array.isArray(a)) {
+      if (a.length !== b.length) {
+        return false
+      }
+      return a.every((item, index) => deepObjectCompare(item, b[index]))
+    }
+    // handle null
+    if (a === null || b === null) {
+      return a === b
+    }
+    const aKeys = Object.keys(a)
+    const bKeys = Object.keys(b)
+    if (aKeys.length !== bKeys.length) {
+      return false
+    }
+    return aKeys.every((key) => deepObjectCompare(a[key], b[key]))
+  }
+  return a === b
+}
+
+HeadNative.Provider = React.Fragment
+
+function HeadShim(props: React.PropsWithChildren) {
+  return null
+}
+
+HeadShim.Provider = React.Fragment
+
+// Native Head is only enabled in bare iOS apps.
+// @ts-expect-error
+export const Head: HeadType = HeadModule ? HeadNative : HeadShim
+
+Object.assign(Head, HeadModule)

package/src/head/Head.tsx

@@ -0,0 +1,9 @@
+import { HeadModule } from './HeadModule'
+import type { HeadType } from './types'
+
+// @ts-expect-error
+export const Head: HeadType = ({ children }: { children?: any }) => {
+  return children
+}
+
+Object.assign(Head, HeadModule)

package/src/head/HeadModule.ts

@@ -0,0 +1,50 @@
+// isEligibleForPrediction
+// https://developer.apple.com/documentation/foundation/nsuseractivity/2980674-iseligibleforprediction
+
+export type UserActivity = {
+  id?: string
+  /**
+   * The activity title should be clear and concise. This text describes the content of the link, like “Photo taken on July 27, 2020” or “Conversation with Maria”. Use nouns for activity titles.
+   */
+  title?: string
+  description?: string
+  webpageURL?: string
+  keywords?: string[]
+  // TODO: Get this automatically somehow
+  activityType: string
+  // TODO: Maybe something like robots.txt?
+  phrase?: string
+
+  thumbnailURL?: string
+
+  userInfo?: Record<string, string>
+
+  isEligibleForHandoff?: boolean
+  isEligibleForPrediction?: boolean
+  isEligibleForSearch?: boolean
+
+  /** Local file path for an image */
+  imageUrl?: string
+  darkImageUrl?: string
+  dateModified?: Date
+  expirationDate?: Date
+}
+
+let HeadModule: {
+  activities: {
+    INDEXED_ROUTE: string
+  }
+  getLaunchActivity(): UserActivity
+  createActivity(userActivity: UserActivity): void
+  clearActivitiesAsync(ids: string[]): Promise<void>
+  suspendActivity(id: string): void
+  revokeActivity(id: string): void
+} | null = null
+
+// If running in Expo Go.
+// @ts-expect-error
+if (typeof expo !== 'undefined' && globalThis.expo?.modules?.ExpoGo) {
+  HeadModule = globalThis.expo?.modules?.HeadModule
+}
+
+export { HeadModule }

package/src/head/index.ts

@@ -0,0 +1 @@
+export * from './Head'

package/src/head/types.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react'
+import type { HeadModule } from './HeadModule'
+
+export type HeadType = React.FC<{ children?: ReactNode }> & typeof HeadModule

package/src/head/url.tsx

@@ -0,0 +1,80 @@
+const protocolWarningString = `{ plugins: [["router", { origin: "...<URL>..." }]] }`
+
+/** `lodash.memoize` */
+function memoize<T extends (...args: any[]) => any>(fn: T): T {
+  const cache: Record<string, any> = {}
+  return ((...args: any[]) => {
+    const key = JSON.stringify(args)
+    if (cache[key]) {
+      return cache[key]
+    }
+    const result = fn(...args)
+    cache[key] = result
+    return result
+  }) as any
+}
+
+function sanitizeUrl(url: string): string {
+  const parsed = new URL(url)
+
+  // Allow empty protocol, http, and https
+  const validProtocol =
+    !parsed.protocol || parsed.protocol === 'http:' || parsed.protocol === 'https:'
+
+  if (!validProtocol) {
+    throwOrAlert(
+      `One Head: Native origin has invalid protocol "${parsed.protocol}" for URL in Config: ${protocolWarningString}.`
+    )
+  }
+
+  parsed.pathname = ''
+  parsed.search = ''
+  parsed.hash = ''
+  parsed.protocol ??= 'https:'
+
+  return parsed.toString().replace(/\/$/, '')
+}
+
+const memoSanitizeUrl = memoize(sanitizeUrl)
+
+function getUrlFromConstants(): string | null {
+  const origin = process.env.One_ORIGIN
+
+  if (!origin) {
+    throwOrAlert(
+      `One Head: Add the handoff origin to the Config (requires rebuild). Add the Config Plugin ${protocolWarningString}, where \`origin\` is the hosted URL.`
+    )
+    // Fallback value that shouldn't be used for real.
+    return 'https://expo.dev'
+  }
+
+  // Without this, the URL will go to an IP address which is not allowed.
+  if (!origin.match(/^http(s)?:\/\//)) {
+    console.warn(
+      `One Head: origin "${origin}" is missing a \`https://\` protocol. ${protocolWarningString}.`
+    )
+  }
+
+  // Return the development URL last so the user gets all production warnings first.
+  return memoSanitizeUrl(origin)
+}
+
+function throwOrAlert(msg: string) {
+  console.warn(`TODO FIX: ${msg}`)
+  // // Production apps fatally crash which is often not helpful.
+  // if (
+  //   // @ts-expect-error: process is defined
+  //   process.env.NODE_ENV === 'production'
+  // ) {
+  //   console.error(msg)
+  //   alert(msg)
+  // } else {
+  //   throw new Error(msg)
+  // }
+}
+
+export function getStaticUrlFromOneRouter(pathname: string) {
+  // const host = "https://expo.io";
+  // Append the URL we'd find in context
+  return getUrlFromConstants() + pathname
+}

package/src/hooks.tsx

@@ -0,0 +1,156 @@
+import React, { createContext, type ReactNode, useContext } from 'react'
+import type { OneRouter } from './interfaces/router'
+import { router } from './router/imperative-api'
+import { RouteParamsContext, useRouteNode } from './router/Route'
+import { RouteInfoContext } from './router/RouteInfoContext'
+import { navigationRef, useStoreRootState, useStoreRouteInfo } from './router/router'
+
+type SearchParams = OneRouter.SearchParams
+
+export function useRootNavigationState() {
+  return useStoreRootState()
+}
+
+export function useRouteInfo() {
+  // This uses the `useStateForPath` hook under the hood, which will be always correct
+  // when used in a page, but will not be correct when used in a layout.
+  // See the comment in `RouteInfoContext` for more details.
+  const routeInfoFromContext = useContext(RouteInfoContext)
+
+  // This uses `navigationRef.getRootState()` under the hood, which has the
+  // issue of returning an incomplete state during the first render of nested navigators.
+  // See: https://github.com/react-navigation/react-navigation/pull/12521#issue-2958644406
+  const routeInfoFromRootState = useStoreRouteInfo()
+
+  const routeNode = useRouteNode()
+
+  if (routeNode?.type === 'layout') {
+    // We are in a layout, do not consider using `RouteInfoContextProvider`.
+    return routeInfoFromRootState
+  }
+
+  // We are in a page, prioritize `routeInfoFromContext` over `routeInfoFromRootState` because it is more accurate.
+  return routeInfoFromContext || routeInfoFromRootState
+}
+
+/** @return the root `<NavigationContainer />` ref for the app. The `ref.current` may be `null` if the `<NavigationContainer />` hasn't mounted yet. */
+export function useNavigationContainerRef() {
+  return navigationRef
+}
+
+const FrozeContext = createContext(false)
+
+export function Frozen({ on = false, children }: { on?: boolean; children: ReactNode }) {
+  // useEffect(() => {
+  //   enableFreeze(true)
+  //   return () => {
+  //     enableFreeze(false)
+  //   }
+  // }, [on])
+
+  if (typeof window === 'undefined') {
+    return children
+  }
+
+  return (
+    <FrozeContext.Provider value={on}>
+      {/* <Freeze freeze={on}> */}
+      <div {...(on && { inert: true })} style={{ display: 'contents' }}>
+        {children}
+      </div>
+      {/* </Freeze> */}
+    </FrozeContext.Provider>
+  )
+}
+
+export function useRouter(): OneRouter.Router {
+  return router
+}
+
+/**
+ * @private
+ * @returns the current global pathname with query params attached. This may change in the future to include the hostname from a predefined universal link, i.e. `/foobar?hey=world` becomes `https://acme.dev/foobar?hey=world`
+ */
+export function useUnstableGlobalHref(): string {
+  return useRouteInfo().unstable_globalHref
+}
+
+/**
+ * Get a list of selected file segments for the currently selected route. Segments are not normalized, so they will be the same as the file path. e.g. /[id]?id=normal -> ["[id]"]
+ *
+ * `useSegments` can be typed using an abstract.
+ * Consider the following file structure, and strictly typed `useSegments` function:
+ *
+ * ```md
+ * - app
+ *   - [user]
+ *     - index.js
+ *     - followers.js
+ *   - settings.js
+ * ```
+ * This can be strictly typed using the following abstract:
+ *
+ * ```ts
+ * const [first, second] = useSegments<['settings'] | ['[user]'] | ['[user]', 'followers']>()
+ * ```
+ */
+export function useSegments<TSegments extends string[] = string[]>(): TSegments {
+  return useRouteInfo().segments as TSegments
+}
+
+/** @returns global selected pathname without query parameters. */
+export function usePathname(): string {
+  return useRouteInfo().pathname
+}
+
+/**
+ * Get the globally selected query parameters, including dynamic path segments. This function will update even when the route is not focused.
+ * Useful for analytics or other background operations that don't draw to the screen.
+ *
+ * When querying search params in a stack, opt-towards using `useParams` as these will only
+ * update when the route is focused.
+ *
+ * @see `useParams`
+ */
+export function useActiveParams<TParams extends Object = SearchParams>(): Partial<TParams> {
+  return useRouteInfo().params as Partial<TParams>
+}
+
+/** @deprecated @see `useParams` */
+export const useLocalSearchParams = useParams
+
+/** @deprecated @see `useActiveParams` */
+export const useGlobalSearchParams = useActiveParams
+
+/**
+ * Returns the URL search parameters for the contextually focused route. e.g. `/acme?foo=bar` -> `{ foo: "bar" }`.
+ * This is useful for stacks where you may push a new screen that changes the query parameters.
+ *
+ * To observe updates even when the invoking route is not focused, use `useActiveParams()`.
+ */
+
+export function useParams<TParams extends Object = SearchParams>(): Partial<TParams> {
+  const params = React.useContext(RouteParamsContext) ?? {}
+
+  return Object.fromEntries(
+    Object.entries(params).map(([key, value]) => {
+      if (Array.isArray(value)) {
+        return [
+          key,
+          value.map((v) => {
+            try {
+              return decodeURIComponent(v)
+            } catch {
+              return v
+            }
+          }),
+        ]
+      }
+      try {
+        return [key, decodeURIComponent(value as string)]
+      } catch {
+        return [key, value]
+      }
+    })
+  ) as TParams
+}

package/src/href.ts

@@ -0,0 +1,12 @@
+import type { OneRouter } from './interfaces/router'
+
+/**
+ * Type-level utility function to help pass valid Href typed strings.
+ * Does not actually validate at runtime, though we could add this later.
+ */
+export function href<A extends OneRouter.Href>(a: A): A {
+  if (!a || typeof a !== 'string') {
+    throw new Error(`Invalid href`)
+  }
+  return a
+}

package/src/import-mode/index.android.ts

@@ -0,0 +1 @@
+export default process.env.One_ROUTER_IMPORT_MODE_ANDROID ?? 'lazy'

package/src/import-mode/index.ios.ts

@@ -0,0 +1 @@
+export default process.env.One_ROUTER_IMPORT_MODE_IOS ?? 'lazy'

package/src/import-mode/index.native.ts

@@ -0,0 +1,3 @@
+// TODO the way tamagui-build is working it always
+// builds the .native but it needs to detect .ios/.android and avoid...
+export default 'lazy'