@tanstack/react-router 0.0.1-beta.54 → 0.0.1-beta.55

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.54",
+  "version": "0.0.1-beta.55",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router/",
@@ -41,12 +41,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "@solidjs/reactivity": "^0.0.7",
-    "use-sync-external-store": "^1.2.0",
-    "@tanstack/router-core": "0.0.1-beta.54"
+    "@tanstack/router": "0.0.1-beta.55",
+    "@tanstack/react-store": "0.0.1-beta.55"
   },
   "devDependencies": {
-    "@types/use-sync-external-store": "^0.0.3",
     "babel-plugin-transform-async-to-promises": "^0.8.18"
   }
 }

package/src/index.tsx

@@ -25,15 +25,12 @@ import {
   invariant,
   Router,
   Expand,
-  Action,
-  ActionStore,
-  ActionSubmission,
-} from '@tanstack/router-core'
-import { useStore } from './useStore'
+} from '@tanstack/router'
+import { useStore } from '@tanstack/react-store'
 
 //
 
-export * from '@tanstack/router-core'
+export * from '@tanstack/router'
 
 export { useStore }
 
@@ -114,7 +111,7 @@ export type MakeLinkOptions<
     children?: ReactNode | ((state: { isActive: boolean }) => ReactNode)
   }
 
-declare module '@tanstack/router-core' {
+declare module '@tanstack/router' {
   interface FrameworkGenerics {
     Component: RouteComponent
     ErrorComponent: RouteComponent<{
@@ -432,32 +429,6 @@ export function useRoute<
   return resolvedRoute as any
 }
 
-export function useLoaderData<
-  TFrom extends keyof RegisteredAllRouteInfo['routeInfoById'] = '/',
-  TStrict extends boolean = true,
-  TLoaderData = RegisteredAllRouteInfo['routeInfoById'][TFrom]['loaderData'],
->(opts?: {
-  from: TFrom
-  strict?: TStrict
-  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<
   TFrom extends keyof RegisteredAllRouteInfo['routeInfoById'],
   TStrict extends boolean = true,
@@ -583,7 +554,7 @@ function SubOutlet({
       )
     }
 
-    if (props.match.store.state.status === 'loading') {
+    if (props.match.store.state.status === 'pending') {
       throw props.match.__loadPromise
     }
 
@@ -673,33 +644,26 @@ function CatchBoundaryInner(props: {
   )
   const router = useRouter()
   const errorComponent = props.errorComponent ?? DefaultErrorBoundary
+  const prevKeyRef = React.useRef('' as any)
 
-  // React.useEffect(() => {
-  //   if (activeErrorState) {
-  //     let prevKey = router.store.state.currentLocation.key
-  //     return createRoot((dispose) => {
-  //       createEffect(() => {
-  //         if (router.store.state.currentLocation.key !== prevKey) {
-  //           prevKey = router.store.state.currentLocation.key
-  //           setActiveErrorState({} as any)
-  //         }
-  //       })
-
-  //       return dispose
-  //     })
-  //   }
+  React.useEffect(() => {
+    if (activeErrorState) {
+      if (router.store.state.currentLocation.key !== prevKeyRef.current) {
+        setActiveErrorState({} as any)
+      }
+    }
 
-  //   return
-  // }, [activeErrorState])
+    prevKeyRef.current = router.store.state.currentLocation.key
+  }, [activeErrorState, router.store.state.currentLocation.key])
 
   React.useEffect(() => {
     if (props.errorState.error) {
       setActiveErrorState(props.errorState)
     }
-    props.reset()
+    // props.reset()
   }, [props.errorState.error])
 
-  if (props.errorState.error) {
+  if (props.errorState.error && activeErrorState.error) {
     return React.createElement(errorComponent, activeErrorState)
   }
 
@@ -732,38 +696,6 @@ export function DefaultErrorBoundary({ error }: { error: any }) {
   )
 }
 
-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 ref as any
-}
-
 // 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()

package/build/cjs/useStore.js

@@ -1,64 +0,0 @@
-/**
- * react-router
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var withSelector = require('use-sync-external-store/shim/with-selector');
-
-function useStore(store, selector = d => d, compareShallow) {
-  const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, compareShallow ? shallow : undefined);
-  return slice;
-}
-function shallow(objA, objB) {
-  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]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-
-exports.useStore = useStore;
-//# sourceMappingURL=useStore.js.map

package/build/cjs/useStore.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useStore.js","sources":["../../src/useStore.ts"],"sourcesContent":["import { Store } from '@tanstack/router-core'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'\n\nexport function useStore<TState, TSelected = TState>(\n  store: Store<TState>,\n  selector: (state: TState) => TSelected = (d) => d as any,\n  compareShallow?: boolean,\n) {\n  const slice = useSyncExternalStoreWithSelector(\n    store.subscribe,\n    () => store.state,\n    () => store.state,\n    selector,\n    compareShallow ? shallow : undefined,\n  )\n\n  return slice\n}\n\nfunction shallow<T>(objA: T, objB: T) {\n  if (Object.is(objA, objB)) {\n    return true\n  }\n\n  if (\n    typeof objA !== 'object' ||\n    objA === null ||\n    typeof objB !== 'object' ||\n    objB === null\n  ) {\n    return false\n  }\n\n  // if (objA instanceof Map && objB instanceof Map) {\n  //   if (objA.size !== objB.size) return false\n\n  //   for (const [key, value] of objA) {\n  //     if (!Object.is(value, objB.get(key))) {\n  //       return false\n  //     }\n  //   }\n  //   return true\n  // }\n\n  // if (objA instanceof Set && objB instanceof Set) {\n  //   if (objA.size !== objB.size) return false\n\n  //   for (const value of objA) {\n  //     if (!objB.has(value)) {\n  //       return false\n  //     }\n  //   }\n  //   return true\n  // }\n\n  const keysA = Object.keys(objA)\n  if (keysA.length !== Object.keys(objB).length) {\n    return false\n  }\n\n  for (let i = 0; i < keysA.length; i++) {\n    if (\n      !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||\n      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])\n    ) {\n      return false\n    }\n  }\n  return true\n}\n"],"names":["useStore","store","selector","d","compareShallow","slice","useSyncExternalStoreWithSelector","subscribe","state","shallow","undefined","objA","objB","Object","is","keysA","keys","length","i","prototype","hasOwnProperty","call"],"mappings":";;;;;;;;;;;;;;;;AAGO,SAASA,QAAQ,CACtBC,KAAoB,EACpBC,QAAsC,GAAIC,CAAC,IAAKA,CAAQ,EACxDC,cAAwB,EACxB;EACA,MAAMC,KAAK,GAAGC,6CAAgC,CAC5CL,KAAK,CAACM,SAAS,EACf,MAAMN,KAAK,CAACO,KAAK,EACjB,MAAMP,KAAK,CAACO,KAAK,EACjBN,QAAQ,EACRE,cAAc,GAAGK,OAAO,GAAGC,SAAS,CACrC,CAAA;AAED,EAAA,OAAOL,KAAK,CAAA;AACd,CAAA;AAEA,SAASI,OAAO,CAAIE,IAAO,EAAEC,IAAO,EAAE;EACpC,IAAIC,MAAM,CAACC,EAAE,CAACH,IAAI,EAAEC,IAAI,CAAC,EAAE;AACzB,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,IACE,OAAOD,IAAI,KAAK,QAAQ,IACxBA,IAAI,KAAK,IAAI,IACb,OAAOC,IAAI,KAAK,QAAQ,IACxBA,IAAI,KAAK,IAAI,EACb;AACA,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,EAAA,MAAMG,KAAK,GAAGF,MAAM,CAACG,IAAI,CAACL,IAAI,CAAC,CAAA;AAC/B,EAAA,IAAII,KAAK,CAACE,MAAM,KAAKJ,MAAM,CAACG,IAAI,CAACJ,IAAI,CAAC,CAACK,MAAM,EAAE;AAC7C,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGH,KAAK,CAACE,MAAM,EAAEC,CAAC,EAAE,EAAE;AACrC,IAAA,IACE,CAACL,MAAM,CAACM,SAAS,CAACC,cAAc,CAACC,IAAI,CAACT,IAAI,EAAEG,KAAK,CAACG,CAAC,CAAC,CAAW,IAC/D,CAACL,MAAM,CAACC,EAAE,CAACH,IAAI,CAACI,KAAK,CAACG,CAAC,CAAC,CAAY,EAAEN,IAAI,CAACG,KAAK,CAACG,CAAC,CAAC,CAAY,CAAC,EAChE;AACA,MAAA,OAAO,KAAK,CAAA;AACd,KAAA;AACF,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb;;;;"}

package/src/useStore.ts

@@ -1,70 +0,0 @@
-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
-}