Generating A Package

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

For setting up the root package in a monorepo, go look in the dedicated section.

This is an example of a package-related configuration:

typescript:
  package_presets:
    frontend:
      # The name of the package. If this is unset and `dir` is set,
      # it will use the last segment from it.
      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"

      # The directory for this package, starting from the `root_dir`
      dir: packages/frontend

      # The kind of package to generate. Only relevant if you use
      # default tsconfigs.
      kind: library

      # Can be set to true (for a default config), a literal config
      # or to false (which is the default setting) for no oxlint config.
      oxlint: false

      # Create a vitest setup.
      # Can be set to true to use defaults (which are as below).
      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

        # Can use a list of plugins which will be set up in the config file
        plugins: []

After setting things up, you can run

sketch ts package --preset frontend

To generate the new package.

Template rendering

You can use the generate_templates field to specify a list of templates that should also be generated whenever a package preset is being generated.

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
      generate_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"

So the final tree structure of the output directory will look like this:

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

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