### Install Stylelint Packages with pnpm

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/stylelint/setup-polyrepo.md

Installs Stylelint, its configurations from @workleap/stylelint-configs, and Prettier as development dependencies using pnpm.

```bash
pnpm add -D @workleap/stylelint-configs stylelint prettier
```

--------------------------------

### Install ESLint and Turborepo Packages

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/eslint/setup-turborepo.md

Installs necessary ESLint and Turborepo packages as development dependencies in your monorepo workspace.

```bash
pnpm add -D @workleap/eslint-configs @eslint/js @typescript-eslint/parser @types/node eslint typescript-eslint turbo
```

--------------------------------

### Create a Vitest Test File

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/vitest/setup-turborepo.md

An example of a simple test file (`foo.test.ts`) written for Vitest. It demonstrates a basic test case using Vitest's `test` function and assertion library.

```typescript
import { test } from "vitest";

test("will always pass", ({ expect }) => {
    expect(true).toBeTruthy();
});
```

--------------------------------

### Install Turborepo Package

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rsbuild/setup-turborepo.md

Installs the Turborepo package as a development dependency in your workspace. This is the first step to enable Turborepo's monorepo management capabilities.

```bash
pnpm add -D turbo
```

--------------------------------

### Install TypeScript Packages with pnpm

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/typescript/setup-polyrepo.md

Installs the necessary @workleap/typescript-configs and typescript packages as development dependencies in a project using pnpm.

```bash
pnpm add -D @workleap/typescript-configs typescript
```

--------------------------------

### Install Syncpack and Turborepo

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/syncpack/setup-turborepo.md

Installs Syncpack and Turborepo as development dependencies in the monorepo's root workspace. This is the initial step to enable Turborepo's build system and Syncpack's dependency management capabilities.

```bash
pnpm add -D syncpack turbo
```

--------------------------------

### Install Stylelint Packages with pnpm

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/stylelint/setup-turborepo.md

Installs Stylelint, its configuration packages, Prettier, and Turborepo as development dependencies in the monorepo workspace.

```bash
pnpm add -D @workleap/stylelint-configs stylelint prettier turbo
```

--------------------------------

### Install Workspace Packages with PNPM

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/typescript/setup-turborepo.md

Installs development dependencies including Turborepo, TypeScript, and Workleap's TypeScript configurations for the monorepo workspace. This command should be executed at the root of the solution's workspace.

```bash
pnpm add -D @workleap/typescript-configs typescript turbo
```

--------------------------------

### Install Browserslist Packages

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/browserslist/configure-project.md

Installs the `@workleap/browserslist-config` and `browserslist` packages as development dependencies using pnpm. This command should be run in the project's root directory.

```bash
pnpm add -D @workleap/browserslist-config browserslist
```

--------------------------------

### Install Stylelint Config Package

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/stylelint/setup-turborepo.md

Installs the @workleap/stylelint-configs package as a development dependency in your project. This package provides shared Stylelint configurations.

```bash
pnpm add -D @workleap/stylelint-configs
```

--------------------------------

### Execute Stylelint CLI Script

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/stylelint/setup-polyrepo.md

Runs the 'lint:stylelint' script defined in package.json to lint all CSS files in the project.

```bash
pnpm lint:stylelint
```

--------------------------------

### Turborepo Cache Hit Log Example (Bash)

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/introduction/setup-turborepo-ci-workflow.md

This log snippet demonstrates a successful cache hit for Turborepo during a CI workflow run. It shows the cache restoration process, including the size of the cache and the source key.

```bash
Run actions/cache/restore@v4
Cache hit for: Linux-turborepo-284bb4311b5346b0e97e839c74dd0775e07da29c
Received 72468 of 72468 (100.0%), 2.7 MBs/sec
Cache Size: ~0 MB (72468 B)
/usr/bin/tar -xf /home/runner/work/_temp/40650809-db05-4c4f-9636-43238dc9a0de/cache.tzst -P -C /home/runner/work/wl-web-configs/wl-web-configs --use-compress-program unzstd
Cache restored successfully
Cache restored from key: Linux-turborepo-3c24700252991e8087eab6ddc8e75defab17dc2b
```

--------------------------------

### Install @typescript/native-preview package

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/typescript/migrate-to-tsgo.md

Command to install the @typescript/native-preview package as a development dependency. This should be run in directories containing a package.json file that already has the 'typescript' dependency.

```bash
pnpm add -D @typescript/native-preview
```

--------------------------------

### Configure Stylelint with Shared Configurations

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/stylelint/setup-polyrepo.md

