frail-apricot

Documentation in code

Hi, is there anything i can do to get better docs in my code than this? I find myself having to dig through so many types just to see what's happening or what options I can pass to a function. Am i missing a package?

16 Replies

solid-orange•13mo ago

Typescript errors aren't the easiest thing to debug 😅 I tend to use this plugin for making the errors easier to read.

solid-orange•13mo ago

https://github.com/yoavbls/pretty-ts-errors

GitHub

GitHub - yoavbls/pretty-ts-errors: 🔵 Make TypeScript errors prettie...

🔵 Make TypeScript errors prettier and human-readable in VSCode 🎀 - yoavbls/pretty-ts-errors

solid-orange•13mo ago

Since, Router relies on a lot of inferrence and the module declaration merging, I tend to rely on the plugin and plus the experience having to deal with ts errors 😅

solid-orange•13mo ago

We do ofc, have documentation on the website for the useNavigate() function. https://tanstack.com/router/latest/docs/framework/react/api/router/useNavigateHook

useNavigate hook | TanStack Router React Docs

The useNavigate hook is a hook that returns a navigate function that can be used to navigate to a new location. This includes changes to the pathname, search params, hash, and location state. useNavigate options

solid-orange•13mo ago

But, missing params (path or search), requires the reading of the error.

frail-apricotOP•13mo ago

This looks pretty nice, unfortunately I work with neovim 😦 Yeah learning that as I write more typescript 😮‍💨 🔫 Yeah I tend to always have the docs open but it gets a bit annoying constantly switching 😦

solid-orange•13mo ago

Oof, yeah that's rough. Reading typescript errors is a degree programme on its own. Realistically, all the errors thrown would be ts-related, so its matter how you digest them. The stuff, in the docs is more about configuration.

frail-apricotOP•13mo ago

Oddly enough I haven't had an issue with errors, I usually can easily know what's missing. but having to switch to a browser or dig through 300 types just to understand what the params to something like useNavigate() is started driving me nuts 😂

solid-orange•13mo ago

Btw, are you using file-based routing or code-based routing?

frail-apricotOP•13mo ago

File based. Stuck with the recommendation 🙂

solid-orange•13mo ago

When using file-based routing, you can get strictly typed hooks.

export const Route = createFileRoute('/')({ component: Component })

function Component() {
  const navigate = Route.useNavigate();
  //    ^ this is strongly typed
  // ...
}

export const Route = createFileRoute('/')({ component: Component })

function Component() {
  const navigate = Route.useNavigate();
  //    ^ this is strongly typed
  // ...
}

Its the same with code-based, but the ts-performance on code-based worse. Its particularly useful with file-based, since you'll often times end up dumping all your components closeby.

frail-apricotOP•13mo ago

Ah interesting, thanks for the tip. I just tried it out. I saw this in the docs somewhere but I just ended up importing useNavigate directly 🙈 . Didn't realise there was a difference So now rather than getting a NavigateResult, i'm getting one typed for my route NavigateResult<'hello'>

solid-orange•13mo ago

When directly importing useNavigate, it'll shout at you asking you to supply the from field.

const navigate = useNavigate({ from: '/' })

const navigate = useNavigate({ from: '/' })

Using the typed hooks, eliminates the need for it.

frail-apricotOP•13mo ago

Hmm interesting that it didnt ask for that 🤔

solid-orange•13mo ago

Nvm, looks like we've changed that recently. Edit: Yup, just remembered that we made stuff less strict a while back.

frail-apricotOP•13mo ago

Digging through types, i end up in something like:

type NavigateOptions = ToOptions & {
  replace?: boolean
  resetScroll?: boolean
  ignoreBlocker?: boolean
}

type NavigateOptions = ToOptions & {
  replace?: boolean
  resetScroll?: boolean
  ignoreBlocker?: boolean
}

How do I find doc for what replace means?

Gaming

Programming

Documentation in code

Did you find this page helpful?