Coder Social home page Coder Social logo

brianbolnick / remix-typedjson Goto Github PK

View Code? Open in Web Editor NEW

This project forked from kiliman/remix-typedjson

0.0 0.0 0.0 647 KB

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.

License: MIT License

TypeScript 100.00%

remix-typedjson's Introduction

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

Installation

npm i remix-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 action: ActionFunction = async ({request}) => {}

โœ… export const loader = async ({request}: DataFunctionArgs) => {}
โœ… export const action = async ({request}: DataFunctionArgs) => {}

โœ… export async function loader({request}: DataFunctionArgs) {}
โœ… export async function action({request}: DataFunctionArgs) {}

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>()

typeddefer

โœจ New in v0.3.0

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

Usage

return typeddefer({
  fastData: { message: 'This is fast data', today: new Date() },
  slowData: new Promise(resolve => setTimeout(resolve, 2000)).then(() => {
    return { message: 'This is slow data', tomorrow: new Date() }
  }),
})

<TypedAwait>

In your route component, use the new <TypedAwait> component instead of the Remix <Await> component

Usage

export default function DeferRoute() {
  const { fastData, slowData } = useTypedLoaderData<typeof loader>()
  return (
    <main>
      <h1>Defer Route</h1>
      <h2>Fast Data</h2>
      <pre>{JSON.stringify(fastData, null, 2)}</pre>
      <div>fastData.today is {fastData.today.toLocaleString()}</div>
      <Suspense fallback={<p>Loading slow data...</p>}>
        <TypedAwait
          resolve={slowData}
          errorElement={<p>Error loading slow data!</p>}
        >
          {slowData => (
            <div>
              <h2>Slow Data</h2>
              <pre>{JSON.stringify(slowData, null, 2)}</pre>
              <div>
                slowData.tomorrow is {slowData.tomorrow.toLocaleString()}
              </div>
            </div>
          )}
        </TypedAwait>
      </Suspense>
    </main>
  )
}

useTypedRouteLoaderData

Helper for useMatches that returns the route data based on provided route id

Usage

import { loader as rootLoader } from '~/root'

const rootData = useTypedRouteLoaderData<typeof rootLoader>('root')

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 type LoaderType = typeof loader
// routes/parent.tsx
export type 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}`,
  }
}

registerCustomType

โœจ New in v0.2.0

remix-typed-json support a limited number of native types in order to keep the bundle small. However, if you need to support a custom type like Decimal, then use the registerCustomType API. This way you only pay the cost of the custom type if you use it.

type CustomTypeEntry<T> = {
  type: string
  is: (value: unknown) => boolean
  serialize: (value: T) => string
  deserialize: (value: string) => T
}

export function registerCustomType<T>(entry: CustomTypeEntry<T>)

Usage

Register the custom type in root.tsx once.

// root.tsx
import {
  typedjson,
  registerCustomType,
  useTypedLoaderData,
} from 'remix-typedjson'

import Decimal from 'decimal.js'

registerCustomType({
  type: 'decimal',
  is: (value: unknown) => value instanceof Decimal,
  serialize: (value: Decimal) => value.toString(),
  deserialize: (value: string) => new Decimal(value),
})

You can now serialize and deserialize the Decimal type.

// route.tsx
export function loader() {
  const d = new Decimal('1234567890123456789012345678901234567890')
  return typedjson({ greeting: 'Hello World', today: new Date(), d })
}

export default function Index() {
  const data = useTypedLoaderData<typeof loader>()

  return (
    <>
      <h2>Loader Data</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <ul>
        <li>today: {data.today.toLocaleString()}</li>
        <li>
          d instanceof Decimal: {data.d instanceof Decimal ? 'true' : 'false'}
        </li>
        <li>d: {data.d.toFixed(0)}</li>
      </ul>
    </>
  )
}

๐Ÿ˜ Contributors

Thanks goes to these wonderful people (emoji key):

Kiliman
Kiliman

๐Ÿ’ป ๐Ÿ“–
Kent C. Dodds
Kent C. Dodds

๐Ÿ’ป
Simon Knott
Simon Knott

๐Ÿ’ป ๐Ÿ› โš ๏ธ
Tony Truand
Tony Truand

๐Ÿ’ป โš ๏ธ
Gregori Rivas
Gregori Rivas

๐Ÿ’ป
Afsah Nasir
Afsah Nasir

๐Ÿ“–
Magnus Markling
Magnus Markling

๐Ÿ’ป
Jozsef Lazar
Jozsef Lazar

๐Ÿ’ป
Luke Bowerman
Luke Bowerman

๐Ÿ’ป
Dan Marshall
Dan Marshall

๐Ÿ“–
Eric Allam
Eric Allam

๐Ÿ“–

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

remix-typedjson's People

Contributors

brianbolnick avatar danmarshall avatar ericallam avatar glomyst avatar joelazar avatar kentcdodds avatar kiliman avatar lukebowerman avatar memark avatar prodbygr avatar skn0tt avatar tony-truand avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.