Sets up the root Stylelint configuration file (.stylelintrc.json) to extend the shared configurations provided by @workleap/stylelint-configs.

```json
{
    "$schema": "https://json.schemastore.org/stylelintrc",
    "extends": "@workleap/stylelint-configs"
}
```

--------------------------------

### Install Vitest Package in Project

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/vitest/setup-turborepo.md

Installs Vitest as a development dependency within a specific project (e.g., `packages/pkg-1`) in the monorepo. This command should be run in the terminal at the root of the target project.

```bash
pnpm add -D vitest
```

--------------------------------

### Install Rslib Development Packages

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rslib/configure-dev.md

Installs the necessary Rslib configuration packages for development using pnpm. This command should be executed in the root of the library project.

```bash
pnpm add -D @workleap/rslib-configs @rslib/core
```

--------------------------------

### Configure Rsbuild with Plugins

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rsbuild/configure-storybook.md

Demonstrates how to extend the Rsbuild configuration by adding Rsbuild plugins. This example shows how to include the `pluginAssetsRetry` plugin.

```typescript
import { defineStorybookConfig } from "@workleap/rsbuild-configs";
import { pluginAssetsRetry } from "@rsbuild/plugin-assets-retry";

export default defineStorybookConfig({
    plugins: [pluginAssetsRetry()]
});
```

--------------------------------

### Add Stylelint CLI Script to package.json

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/stylelint/setup-polyrepo.md

Adds a 'lint:stylelint:' script to package.json for linting all CSS files in the solution using Stylelint with caching enabled.

```json
{
    "lint:stylelint:": "stylelint \"**/*.css\" --cache --cache-location node_modules/.cache/stylelint"
}
```

--------------------------------

### Create CI Workflow File for Turborepo with GitHub Actions

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/introduction/setup-turborepo-ci-workflow.md

This snippet shows the directory structure for the CI workflow file and the content of the `ci.yml` file. It configures a GitHub Actions workflow for Turborepo projects, including steps for checking out code, setting up Node.js and pnpm, installing dependencies, caching Turborepo artifacts, building, linting (ESLint, Stylelint), type checking, running Syncpack, and testing. It also includes conditional logic for pull requests to optimize builds and linting based on the base branch.

```bash
workspace
├── .github
├──── workflows
├────── ci.yml
├── package.json
```

```yaml
name: CI

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  workflow_dispatch:

env:
  CI: true

concurrency:
  group: ci-${{ github.ref }}
  cancel-in-progress: true

jobs:
  ci:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v6
        with:
          # Required for the Turborepo Git filters.
          fetch-depth: 0

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          run_install: false

      - name: Install Node.js
        uses: actions/setup-node@v6
        with:
          node-version: ">=24.0.0"
          check-latest: true
          cache: pnpm
          cache-dependency-path: pnpm-lock.yaml

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Restore Turborepo cache
        id: cache-turborepo-restore
        uses: actions/cache/restore@v5
        with:
          key: ${{ runner.os }}-turbo-ci-${{ github.sha }}
          restore-keys: |
            ${{ runner.os }}-turbo-ci-
            ${{ runner.os }}-turbo-
          path: .turbo

      - name: Build apps or packages
        # For a PR, only build the host if it's diverging from the pull request original baseline.
        run: |
          if [ "${{ github.event_name }}" == "pull_request" ]; then
              pnpm turbo run build --filter={YOUR_FILTER}...[${{ github.event.pull_request.base.sha }}]
          else
              pnpm turbo run build --filter=YOUR_FILTER
          fi

      - name: ESLint
        # For a PR, only lint the projects that are diverging from the pull request original baseline.
        run: |
          if [ "${{ github.event_name }}" == "pull_request" ]; then
              pnpm turbo run eslint --continue --filter=...[${{ github.event.pull_request.base.sha }}]
          else
              pnpm turbo run eslint --continue
          fi

      - name: Stylelint
        # For a PR, only lint the projects that are diverging from the pull request original baseline.
        run: |
          if [ "${{ github.event_name }}" == "pull_request" ]; then
              pnpm turbo run stylelint --continue --filter=...[${{ github.event.pull_request.base.sha }}]
          else
              pnpm turbo run stylelint --continue
          fi

      - name: Typecheck
        # For a PR, only typecheck the projects that are diverging from the pull request original baseline.
        run: |
          if [ "${{ github.event_name }}" == "pull_request" ]; then
              pnpm turbo run typecheck --continue --filter=...[${{ github.event.pull_request.base.sha }}]
          else
              pnpm turbo run typecheck --continue
          fi

      - name: Syncpack
        run: pnpm turbo run syncpack

      - name: Test packages
        # For a PR, only test the projects that are diverging from the pull request original baseline.
        run: |
            if [ "${{ github.event_name }}" == "pull_request" ]; then
                pnpm turbo run test --continue --force --filter=...[${{ github.event.pull_request.base.sha }}]
            else
                pnpm turbo run test --continue --force
            fi

      - name: Save Turborepo cache
        id: cache-turborepo-save
        if: always() && steps.cache-turborepo-restore.outputs.cache-hit != 'true'
        uses: actions/cache/save@v5
        with:
          key: ${{ steps.cache-turborepo-restore.outputs.cache-primary-key }}
          path: .turbo
```

