Typescript Presets

Many typical components of a typescript project have their own dedicated preset.

Package.json Presets

  package_json_presets:
    # Defining some reusable fields such as some common scripts and dependencies
    frontend:
      description: I am the base preset
      scripts:
        build: vite build
        dev: vite dev
      devDependencies:
        tailwindcss: "*"
        vite: "*"

    svelte_frontend:
      extends_presets: ["frontend"]
      # Adding new fields
      license: MIT
      # Overriding others
      description: I am the frontend preset
      # And merging dependencies
      devDependencies:
        svelte: "*"

Just like in actual package.json files, custom fields are allowed.

ℹ️ package.json presets come with extra features. Dedicated section

Tsconfig Presets

  ts_config_presets:
    base:
      references:
        - path: /some/path
      include:
        - src
      compilerOptions:
        noEmit: true
        verbatimModuleSyntax: true

    extended:
      extends_presets:
        - base
      # Unlike in real tsconfigs with `extends`, references are merged here,
      # and so are all other collections such as `files` or `include`.
      references:
        - path: /other/path
      include:
        - tests
      compilerOptions:
        # Whereas other fields are overwritten
        noEmit: false

Unlike what happens when you merge two tsconfig files by using the extends field, extending presets will merge all collections, including files, include, exclude and references, which would normally be overwritten, rather than merged.

Oxlint Presets

  oxlint_presets:
    base:
      ignorePatterns:
        - "**/node_modules/**"

    extended:
      extends_presets:
        - base
      ignorePatterns:
        - .cache

Pnpm-workspace Presets

  pnpm_presets:
    base:
      # All the dirs listed here will be created automatically
      # when new monorepos are created
      packages:
        - packages/*
      onlyBuiltDependencies:
        - esbuild
      minimumReleaseAge: 1440

Vitest Presets

  vitest_presets:
    base:
      # Where the config file should be generated, starting from
      # the root of the package.
      # It defaults to the value of `tests_dir`
      out_dir: null

      # The directory to use for tests, from the root of the package
      tests_dir: tests

      # The directory, inside `tests_dir`, that contains the setup files for tests.
      # A file named `tests_setup.ts`, containing some basic testing boilerplate,
      # will be generated inside of it.
      setup_dir: setup

      # A list of setup files (the paths will be joined to the `setup_dir`)
      # `tests_setup.ts` will be added automatically.
      setup_files:
        - somefile.ts
        - anotherfile.ts
      environment: jsdom
      silent: passed-only

Package Presets

A package preset can be used to collect other presets, such as in this example:

  package_presets:
    example:
      name: example

      # For every preset, we can either refer to them
      # by their id...
      package_json: svelte_frontend

      # ...or we can inline a preset definition
      oxlint:
        extends_presets:
          - extended
        ignorePatterns:
          - .output

      # We can define one or many tsconfig files
      ts_config:
        # Can be omitted, would default to `tsconfig.json`
        - output: tsconfig.json
          config:
            # Once again creating a new config here with some extras
            extends_presets:
              - extended
            include:
              - scripts

      vitest: base

Tsconfig output

{
  "include": [
    "scripts",
    "src",
    "tests"
  ],
  "references": [
    {
      "path": "/other/path"
    },
    {
      "path": "/some/path"
    }
  ],
  "compilerOptions": {
    "noEmit": false,
    "verbatimModuleSyntax": true
  }
}

Package.json output

{
  "name": "example",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "build": "vite build",
    "dev": "vite dev"
  },
  "description": "I am the frontend preset",
  "license": "MIT",
  "packageManager": "pnpm",
  "dependencies": {},
  "devDependencies": {
    "svelte": "*",
    "tailwindcss": "*",
    "vite": "*"
  }
}

Oxlintrc.json output

{
  "plugins": [
    "oxc",
    "typescript",
    "unicorn"
  ],
  "ignorePatterns": [
    "**/node_modules/**",
    ".cache",
    ".output"
  ]
}

vitest.config.ts output

import { defineConfig } from "vitest/config";
import { resolve, join } from "node:path";

const j = join;
const r = resolve;

const dir = import.meta.dirname;
const setupDir = r(dir, "setup");

export default defineConfig({
  plugins: [],
  resolve: {
    alias: {
      '@': r(dir, "../src"),
    },
  },

  test: { 
    setupFiles: [ 
      j(setupDir, "tests_setup.ts"),
      j(setupDir, "somefile.ts"),
      j(setupDir, "anotherfile.ts")
    ], 
    globals: true,
    environment: "jsdom",
    silent: "passed-only",
    sequence: {
      setupFiles: "list",
    },
  },
});

Keyboard shortcuts