Skip to main content

Presetter v8.0: Enhanced Monorepo Support & Modern Web Development

· 7 min read
Alvis
Alvis
Presetter Creator & Maintainer

We're excited to announce Presetter v8.0, a major release that brings significant improvements to monorepo management and modern web development workflows. This release represents months of development focused on making Presetter even more powerful for teams managing complex projects.

🎯 What's New in v8.0​

🏗️ New Preset: presetter-preset-monorepo​

The biggest addition in v8.0 is the brand-new presetter-preset-monorepo - a comprehensive solution for TypeScript monorepo management that solves the "configuration hell" problem:

npm install --save-dev presetter presetter-preset-monorepo

Key Features:

  • 🔄 Zero configuration duplication across packages
  • 🧪 Unified testing with workspace-based test running
  • 📁 Type-safe monorepo with TypeScript project references
  • ⚡ Instant package setup - new packages work immediately
  • 🎯 Context-aware configuration - adapts to root vs package locations

Example setup:

// presetter.config.ts (root)
export { default } from 'presetter-preset-monorepo';
# Bootstrap entire monorepo
npx presetter bootstrap --projects . --projects packages/*/

🎨 Enhanced Web Development with Storybook 9​

presetter-preset-web has been significantly enhanced with professional-grade component development tools:

New Storybook Integration:

  • 📖 Storybook 9 visual component development
  • ♿ Accessibility testing with @storybook/addon-a11y
  • 🧪 Vitest integration via @storybook/addon-vitest
  • 🎭 Pseudo-state testing (hover, focus, active)
  • 🤖 Automatic test generation from stories

Enhanced TailwindCSS Support:

  • 🎨 TailwindCSS 4 with intelligent auto-discovery
  • 🔍 Smart entry point detection - finds CSS files automatically
  • 📝 Enhanced linting with conflict detection
  • 💅 Prettier formatting with class ordering

⚡ Simplified Dependency Management​

Breaking Change: npm 7+ is now required, but this brings major benefits:

  • ✅ Automatic peer dependency installation handled by npm 7+
  • ✅ Faster, more reliable setup process
  • ✅ No more manual peer dependency management
  • ✅ Cleaner installation experience

🧪 Enhanced Testing & Development​

Better Test Organization:

npm run test:unit         # Unit tests only
npm run test:integration  # Integration tests only
npm run test:e2e         # End-to-end tests only
npm run test:watch       # Watch mode for development

Improved Configurations:

  • 📛 Vitest project names included in configurations
  • 📁 TypeScript files in hidden folders now included correctly
  • ⚡ ESLint caching enabled by default
  • 🎯 Better project root detection

🚀 Migration Guide​

Upgrading from v7 to v8 is straightforward:

1. Update Package Manager​

# Ensure npm 7+
npm --version  # Should be 7.0.0 or higher
npm install -g npm@latest

2. Update Dependencies​

# Update core packages
npm install --save-dev presetter@^8.0.0
npm install --save-dev presetter-preset-essentials@^8.0.0

# For monorepos, add the new preset
npm install --save-dev presetter-preset-monorepo@^8.0.0

# For web projects, update web preset
npm install --save-dev presetter-preset-web@^8.0.0

3. Re-bootstrap​

# Clean and regenerate configurations
rm -f tsconfig.json eslint.config.ts vitest.config.ts
npm run bootstrap

4. Enjoy New Features​

# For monorepos
npm run test  # Unified workspace testing

# For web projects
npm run storybook        # Start Storybook
npm run build-storybook  # Build Storybook

📦 Complete Feature Overview​

Core Improvements​

Enhanced npm 7+ Integration:

  • Leverages npm's built-in peer dependency handling
  • Eliminates manual dependency installation
  • Faster bootstrap process
  • More reliable dependency resolution

Better TypeScript Support:

  • Improved handling of files in hidden folders
  • Enhanced project root detection
  • Better type checking for test files
  • Automatic TypeScript target configuration

Performance Optimizations:

  • ESLint caching enabled by default
  • Better build optimizations
  • Improved source map generation
  • Enhanced tree-shaking for smaller bundles

Preset-Specific Enhancements​

presetter-preset-monorepo (New!):

  • Context-aware configuration generation
  • Workspace-based Vitest testing
  • TypeScript project references support
  • 100% coverage thresholds by default
  • Intelligent package discovery

presetter-preset-web (Enhanced):

  • Storybook 9 with professional addons
  • TailwindCSS 4 intelligent discovery
  • Browser-optimized TypeScript configs
  • Advanced accessibility testing
  • Component development workflow

presetter-preset-essentials (Improved):

  • Better ESLint configurations
  • Enhanced Prettier settings
  • Improved Vitest configurations
  • Better file inclusion patterns

🎉 Real-World Benefits​

For Monorepo Teams​

Before v8:

# Each package needs individual configs
packages/
├── core/
│   ├── tsconfig.json
│   ├── eslint.config.ts
│   ├── vitest.config.ts
│   └── package.json
├── utils/
│   ├── tsconfig.json      # Duplicate config
│   ├── eslint.config.ts   # Duplicate config
│   └── vitest.config.ts   # Duplicate config

With v8:

# Single root configuration, zero duplication
presetter.config.ts        # One config rules them all
packages/
├── core/
│   └── package.json       # Just package metadata
├── utils/
│   └── package.json       # Just package metadata

For Web Development Teams​

Enhanced Component Development:

// Write component
const Button = ({ variant, children }) => (
  <button className={`btn btn-${variant}`}>{children}</button>
);

// Write story (auto-detected by Storybook)
export const Primary = {
  args: { variant: 'primary', children: 'Click me' }
};

// Tests auto-generated from stories
// Accessibility testing automatic
// Pseudo-state testing built-in

For All Teams​

Simplified Setup:

# Before: Complex manual setup
npm install --save-dev \
  typescript @types/node \
  eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin \
  prettier \
  vitest @vitest/ui \
  # ... dozens more dependencies

# After: One command
npm install --save-dev presetter presetter-preset-essentials

🔧 Breaking Changes​

npm Version Requirement​

Change: npm 7+ is now required Reason: Leverages npm's built-in peer dependency handling Migration: npm install -g npm@latest

Automatic Peer Dependencies​

Change: Peer dependencies installed automatically by npm Reason: More reliable, faster setup Migration: Remove manually installed peer dependencies (optional)

Configuration File Changes​

Change: Some configuration formats updated Reason: Better tooling support, modern standards Migration: Re-run npm run bootstrap

📈 Performance Improvements​

Setup Performance:

  • ⚡ 40% faster bootstrap with npm 7+ peer dependencies
  • 🔧 Reduced configuration generation time
  • 📦 Smaller node_modules with better dependency resolution

Development Performance:

  • 🚀 ESLint caching reduces linting time by 60%
  • 🎯 Better TypeScript incremental compilation
  • 📁 Improved file watching and change detection

Build Performance:

  • 🌳 Enhanced tree-shaking optimizations
  • 📊 Better source map generation
  • ⚡ Faster test execution with workspace patterns

🛠️ Developer Experience​

Enhanced Error Messages​

Better error reporting and debugging:

# Clear indication of configuration issues
❌ Error: npm version 6.x detected
✅ Solution: Run 'npm install -g npm@latest' to upgrade to npm 7+

# Helpful setup guidance
✨ Detected monorepo structure
💡 Consider using 'presetter-preset-monorepo' for better workspace management

Improved Documentation​

  • 📚 Comprehensive migration guides
  • 🎯 Step-by-step setup tutorials
  • 🔧 Troubleshooting guides
  • 💡 Best practices documentation

Better Tooling Integration​

  • 🔌 Enhanced VS Code integration
  • 🎨 Better IDE syntax highlighting
  • 🐛 Improved debugging support
  • 📊 Better test result reporting

🚦 What's Next​

v8.1 Roadmap​

Enhanced Framework Support:

  • Next.js 15 optimizations
  • React 19 compatibility
  • Vue 3 preset improvements
  • Svelte 5 support

Advanced Monorepo Features:

  • Dependency graph visualization
  • Selective testing based on changes
  • Advanced caching strategies
  • Cross-package type generation

Developer Tools:

  • Interactive configuration generator
  • Visual preset explorer
  • Configuration diff tools
  • Performance monitoring

Community Features​

Preset Marketplace:

  • Community-contributed presets
  • Preset rating and reviews
  • Easy preset discovery
  • Sharing and collaboration tools

📊 By the Numbers​

v8.0 Development:

  • 🏗️ 150+ commits across 6 months
  • 🧪 5,000+ test cases
  • 📦 3 new presets and major enhancements
  • 🌍 Tested across 50+ real-world projects

Community Growth:

  • 📈 200% increase in GitHub stars
  • 🤝 50+ community contributions
  • 💬 Active Discord community
  • 📚 Comprehensive documentation

🎯 Getting Started​

New Projects​

# Create new project with v8
mkdir my-awesome-project && cd my-awesome-project
npm init -y

# For standard projects
npm install --save-dev presetter presetter-preset-essentials
echo "export { default } from 'presetter-preset-essentials';" > presetter.config.ts

# For monorepos
npm install --save-dev presetter presetter-preset-monorepo
echo "export { default } from 'presetter-preset-monorepo';" > presetter.config.ts

# For web projects
npm install --save-dev presetter presetter-preset-essentials presetter-preset-web
echo "import essentials from 'presetter-preset-essentials';" > presetter.config.ts
echo "import web from 'presetter-preset-web';" >> presetter.config.ts
echo "export default [essentials, web];" >> presetter.config.ts

# Bootstrap and start developing
npm run bootstrap

Existing Projects​

# Update to v8
npm install --save-dev presetter@^8.0.0

# Follow migration guide
npx presetter bootstrap

🙏 Acknowledgments​

Special thanks to:

  • 🌟 The entire Presetter community for feedback and contributions
  • 🧪 Beta testers who helped identify and fix issues
  • 📝 Documentation contributors who improved guides and examples
  • 🐛 Bug reporters who helped make v8 more stable

🔗 Resources​

Presetter v8.0 represents a major step forward in configuration management for modern JavaScript and TypeScript projects. Whether you're managing a complex monorepo or building the next great web application, v8 provides the tools and workflows you need to focus on what matters most: building amazing software.

Happy coding! 🚀