--------------------------------

### GitHub Actions Workflow for Chromatic

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/chromatic/setup-a-workflow.md

This YAML file defines a GitHub Actions workflow for Chromatic. It triggers on push and pull request events to the main branch, installs dependencies using pnpm, and runs the Chromatic action. It includes conditional logic to skip execution if a 'run chromatic' label is not present on pull requests and removes the label upon completion.

```yaml
name: Chromatic

# PNPM setup based on https://github.com/pnpm/action-setup#use-cache-to-reduce-installation-time.

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
    types:
      - opened
      # To conditionally execute the workflow based on a PR label.
      - labeled
  workflow_dispatch:

env:
  CI: true

concurrency:
  group: chromatic-${{ github.ref }}
  cancel-in-progress: true

jobs:
  chromatic:
    runs-on: ubuntu-latest

    permissions:
      pull-requests: write
    
    steps:
      - name: Early exit if "run chromatic" label is not present
        if: github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'run chromatic')
        run: |
          echo "No \"run chromatic\" label present. Skipping Chromatic workflow."
          # exit as neutral.
          exit 78

      - name: Checkout
        uses: actions/checkout@v6
        with:
          fetch-depth: 0
          # Refer to: https://www.chromatic.com/docs/github-actions/#recommended-configuration-for-build-events.
          ref: ${{ github.event.pull_request.head.ref }}
        env:
          # Refer to: https://www.chromatic.com/docs/github-actions/#recommended-configuration-for-build-events.
          CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }}
          CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.ref }}
          CHROMATIC_SLUG: ${{ github.repository }}

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          run_install: false

      - name: Install Node.js
        uses: actions/setup-node@v6
        with:
          node-version: '>=24.0.0'
          check-latest: true
          cache: pnpm
          cache-dependency-path: pnpm-lock.yaml

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          onlyChanged: true
          exitOnceUploaded: true
          autoAcceptChanges: main

      - name: Remove "run chromatic" label after Chromatic completion
        if: github.event_name == 'pull_request'
        uses: actions/github-script@v8
        with:
          script: |
            github.rest.issues.removeLabel({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: context.issue.number,
                name: 'run chromatic'
            });

```

--------------------------------

### Configure GitHub Actions CI Workflow

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/introduction/setup-a-ci-workflow.md

This YAML configuration defines a GitHub Actions CI workflow. It specifies triggers for the workflow (push, pull_request, workflow_dispatch), environment variables, concurrency settings, and a series of jobs to checkout code, set up PNPM and Node.js, install dependencies, build, lint, and test the project.

```yaml
name: CI

# PNPM setup based on https://github.com/pnpm/action-setup#use-cache-to-reduce-installation-time

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  workflow_dispatch:

env:
  CI: true

concurrency:
  group: ci-${{ github.ref }}
  cancel-in-progress: true

jobs:
  ci:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          run_install: false

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
            node-version: ">=24.0.0"
            check-latest: true
            cache: pnpm
            cache-dependency-path: pnpm-lock.yaml

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Build apps or packages
        run: pnpm build

      - name: Lint
        run: pnpm lint

      - name: Test
        run: pnpm test
```

--------------------------------

### Configure Chromatic GitHub Actions Workflow with Turborepo

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/chromatic/setup-turborepo-workflow.md

This YAML configuration sets up a GitHub Actions workflow for Chromatic. It triggers on push/pull requests to 'main', handles conditional execution based on a 'run chromatic' label, checks out code, sets up PNPM and Node.js, installs dependencies, manages Turborepo cache, runs Chromatic, and removes the label upon completion.

