@jabraf/dev

Collection of web dev tools

Documentation

Here is the documentation for different tools available in this package.

TSConfig

Create a tsconfig.json file in the project and extend one of the available base configs:

{
  "extends": "@jabraf/dev/tsconfig/lib"
}

Available TSConfigs:

| Subpath export | Description | | --------------------------- | --------------------------------- | | @jabraf/dev/tsconfig/base | Shared base — strict, ESM, ES2023 | | @jabraf/dev/tsconfig/lib | React library (jsx: react, emits) | | @jabraf/dev/tsconfig/app | React application (jsx: preserve) | | @jabraf/dev/tsconfig/node | Node.js / bundler targets |

Prettier

Create a .prettierrc.mjs or .prettierrc.mts file in the project and export the base config:

import basePrettierConfig from '@jabraf/dev/prettier';

export default basePrettierConfig;

or in package.json

{
  "prettier": "@jabraf/dev/prettier"
}

Named export: basePrettierConfig.

ESLint

Create a eslint.config.js or eslint.config.ts file in the project and export the base config:

import baseEslintConfig from '@jabraf/dev/eslint';

export default baseEslintConfig;

Named export: baseEslintConfig.

The config automatically ignores dist, build, and node_modules and includes recommended rules for JavaScript, TypeScript, and React.

Lintstaged

Create a .lintstagedrc.mjs file in the project and export the base config:

import baseLintStagedConfig from '@jabraf/dev/lint-staged';

export default baseLintStagedConfig;

Named exports: baseLintStagedConfig, lintStagedCommands.

The config runs:

• prettier --write for staged *.{js,mjs,ts,mts,jsx,tsx,md,yaml,yml,json,xml} files.
• eslint and vitest run related --bail 0 --passWithNoTests for staged *.{js,ts,mjs,mts,jsx,tsx} files.

To compose a custom config, use the lintStagedCommands helpers (eslint, tsc, vitest, prettier):

import { lintStagedCommands } from '@jabraf/dev/lint-staged';

export default {
  '*.{js,ts,mjs,mts,jsx,tsx}': (files) => [lintStagedCommands.eslint(files), lintStagedCommands.tsc()],
};

Commit lint

Create a commitlint.config.js file in the project and export the base config:

import baseCommitLintConfig from '@jabraf/dev/commitlint';

export default baseCommitLintConfig;

Named export: baseCommitLintConfig.

Playwright

Create a playwright.config.ts file in the project and use the basePlaywrightConfig factory:

import { basePlaywrightConfig } from '@jabraf/dev/playwright';

export default basePlaywrightConfig();

Pass options to customise the test directory, base URLs, CI behaviour, and browser projects:

export default basePlaywrightConfig({
  testDir: './e2e',
  isFunctional: process.env.TEST_ENV === 'functional',
  isCI: Boolean(process.env.CI),
  baseURL: 'https://jabran.dev',
  devServerURL: 'http://localhost:3000',
});

Example npm scripts:

"test:functional": "TEST_ENV=functional playwright test --grep-invert @non-functional",
"test:e2e": "playwright test --grep @e2e",
"test:vr": "playwright test --grep @vr",

| Option | Type | Default | Description | | -------------- | ---------------------------------- | ------------------------- | ------------------------------------------------------------------ | | testDir | string | './integration' | Directory containing Playwright tests | | isFunctional | boolean | false | When true, starts a dev/build server and targets devServerURL | | isCI | boolean | false | Enables CI-specific settings (forbid .only, 2 retries, 1 worker) | | baseURL | string | 'http://localhost' | Base URL used when isFunctional is false | | devServerURL | string | 'http://localhost' | Dev server origin used when isFunctional is true | | projects | PlaywrightTestConfig['projects'] | Chromium (Desktop Chrome) | Playwright browser project definitions |

Vitest

Create a vitest.config.ts file in the project and use the baseVitestConfig factory:

import { baseVitestConfig } from '@jabraf/dev/vitest';

export default baseVitestConfig();

Pass options to enable React Testing Library support or coverage reporting:

export default baseVitestConfig({ react: true, coverage: true });

| Option | Type | Default | Description | | ----------- | ---------- | ------------- | ----------------------------------------- | | react | boolean | false | Adds the React Testing Library setup file | | coverage | boolean | false | Enables V8 coverage provider | | reporters | string[] | ['default'] | Vitest reporter list |