Skip to content

CLAUDE.md

Latest commit

 

History

History
67 lines (44 loc) · 2.79 KB

CLAUDE.md

File metadata and controls

67 lines (44 loc) · 2.79 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is a template server library that provides an Express.js-based server for rendering HTML templates with dynamically selectable options via query parameters. The library injects a client-side UI (options panel) into rendered templates, allowing users to interactively modify query parameters and see updated results.

Core Architecture

Main Components

src/index.ts - Core library exports:

  • createTemplateServer(routes): Creates a new Express app with template server functionality
  • attachTemplateServer(app, routes): Attaches template server routes to an existing Express app
  • Routes type: Record of route names mapped to template render functions

src/start.ts - Development example server showing usage pattern

public/ - Client-side assets automatically injected into templates:

  • options.js: JavaScript that creates and manages the interactive options panel UI
  • options.css: Styling for the options panel

Request Flow

  1. User navigates to /:template route
  2. Server calls the template function from routes, passing req.query and an empty options object
  3. Template function populates the options object with available choices (e.g., options.locale = ['en', 'de', 'fr'])
  4. Template function returns HTML string
  5. Server injects options data and client-side scripts before closing </html> tag (see replaceClosingHtmlTagWithScript in src/index.ts:44)
  6. Client-side JavaScript renders options panel from injected data
  7. User clicks option buttons → query params update → page reloads with new parameters

Key Pattern: Options Object

Template functions receive an options object to populate:

(query: any, options: Record<string, string[]>) => {
    options.myOption = ['choice1', 'choice2', 'choice3'];
    return `<html>...</html>`;
}

Each key in options becomes a labeled button group in the UI. Values are the selectable choices.

Development Commands

Build: npm run build - Compiles TypeScript to dist/

Start dev server: npm start - Runs example server on http://localhost:3010 using ts-node

Test: No tests configured (returns error)

Version management:

  • npm version <patch|minor|major> - Pulls latest, bumps version, and pushes with tags

TypeScript Configuration

  • Target: ES2022, CommonJS modules
  • Output: dist/ with source maps and declaration files
  • Strict mode enabled with experimental decorators
  • Exports both JS (dist/index.js) and types (dist/index.d.ts)

Static Assets

The /public route serves files from public/ directory. The client-side JavaScript automatically creates a collapsible options panel in the bottom-right corner of rendered templates.