@re-do/components

Common UI components consumed by Redo


Keywords
javascript, parsing, runtime-typechecking, static-typing, typescript
License
MIT
Install
npm install @re-do/components@0.1.2

Documentation

ArkType TypeScript's 1:1 validator

typescript@4.9.5 in VS Code— no extensions or plugins required (how?) (try in-browser)

What is it?

ArkType is a runtime validation library that can infer TypeScript definitions 1:1 and reuse them as highly-optimized validators for your data.

With each character you type, you'll get immediate feedback from your editor in the form of either a fully-inferred Type or a specific and helpful ParseError.

This result exactly mirrors what you can expect to happen at runtime down to the punctuation of the error message- no plugins required.

import { type } from "arktype"

// Definitions are statically parsed and inferred as TS.
export const user = type({
    name: "string",
    device: {
        platform: "'android'|'ios'",
        "version?": "number"
    }
})

// Validators return typed data or clear, customizable errors.
export const { data, problems } = user({
    name: "Alan Turing",
    device: {
        // problems.summary: "device/platform must be 'android' or 'ios' (was 'enigma')"
        platform: "enigma"
    }
})

Check out how it works, try it in-browser, or scroll slightly to read about installation.

Npm Icon npm install arktype (or whatever package manager you prefer)

Our types are tested in strict-mode with TypeScript version 4.8 or greater.

Our APIs have mostly stabilized, but details may still change during the alpha/beta stages of our 1.0 release. If you have suggestions that may require a breaking change, now is the time to let us know!

Scopes

Try this example in-browser.

import { scope } from "arktype"

// Scopes are collections of types that can reference each other.
export const types = scope({
    package: {
        name: "string",
        "dependencies?": "package[]",
        "contributors?": "contributor[]"
    },
    contributor: {
        // Subtypes like 'email' are inferred like 'string' but provide additional validation at runtime.
        email: "email",
        "packages?": "package[]"
    }
}).compile()

// Cyclic types are inferred to arbitrary depth...
export type Package = typeof types.package.infer

// And can validate cyclic data.
const packageData: Package = {
    name: "arktype",
    dependencies: [{ name: "typescript" }],
    contributors: [{ email: "david@sharktypeio" }]
}
packageData.dependencies![0].dependencies = [packageData]

export const { data, problems } = types.package(packageData)

Syntax

This is an informal, non-exhaustive list of current and upcoming ArkType syntax.

There are some subjects it doesn't cover, primarily tuple expressions and scopes. As mentioned below, keep an eye out for comprehensive docs coming with the upcoming beta release. In the meantime, join our Discord or head to our GitHub Discussions to ask a question and there's a good chance you'll see a response within the hour 😊

export const currentTsSyntax = type({
    keyword: "null",
    stringLiteral: "'TS'",
    numberLiteral: "5",
    bigintLiteral: "5n",
    union: "string|number",
    intersection: "boolean&true",
    array: "Date[]",
    grouping: "(0|1)[]",
    objectLiteral: {
        nested: "string",
        "optional?": "number"
    },
    tuple: ["number", "number"]
})

// these features will be available in the upcoming release

export const upcomingTsSyntax = type({
    keyof: "keyof bigint",
    thisKeyword: "this", // recurses to the root of the current type
    variadicTuples: ["true", "...false[]"]
})

export const validationSyntax = type({
    keywords: "email|uuid|creditCard|integer", // and many more
    builtinParsers: "parsedDate", // parses a Date from a string
    nativeRegexLiteral: /@arktype\.io/,
    embeddedRegexLiteral: "email&/@arktype\\.io/",
    divisibility: "number%10", // a multiple of 10
    bound: "alpha>10", // an alpha-only string with more than 10 characters
    range: "1<=email[]<99", // a list of 1 to 99 emails
    narrows: ["number", "=>", (n) => n % 2 === 1], // an odd integer
    morphs: ["string", "|>", parseFloat] // validates a string input then parses it to a number
})

// in the upcoming release, you can use chaining to define expressions directly
// that use objects or functions that can't be embedded in strings

export const parseBigintLiteral = type({ value: "string" })
    .and({
        format: "'bigint'"
    })
    .narrow((data): data is { value: `${string}n`; format: "bigint" } =>
        data.value.endsWith("n")
    )
    .morph((data) => BigInt(data.value.slice(-1)))

