Presetter Preset Ecosystem

Presets are the heart of Presetter—carefully crafted bundles of configurations, dependencies, and scripts designed for specific use cases. The ecosystem is organized in a hierarchical structure that promotes composition and reusability.

Preset Hierarchy

Quick Preset Selection

🎯 By Project Type

Project Type	Recommended Preset	Additional Options
Modern TypeScript App	@presetter/preset-esm	+ strict for quality
NPM Library	@presetter/preset-hybrid	+ rollup for bundling
React Application	@presetter/preset-react	Includes web tools
Node.js Service or CLI	@presetter/preset-node	+ esm + strict
Bun Service or CLI	@presetter/preset-bun	Standalone (no essentials)
Legacy Node.js	@presetter/preset-cjs	+ strict for quality
Monorepo	@presetter/preset-monorepo	Includes ESM + strict
Web Frontend	@presetter/preset-web	TailwindCSS + Storybook

📦 By Module System

• ES Modules only: @presetter/preset-esm
• CommonJS only: @presetter/preset-cjs
• Dual compatibility: @presetter/preset-hybrid

🔧 By Use Case

• Quick start: @presetter/preset-essentials
• Production-ready: essentials + @presetter/preset-strict
• Library publishing: @presetter/preset-rollup
• Team consistency: @presetter/preset-monorepo

Preset Categories

🏗️ Foundation

Core development tools and essential configurations that serve as the base for all other presets.

• essentials - TypeScript, ESLint, Vitest, Prettier, and essential tooling

🏃 Runtimes

Runtime-targeted presets that shape the TypeScript and build story for a specific JavaScript runtime.

• @presetter/preset-node - Node-tuned tsconfig.json on top of essentials
• @presetter/preset-bun - Standalone Bun preset with bun build scripts and Bun ambient types

📁 Module Systems

Specialized configurations for different JavaScript module formats and compatibility requirements.

• esm - Modern ES Modules configuration
• cjs - CommonJS module configuration
• hybrid - Dual CommonJS/ESM package delivery

🎨 Frameworks

Framework-specific configurations that include specialized tooling and optimizations.

• web - Web development with PostCSS, TailwindCSS, and Storybook
• react - React applications with TSX support and React-specific linting
• storybook - Standalone Storybook setup with a11y checks and Vitest browser testing

📦 Bundling

Advanced bundling and build configurations for library and application distribution.

• rollup - Rollup bundler with comprehensive plugin ecosystem

✨ Quality

Enhanced code quality, project structure, and team collaboration tools.

• strict - Additional linting rules and quality enforcement
• monorepo - Monorepo workspace management and optimization

Preset Composition

Single Preset Usage

// presetter.config.ts
export { default } from '@presetter/preset-esm';

Multiple Preset Composition

// presetter.config.ts
import { preset } from '@presetter/types';
import esm from '@presetter/preset-esm';
import strict from '@presetter/preset-strict';

export default preset('my-project', {
  extends: [esm, strict],
  // Custom overrides here
});

Advanced Composition

// presetter.config.ts
import { preset } from '@presetter/types';
import essentials from '@presetter/preset-essentials';
import strict from '@presetter/preset-strict';
import rollup from '@presetter/preset-rollup';

export default preset('production-library', {
  extends: [essentials, strict, rollup],
  variables: {
    target: 'ES2020',
    output: 'dist'
  },
  override: {
    assets: {
      'package.json': {
        type: 'module',
        exports: {
          '.': {
            import: './dist/index.js',
            require: './dist/index.cjs'
          }
        }
      }
    }
  }
});

Runtime-Targeted Composition

// Node backend + ESM + strict
import { preset } from '@presetter/types';
import node from '@presetter/preset-node';
import esm from '@presetter/preset-esm';
import strict from '@presetter/preset-strict';

export default preset('my-node-api', {
  extends: [node, esm, strict],
});

// Standalone Bun service — no essentials, no extra presets required
export { default } from '@presetter/preset-bun';

Preset Comparison Matrix

Feature	essentials	node	bun	esm	cjs	hybrid	strict	web	react	storybook	rollup	monorepo
TypeScript	✅	✅	✅	✅	✅	✅	✅	❌	✅	❌	✅	✅
ESLint	✅	✅	❌	✅	✅	✅	✅	❌	✅	✅	✅	✅
Vitest	✅	✅	❌	✅	✅	✅	✅	❌	✅	✅	✅	✅
Prettier	✅	✅	❌	✅	✅	✅	✅	❌	✅	❌	✅	✅
Module Type	Any	Any	ESM	ESM	CJS	Both	Any	-	ESM	-	Both	ESM
Extends essentials	-	✅	❌	✅	✅	✅	❌	❌	✅	❌	✅	✅
Runtime Types	-	node	bun	-	-	-	-	-	-	-	-	-
Bun Build Scripts	❌	❌	✅	❌	❌	❌	❌	❌	❌	❌	❌	❌
React Support	❌	❌	❌	❌	❌	❌	❌	❌	✅	❌	❌	❌
Bundling	❌	❌	✅	❌	❌	❌	❌	❌	❌	❌	✅	❌
Strict Rules	❌	❌	❌	❌	❌	❌	✅	❌	❌	❌	❌	✅
Storybook	❌	❌	❌	❌	❌	❌	❌	✅	✅	✅	❌	❌
TailwindCSS	❌	❌	❌	❌	❌	❌	❌	✅	✅	❌	❌	❌
Monorepo Tools	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	❌	✅

Common Configuration Variables

All presets (except standalone ones) support these configurable variables:

variables: {
  source: 'src',          // Source directory
  output: 'lib',          // Build output directory  
  test: 'spec',           // Test directory
  types: 'types',         // Type definitions directory
  target: 'ES2024'        // TypeScript compilation target (default)
}

Migration Between Presets

From Basic to Strict

// Before
export { default } from '@presetter/preset-esm';

// After
import { preset } from '@presetter/types';
import esm from '@presetter/preset-esm';
import strict from '@presetter/preset-strict';

export default preset('strict-project', {
  extends: [esm, strict]
});

From Single to Monorepo

// Individual package preset
export { default } from '@presetter/preset-esm';

// Monorepo root preset
export { default } from '@presetter/preset-monorepo';

Adding Framework Support

// Before (basic TypeScript)
export { default } from '@presetter/preset-esm';

// After (React application)
import { preset } from '@presetter/types';
import esm from '@presetter/preset-esm';
import react from '@presetter/preset-react';

export default preset('react-app', {
  extends: [esm, react]
});

Getting Help

If you're unsure which preset to choose:

1. Start simple: Begin with @presetter/preset-essentials or @presetter/preset-esm
2. Add incrementally: Add more presets as your needs grow
3. Check examples: Look at the detailed preset documentation
4. Ask the community: GitHub Discussions

Next Steps

• Foundation Presets - Start with the core essentials
• Runtime Presets - Target Node.js or Bun
• Module System Presets - Choose your module format
• Framework Presets - Add framework-specific tools
• Quality Presets - Enhance code quality and collaboration