one 1.1.5 → 1.1.269

package/src/head/Head.ios.tsx

@@ -0,0 +1,302 @@
+import { useIsFocused } from '@react-navigation/core'
+import React from 'react'
+import { HeadModule, type UserActivity } from './HeadModule'
+import { getStaticUrlFromOneRouter } from './url'
+import { useParams, useUnstableGlobalHref, usePathname, useSegments } from '../hooks'
+import type { HeadType } from './types'
+
+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: typeof child.props.children === 'string' ? child.props.children : undefined,
+        },
+      }
+    }
+    return {
+      type: 'meta',
+      props: {
+        property: typeof child.props.property === 'string' ? child.props.property : undefined,
+        content: 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-ignore
+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-ignore
+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-ignore
+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-ignore: 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,143 @@
+import { NavigationRouteContext } from '@react-navigation/native'
+import React, { createContext, type ReactNode } from 'react'
+import { router } from './imperative-api'
+import type { OneRouter } from './interfaces/router'
+import { navigationRef, useStoreRootState, useStoreRouteInfo } from './router/router'
+
+type SearchParams = OneRouter.SearchParams
+
+export function useRootNavigationState() {
+  return useStoreRootState()
+}
+
+export function useRouteInfo() {
+  return useStoreRouteInfo()
+}
+
+/** @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
+        // @ts-ignore
+        inert
+        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 useStoreRouteInfo().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 useStoreRouteInfo().segments as TSegments
+}
+
+/** @returns global selected pathname without query parameters. */
+export function usePathname(): string {
+  return useStoreRouteInfo().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 useStoreRouteInfo().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()`.
+ */
+
+// TODO @nate: i removed Partial<TParams> for better types for demo
+export function useParams<TParams extends Object = SearchParams>(): TParams {
+  const context = React.useContext(NavigationRouteContext)
+  const params = context?.params ?? {}
+
+  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/imperative-api.ts

@@ -0,0 +1,20 @@
+import * as store from './router/router'
+import type { OneRouter } from './interfaces/router'
+
+export const router: OneRouter.Router = {
+  navigate: store.navigate,
+  push: store.push,
+  dismiss: store.dismiss,
+  dismissAll: store.dismissAll,
+  canDismiss: store.canDismiss,
+  replace: store.replace,
+  back: store.goBack,
+  canGoBack: store.canGoBack,
+  setParams: (params) =>
+    store.setParams(
+      // TODO
+      params as any
+    ),
+  subscribe: store.subscribeToRootState,
+  onLoadState: store.subscribeToLoadingState,
+}

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'

package/src/import-mode/index.ts

@@ -0,0 +1 @@
+export default 'sync' as 'sync' | 'lazy'

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

@@ -0,0 +1 @@
+export default process.env.One_ROUTER_IMPORT_MODE_WEB