export const { data, problems } = parseBigintLiteral("999n")
//             ^ bigint | undefined

API

ArkType supports many of TypeScript's built-in types and operators, as well as some new ones dedicated exclusively to runtime validation. In fact, we got a little ahead of ourselves and built a ton of cool features, but we're still working on getting caught up syntax and API docs. Keep an eye out for more in the next couple weeks ⛵

In the meantime, check out the examples here and use the type hints you get to learn how you can customize your types and scopes. If you want to explore some of the more advanced features, take a look at our unit tests or ask us on Discord if your functionality is supported. If not, create a GitHub issue so we can prioritize it!

Integrations

tRPC

ArkType can easily be used with tRPC via the assert prop:

...
t.procedure
  .input(
    type({
      name: "string",
      "age?": "number"
    }).assert
  )
...

How?

ArkType's isomorphic parser has parallel static and dynamic implementations. This means as soon as you type a definition in your editor, you'll know the eventual result at runtime.

If you're curious, below is an example of what that looks like under the hood. If not, close that hood back up, npm install arktype and enjoy top-notch developer experience 🧑‍💻

export const parseOperator = (s: DynamicState): void => {
    const lookahead = s.scanner.shift()
    return lookahead === ""
        ? s.finalize()
        : lookahead === "["
        ? s.scanner.shift() === "]"
            ? s.rootToArray()
            : s.error(incompleteArrayTokenMessage)
        : isKeyOf(lookahead, Scanner.branchTokens)
        ? s.pushRootToBranch(lookahead)
        : lookahead === ")"
        ? s.finalizeGroup()
        : isKeyOf(lookahead, Scanner.comparatorStartChars)
        ? parseBound(s, lookahead)
        : lookahead === "%"
        ? parseDivisor(s)
        : lookahead === " "
        ? parseOperator(s)
        : throwInternalError(writeUnexpectedCharacterMessage(lookahead))
}

export type parseOperator<s extends StaticState> =
    s["unscanned"] extends Scanner.shift<infer lookahead, infer unscanned>
        ? lookahead extends "["
            ? unscanned extends Scanner.shift<"]", infer nextUnscanned>
                ? state.setRoot<s, [s["root"], "[]"], nextUnscanned>
                : error<incompleteArrayTokenMessage>
            : lookahead extends Scanner.BranchToken
            ? state.reduceBranch<s, lookahead, unscanned>
            : lookahead extends ")"
            ? state.finalizeGroup<s, unscanned>
            : lookahead extends Scanner.ComparatorStartChar
            ? parseBound<s, lookahead, unscanned>
            : lookahead extends "%"
            ? parseDivisor<s, unscanned>
            : lookahead extends " "
            ? parseOperator<state.scanTo<s, unscanned>>
            : error<writeUnexpectedCharacterMessage<lookahead>>
        : state.finalize<s>

Contributions

We accept and encourage pull requests from outside ArkType.

Depending on your level of familiarity with type systems and TS generics, some parts of the codebase may be hard to jump into. That said, there's plenty of opportunities for more straightforward contributions.

If you're planning on submitting a non-trivial fix or a new feature, please create an issue first so everyone's on the same page. The last thing we want is for you to spend time on a submission we're unable to merge.

When you're ready, check out our guide to get started!

License

This project is licensed under the terms of the MIT license.

Collaboration

I'd love to hear about what you're working on and how ArkType can help. Please reach out to david@arktype.io.

Code of Conduct

We will not tolerate any form of disrespect toward members of our community. Please refer to our Code of Conduct and reach out to david@arktype.io immediately if you've seen or experienced an interaction that may violate these standards.

Sponsorship

We've been working full-time on this project for over a year and it means a lot to have the community behind us.

If the project has been useful to you and you are in a financial position to do so, please chip in via GitHub Sponsors.

Otherwise, consider sending me an email (david@arktype.io) or message me on Discord to let me know you're a fan of ArkType. Either would make my day!

ArkSponsors ⛵

fubhy sam-goodwin

Sponsors 🥰

tmm jacksteamdev neodon mewhhaha codeandcats
Timeraa marcagba Phalangers