### Install Pattycake CLI

Source: https://github.com/aidenybai/pattycake/blob/main/README.md

Installs the pattycake package using npm. This is the primary command for setting up the tool in your project.

```bash
npm install pattycake
```

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

### Configure Create React App with Pattycake

Source: https://github.com/aidenybai/pattycake/blob/main/README.md

Integrates pattycake into a Create React App project by adding its webpack plugin. This allows pattycake to optimize your CRA build.

```javascript
const pattycake = require('pattycake');

module.exports = {
  webpack: {
    plugins: { add: [pattycake.webpack()] },
  },
};
```

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

### Configure Vite with Pattycake

Source: https://github.com/aidenybai/pattycake/blob/main/README.md

Adds pattycake as a plugin to your Vite configuration file (`vite.config.js`). This enables pattycake's optimizations during Vite development and builds.

```javascript
// vite.config.js
import { defineConfig } from 'vite';
import pattycake from 'pattycake';

export default defineConfig({
  plugins: [pattycake.vite()],
});
```

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

### Compare ts-pattern and Pattycake Performance

Source: https://context7.com/aidenybai/pattycake/llms.txt

Compares the execution performance of runtime ts-pattern matching against compiled Pattycake matching. It includes type definitions, implementations for both libraries, and a benchmarking function that measures execution time over a set number of iterations. The output shows the time taken by each and the resulting speedup.

```typescript
// benchmark.ts
import { match, P } from 'ts-pattern';

type Result =
  | { type: 'error'; error: { foo: number[] }; nice: string }
  | { type: 'ok'; data: { type: 'text' | 'img'; src?: string } };

// Runtime ts-pattern implementation
function tspattern(result: Result) {
  return match(result)
    .with({ type: 'error', error: { foo: [1, 2] }, nice: '' }, () => '<p>Error</p>')
    .with({ type: 'ok', data: { type: 'text' } }, () => '<p>Text</p>')
    .with({ type: 'ok', data: { type: 'img', src: P.select() } }, (src) => `<img src=${src} />`)
    .otherwise(() => 'Unknown');
}

// Compiled pattycake implementation (generated automatically)
function pattycake(result: Result) {
  let html;
  __patsy_temp_0: {
    if (
      result?.type === 'error' &&
      Array.isArray(result?.error?.foo) &&
      result?.error?.foo?.length >= 2 &&
      result?.error?.foo[0] === 1 &&
      result?.error?.foo[1] === 2
    ) {
      html = '<p>Error</p>';
      break __patsy_temp_0;
    }
    if (result?.type === 'ok' && result?.data?.type === 'text') {
      html = '<p>Text</p>';
      break __patsy_temp_0;
    }
    if (result?.type === 'ok' && result?.data?.type === 'img') {
      let src = result?.data?.src;
      html = `<img src=${src} />`;
      break __patsy_temp_0;
    }
    html = 'Unknown';
    break __patsy_temp_0;
  }
  return html;
}

// Benchmark execution
const iterations = 1000;
const dataSize = 100000;

function benchmark(fn: Function, iterations: number) {
  const start = performance.now();
  for (let i = 0; i < iterations; i++) {
    generateRandomData(dataSize).map(fn);
  }
  const end = performance.now();
  return end - start;
}

const pattycakeTime = benchmark(pattycake, iterations);
const tspatternTime = benchmark(tspattern, iterations);

console.log(`Pattycake: ${pattycakeTime.toFixed(2)}ms`);
console.log(`ts-pattern: ${tspatternTime.toFixed(2)}ms`);
console.log(`Speedup: ${(tspatternTime / pattycakeTime).toFixed(2)}x faster`);

// Typical output:
// Pattycake: 245.32ms
// ts-pattern: 2,891.45ms
// Speedup: 11.79x faster

```

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

### Babel Plugin Integration for Pattycake

Source: https://context7.com/aidenybai/pattycake/llms.txt

Uses Pattycake directly as a Babel plugin for custom build pipelines. This allows fine-grained control over the compilation process. Requires the 'pattycake' package.

```javascript
const pattycake = require('pattycake');

module.exports = {
  plugins: [
    [pattycake.babel, {
      disableOptionalChaining: false,
      mute: false
    }]
  ],
};
```

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

