Nebulous Pumpkin Moons

    remix-typedjson
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    remix-typedjson

    All Contributors

    This package is a replacement for superjson to use in your Remix app. It handles a subset of types that superjson supports, but is faster and smaller.

    NOTE: Although faster, remix-typedjson is nowhere near as flexible as superjson. It only supports a subset of types with no extensibility. If you need the advanced features of superjson, then I definitely recommend it.

    Example site: https://remix-typedjson-example-production.up.railway.app/

    Example repo: https://github.com/kiliman/remix-typedjson-example

    The following types are supported:

    • Date
    • BigInt
    • Set
    • Map
    • RegExp
    • undefined
    • Error
    • NaN
    • Number.POSITIVE_INFINITY
    • Number.NEGATIVE_INFINITY

    🚧 Work In Progress

    Sets and Maps currently only support string keys and JSON serializable values. Complex types coming soon.

    🛠 How to Use with Remix

    In order to get full-type fidelity and type inference, you must be on Remix v1.6.5+. You will also need to import the following replacement functions.

    typedjson

    Replacement for Remix json helper. It also supports the optional ResponseInit, so you can return headers, etc.

    Make sure your loader and action use the new declaration format:

     export const loader: LoaderFunction = async ({request}) => {}
     export const loader = async ({request}: LoaderArgs) => {}
     export async function loader({request}: LoaderArgs) {}

    Usage

    return typedjson(
      { greeting: 'hello', today: new Date() },
      // ResponseInit is optional, just like the `json` helper
      { headers: { 'set-header': await commitSession(session) } },
    )

    useTypedLoaderData

    Replacement for Remix useLoaderData. Use the generic <typeof loader> to get the correct type inference.

    Usage

    const loaderData = useTypedLoaderData<typeof loader>()

    useTypedActionData

    Replacement for Remix useActionData. Use the generic <typeof action> to get the correct type inference.

    Usage

    const actionData = useTypedActionData<typeof action>()

    useTypedFetcher

    Replacement for Remix useFetcher. Use the generic <typeof loader|action> to get the correct type inference for the fetcher.data property.

    Usage

    const fetcher = useTypedFetcher<typeof action>()
    fetcher.data // data property is fully typed

    redirect

    In order to return a redirect, you will need to import the redirect function from this package, in order for the type inference to work properly.

    However, you can also throw redirect() and you can use the original redirect function from Remix.

    TypedMetaFunction

    You can now get typed arguments for both data and parentsData from your meta function export. Based on new feature coming to Remix

    export const meta: TypedMetaFunction<typeof loader> = ({ data }) => {
      return {
        title: `Posts | ${data?.post.title}`,
      }
    }
    // for parentsData, you can specify a Record of typed loaders keyed by route id
    // root.tsx
    export LoaderType = typeof loader
    // routes/parent.tsx
    export LoaderType = typeof loader
    // routes/child.tsx
    import { type LoaderType as RootLoaderType } from '~/root'
    import { type LoaderType as ParentLoaderType } from '~/routes/parent'
    
    export const meta: TypedMetaFunction<
      typeof loader,
      // parent loader types keyed by route id
      {
        'root': RootLoader
        'routes/parent': ParentLoader
      }
    > = ({ data, parentsData }) => {
      // access typed parent data by route id
      const rootData = parentsData['root']
      const parentData = parentsData['routes/parent']
    
      return {
        title: `Posts | ${data?.post.title}`,
      }
    }

    😍 Contributors

    Thanks goes to these wonderful people (emoji key):


    Kiliman

    💻 📖

    Kent C. Dodds

    💻

    Simon Knott

    💻 🐛 ⚠️

    Tony Truand

    💻 ⚠️

    Gregori Rivas

    💻

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Install

    npm i remix-typedjson

    DownloadsWeekly Downloads

    863

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    39.2 kB

    Total Files

    16

    Last publish

    Collaborators

    • kiliman