Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Smart Features

Sketch provides some additional features that may come in handy when dealing with a typescript project.

Converting latest to a range

By default, all versions marked as latest will be converted to a version range (minor by default, but can be customized) that starts from the actual latest version for that package.

This means that you can easily reuse your presets over time to start new projects, without needing to manually bump all versions, and while also avoiding latest, which is not suitable for stability.

Sketch uses the npm api to fetch the latest version for any given package. It sends a maximum of 10 parallel requests, but depending on how many requests are made in a given timeframe, you might still be rate limited by the api, causing an error.

typescript:
  # Default
  no_convert_latest_to_range: false

  # Default
  version_range: minor

Adding dependencies to the catalog

If you set up your package manager to be pnpm (which is the default) or bun and set catalog to true, whenever you try to generate a new package that has dependencies marked with catalog:, each package that is not present in the target catalog (inside pnpm-workspace.yaml for pnpm, and inside package.json for bun) will be added automatically to it.

Example

Let's say that we are starting with a basic pnpm-workspace.yaml config like this one:

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

and we generate a package that has catalog dependencies, which are currently absent from their target catalogs:

typescript:
  no_default_deps: true

  catalog: true

  # Default
  package_manager: pnpm

  package_presets:
    with_catalog:
      name: with_catalog
      package_json:
        devDependencies:
          # Named catalog
          svelte: catalog:svelte
          # Default catalog
          hono: "catalog:"

After running

sketch ts package --preset with_catalog

We can see that the pnpm-workspace.yaml file has been updated with the new named catalog and dependencies:

packages:
- packages/*
catalog:
  hono: ^4.10.3
catalogs:
  svelte:
    svelte: ^5.42.2
onlyBuiltDependencies:
- esbuild
minimumReleaseAge: 1440

Storing And Reusing Contributors' Data

When working with a team on a monorepo that is made of several individual packages, it's very common that the same people have to be added to the author, contributors and maintainers fields in the package.json files for these packages.

To make this job a bit easier, you can use the people field in the typescript config to store information about contributors which you can then simply refer to by their ID.

Example

typescript:
  no_default_deps: true

  people:
    # Person ID
    bruce:
      name: Bruce Wayne
      email: bruce@gotham.com
      url: brucewayne.com

  package_json_presets:
    people-example:
      author: bruce # Using the id from the store
      maintainers:
        # Literal definition
        - name: Clark Kent
          url: clarkkent.com
          email: clark-kent@dailyplanet.com
        - bruce
      contributors:
        - bruce

    # Since package.json presets are extensible,
    # you can use the above as a base for other package.json files,
    # if the author or contributors are always the same
    some-other-project:
      extends_presets:
        - people-example
      scripts:
        say-hi: echo hi!

  package_presets:
    people-example:
      package_json: people-example

After we run

sketch ts package --preset people-example

We get this package.json file in the root of the new package:

{
  "name": "people-example",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {},
  "author": {
    "name": "Bruce Wayne",
    "email": "bruce@gotham.com",
    "url": "brucewayne.com"
  },
  "packageManager": "pnpm",
  "dependencies": {},
  "devDependencies": {},
  "contributors": [
    {
      "name": "Bruce Wayne",
      "email": "bruce@gotham.com",
      "url": "brucewayne.com"
    }
  ],
  "maintainers": [
    {
      "name": "Bruce Wayne",
      "email": "bruce@gotham.com",
      "url": "brucewayne.com"
    },
    {
      "name": "Clark Kent",
      "email": "clark-kent@dailyplanet.com",
      "url": "clarkkent.com"
    }
  ]
}