### Configure Next.js with Pattycake

Source: https://github.com/aidenybai/pattycake/blob/main/README.md

Integrates pattycake into a Next.js project by modifying the `next.config.js` file. This allows pattycake to optimize your Next.js build process.

```javascript
// next.config.js
const pattycake = require('pattycake');

module.exports = pattycake.next({
  // your next.js config
});
```

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

### Pattycake Vite Plugin Configuration for Optional Chaining

Source: https://context7.com/aidenybai/pattycake/llms.txt

Shows how to configure the Pattycake Vite plugin, specifically controlling optional chaining with the `disableOptionalChaining` option. This impacts generated code's performance and safety regarding property access.

```javascript
// Plugin configuration with options
import pattycake from 'pattycake';

export default {
  plugins: [
    pattycake.vite({
      disableOptionalChaining: false, // Enable safe property access (default)
      mute: false // Show compilation errors in console (default)
    })
  ]
};

// With disableOptionalChaining: true
// Generated code uses direct property access
if (result.type === 'ok' && result.data.type === 'text') {
  // Faster but assumes properties exist
}

// With disableOptionalChaining: false (safer)
// Generated code uses optional chaining
if (result?.type === 'ok' && result?.data?.type === 'text') {
  // Slightly slower but prevents runtime errors
}

```

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

### ts-pattern vs Pattycake Code Comparison

Source: https://github.com/aidenybai/pattycake/blob/main/README.md

Demonstrates the transformation of a `ts-pattern` match expression into an optimized, zero-runtime JavaScript code block generated by pattycake. This highlights the performance benefits.

```typescript
let html = match(result)
  .with(
    { type: 'error', error: { foo: [1, 2] }, nice: '' },
    () => '<p>Oups! An error occured</p>',
  )
  .with({ type: 'ok', data: { type: 'text' } }, function (data) {
    return '<p>420</p>';
  })
  .with(
    { type: 'ok', data: { type: 'img', src: 'hi' } },
    (src) => `<img src=${src} />`,
  )
  .otherwise(() => 'idk bro');

```

```javascript
let html;
out: {
  if (
    result.type === 'error' &&
    Array.isArray(result.error.foo) &&
    result.error.foo.length >= 2 &&
    result.error.foo[0] === 1 &&
    result.error.foo[1] === 2
  ) {
    html = '<p>Oups! An error occured</p>';
    break out;
  }
  if (result.type === 'ok' && result.data.type === 'text') {
    let data = result;
    html = '<p>420</p>';
    break out;
  }
  if (
    result.type === 'ok' &&
    result.data.type === 'img' &&
    result.data.src === 'hi'
  ) {
    let src = result;
    html = `<img src=${src} />`;
    break out;
  }
  html = 'idk bro';
  break out;
}
```

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

### Configure Webpack with Pattycake

Source: https://github.com/aidenybai/pattycake/blob/main/README.md

Adds pattycake's webpack plugin to your webpack configuration. This enables pattycake to optimize your webpack build process.

```javascript
const pattycake = require('pattycake');

module.exports = {
  plugins: [pattycake.webpack()],
};
```

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

### Webpack Plugin Integration for Pattycake

Source: https://context7.com/aidenybai/pattycake/llms.txt

Integrates Pattycake into Webpack-based projects, including Create React App configurations, by adding it to the Webpack plugins list. Requires the 'pattycake' package.

```javascript
const pattycake = require('pattycake');

module.exports = {
  plugins: [pattycake.webpack()],
};

// For Create React App (craco.config.js)
const pattycake = require('pattycake');

module.exports = {
  webpack: {
    plugins: { add: [pattycake.webpack()] },
  },
};
```

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

### Type-based Pattern Matching in TypeScript with ts-pattern

Source: https://context7.com/aidenybai/pattycake/llms.txt

Demonstrates how to use ts-pattern for type-based pattern matching, allowing different actions based on the structure and types of input objects. It shows the input TypeScript code and the compiled JavaScript output.