```yaml
name: Chromatic

# PNPM setup based on https://github.com/pnpm/action-setup#use-cache-to-reduce-installation-time.

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
    types:
      - opened
      # To conditionally execute the workflow based on a PR label.
      - labeled
  workflow_dispatch:

env:
  CI: true

concurrency:
  group: chromatic-${{ github.ref }}
  cancel-in-progress: true

jobs:
  chromatic:
    runs-on: ubuntu-latest

    permissions:
      pull-requests: write

    steps:
      - name: Early exit if "run chromatic" label is not present
        if: github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'run chromatic')
        run: |
          echo "No \"run chromatic\" label present. Skipping Chromatic workflow."
          # exit as neutral.
          exit 78

      - name: Checkout
        uses: actions/checkout@v6
        with:
          fetch-depth: 0
          # Refer to: https://www.chromatic.com/docs/github-actions/#recommended-configuration-for-build-events.
          ref: ${{ github.event.pull_request.head.ref }}
        env:
          # Refer to: https://www.chromatic.com/docs/github-actions/#recommended-configuration-for-build-events.
          CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }}
          CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.ref }}
          CHROMATIC_SLUG: ${{ github.repository }}

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          run_install: false

      - name: Install Node.js
        uses: actions/setup-node@v6
        with:
          node-version: '>=24.0.0'
          check-latest: true
          cache: pnpm
          cache-dependency-path: pnpm-lock.yaml

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Restore Turborepo cache
        id: cache-turborepo-restore
        uses: actions/cache/restore@v5
        with:
          key: ${{ runner.os }}-turbo-chromatic-${{ github.sha }}
          restore-keys: |
            ${{ runner.os }}-turbo-chromatic-
            ${{ runner.os }}-turbo-
          path: .turbo

      - name: Chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          onlyChanged: true
          exitOnceUploaded: true
          autoAcceptChanges: main

      - name: Remove "run chromatic" label after Chromatic completion
        if: github.event_name == 'pull_request'
        uses: actions/github-script@v8
        with:
          script: |
            github.rest.issues.removeLabel({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: context.issue.number,
                name: 'run chromatic'
            });

      - name: Save Turborepo cache
        id: cache-turborepo-save
        if: always() && steps.cache-turborepo-restore.outputs.cache-hit != 'true'
        uses: actions/cache/save@v5
        with:
          key: ${{ steps.cache-turborepo-restore.outputs.cache-primary-key }}
          path: .turbo

```

--------------------------------

### Run Lint Script

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/eslint/setup-turborepo.md

Executes the main 'lint' script defined in the workspace's package.json using pnpm. This command triggers Turborepo to run all configured lint tasks and their dependencies.

```bash
pnpm lint
```

--------------------------------

### Define Stylelint Ignore Rules

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/stylelint/setup-polyrepo.md

Specifies files and directories that Stylelint should ignore during linting, such as build output and node_modules, while ensuring Storybook configuration is not ignored.

```bash
**/dist/*
node_modules
storybook-static
!.storybook
```

--------------------------------

### Run All Tests with Turborepo

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/vitest/setup-turborepo.md

Executes the 'test' script defined in the root `package.json`, which in turn uses Turborepo to run tests across all packages in the monorepo. This command should be run from the root of the solution.

```bash
pnpm test
```

--------------------------------

### Add Lint Script to package.json

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/stylelint/setup-turborepo.md

Adds a 'lint' script to the root `package.json` that utilizes Turborepo to run the linting process across all projects in the workspace.

```json
{
    "lint": "turbo run lint --continue"
}
```

--------------------------------

### Rsbuild Configuration with Plugins

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rsbuild/configure-build.md

Appends additional Rsbuild plugins to the build configuration. This example shows how to include the `pluginAssetsRetry` for handling asset loading failures.

```typescript
import { defineBuildConfig } from "@workleap/rsbuild-configs";
import { pluginAssetsRetry } from "@rsbuild/plugin-assets-retry";

export default defineBuildConfig({
    plugins: [pluginAssetsRetry()]
});
```

--------------------------------

### List Supported Browsers with Browserslist CLI

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/browserslist/getting-started.md

This command lists the browser versions supported by a specific Browserslist configuration file. It requires `pnpx` to be installed and a `.browserslistrc` file to be present in the project's root directory.

```bash
pnpx browserslist
```

--------------------------------

### Customize Image Compression Options in Rsbuild

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rsbuild/configure-build.md

Demonstrates customizing the image compression plugin by providing a function that extends the default options. This example shows how to add 'pngLossless' compression to the default configuration.

```typescript
import { defineBuildConfig } from "@workleap/rsbuild-configs";

export default defineBuildConfig({
    compressImage: defaultOptions => {
        return [
            ...defaultOptions,
            "pngLossless"
        ];
    }
});
```

--------------------------------

### Configure Prettier Ignore Rules for CSS

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/stylelint/setup-polyrepo.md

Configures .prettierignore to ignore all files except those with a .css extension, ensuring Prettier only processes CSS files.

```bash
*
!**/*.css
```

