### Start Development Server

Source: https://github.com/garage44/expressio/blob/main/README.md

Starts the development server for the main Expressio application package.

```bash
cd packages/expressio
bun run dev
```

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

### Install Dependencies

Source: https://github.com/garage44/expressio/blob/main/README.md

Installs all project dependencies using the Bun package manager.

```bash
bun install
```

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

### Start Expressio Application

Source: https://github.com/garage44/expressio/blob/main/README.md

Command to start the Expressio application. Login credentials can be customized in the `~/.expressiorc` file.

```bash
bunx @garage44/expressio start
```

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

### Start Development Server (No Security)

Source: https://github.com/garage44/expressio/blob/main/README.md

Starts the development server for the Expressio application, bypassing memory session authorization checks for reloads.

```bash
GARAGE44_NO_SECURITY=1 bun run dev
```

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

### Start Expressio Service with Bunchy

Source: https://github.com/garage44/expressio/blob/main/packages/bunchy/README.md

This snippet demonstrates how to integrate Bunchy into an Elysia.js application using yargs for command-line argument parsing. It configures Bunchy with paths and ignore patterns, then starts the Elysia server, enabling live reloading in development environments.

```typescript
import { bunchyService, bunchyArgs } from '@garage44/bunchy';
import path from 'path';
import yargs from 'yargs';
import { hideBin } from 'yargs/helpers';
import { Elysia } from 'elysia';

// Assuming loadWorkspace and translator are defined elsewhere
// async function loadWorkspace(config, translator) { /* ... */ }
// const translator = {};
// const config = {};

const bunchyConfig = {
    common: [
        path.resolve(path.join(import.meta.dir, '../'))
    ],
    reload_ignore: ['/tasks/code'],
    workspace: import.meta.dir
};

yargs(hideBin(process.argv))
    .command('start', 'Start the Expressio service', () => {}, async(argv) => {
        // await loadWorkspace(config, translator);
        const app = new Elysia();

        if (process.env.BUN_ENV === 'development') {
            await bunchyService(app, bunchyConfig);
        }

        app.listen({
            hostname: argv.host,
            port: argv.port
        });
    })
    .option('host', {
        alias: 'h',
        type: 'string',
        default: '0.0.0.0',
        description: 'Host to listen on'
    })
    .option('port', {
        alias: 'p',
        type: 'number',
        default: 3000,
        description: 'Port to listen on'
    })
    .help()
    .argv;
```

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

### Bun.serve Core Server Setup

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-007-bun-serve-migration.md

Demonstrates the proposed setup for the core server using Bun.serve, specifying the port, hostname, and fetch/websocket handlers. This replaces the traditional Node.js HTTP server and Express.

```typescript
const server = Bun.serve({
    port: argv.port,
    hostname: argv.host,
    fetch: handleRequest,
    websocket: handleWebSocket,
})
```

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

### Current Express Server Setup

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-007-bun-serve-migration.md

Illustrates the existing server setup using Express.js for HTTP handling and the 'ws' library for WebSocket connections within the Expressio project.

```typescript
import express from 'express';
import { Server } from 'ws';

// Assuming 'app' is an Express application instance
const app = express();

// Assuming 'options.server' is an existing HTTP server instance (e.g., from http.createServer)
// and 'argv.port' and 'argv.host' are configuration values.
// This example snippet is illustrative based on the provided text.

// Example of creating a WebSocket server with 'ws' library
// const wss = new WebSocketServer({
//     path: '/ws',
//     server: options.server,
// });

// Example of starting the Express server
// server.listen(argv.port, argv.host);
```

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

### Strategic Document Generation Template

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-009-llm-optimized-project-structure.md

A template for generating strategic documents based on project context, architecture, and market conditions. It guides the LLM to include analysis, recommendations, metrics, and links to technical decisions.

```text
Based on the current project context, technical architecture, and market conditions,
generate a strategic document for [specific area] that includes:
1. Current state analysis
2. Future opportunities and challenges
3. Recommended actions and priorities
4. Success metrics and evaluation criteria
5. Links to relevant technical decisions (ADRs)

Ensure the document is structured for both human and AI consumption with clear
reasoning chains and actionable insights.
```

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

### Install Enola Package

Source: https://github.com/garage44/expressio/blob/main/packages/enola/README.md

Installs the Enola package using the pnpm package manager. This package provides a unified interface for translation services.

```bash
pnpm add @garage44/enola
```

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

### OxLint Configuration File

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-010-oxlint-eslint-replacement.md

Represents the root configuration file for OxLint, where comprehensive rule setups and configurations are defined. This file dictates the linter's behavior and enabled rules.

