# Build Scripts

## Scripts

### `copy-static.js`
Copies static files to `dist/` directory

- Copies `css/` directory to `dist/css/`
- Copies `favicon.svg` to `dist/favicon.svg`
- Copies `js/` directory structure to `dist/js/`
- Generated files will be overwritten by subsequent build steps

```bash
npm run build:copy
```

### `build-transforms.js`
Bundles all transformers from `src/transformers/` into `dist/js/bundles/transforms-bundle.js`

- Automatically creates the `dist/js/bundles/` directory if it doesn't exist
- Discovers all transformers from category directories
- Generates a single bundled file for browser use

```bash
npm run build:transforms
```

### `build-emoji-data.js`
Fetches Unicode emoji data and generates `dist/js/data/emojiData.js`

- Automatically creates the `dist/js/data/` directory if it doesn't exist
- Uses cached data if available (7-day cache)
- Merges keywords from `src/emojiWordMap.js`

```bash
npm run build:emoji
```

### `inject-tool-scripts.js`
Auto-discovers tools in `js/tools/` and:
- Generates script tags in `index.template.html`
- Generates auto-registration code in `js/core/toolRegistry.js`

```bash
npm run build:tools
```

### `inject-tool-templates.js`
Injects tool templates from `templates/` into `dist/index.html`

- Reads from `index.template.html` (source file)
- Outputs to `dist/index.html` (production file)

```bash
npm run build:templates
```

### `build-index.js`
Generates transformer index

```bash
npm run build:index
```

## Build Pipeline

```bash
npm run build  # Runs all scripts in order:
# 1. build:copy      - Copy static files to dist/
# 2. build:index     - Generate transformer index
# 3. build:transforms - Bundle transformers to dist/js/bundles/
# 4. build:emoji     - Generate emoji data to dist/js/data/
# 5. build:tools     - Inject tool scripts
# 6. build:templates - Inject templates to dist/index.html
```

## Output Structure

All production files are output to the `dist/` directory:

```
dist/
├── index.html                    # Generated from index.template.html
├── favicon.svg                   # Copied from root
├── css/                          # Copied from root
│   ├── style.css
│   └── notification.css
└── js/                           # Copied from root, then generated files added
    ├── bundles/
    │   └── transforms-bundle.js  # Generated
    └── data/
        └── emojiData.js          # Generated
```

## Development Workflow

- **Edit transformers** → `npm run build:transforms`
- **Add new tool** → `npm run build:tools`
- **Edit templates** → `npm run build:templates`
- **Full rebuild** → `npm run build` (outputs to `dist/` folder)

## Production Deployment

The `dist/` folder contains all files needed for production deployment. This folder is:
- Generated by the build process
- Ignored by git (see `.gitignore`)
- Uploaded to GitHub Pages during CI/CD