--------------------------------

### Configure Turborepo Tasks

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/syncpack/setup-turborepo.md

Sets up the turbo.json configuration file for Turborepo. It defines a 'lint' task that depends on a custom '//#syncpack' task, ensuring Syncpack runs as part of the linting process.

```json
{
    "$schema": "https://turbo.build/schema.json",
    "ui": "tui",
    "tasks": {
        "lint": {
            "dependsOn": ["//#syncpack"]
        },
        "//#syncpack": {}
    }
}
```

--------------------------------

### Configure Turborepo for ESLint Tasks

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/eslint/setup-turborepo.md

Sets up the `turbo.json` file to define and manage ESLint-related tasks within the Turborepo build system. It specifies dependencies and output caching for linting tasks.

```json
{
    "$schema": "https://turbo.build/schema.json",
    "ui": "tui",
    "tasks": {
        "lint": {
            "dependsOn": ["eslint"]
        },
        "//#eslint": {
            "outputs": ["node_modules/.cache/eslint"]
        },
        "eslint": {
            "outputs": ["node_modules/.cache/eslint"]
        }
    }
}
```

--------------------------------

### Append Rsbuild Plugins

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rslib/configure-dev.md

Allows appending Rsbuild plugin instances to the configuration. This example demonstrates adding the assets-retry plugin.

```typescript
import { defineDevConfig } from "@workleap/rslib-configs";
import { pluginAssetsRetry } from "@rsbuild/plugin-assets-retry";

export default defineDevConfig({
    plugins: [pluginAssetsRetry()]
});
```

--------------------------------

### Configure Turborepo for Stylelint Task

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/stylelint/setup-turborepo.md

Sets up the `turbo.json` file to define tasks, including a 'lint' task that depends on 'stylelint', and configures the 'stylelint' task to cache its outputs.

```json
{
    "$schema": "https://turbo.build/schema.json",
    "ui": "tui",
    "tasks": {
        "lint": {
            "dependsOn": ["stylelint"]
        },
        "stylelint": {
            "outputs": ["node_modules/.cache/stylelint"]
        }
    }
}
```

--------------------------------

### Configure tsconfig.json for Libraries

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/typescript/setup-polyrepo.md

Sets up the tsconfig.json file for a library project, extending the default configuration from @workleap/typescript-configs. It excludes the 'dist' and 'node_modules' directories.

```json
{
    "extends": ["@workleap/typescript-configs/library.json"],
    "exclude": ["dist", "node_modules"]
}
```

--------------------------------

### Configure Compiler Paths in tsconfig.json

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/typescript/setup-turborepo.md

Defines 'compilerOptions.paths' in tsconfig.json to resolve workspace dependencies when JIT packages are not used. This is crucial for monorepos where projects reference each other.

```json
{
    "extends": "@workleap/typescript-configs/web-application.json",
    "compilerOptions": {
        "paths": {
            "@sample/components": ["../components/index.ts"],
            "@sample/utils": ["../utils/index.ts"]
        }
    },
    "exclude": ["dist", "node_modules"]
}
```

```json
{
    "extends": "@workleap/typescript-configs/library.json",
    "compilerOptions": {
        "paths": {
            "@sample/utils": ["../utils/index.ts"]
        }
    },
    "exclude": ["dist", "node_modules"]
}
```

--------------------------------

### Configure Turborepo Tasks

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rsbuild/setup-turborepo.md

Defines the build and development tasks for Turborepo. It specifies task dependencies (e.g., `^build` meaning upstream build), caching behavior, and output directories for artifacts.

```json
{
    "$schema": "https://turbo.build/schema.json",
    "ui": "tui",
    "tasks": {
        "dev": {
            "dependsOn": ["^build"],
            "cache": false,
            "persistent": true
        },
        "build": {
            "dependsOn": ["^build"],
            "outputs": ["dist/**", "storybook-static/**"]
        }
    }
}
```

--------------------------------

### Configure Vitest Project Settings

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/vitest/setup-turborepo.md

Configures Vitest for a specific project by creating a `vitest.config.ts` file. This configuration specifies test file inclusion and exclusion patterns, the reporter to use, and the cache directory for Vitest.

```typescript
import { defineConfig } from "vitest/config";

export default defineConfig({
    test: {
        include: ["tests/**/*.test.ts"],
        exclude: ["node_modules", "dist"],
        reporters: "verbose"
    },
    cacheDir: "./node_modules/.cache/vitest"
});
```

--------------------------------

### Custom Rsbuild Entry Point Configuration

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rsbuild/configure-build.md

Customizes the entry point for Rsbuild builds. This allows specifying a different starting file than the default `./src/index.tsx`.