```json
{
  "rules": {
    "complexity": "warn",
    "perf": "error",
    "style": "off"
  },
  "linter": {
    "ignore": [
      "node_modules",
      "dist"
    ]
  }
}
```

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

### Clone Expressio Repository

Source: https://github.com/garage44/expressio/blob/main/README.md

Clones the Expressio project repository from GitHub to your local machine.

```bash
git clone git@github.com:garage44/expressio.git
cd expressio
```

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

### Bun Development Workflow Commands

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-003-bun-runtime-adoption.md

Commands for running the development server with hot reload and building the project for production using Bun.

```shell
bun run dev
# Starts the development server with hot reload.

bun run build
# Creates production-ready builds.

bun run --watch dev
# Alternative for development with watch mode.
```

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

### Package.json Module Configuration

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-003-bun-runtime-adoption.md

Configuration within package.json to enable ES modules and specify module resolution strategy for Bun.

```json
{
  "type": "module",
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}
```

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

### Strategic Analysis Template

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-009-llm-optimized-project-structure.md

A template for analyzing specific questions within the project context, considering market position, user needs, technical architecture, community relationships, and success metrics. It emphasizes clear reasoning and prioritization.

```text
Given the project context in docs/strategy/, analyze [specific question]
considering:
1. Current market position and competitive landscape
2. User needs and feedback patterns
3. Technical architecture constraints and opportunities
4. Community and ecosystem relationships
5. Success metrics and evaluation criteria

Provide recommendations with clear reasoning chains and implementation priorities.
```

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

### Feature Development Template

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-009-llm-optimized-project-structure.md

A template for evaluating feature proposals based on strategic alignment, market fit, technical feasibility, community value, and implementation complexity. It ensures features are assessed against project goals.

```text
Based on the strategic context and user personas, evaluate this feature proposal:
- Alignment with vision and goals
- Market fit and competitive differentiation
- Technical feasibility and architectural impact
- Community value and engagement potential
- Implementation complexity and resource requirements
```

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

### Isomorphic Logger Usage

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-008-isomorphic-logger.md

Demonstrates how to instantiate and use the isomorphic logger in both backend (Node/Bun) and frontend (browser) environments. The logger automatically adapts to the runtime context, providing colored output and file logging on the server, while remaining safe for browser execution.

```TypeScript
import { Logger } from '@garage44/common/lib/logger.ts'

// Backend (Bun/Node) Example:
// const logger = new Logger({ level: 'debug', file: './mylog.log' })
// logger.info('Hello from backend!')

// Frontend (Browser/Preact) Example:
const logger = new Logger({ level: 'debug' })
logger.info('Hello from browser!')
```

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

### TypeScript Module Resolution for Bundler

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-003-bun-runtime-adoption.md

TypeScript configuration to align with modern bundler module resolution strategies, enhancing compatibility with tools like Bun.

```typescript
{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}
```

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

### Bun Native WebSocket Server Handling

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-007-bun-serve-migration.md

Illustrates the implementation of a WebSocket server using Bun's native WebSocket API. It shows how to define the handler for incoming WebSocket connections and process messages.

```typescript
function handleWebSocket(ws: ServerWebSocket) {
    // Native Bun WebSocket handling
    ws.onmessage = async (message) => {
        // Handle WebSocket messages
    }
}
```

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

### Bun Middleware System Composition

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-007-bun-serve-migration.md

Presents a proposed middleware system for Bun.serve, demonstrating how to compose multiple middleware functions (e.g., session, auth, logging) using a utility like 'compose'. This replaces Express-style middleware chaining.

```typescript
const middleware = compose([
    sessionMiddleware,
    authMiddleware,
    loggingMiddleware,
    // ... other middleware
])
```

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

### Bun.serve WebSocket Upgrade Handling

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-007-bun-serve-migration.md

Demonstrates the correct pattern for handling WebSocket upgrades with Bun.serve, requiring the fetch handler to return undefined on success and using server.upgrade().

```typescript
if (url.pathname === '/ws') {
    const success = server.upgrade(request, { data: { endpoint: '/ws' } });
    if (success) return; // Return undefined, not a Response
    return new Response("WebSocket upgrade failed", { status: 400 });
}
```

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

### OxLint Command Line Usage

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-010-oxlint-eslint-replacement.md

Demonstrates the primary command used to run OxLint across TypeScript and TypeScriptX files. This command is typically integrated into package scripts for linting workflows.

```bash
oxlint **/*.{ts,tsx}
```

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

### Bun.serve WebSocket Upgrade Handling

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-007-bun-serve-migration.md

