@tanstack/react-router 0.0.1-alpha.9 → 0.0.1-beta.2

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-alpha.9",
+  "version": "0.0.1-beta.2",
   "license": "MIT",
   "repository": "tanstack/router",
-  "homepage": "https://react-router.tanstack.com/",
+  "homepage": "https://tanstack.com/router/",
   "description": "",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "@tanstack/router-core": "0.0.1-alpha.9",
+    "@tanstack/router-core": "0.0.1-beta.2",
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {

package/src/index.tsx

@@ -4,10 +4,11 @@ import { useSyncExternalStore } from 'use-sync-external-store/shim'
 
 import {
   AnyRoute,
-  RootRouteId,
+  CheckId,
   rootRouteId,
   Router,
   RouterState,
+  ToIdOption,
 } from '@tanstack/router-core'
 import {
   warning,
@@ -37,19 +38,14 @@ export * from '@tanstack/router-core'
 declare module '@tanstack/router-core' {
   interface FrameworkGenerics {
     Element: React.ReactNode
-    AsyncElement: (opts: {
-      params: Record<string, string>
-    }) => Promise<React.ReactNode>
-    SyncOrAsyncElement: React.ReactNode | FrameworkGenerics['AsyncElement']
+    // Any is required here so import() will work without having to do import().then(d => d.default)
+    SyncOrAsyncElement: React.ReactNode | (() => Promise<any>)
   }
 
   interface Router<
     TRouteConfig extends AnyRouteConfig = RouteConfig,
     TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
-  > extends Pick<
-      Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][RootRouteId]>,
-      'linkProps' | 'Link' | 'MatchRoute'
-    > {
+  > {
     useState: () => RouterState
     useRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
       routeId: TId,
@@ -91,6 +87,19 @@ declare module '@tanstack/router-core' {
     TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
     TRouteInfo extends AnyRouteInfo = RouteInfo,
   > {
+    useRoute: <
+      TTo extends string = '.',
+      TResolved extends string = ResolveRelativePath<
+        TRouteInfo['id'],
+        NoInfer<TTo>
+      >,
+    >(
+      routeId: CheckId<
+        TAllRouteInfo,
+        TResolved,
+        ToIdOption<TAllRouteInfo, TRouteInfo['id'], TTo>
+      >,
+    ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TResolved]>
     linkProps: <TTo extends string = '.'>(
       props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
         React.AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -170,6 +179,7 @@ const useRouterSubscription = (router: Router<any, any>) => {
   useSyncExternalStore(
     (cb) => router.subscribe(() => cb()),
     () => router.state,
+    () => router.state,
   )
 }
 
@@ -179,8 +189,23 @@ export function createReactRouter<
   const makeRouteExt = (
     route: AnyRoute,
     router: Router<any, any>,
-  ): Pick<AnyRoute, 'linkProps' | 'Link' | 'MatchRoute'> => {
+  ): Pick<AnyRoute, 'useRoute' | 'linkProps' | 'Link' | 'MatchRoute'> => {
     return {
+      useRoute: (subRouteId = '.' as any) => {
+        const resolvedRouteId = router.resolvePath(
+          route.routeId,
+          subRouteId as string,
+        )
+        const resolvedRoute = router.getRoute(resolvedRouteId)
+        useRouterSubscription(router)
+        invariant(
+          resolvedRoute,
+          `Could not find a route for route "${
+            resolvedRouteId as string
+          }"! Did you forget to add it to your route config?`,
+        )
+        return resolvedRoute
+      },
       linkProps: (options) => {
         const {
           // custom props
@@ -319,25 +344,11 @@ export function createReactRouter<
   const coreRouter = createRouter<TRouteConfig>({
     ...opts,
     createRouter: (router) => {
-      const routerExt: Pick<
-        Router<any, any>,
-        'useRoute' | 'useMatch' | 'useState'
-      > = {
+      const routerExt: Pick<Router<any, any>, 'useMatch' | 'useState'> = {
         useState: () => {
           useRouterSubscription(router)
           return router.state
         },
-        useRoute: (routeId) => {
-          const route = router.getRoute(routeId)
-          useRouterSubscription(router)
-          invariant(
-            route,
-            `Could not find a route for route "${
-              routeId as string
-            }"! Did you forget to add it to your route config?`,
-          )
-          return route
-        },
         useMatch: (routeId) => {
           useRouterSubscription(router)
 
@@ -384,6 +395,20 @@ export function createReactRouter<
 
       Object.assign(route, routeExt)
     },
+    createElement: async (element) => {
+      if (typeof element === 'function') {
+        const res = (await element()) as any
+
+        // Support direct import() calls
+        if (typeof res === 'object' && res.default) {
+          return React.createElement(res.default)
+        } else {
+          return res
+        }
+      }
+
+      return element
+    },
   })
 
   return coreRouter as any
@@ -576,4 +601,26 @@ export function DefaultErrorBoundary({ error }: { error: any }) {
   )
 }
 
-// TODO: Add prompt
+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.location.pathname = window.location.pathname
+      }
+    })
+
+    return unblock
+  }, [when, location, message])
+}
+
+export function Prompt({ message, when, children }: PromptProps) {
+  usePrompt(message, when ?? true)
+  return (children ?? null) as React.ReactNode
+}

package/src/qss.ts

@@ -1,53 +0,0 @@
-// @ts-nocheck
-
-// We're inlining qss here for compression's sake, but we've included it as a hard dependency for the MIT license it requires.
-
-export function encode(obj, pfx?: string) {
-  var k,
-    i,
-    tmp,
-    str = ''
-
-  for (k in obj) {
-    if ((tmp = obj[k]) !== void 0) {
-      if (Array.isArray(tmp)) {
-        for (i = 0; i < tmp.length; i++) {
-          str && (str += '&')
-          str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp[i])
-        }
-      } else {
-        str && (str += '&')
-        str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp)
-      }
-    }
-  }
-
-  return (pfx || '') + str
-}
-
-function toValue(mix) {
-  if (!mix) return ''
-  var str = decodeURIComponent(mix)
-  if (str === 'false') return false
-  if (str === 'true') return true
-  return +str * 0 === 0 ? +str : str
-}
-
-export function decode(str) {
-  var tmp,
-    k,
-    out = {},
-    arr = str.split('&')
-
-  while ((tmp = arr.shift())) {
-    tmp = tmp.split('=')
-    k = tmp.shift()
-    if (out[k] !== void 0) {
-      out[k] = [].concat(out[k], toValue(tmp.shift()))
-    } else {
-      out[k] = toValue(tmp.shift())
-    }
-  }
-
-  return out
-}