Generating A Package

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

Hooks

We can define some commands (which can also be templates) to execute before and/or after generating the new package:

    # Commands to run before generation, from the root of the new project
    hooks_pre:
      - command:
          # Inlining a new template definition here,
          # but as always, we can use stored templates too
          name: pre_hook
          content: "echo '{{ greeting }}' > pre.txt"
        context:
          greeting: hi

    # Commands to run after generation, from the root of the new project
    hooks_post:
      - command:
          name: post_hook
          content: "echo '{{ greeting }}' > post.txt"
        context:
          greeting: hi

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

To obtain this output in the designated directory:

├── package.json
├── src
│   ├── index.ts
│   └── 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.