@tanstack/react-router 0.0.1-beta.48 → 0.0.1-beta.49

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.48",
+  "version": "0.0.1-beta.49",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router/",
@@ -41,9 +41,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "@solidjs/reactivity": "^0.0.6",
+    "@solidjs/reactivity": "^0.0.7",
     "use-sync-external-store": "^1.2.0",
-    "@tanstack/router-core": "0.0.1-beta.45"
+    "@tanstack/router-core": "0.0.1-beta.49"
   },
   "devDependencies": {
     "@types/use-sync-external-store": "^0.0.3",

package/src/index.tsx

@@ -1,19 +1,11 @@
 import * as React from 'react'
 
-import { useSyncExternalStore } from 'use-sync-external-store/shim'
-// @ts-ignore
-// import { useSyncExternalStore } from './uSES/useSyncExternalStoreShim'
-import { createEffect, createRoot, untrack, unwrap } from '@solidjs/reactivity'
-import { createStore } from '@solidjs/reactivity'
-
 import {
   Route,
   RegisteredAllRouteInfo,
   RegisteredRouter,
   RouterStore,
   last,
-  sharedClone,
-  Action,
   warning,
   RouterOptions,
   RouteMatch,
@@ -23,7 +15,6 @@ import {
   AnyAllRouteInfo,
   DefaultAllRouteInfo,
   functionalUpdate,
-  createRouter,
   AllRouteInfo,
   ValidFromPath,
   LinkOptions,
@@ -34,11 +25,19 @@ import {
   invariant,
   Router,
   Expand,
+  Action,
+  ActionStore,
+  ActionSubmission,
 } from '@tanstack/router-core'
+import { useStore } from './useStore'
+
+//
 
 export * from '@tanstack/router-core'
 
-export * from '@solidjs/reactivity'
+export { useStore }
+
+//
 
 type ReactNode = any
 
@@ -158,7 +157,7 @@ export function useLinkProps<
     hash,
     search,
     params,
-    to,
+    to = '.',
     preload,
     preloadDelay,
     preloadMaxAge,
@@ -208,7 +207,7 @@ export function useLinkProps<
 
   // Get the active props
   const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> = isActive
-    ? functionalUpdate(activeProps, {}) ?? {}
+    ? functionalUpdate(activeProps as any, {}) ?? {}
     : {}
 
   // Get the inactive props
@@ -291,89 +290,23 @@ export type MatchesProviderProps = {
   children: ReactNode
 }
 
-const EMPTY = {}
-
-export const __useStoreValue = <TSeed, TReturn>(
-  seed: () => TSeed,
-  selector?: (seed: TSeed) => TReturn,
-): TReturn => {
-  const valueRef = React.useRef<TReturn>(EMPTY as any)
-
-  // If there is no selector, track the seed
-  // If there is a selector, do not track the seed
-  const getValue = () =>
-    (!selector ? seed() : selector(untrack(() => seed()))) as TReturn
-
-  // If empty, initialize the value
-  if (valueRef.current === EMPTY) {
-    valueRef.current = sharedClone(undefined, getValue())
-  }
-
-  // Snapshot should just return the current cached value
-  const getSnapshot = React.useCallback(() => valueRef.current, [])
-
-  const getStore = React.useCallback((cb: () => void) => {
-    // A root is necessary to track effects
-    return createRoot(() => {
-      createEffect(() => {
-        // Read and update the value
-        // getValue will handle which values are accessed and
-        // thus tracked.
-        // sharedClone will both recursively track the end result
-        // and ensure that the previous value is structurally shared
-        // into the new version.
-        valueRef.current = unwrap(
-          // Unwrap the value to get rid of any proxy structures
-          sharedClone(valueRef.current, getValue()),
-        )
-        cb()
-      })
-    })
-  }, [])
-
-  return useSyncExternalStore(getStore, getSnapshot, getSnapshot)
-}
-
-const [store, setStore] = createStore({ foo: 'foo', bar: { baz: 'baz' } })
-
-createRoot(() => {
-  let prev: any
-
-  createEffect(() => {
-    console.log('effect')
-    const next = sharedClone(prev, store)
-    console.log(next)
-    prev = untrack(() => next)
-  })
-})
-
-setStore((s) => {
-  s.foo = '1'
-})
-
-setStore((s) => {
-  s.bar.baz = '2'
-})
-
-export function createReactRouter<
+export class ReactRouter<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
   TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
   TRouterContext = unknown,
->(
-  opts: RouterOptions<TRouteConfig, TRouterContext>,
-): Router<TRouteConfig, TAllRouteInfo, TRouterContext> {
-  const coreRouter = createRouter<TRouteConfig>({
-    ...opts,
-    loadComponent: async (component) => {
-      if (component.preload) {
-        await component.preload()
-      }
-
-      return component as any
-    },
-  })
+> extends Router<TRouteConfig, TAllRouteInfo, TRouterContext> {
+  constructor(opts: RouterOptions<TRouteConfig, TRouterContext>) {
+    super({
+      ...opts,
+      loadComponent: async (component) => {
+        if (component.preload) {
+          await component.preload()
+        }
 
-  return coreRouter as any
+        return component as any
+      },
+    })
+  }
 }
 
 export type RouterProps<
@@ -394,15 +327,14 @@ export function RouterProvider<
 }: RouterProps<TRouteConfig, TAllRouteInfo, TRouterContext>) {
   router.update(rest)
 
-  const [, , currentMatches] = __useStoreValue(
-    () => router.store,
+  const [, , currentMatches] = useStore(
+    router.store,
     (s) => [s.status, s.pendingMatches, s.currentMatches],
+    true,
   )
 
   React.useEffect(router.mount, [router])
 
-  console.log('current', currentMatches)
-
   return (
     <>
       <routerContext.Provider value={{ router: router as any }}>
@@ -422,9 +354,10 @@ export function useRouter(): RegisteredRouter {
 
 export function useRouterStore<T = RouterStore>(
   selector?: (state: Router['store']) => T,
+  shallow?: boolean,
 ): T {
   const router = useRouter()
-  return __useStoreValue(() => router.store, selector)
+  return useStore(router.store, selector as any, shallow)
 }
 
 export function useMatches(): RouteMatch[] {
@@ -438,16 +371,16 @@ export function useMatch<
     RegisteredAllRouteInfo,
     RegisteredAllRouteInfo['routeInfoById'][TFrom]
   >,
-  // TSelected = TRouteMatch,
 >(opts?: {
   from: TFrom
   strict?: TStrict
-  // select?: (match: TRouteMatch) => TSelected
+  track?: (match: TRouteMatch) => any
+  shallow?: boolean
 }): TStrict extends true ? TRouteMatch : TRouteMatch | undefined {
   const router = useRouter()
   const nearestMatch = useMatches()[0]!
   const match = opts?.from
-    ? router.store.currentMatches.find((d) => d.routeId === opts?.from)
+    ? router.store.state.currentMatches.find((d) => d.route.id === opts?.from)
     : nearestMatch
 
   invariant(
@@ -459,20 +392,24 @@ export function useMatch<
 
   if (opts?.strict ?? true) {
     invariant(
-      nearestMatch.routeId == match?.routeId,
+      nearestMatch.route.id == match?.route.id,
       `useMatch("${
-        match?.routeId as string
+        match?.route.id as string
       }") is being called in a component that is meant to render the '${
-        nearestMatch.routeId
+        nearestMatch.route.id
       }' route. Did you mean to 'useMatch("${
-        match?.routeId as string
+        match?.route.id as string
       }", { strict: false })' or 'useRoute("${
-        match?.routeId as string
+        match?.route.id as string
       }")' instead?`,
     )
   }
 
-  __useStoreValue(() => match!.store)
+  useStore(
+    match!.store,
+    (d) => opts?.track?.(match as any) ?? match,
+    opts?.shallow,
+  )
 
   return match as any
 }
@@ -499,14 +436,26 @@ export function useLoaderData<
   TFrom extends keyof RegisteredAllRouteInfo['routeInfoById'] = '/',
   TStrict extends boolean = true,
   TLoaderData = RegisteredAllRouteInfo['routeInfoById'][TFrom]['loaderData'],
-  TSelected = TLoaderData,
 >(opts?: {
   from: TFrom
   strict?: TStrict
-  select?: (loaderData: TLoaderData) => TSelected
-}): TStrict extends true ? TSelected : TSelected | undefined {
-  const match = useMatch(opts) as any
-  return __useStoreValue(() => match?.store.loaderData, opts?.select)
+  track?: (loaderData: TLoaderData) => any
+}): TStrict extends true ? TLoaderData : TLoaderData | undefined {
+  const match = useMatch(opts)
+
+  invariant(
+    match,
+    `Could not find ${
+      opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'
+    }`,
+  )
+
+  useStore(
+    (match as any).store,
+    (d: any) => opts?.track?.(d.loaderData) ?? d.loaderData,
+  )
+
+  return (match as unknown as RouteMatch).store.state.loaderData as any
 }
 
 export function useSearch<
@@ -517,10 +466,15 @@ export function useSearch<
 >(opts?: {
   from: TFrom
   strict?: TStrict
-  select?: (search: TSearch) => TSelected
+  track?: (search: TSearch) => TSelected
 }): TStrict extends true ? TSelected : TSelected | undefined {
   const match = useMatch(opts)
-  return __useStoreValue(() => match?.store.search, opts?.select) as any
+  useStore(
+    (match as any).store,
+    (d: any) => opts?.track?.(d.search) ?? d.search,
+  )
+
+  return (match as unknown as RouteMatch).store.state.search as any
 }
 
 export function useParams<
@@ -532,13 +486,15 @@ export function useParams<
   TSelected = TDefaultSelected,
 >(opts?: {
   from: TFrom
-  select?: (search: TDefaultSelected) => TSelected
+  track?: (search: TDefaultSelected) => TSelected
 }): TSelected {
   const router = useRouter()
-  return __useStoreValue(
-    () => last(router.store.currentMatches)?.params as any,
-    opts?.select,
-  )
+  useStore(router.store, (d) => {
+    const params = last(d.currentMatches)?.params as any
+    return opts?.track?.(params) ?? params
+  })
+
+  return last(router.store.state.currentMatches)?.params as any
 }
 
 export function useNavigate<
@@ -555,18 +511,6 @@ export function useNavigate<
   }
 }
 
-export function useAction<
-  TFrom extends keyof RegisteredAllRouteInfo['routeInfoById'] = '/',
-  TFromRoute extends RegisteredAllRouteInfo['routeInfoById'][TFrom] = RegisteredAllRouteInfo['routeInfoById'][TFrom],
->(opts: {
-  from: TFrom
-}): Action<TFromRoute['actionPayload'], TFromRoute['actionResponse']> {
-  const route = useRoute(opts.from)
-  const action = route.action
-  __useStoreValue(() => action)
-  return action as any
-}
-
 export function useMatchRoute() {
   const router = useRouter()
 
@@ -596,38 +540,51 @@ export function MatchRoute<
     return null
   }
 
-  return React.createElement(
-    typeof props.children === 'function'
-      ? (props.children as any)(params)
-      : props.children,
-    props as any,
-  )
+  if (typeof props.children === 'function') {
+    return (props.children as any)(params)
+  }
+
+  return params ? props.children : null
 }
 
 export function Outlet() {
-  const router = useRouter()
   const matches = useMatches().slice(1)
   const match = matches[0]
 
-  const defaultPending = React.useCallback(() => null, [])
+  if (!match) {
+    return null
+  }
+
+  return <SubOutlet matches={matches} match={match} />
+}
+
+function SubOutlet({
+  matches,
+  match,
+}: {
+  matches: RouteMatch[]
+  match: RouteMatch
+}) {
+  const router = useRouter()
+  useStore(match!.store)
 
-  __useStoreValue(() => match?.store)
+  const defaultPending = React.useCallback(() => null, [])
 
   const Inner = React.useCallback((props: { match: RouteMatch }): any => {
-    if (props.match.store.status === 'error') {
-      throw props.match.store.error
+    if (props.match.store.state.status === 'error') {
+      throw props.match.store.state.error
     }
 
-    if (props.match.store.status === 'success') {
+    if (props.match.store.state.status === 'success') {
       return React.createElement(
-        (props.match.__.component as any) ??
+        (props.match.component as any) ??
           router.options.defaultComponent ??
           Outlet,
       )
     }
 
-    if (props.match.store.status === 'loading') {
-      throw props.match.__.loadPromise
+    if (props.match.store.state.status === 'loading') {
+      throw props.match.__loadPromise
     }
 
     invariant(
@@ -636,22 +593,18 @@ export function Outlet() {
     )
   }, [])
 
-  if (!match) {
-    return null
-  }
-
-  const PendingComponent = (match.__.pendingComponent ??
+  const PendingComponent = (match.pendingComponent ??
     router.options.defaultPendingComponent ??
     defaultPending) as any
 
   const errorComponent =
-    match.__.errorComponent ?? router.options.defaultErrorComponent
+    match.errorComponent ?? router.options.defaultErrorComponent
 
   return (
     <matchesContext.Provider value={matches}>
       <React.Suspense fallback={<PendingComponent />}>
         <CatchBoundary
-          key={match.routeId}
+          key={match.route.id}
           errorComponent={errorComponent}
           match={match as any}
         >
@@ -686,7 +639,7 @@ class CatchBoundary extends React.Component<{
   }
 
   componentDidCatch(error: any, info: any) {
-    console.error(`Error in route match: ${this.props.match.matchId}`)
+    console.error(`Error in route match: ${this.props.match.id}`)
     console.error(error)
 
     this.setState({
@@ -721,21 +674,23 @@ function CatchBoundaryInner(props: {
   const router = useRouter()
   const errorComponent = props.errorComponent ?? DefaultErrorBoundary
 
-  React.useEffect(() => {
-    if (activeErrorState) {
-      let prevKey = router.store.currentLocation.key
-      return createRoot(() =>
-        createEffect(() => {
-          if (router.store.currentLocation.key !== prevKey) {
-            prevKey = router.store.currentLocation.key
-            setActiveErrorState({} as any)
-          }
-        }),
-      )
-    }
+  // React.useEffect(() => {
+  //   if (activeErrorState) {
+  //     let prevKey = router.store.currentLocation.key
+  //     return createRoot((dispose) => {
+  //       createEffect(() => {
+  //         if (router.store.currentLocation.key !== prevKey) {
+  //           prevKey = router.store.currentLocation.key
+  //           setActiveErrorState({} as any)
+  //         }
+  //       })
 
-    return
-  }, [activeErrorState])
+  //       return dispose
+  //     })
+  //   }
+
+  //   return
+  // }, [activeErrorState])
 
   React.useEffect(() => {
     if (props.errorState.error) {
@@ -777,43 +732,61 @@ export function DefaultErrorBoundary({ error }: { error: any }) {
   )
 }
 
-export function usePrompt(message: string, when: boolean | any): void {
-  const router = useRouter()
-
-  React.useEffect(() => {
-    if (!when) return
-
-    let unblock = router.history.block((transition) => {
-      if (window.confirm(message)) {
-        unblock()
-        transition.retry()
-      } else {
-        router.store.currentLocation.pathname = window.location.pathname
-      }
-    })
+export function useAction<
+  TKey extends string = string,
+  TPayload = unknown,
+  TResponse = unknown,
+  TError = Error,
+>(
+  action: Action<TKey, TPayload, TResponse, TError>,
+  opts?: {
+    track?: (actionStore: ActionStore<TPayload, TResponse, TError>) => any
+  },
+): Action & {
+  latestSubmission: ActionSubmission<TPayload, TResponse, TError>
+  pendingSubmissions: ActionSubmission<TPayload, TResponse, TError>[]
+} {
+  useStore(action.store, (d) => opts?.track?.(d) ?? d, true)
+
+  const [ref] = React.useState({})
+
+  Object.assign(ref, {
+    ...action,
+    latestSubmission:
+      action.store.state.submissions[action.store.state.submissions.length - 1],
+    pendingSubmissions: React.useMemo(
+      () =>
+        action.store.state.submissions.filter((d) => d.status === 'pending'),
+      [action.store.state.submissions],
+    ),
+  })
 
-    return unblock
-  }, [when, message])
+  return ref as any
 }
 
-export function Prompt({ message, when, children }: PromptProps) {
-  usePrompt(message, when ?? true)
-  return (children ?? null) as ReactNode
-}
+// TODO: While we migrate away from the history package, these need to be disabled
+// export function usePrompt(message: string, when: boolean | any): void {
+//   const router = useRouter()
+
+//   React.useEffect(() => {
+//     if (!when) return
+
+//     let unblock = router.getHistory().block((transition) => {
+//       if (window.confirm(message)) {
+//         unblock()
+//         transition.retry()
+//       } else {
+//         router.setStore((s) => {
+//           s.currentLocation.pathname = window.location.pathname
+//         })
+//       }
+//     })
 
-// function circularStringify(obj: any) {
-//   const seen = new Set()
+//     return unblock
+//   }, [when, message])
+// }
 
-//   return (
-//     JSON.stringify(obj, (_, value) => {
-//       if (typeof value === 'function') {
-//         return undefined
-//       }
-//       if (typeof value === 'object' && value !== null) {
-//         if (seen.has(value)) return
-//         seen.add(value)
-//       }
-//       return value
-//     }) || ''
-//   )
+// export function Prompt({ message, when, children }: PromptProps) {
+//   usePrompt(message, when ?? true)
+//   return (children ?? null) as ReactNode
 // }

package/src/useStore.ts

@@ -0,0 +1,70 @@
+import { Store } from '@tanstack/router-core'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
+
+export function useStore<TState, TSelected = TState>(
+  store: Store<TState>,
+  selector: (state: TState) => TSelected = (d) => d as any,
+  compareShallow?: boolean,
+) {
+  const slice = useSyncExternalStoreWithSelector(
+    store.subscribe,
+    () => store.state,
+    () => store.state,
+    selector,
+    compareShallow ? shallow : undefined,
+  )
+
+  return slice
+}
+
+function shallow<T>(objA: T, objB: T) {
+  if (Object.is(objA, objB)) {
+    return true
+  }
+
+  if (
+    typeof objA !== 'object' ||
+    objA === null ||
+    typeof objB !== 'object' ||
+    objB === null
+  ) {
+    return false
+  }
+
+  // if (objA instanceof Map && objB instanceof Map) {
+  //   if (objA.size !== objB.size) return false
+
+  //   for (const [key, value] of objA) {
+  //     if (!Object.is(value, objB.get(key))) {
+  //       return false
+  //     }
+  //   }
+  //   return true
+  // }
+
+  // if (objA instanceof Set && objB instanceof Set) {
+  //   if (objA.size !== objB.size) return false
+
+  //   for (const value of objA) {
+  //     if (!objB.has(value)) {
+  //       return false
+  //     }
+  //   }
+  //   return true
+  // }
+
+  const keysA = Object.keys(objA)
+  if (keysA.length !== Object.keys(objB).length) {
+    return false
+  }
+
+  for (let i = 0; i < keysA.length; i++) {
+    if (
+      !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||
+      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])
+    ) {
+      return false
+    }
+  }
+  return true
+}

package/src/uSES/useSyncExternalStore.ts

@@ -1,16 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-'use strict'
-
-// Intentionally not using named imports because Rollup uses dynamic
-// dispatch for CommonJS interop named imports.
-import * as React from 'react'
-
-export const useSyncExternalStore = React.useSyncExternalStore