|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +SvelteESP32 is a TypeScript CLI tool that converts frontend JS applications (Svelte, React, Angular, Vue) into C++ header files that can be embedded in ESP32/ESP8266 microcontroller web servers. The tool processes web assets and generates optimized C++ code with optional gzip compression and ETag support for different web server engines. |
| 8 | + |
| 9 | +## Key Commands |
| 10 | + |
| 11 | +### Development Commands |
| 12 | + |
| 13 | +```bash |
| 14 | +# Build the project |
| 15 | +npm run build |
| 16 | + |
| 17 | +# Clean build artifacts |
| 18 | +npm run clean |
| 19 | + |
| 20 | +# Development with live reload (async engine) |
| 21 | +npm run dev:async |
| 22 | + |
| 23 | +# Development with live reload (psychic engine) |
| 24 | +npm run dev:psychic |
| 25 | + |
| 26 | +# Development with live reload (psychic2 engine) |
| 27 | +npm run dev:psychic2 |
| 28 | + |
| 29 | +# Run comprehensive tests (requires PlatformIO) |
| 30 | +npm run test:all |
| 31 | +``` |
| 32 | + |
| 33 | +### Code Quality Commands |
| 34 | + |
| 35 | +```bash |
| 36 | +# Check formatting |
| 37 | +npm run format:check |
| 38 | + |
| 39 | +# Fix formatting |
| 40 | +npm run format:fix |
| 41 | + |
| 42 | +# Check linting |
| 43 | +npm run lint:check |
| 44 | + |
| 45 | +# Fix linting issues |
| 46 | +npm run lint:fix |
| 47 | + |
| 48 | +# Fix all formatting and linting issues |
| 49 | +npm run fix |
| 50 | +``` |
| 51 | + |
| 52 | +### CLI Usage |
| 53 | + |
| 54 | +```bash |
| 55 | +# Generate header for PsychicHttpServer |
| 56 | +npx svelteesp32 -e psychic -s ./dist -o ./output.h --etag=true --gzip=true |
| 57 | + |
| 58 | +# Generate header for ESPAsyncWebServer |
| 59 | +npx svelteesp32 -e async -s ./dist -o ./output.h --etag=true --gzip=true |
| 60 | + |
| 61 | +# Generate header for ESP-IDF |
| 62 | +npx svelteesp32 -e espidf -s ./dist -o ./output.h --etag=true --gzip=true |
| 63 | +``` |
| 64 | + |
| 65 | +## Architecture |
| 66 | + |
| 67 | +### Core Components |
| 68 | + |
| 69 | +- **`src/index.ts`**: Main entry point that orchestrates the file processing pipeline |
| 70 | +- **`src/commandLine.ts`**: CLI argument parsing and validation using `ts-command-line-args` |
| 71 | +- **`src/file.ts`**: File system operations for reading web assets |
| 72 | +- **`src/cppCode.ts`**: C++ code generation engine with Handlebars templates for PsychicHttp and ESPAsyncWebServer |
| 73 | +- **`src/cppCodeEspIdf.ts`**: Specialized C++ code generation for native ESP-IDF |
| 74 | +- **`src/consoleColor.ts`**: Colored console output utilities |
| 75 | + |
| 76 | +### Processing Pipeline |
| 77 | + |
| 78 | +1. **File Collection**: Scans source directory for web assets |
| 79 | +2. **Content Analysis**: Determines MIME types and calculates MD5 hashes |
| 80 | +3. **Compression**: Applies gzip compression when beneficial (>1024 bytes, >15% reduction) |
| 81 | +4. **Code Generation**: Uses Handlebars templates to generate C++ header files |
| 82 | +5. **Output**: Writes optimized header with embedded binary data and web server handlers |
| 83 | + |
| 84 | +### Supported Engines |
| 85 | + |
| 86 | +- **psychic**: PsychicHttpServer (ESP32 only, fastest performance) |
| 87 | +- **psychic2**: PsychicHttpServer V2 |
| 88 | +- **async**: ESPAsyncWebServer (ESP32/ESP8266 compatible) |
| 89 | +- **espidf**: Native ESP-IDF web server |
| 90 | + |
| 91 | +### Key Features |
| 92 | + |
| 93 | +- **Automatic Gzip Compression**: Compresses assets when size reduction >15% and >1024 bytes |
| 94 | +- **ETag Support**: HTTP cache validation for reduced network traffic |
| 95 | +- **Cache Control**: Configurable browser caching with `--cachetime` |
| 96 | +- **Multi-Engine Support**: Generate code for different ESP web server libraries |
| 97 | +- **File Type Analysis**: Groups files by extension with count statistics |
| 98 | +- **Memory Optimization**: Binary data stored as const arrays in program memory |
| 99 | + |
| 100 | +## Development Environment |
| 101 | + |
| 102 | +### Build System |
| 103 | + |
| 104 | +- **TypeScript**: Compiled to CommonJS in `dist/` directory |
| 105 | +- **Target**: ES2020 with strict type checking |
| 106 | +- **Incremental**: Disabled to ensure clean builds |
| 107 | + |
| 108 | +### Code Quality |
| 109 | + |
| 110 | +- **ESLint**: Comprehensive rules including TypeScript, Prettier, Unicorn plugins |
| 111 | +- **Prettier**: 120 character line width, single quotes, no trailing commas |
| 112 | +- **Import Sorting**: Automatic import organization with `simple-import-sort` |
| 113 | + |
| 114 | +### Demo Projects |
| 115 | + |
| 116 | +- **`demo/svelte/`**: Example Svelte application for testing |
| 117 | +- **`demo/esp32/`**: PlatformIO project demonstrating Arduino framework usage |
| 118 | +- **`demo/esp32idf/`**: ESP-IDF native project example |
| 119 | + |
| 120 | +The `package.script` file contains comprehensive test scenarios that generate all combinations of ETag/gzip settings for validation. |
| 121 | + |
| 122 | +## Important Notes |
| 123 | + |
| 124 | +- The tool processes entire directories recursively and embeds all files as binary data |
| 125 | +- Generated header files can be large but compile efficiently |
| 126 | +- Memory usage is optimized through const array placement in program memory |
| 127 | +- The CLI is designed for CI/CD integration with npm packaging workflows |
0 commit comments