```typescript
// Input: Type-based pattern matching
import { match, P } from 'ts-pattern';

type Config =
  | { enabled: boolean; port: number }
  | { enabled: boolean; path: string };

function validateConfig(config: unknown) {
  return match(config)
    .with({ enabled: P.boolean, port: P.number }, (c) => `Valid TCP config: ${c.port}`)
    .with({ enabled: P.boolean, path: P.string }, (c) => `Valid Unix socket: ${c.path}`)
    .with(P._, () => 'Invalid configuration')
    .otherwise(() => 'Unknown');
}

// Output: compiled code
function validateConfig(config) {
  let __patsy_temp_0;
  __patsy_temp_1: {
    if (
      typeof config?.enabled === 'boolean' &&
      typeof config?.port === 'number'
    ) {
      let c = config;
      __patsy_temp_0 = `Valid TCP config: ${c.port}`;
      break __patsy_temp_1;
    }
    if (
      typeof config?.enabled === 'boolean' &&
      typeof config?.path === 'string'
    ) {
      let c = config;
      __patsy_temp_0 = `Valid Unix socket: ${c.path}`;
      break __patsy_temp_1;
    }
    __patsy_temp_0 = 'Invalid configuration';
    break __patsy_temp_1;
  }
  return __patsy_temp_0;
}
```

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

### Vite Plugin Integration for Pattycake

Source: https://context7.com/aidenybai/pattycake/llms.txt

Configures Pattycake as a Vite plugin to automatically transform pattern matching expressions during the build process. This requires the 'pattycake' package.

```javascript
import { defineConfig } from 'vite';
import pattycake from 'pattycake';

export default defineConfig({
  plugins: [pattycake.vite()],
});
```

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

### Next.js Integration for Pattycake

Source: https://context7.com/aidenybai/pattycake/llms.txt

Extends the Next.js webpack configuration with the Pattycake compiler plugin. This allows Pattycake to optimize pattern matching within a Next.js project. Requires the 'pattycake' package.

```javascript
const pattycake = require('pattycake');

module.exports = pattycake.next({
  // Your existing Next.js config options
  reactStrictMode: true,
  swcMinify: true,
});
```

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

### Object and Literal Patterns Transformation (TypeScript to JavaScript)

Source: https://context7.com/aidenybai/pattycake/llms.txt

Demonstrates the transformation of `ts-pattern` code using object and literal patterns into optimized JavaScript if-statement chains. This showcases Pattycake's core functionality for discriminated union matching.

```typescript
// Input: ts-pattern code
import { match } from 'ts-pattern';

type Data =
  | { type: 'text'; content: string }
  | { type: 'img'; src: string };

type Result =
  | { type: 'ok'; data: Data }
  | { type: 'error'; error: { foo: number[] } };

const result: Result = { type: 'ok', data: { type: 'text', content: 'Hello' } };

const html = match(result)
  .with({ type: 'error', error: { foo: [1, 2] } }, () => '<p>Error occurred</p>')
  .with({ type: 'ok', data: { type: 'text' } }, () => '<p>Text content</p>')
  .with({ type: 'ok', data: { type: 'img', src: 'hi' } }, (src) => `<img src=${src} />`)
  .otherwise(() => 'Unknown');

```

```javascript
// Output: compiled code
let html;
__patsy_temp_0: {
  if (
    result?.type === 'error' &&
    Array.isArray(result?.error?.foo) &&
    result?.error?.foo?.length >= 2 &&
    result?.error?.foo[0] === 1 &&
    result?.error?.foo[1] === 2
  ) {
    html = '<p>Error occurred</p>';
    break __patsy_temp_0;
  }
  if (result?.type === 'ok' && result?.data?.type === 'text') {
    html = '<p>Text content</p>';
    break __patsy_temp_0;
  }
  if (
    result?.type === 'ok' &&
    result?.data?.type === 'img' &&
    result?.data?.src === 'hi'
  ) {
    let src = result;
    html = `<img src=${src} />`;
    break __patsy_temp_0;
  }
  html = 'Unknown';
  break __patsy_temp_0;
}
```

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

### Pattern Selection Transformation (TypeScript to JavaScript)

Source: https://context7.com/aidenybai/pattycake/llms.txt

Illustrates how Pattycake compiles `ts-pattern` code that uses `P.select()` for anonymous and named selections into optimized JavaScript. This captures specific values from matched patterns.