```typescript
import { defineBuildConfig } from "@workleap/rsbuild-configs";

export default defineBuildConfig({
    entry: {
        index: "./src/another-entry.tsx"
    }
});
```

--------------------------------

### Configure Turborepo Workspace Tasks

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/typescript/setup-turborepo.md

Sets up the `turbo.json` file for the monorepo workspace. It defines tasks like 'lint' and 'typecheck', including dependencies and output caching strategies. The `ui` property is set to 'tui' for the Turborepo UI.

```json
{
    "$schema": "https://turbo.build/schema.json",
    "ui": "tui",
    "tasks": {
        "lint": {
            "dependsOn": ["typecheck"]
        },
        "//#typecheck": {
            "outputs": ["node_modules/.cache/tsbuildinfo.json"]
        },
        "typecheck": {
            "outputs": ["node_modules/.cache/tsbuildinfo.json"]
        }
    }
}
```

--------------------------------

### Add Project Script to package.json

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/typescript/setup-turborepo.md

Adds a 'typecheck' script to an individual project's `package.json` file. This script, which uses 'tsgo', will be executed by Turborepo as part of the build or check process.

```json
{
    "typecheck": "tsgo"
}
```

--------------------------------

### Add Project-Level Test Script

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/vitest/setup-turborepo.md

Adds a 'test' script to a project's `package.json` file (e.g., `packages/pkg-1`). This script directly invokes Vitest with the specified configuration file and runs tests without watching for changes.

```json
{
    "test": "vitest --config vitest.config.ts --no-watch"
}
```

--------------------------------

### Configure Syncpack with JavaScript

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/syncpack/setup-turborepo.md

Provides a boilerplate configuration for Syncpack using a .syncpackrc.js file. This configuration defines rules for versioning and dependency types across different scopes within the monorepo.

```javascript
// @ts-check

/** @type {import("syncpack").RcFile} */
export default {
    "lintFormatting": false,
    "semverGroups": [
        {
            "packages": ["@[YOUR_PROJECT_SCOPE]/apps/*"],
            "dependencyTypes": ["prod", "dev"],
            "range": "",
            "label": "Apps should pin dependencies and devDependencies."
        },
        {
            "packages": ["@[YOUR_PROJECT_SCOPE]/packages/*"],
            "dependencyTypes": ["peer"],
            "range": "^",
            "label": "Packages should use ^ for peerDependencies."
        },
        {
            "packages": ["workspace-root"],
            "dependencyTypes": ["dev"],
            "range": "",
            "label": "Workspace root should pin devDependencies."
        }
    ],
    "versionGroups": [
        {
            "packages": ["**"],
            "dependencyTypes": ["prod", "dev", "peer"],
            "preferVersion": "highestSemver",
            "label": "Packages and Apps should have a single version across the repository."
        }
    ]
};

```

--------------------------------

### Add Build CLI Scripts to package.json

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rsbuild/setup-turborepo.md

Adds scripts to the root `package.json` to execute Turborepo's build tasks for specific applications or packages. Leverages the `--filter` option for targeted execution.

```json
{
    "build-app-1": "turbo run build --filter=./apps/app-1",
    "build-storybook": "turbo run build --filter=./apps/storybook"
}
```

--------------------------------

### Configure ESLint for TypeScript Library

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/eslint/setup-turborepo.md

Sets up the ESLint configuration for a TypeScript library that does not use React. It employs the defineTypeScriptLibraryConfig function from @workleap/eslint-configs to apply relevant TypeScript linting rules.

```typescript
import { defineTypeScriptLibraryConfig } from "@workleap/eslint-configs";

export default defineTypeScriptLibraryConfig(import.meta.dirname);
```

--------------------------------

### Add Workspace Scripts to package.json

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/typescript/setup-turborepo.md

Adds 'lint' and 'typecheck' scripts to the root `package.json` of the workspace. The 'lint' script runs Turborepo's lint task, while 'typecheck' uses 'tsgo' for type checking at the workspace root.

```json
{
    "lint": "turbo run lint --continue"
}
```

```json
{
    "typecheck": "tsgo"
}
```

--------------------------------

### Customize Rspack Optimization with Transformers

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rslib/configure-build.md

Shows how to use configuration transformers to customize the Rspack build configuration. This example specifically sets chunkIds to 'named' for better debugging and organization of output files.

