@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 exports: baseEslintConfig, createBaseEslintConfig.

The config automatically ignores dist, build, and node_modules and includes recommended rules for JavaScript, TypeScript, React, and React Hooks (with React version auto-detection).

To customise the config, use the createBaseEslintConfig factory:

import { createBaseEslintConfig } from '@jabraf/dev/eslint';

export default createBaseEslintConfig({
  react: false,
  ignores: ['coverage'],
  rules: { 'no-console': 'warn' },
});

| Option | Type | Default | Description | | --------- | -------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------- | | ignores | string[] | [] | Extra glob patterns to ignore, added to the defaults (dist, build, node_modules) | | files | string[] | all JS/TS/JSX/TSX files | File globs the base JS/TS rules apply to | | react | boolean | true | Include the React + React Hooks recommended configs (with version auto-detection). Set false for non-React projects | | globals | Linter.Globals | {} | Extra language globals merged into the default browser + node globals | | rules | Linter.RulesRecord | {} | Rules applied on top of the base config across all matched files | | extend | Config[] | [] | Additional flat-config entries appended after the base config (custom plugins, overrides, etc.) |

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, createBaseLintStagedConfig, 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. Files under /playwright/, /integration/, /e2e/, and /cypress/ are excluded from vitest by default.

To customise the vitest exclusions, use createBaseLintStagedConfig and pass vitestExclude (merged with the built-in defaults):

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

export default createBaseLintStagedConfig({ vitestExclude: ['/wdio/'] });

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

The factory accepts the exported CustomPlaywrightTestConfig options:

| Option | Type | Default | Description | | ------------------ | ----------------------------------- | -------------------------------- | ------------------------------------------------------------------------------- | | testDir | string | './integration' | Directory containing Playwright tests | | testMatch | PlaywrightTestConfig['testMatch'] | all specs in testDir | Glob(s) selecting spec files within testDir | | isFunctional | boolean | TEST_ENV === 'functional' | When true, starts a dev/build server and targets devServerURL | | isCI | boolean | Boolean(process.env.CI) | Enables CI-specific settings (forbid .only, retries, single worker) | | baseURL | string | 'https://jabran.dev' | Base URL used when isFunctional is false | | devServerURL | string | 'http://localhost:5231' | Dev server origin used when isFunctional is true | | projects | PlaywrightTestConfig['projects'] | Chromium (Desktop Chrome) | Playwright browser project definitions | | reporter | PlaywrightTestConfig['reporter'] | list + non-opening html | Reporter(s) | | fullyParallel | boolean | true | Toggle full parallelism | | retries | number | 2 on CI, 0 otherwise | Retry count | | workers | PlaywrightTestConfig['workers'] | 1 on CI, unset otherwise | Worker count | | use | PlaywrightTestConfig['use'] | {} | Extra use options merged over the computed defaults (baseURL, trace) | | webServerCommand | string | build+start on CI, dev otherwise | Override the auto web-server command | | webServerEnv | Record<string, string> | — | Extra env vars passed to the auto web-server | | webServerTimeout | number | 60000 | Timeout (ms) for the auto web-server | | webServer | PlaywrightTestConfig['webServer'] | — | Fully override the web server; takes precedence over the derived functional one | | extend | PlaywrightTestConfig | {} | Escape hatch: extra Playwright config fields merged last, overriding everything |

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 |