```typescript
// Input: Pattern matching with selections
import { match, P } from 'ts-pattern';

type Message =
  | { type: 'text'; content: string; userId: number }
  | { type: 'image'; url: string; userId: number };

const message: Message = { type: 'text', content: 'Hello', userId: 42 };

// Anonymous selection - captures single value
const content = match(message)
  .with({ type: 'text', content: P.select() }, (selected) => selected)
  .otherwise(() => '');

// Named selection - captures multiple values as object
const info = match(message)
  .with(
    { type: 'text', content: P.select('text'), userId: P.select('user') },
    ({ text, user }) => `User ${user}: ${text}`
  )
  .otherwise(() => '');

```

```javascript
// Output: compiled code for named selection
let info;
__patsy_temp_0: {
  if (message?.type === 'text') {
    let sel = {
      ['text']: message?.content,
      ['user']: message?.userId,
    };
    info = `User ${sel.user}: ${sel.text}`;
    break __patsy_temp_0;
  }
  info = '';
  break __patsy_temp_0;
}
```

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

### Pattycake Webpack Plugin Configuration for Error Muting

Source: https://context7.com/aidenybai/pattycake/llms.txt

Demonstrates configuring the Pattycake Webpack plugin to mute compilation errors using the `mute` option. This setting prevents errors from being logged to the console when patterns fall back to runtime ts-pattern.

```javascript
// Mute compilation errors for unsupported patterns
pattycake.webpack({
  mute: true,
  disableOptionalChaining: false
})

// When Pattycake cannot optimize a pattern, it silently falls back
// to runtime ts-pattern instead of logging errors to console

```

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

### HIR Type Definitions for Pattern Matching (TypeScript)

Source: https://github.com/aidenybai/pattycake/blob/main/ARCHITECTURE.md

Defines the TypeScript types for representing a pattern match in the High-Level Intermediate Representation (HIR). These types, PatternMatch and Branch, structure the data for easier code generation, abstracting away the complexity of Babel's AST.

```typescript
export type PatternMatch = {
  // the expression being matched uppon
  expr: Expr;
  branches: Array<Branch>;
  otherwise: Expr | undefined;
  exhaustive: boolean;
};

export type Branch = {
  patterns: Array<Pattern>;
  guard: FnExpr | undefined;
  then: b.Expression;
};
```

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

### Exhaustive Pattern Matching in TypeScript with ts-pattern

Source: https://context7.com/aidenybai/pattycake/llms.txt

Illustrates how to enforce compile-time exhaustiveness checking using `exhaustive()` in ts-pattern. It covers cases where all patterns are matched and where a fallback error is generated for unmatched values.

```typescript
// Input: Exhaustive matching without otherwise clause
import { match } from 'ts-pattern';

type Status = 'pending' | 'success' | 'error';

function getStatusMessage(status: Status) {
  return match(status)
    .with('pending', () => 'Processing...')
    .with('success', () => 'Completed')
    .with('error', () => 'Failed')
    .exhaustive();
}

// Output: compiled with runtime exhaustiveness check
function getStatusMessage(status) {
  let __patsy_temp_0;
  __patsy_temp_1: {
    if (status === 'pending') {
      __patsy_temp_0 = 'Processing...';
      break __patsy_temp_1;
    }
    if (status === 'success') {
      __patsy_temp_0 = 'Completed';
      break __patsy_temp_1;
    }
    if (status === 'error') {
      __patsy_temp_0 = 'Failed';
      break __patsy_temp_1;
    }
    // No error thrown due to exhaustive patterns
  }
  return __patsy_temp_0;
}

// Without exhaustive(), generates fallback error
function getNonExhaustive(status: unknown) {
  return match(status)
    .with('pending', () => 'Processing...');
}

// Output: includes runtime error for unmatched values
let __patsy_temp_0;
__patsy_temp_1: {
  if (status === 'pending') {
    __patsy_temp_0 = 'Processing...';
    break __patsy_temp_1;
  }
  let __patsy__displayedValue;
  try {
    __patsy__displayedValue = JSON.stringify(status);
  } catch (e) {
    __patsy__displayedValue = status;
  }
  throw new Error(
    `Pattern matching error: no pattern matches value ${__patsy__displayedValue}`
  );
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.