Generating A Package

You can use the command sketch ts package to generate a new Typescript package.

Adding Templates

You can also use the with_templates field (or the --with-template cli flag) to specify a list of templates or templating presets that should be generated whenever a package preset is being used.

Let's say for example that in a type of package, you always need a schemas directory, where you import some common schemas from a shared package and define new ones.

You can use this feature to generate a file inside src/schemas/index.ts automatically like this:

      # Inside the package preset configuration
      with_templates:
        # We can refer to a preset by id or create a new one locally
        - templates:
            - output: src/schemas/index.ts
              # This can be a template defined in the config file
              # or file path inside templates_dir
              template: schemas

templates:
  schemas: |
    import z from "zod";
    import { sharedSchemas } from "{{ schemas_package }}";

vars:
  schemas_package: "@myproject/schemas"

Example

We start from this configuration:

typescript:
  # By default, typescript and oxlint are added to
  # the dependencies
  no_default_deps: true

  package_presets:
    frontend:
      # The name of the package. If this is unset,
      # the name of the output directory will be used.
      name: "@myproject/frontend"

      # The `package.json` config for this package. Can be a preset id
      # or a literal configuration.
      package_json:
        devDependencies:
          tailwindcss: "^4.0.0"

      # Generates an oxlint config file in the root.
      # Can be a boolean, a preset id, or
      # a literal configuration.
      oxlint: false

      # Create a vitest setup.
      # Can be a boolean, a preset id, or
      # a literal configuration.
      vitest:
        # 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
        tests_dir: tests

        # The directory containing the setup files for tests.
        # (starting from tests_dir)
        setup_dir: setup

And then run

sketch ts package --preset frontend frontend

To obtain this output in the designated directory:

├── package.json
├── src
│   └── schemas
│       └── index.ts
├── tests
│   ├── setup
│   │   └── tests_setup.ts
│   └── vitest.config.ts
└── tsconfig.json

ℹ️ You can also use the -i flag to automatically install the dependencies with your selected package manager whenever a new package is created.

With the following package.json file

{
  "name": "@myproject/frontend",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {},
  "packageManager": "pnpm",
  "dependencies": {},
  "devDependencies": {
    "tailwindcss": "^4.0.0"
  }
}