Demonstrates the correct pattern for handling WebSocket upgrades within a Bun.serve fetch handler. Returning `undefined` signals that the request is being handled by a WebSocket upgrade.

```APIDOC
Bun.serve({
  fetch(req) {
    const url = new URL(req.url);
    if (url.pathname === '/ws') {
      if (req.headers.get('upgrade') === 'websocket') {
        // Return undefined to signal WebSocket upgrade
        return new Response(null, {
          webSocket: {
            open: (ws) => {
              console.log('WebSocket opened');
              ws.send('Hello from Bun!');
            },
            message: (ws, message) => {
              console.log(`Received message: ${message}`);
              ws.send(`Echo: ${message}`);
            },
            close: () => {
              console.log('WebSocket closed');
            },
            drain: () => {},
            error: (error) => {
              console.error('WebSocket error:', error);
            },
          },
        });
      }
      // Handle non-websocket HTTP requests to /ws if necessary
      return new Response('Upgrade to WebSocket');
    }
    // Handle other HTTP requests
    return new Response('Hello World!');
  },
});

// Recommendation: Always return `undefined` from fetch handler for WebSocket upgrades.
```

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

### Bun WebSocket Dual Endpoint Context

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-007-bun-serve-migration.md

Illustrates using endpoint context within upgrade data to differentiate between multiple WebSocket paths, such as `/ws` and `/bunchy`.

```APIDOC
Bun.serve({
  fetch(req) {
    const url = new URL(req.url);
    if (url.pathname === '/ws' || url.pathname === '/bunchy') {
      if (req.headers.get('upgrade') === 'websocket') {
        return new Response(null, {
          webSocket: {
            open: (ws) => {
              // Use endpoint context to identify the path
              const endpoint = url.pathname;
              console.log(`WebSocket opened on ${endpoint}`);
              ws.send(`Connected to ${endpoint}`);
            },
            // ... other WebSocket event handlers
          },
        });
      }
    }
    return new Response('Hello World!');
  },
});

// Recommendation: Use endpoint context in upgrade data for multiple WebSocket paths.
```

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

### Playwright Screenshot Scrollbar Configuration

Source: https://github.com/garage44/expressio/blob/main/docs/ale/patterns/effective-strategies.md

Configures Playwright browser launch arguments to hide scrollbars for screenshots, preferring browser-level settings over CSS injection for reliability. This pattern ensures consistent visual output by directly controlling browser behavior.

```APIDOC
PlaywrightBrowserLaunchArgs:
  --hide-scrollbars: Hides scrollbars in the browser viewport.

Usage:
  Configure browser launch arguments within Playwright tests to include `--hide-scrollbars`.
  Example:
  chromium.launch({ args: ['--hide-scrollbars'] })

Anti-pattern:
  Using CSS injection (e.g., `page.addStyleTag()` or `page.evaluate()`) to hide scrollbars is less reliable and not the recommended approach.
```

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

### Session Management Migration Strategy

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-007-bun-serve-migration.md

Addresses the need for custom session implementation when migrating from libraries like Express-session, which often rely on middleware patterns not directly transferable to Bun.serve.

```APIDOC
// Example of a custom session store concept (not full implementation):
class CustomSessionStore {
  constructor() {
    this.sessions = new Map();
  }

  createSession(userId) {
    const sessionId = crypto.randomUUID();
    this.sessions.set(sessionId, { userId, createdAt: Date.now() });
    return sessionId;
  }

  getSession(sessionId) {
    return this.sessions.get(sessionId);
  }

  destroySession(sessionId) {
    this.sessions.delete(sessionId);
  }
}

// In Bun.serve fetch handler:
// const sessionStore = new CustomSessionStore();
// const sessionId = req.headers.get('Cookie')?.split('=')[1]; // Simplified cookie parsing
// let session = sessionId ? sessionStore.getSession(sessionId) : null;
// if (!session) { ... create new session ... }

// Recommendation: Plan for custom session implementation when migrating from Express-session.
```

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

### OxLint Rule Categories and Plugins

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-010-oxlint-eslint-replacement.md

OxLint is configured with specific rule categories and plugins to optimize TypeScript and React development. This includes rules for correctness, performance, style, and accessibility, leveraging plugins for React, JSX accessibility, TypeScript, and modern JavaScript patterns.

