@rocketspark/domain-checker/CLAUDE.md

Embeddable Domain Checker for Rocketspark

# CLAUDE.md

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

## Project Overview

Embeddable domain availability checker widget for Rocketspark. Published as `@rocketspark/domain-checker` on npm and served via jsDelivr CDN. Built as a UMD library that auto-initializes on `.rs-domain-check` DOM elements.

## Commands

| Command | Purpose |
|---------|---------|
| `npm start` | Dev server on port 6000 |
| `npm run build` | Production webpack build + TypeScript declarations |
| `npm run build:watch` | Watch mode for development |
| `npm run test` | Run Jest tests |
| `npm run coverage` | Generate test coverage report |

## Architecture

**Entry point:** `src/lib/index.ts` — `DomainChecker` class, exported as UMD global.

Component hierarchy (all vanilla TypeScript, no framework):
```
DomainChecker
├── DomainSearch          — Input validation, domain formatting, triggers API
├── PopupContainer        — Modal with search results
│   ├── SearchHeading
│   ├── SearchResultCaption — Price display
│   ├── SearchAlternatives
│   │   └── SearchAlternativeRow
│   └── Cart              — Shopping cart state/UI
```

**Key helpers in `src/lib/Helpers/`:**
- `Fetch.ts` — API calls to CMS backend with reCAPTCHA v3 tokens
- `templates.ts` — All HTML generation (~436 lines of DOM creation)
- `defaults.ts` — Default config, CSS class name mappings (BEM notation)
- `localeTld.ts` — Locale (NZ/AU/UK/US) to TLD mapping

**Data flow:** User input → domain validation/formatting → reCAPTCHA token → POST to CMS API → render results in popup → add to cart or search alternatives.

## Tech Stack

- **Language:** TypeScript 4.6, transpiled via Babel
- **Bundler:** Webpack 5 (UMD output)
- **CSS:** PostCSS with px-to-rem conversion
- **UI Components:** `@rocketspark/flint-ui` web components (rs-button, rs-input, rs-icon, etc.)
- **Testing:** Jest 28 with jsdom environment
- **Linting:** ESLint with TypeScript rules (explicit return types, member accessibility, single quotes, semicolons)

## Locale System

The widget is locale-aware via `data-locale` attribute on the container element. Each locale maps to a TLD (.co.nz, .com.au, .co.uk, .com), currency (NZD/AUD/GBP/USD), and tax label (GST/VAT).

## CI/CD

- **PR/push:** Runs `npm install` + `npm run test` (and `npm run build` on PRs)
- **Release:** On GitHub release publish → tests → auto-bumps patch version → builds → commits build artifacts → publishes to npm
- Post-publish: manually clear jsDelivr cache and update rocketspark.com references