```rslib.build.ts
import { defineBuildConfig, type RslibConfigTransformer } from "@workleap/rslib-configs";
import type { RslibConfig } from "@rslib/core";

const forceNamedChunkIdsTransformer: RslibConfigTransformer = (config: RslibConfig) => {
    config.tools = config.tools ?? {};
    config.tools.rspack = config.tools.rspack ?? {};

    config.tools.rspack.optimization = {
        ...(config.tools.rspack.optimization ?? {}),
        chunkIds: "named"
    };

    return config;
};

export default defineBuildConfig({
    transformers: [forceNamedChunkIdsTransformer]
});
```

--------------------------------

### Apply Custom Rsbuild Configuration Transformers

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rsbuild/configure-build.md

Demonstrates how to use the 'transformers' option in Rsbuild to apply custom configuration logic. This example defines a transformer to force named chunk IDs for better output organization.

```typescript
import { defineBuildConfig, type RsbuildConfigTransformer } from "@workleap/rsbuild-configs";
import type { RsbuildConfig } from "@rsbuild/core";

const forceNamedChunkIdsTransformer: RsbuildConfigTransformer = (config: RsbuildConfig) => {
    config.output = {
        ...(config.output ?? {}),
        filename: "[name].[contenthash].bundle.js"
    };

    return config;
};

export default defineBuildConfig({
    transformers: [forceNamedChunkIdsTransformer]
});
```

--------------------------------

### Configure EditorConfig for Consistent Indentation

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/eslint/setup-turborepo.md

Sets up the `.editorconfig` file to enforce consistent indentation styles (spaces, size 4) across the project. This complements ESLint and VS Code's formatting to ensure uniformity.

```editorconfig
root = true

[*]
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 4

[*.md]
trim_trailing_whitespace = false
```

--------------------------------

### Configure Root tsconfig.json for Monorepo Workspace

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/typescript/setup-turborepo.md

Extends the base TypeScript configuration for the monorepo workspace using `@workleap/typescript-configs/monorepo-workspace.json`. It excludes the 'packages' and 'node_modules' directories from the root configuration. An alternative configuration includes Storybook-related paths.

```json
{
    "extends": "@workleap/typescript-configs/monorepo-workspace.json",
    "exclude": ["packages", "node_modules"]
}
```

```json
{
    "extends": "@workleap/typescript-configs/monorepo-workspace.json",
    "include": ["**/*", ".storybook/*"],
    "exclude": ["packages", "node_modules", ".storybook/storybook-static"]
}
```

--------------------------------

### Test Browserslist Configuration

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/browserslist/configure-project.md

Executes the `pnpm browserslist` command to verify the configured Browserslist settings. This command outputs a list of browser versions supported by the configuration.

```bash
pnpm browserslist
```

--------------------------------

### Install Rslib Storybook Packages

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rslib/configure-storybook.md

Installs the required Rslib and Storybook packages as development dependencies in a Storybook project.

```bash
pnpm add -D @workleap/rslib-configs @rslib/core storybook-react-rsbuild storybook-addon-rslib
```

--------------------------------

### Install and Remove Packages for tsup to rslib Migration

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rslib/migrate-from-tsup.md

Installs the necessary rslib packages and removes the old tsup packages using pnpm. This is a prerequisite for the migration process.

```bash
pnpm add -D @workleap/rslib-configs @rslib/core @rsbuild/core
pnpm remove @workleap/tsup-configs tsup
```

--------------------------------

### Install and Remove Packages for Webpack to Rsbuild Migration

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rsbuild/migrate-from-webpack.md

Installs the necessary Rsbuild packages and removes the old Webpack packages. This is a crucial first step in the migration process.

```bash
pnpm add -D @workleap/rsbuild-configs @rsbuild/core @rspack/core
pnpm remove @workleap/webpack-configs @swc/core @swc/helpers @workleap/swc-configs webpack webpack-cli webpack-dev-server @workleap/postcss-configs postcss
```

--------------------------------

### Install Development Packages with pnpm

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rsbuild/configure-dev.md

Installs essential development packages for Rsbuild configuration, including Rsbuild configs, Browserslist config, and Rsbuild/Rspack core packages. This command should be run at the root of your web application project.

```bash
pnpm add -D @workleap/rsbuild-configs @workleap/browserslist-config @rsbuild/core @rspack/core browserslist
```

--------------------------------

### Install Storybook Packages for Rsbuild

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rsbuild/configure-storybook.md

Installs the required npm packages for integrating Rsbuild with Storybook. This includes Rsbuild configuration packages, Browserslist configuration, Rsbuild core, Rspack core, and the Storybook React Rsbuild plugin.

```bash
pnpm add -D @workleap/rsbuild-configs @workleap/browserslist-config @rsbuild/core @rspack/core browserslist storybook-react-rsbuild
```

--------------------------------