```APIDOC
OxLint Configuration:

Rule Categories:
  - Correctness (176 rules): Error level - prevents broken code
  - Performance (10 rules): Warn level - optimizes React performance
  - Suspicious (33 rules): Warn level - catches likely mistakes
  - Pedantic (82 rules): Warn level - enforces strict patterns
  - Style (149 rules): Warn level - code consistency
  - Restriction (66 rules): Off - avoid language feature restrictions
  - Nursery (8 rules): Off - experimental rules disabled

Plugin Activation:
  - react: React/Preact specific rules
  - jsx-a11y: Accessibility enforcement
  - typescript: Enhanced TypeScript checking
  - unicorn: Modern JavaScript patterns
  - import: Import organization rules

Key Rules Examples:
  - Performance:
    - `perf/no-accumulating-spread`: Prevents performance-killing spread operations
    - `react-perf/jsx-no-new-*-as-prop`: Prevents re-render triggers
    - `unicorn/prefer-set-has`: Efficient Set operations
  - React/Preact Specific:
    - `react/exhaustive-deps`: Prevents useEffect dependency bugs
    - `react/jsx-key`: Ensures proper list rendering
    - `react/jsx-no-target-blank`: Security best practices
  - TypeScript Enhancement:
    - `typescript/consistent-type-imports`: Organizes imports
    - `typescript/prefer-as-const`: Better type inference
    - `typescript/no-explicit-any`: Encourages type safety
  - Accessibility:
    - `jsx-a11y/alt-text`: Image accessibility
    - `jsx-a11y/click-events-have-key-events`: Keyboard navigation
```

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

### API Serialization for Circular References

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-007-bun-serve-migration.md

Advises on implementing selective serialization to prevent issues like circular references, which can occur in complex object graphs during API responses.

```APIDOC
// Example of selective serialization using a replacer function:
function replacer(key, value) {
  if (key === 'circularReference') {
    return '[Circular]'; // Replace circular references
  }
  if (typeof value === 'bigint') {
    return value.toString() + 'n'; // Handle BigInt
  }
  return value;
}

// const data = { ... potentially circular object ... };
// const jsonString = JSON.stringify(data, replacer, 2);

// Recommendation: Implement selective serialization to avoid circular reference issues.
```

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

### Bun.serve Custom Session Middleware

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-007-bun-serve-migration.md

Provides a custom session middleware implementation for Bun.serve, managing in-memory sessions and cookie parsing compatible with the new runtime.

```typescript
const sessionMiddleware = (request: Request) => {
    const cookies = parseCookies(request)
    const sessionId = cookies['expressio-session']

    if (!sessionId || !sessions.has(sessionId)) {
        const newSessionId = crypto.randomUUID()
        const session = { userid: null }
        sessions.set(newSessionId, session)
        return { session, sessionId: newSessionId }
    }

    return { session: sessions.get(sessionId), sessionId }
}
```

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

### Client-side WebSocket Subscription for Workspace Data

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-006-rest-to-websocket-migration.md

Illustrates how a client subscribes to a 'workspaces' channel on a WebSocket connection to receive and process real-time data updates, updating the application state accordingly.

```typescript
ws.subscribe('workspaces', (data) => {
  // Update workspace state in real-time
  store.update('workspace', data)
})
```

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

### Bun.serve Error Handling Adaptation

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-007-bun-serve-migration.md

Highlights the difference in error handling patterns between Express middleware and Bun.serve's native error model. Bun.serve errors might require direct handling within the fetch or WebSocket handlers.

```APIDOC
// Express.js style error handling (example):
// app.use((err, req, res, next) => {
//   console.error(err.stack);
//   res.status(500).send('Something broke!');
// });

// Bun.serve error handling (example):
Bun.serve({
  fetch(req) {
    try {
      // ... request processing logic ...
      if (Math.random() < 0.1) {
        throw new Error('Simulated processing error');
      }
      return new Response('Success');
    } catch (error) {
      console.error('Error processing request:', error);
      // Direct error response
      return new Response('Internal Server Error', {
        status: 500,
      });
    }
  },
  error(error) {
    // Global error handler for unhandled exceptions
    console.error('Unhandled error in Bun.serve:', error);
    return new Response('Internal Server Error', {
      status: 500,
    });
  },
});

// Recommendation: Adapt error handling patterns for Bun.serve's different error model.
```

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

### OxLint Disable Comment Syntax

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-010-oxlint-eslint-replacement.md

Illustrates the new syntax for disabling OxLint rules, replacing the previous ESLint-specific comment format. This is a key change during migration.

```text
// oxlint-disable-next-line
```

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

### Define WebSocket Workspace Update Message Format

Source: https://github.com/garage44/expressio/blob/main/docs/architecture/ADR-006-rest-to-websocket-migration.md

Specifies the JSON structure for real-time workspace updates sent via WebSocket, including message type, data payload, and a timestamp for tracking.

```typescript
{
  type: 'workspace_update',
  data: WorkspaceData,
  timestamp: number
}
```

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