### Install ESLint v9 Packages (Polyrepo & Monorepo)

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/eslint/migrate-from-eslint-8.md

Installs the required packages for ESLint v9, including the new @workleap/eslint-configs and essential ESLint and TypeScript integration packages. This step follows the uninstallation of v8 packages.

```bash
pnpm add -D @workleap/eslint-configs @eslint/js @typescript-eslint/parser @types/node eslint typescript-eslint
```

--------------------------------

### Configure Turborepo with Vitest Task

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/vitest/setup-turborepo.md

Sets up the Turborepo configuration file (`turbo.json`) to include a 'test' task. This task specifies the output directory for Vitest's cache, enabling Turborepo to manage and optimize test runs.

```json
{
    "$schema": "https://turbo.build/schema.json",
    "ui": "tui",
    "tasks": {
        "test": {
            "outputs": ["node_modules/.cache/vitest/**"]
        }
    }
}
```

--------------------------------

### Basic Browserslist Configuration

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/browserslist/configure-project.md

Sets up a basic `.browserslistrc` file by extending the shared configuration from `@workleap/browserslist-config`. This file should be located at the root of the project.

```browserslist
extends @workleap/browserslist-config
```

--------------------------------

### Add Lint and ESLint Scripts to Workspace package.json

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/eslint/setup-turborepo.md

Adds 'lint' and 'eslint' scripts to the root package.json for running Turborepo lint tasks and ESLint checks across the workspace. The 'lint' script executes 'turbo run lint --continue', while 'eslint' runs ESLint on the entire workspace root with specific warning and caching configurations.

```json
{
    "lint": "turbo run lint --continue"
}
```

```json
{
    "eslint": "eslint . --max-warnings=0 --cache --cache-location node_modules/.cache/eslint"
}
```

--------------------------------

### Configure tsconfig.json for Web Applications

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/typescript/setup-polyrepo.md

Sets up the tsconfig.json file for a web application, extending the default configuration from @workleap/typescript-configs. It excludes the 'dist' and 'node_modules' directories.

```json
{
    "extends": ["@workleap/typescript-configs/web-application.json"],
    "exclude": ["dist", "node_modules"]
}
```

--------------------------------

### Default Rsbuild Development Configuration

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rsbuild/configure-dev.md

Exports the default Rsbuild development configuration using the `defineDevConfig` function from `@workleap/rsbuild-configs`. This provides a sensible default setup for development environments.

```typescript
import { defineDevConfig } from "@workleap/rsbuild-configs";

export default defineDevConfig();
```

--------------------------------

### Add Lint Script to package.json

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/typescript/setup-polyrepo.md

Adds a 'lint:types' script to the project's package.json file, which can be used to lint the entire solution using the TypeScript compiler.

```json
{
    "lint:types": "tsc"
}
```

--------------------------------

### Add Stylelint CLI Script to package.json

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/stylelint/setup-turborepo.md

Adds a 'stylelint' script to the project's package.json file. This script can be executed using a package manager (like pnpm or npm) to run Stylelint against CSS files in the project. It includes options for caching and limiting warnings.

```json
{
    "stylelint": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-location node_modules/.cache/stylelint --max-warnings=0"
}
```

--------------------------------

### Configure tsconfig.json for Libraries with Storybook

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/typescript/setup-polyrepo.md

Configures tsconfig.json for a library project that uses Storybook. It extends the library configuration, includes the '.storybook' folder, and excludes 'dist', 'node_modules', and '.storybook/storybook-static'.

```json
{
    "extends": ["@workleap/typescript-configs/library.json"],
    "include": ["**/*", ".storybook/*"],
    "exclude": ["dist", "node_modules", ".storybook/storybook-static"]
}
```

--------------------------------

### Configure tsconfig.json for Web Applications with Storybook

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/typescript/setup-polyrepo.md

Configures tsconfig.json for a web application that uses Storybook. It extends the web-application configuration and includes the '.storybook' folder while excluding 'dist' and 'node_modules'.

```json
{
    "extends": ["@workleap/typescript-configs/web-application.json"],
    "include": ["**/*", ".storybook/*"],
    "exclude": ["dist", "node_modules"]
}
```

--------------------------------

### Customize Rsbuild Entry Point

Source: https://github.com/workleap/wl-web-configs/blob/main/docs/rsbuild/configure-dev.md

Customizes the Rsbuild development configuration by specifying a custom entry point. This allows developers to define different starting points for their application build.

```typescript
import { defineDevConfig } from "@workleap/rsbuild-configs";

export default defineDevConfig({
    entry: {
        index: "./src/another-entry.tsx"
    }
});
```