P4RS3LT0NGV3/build

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

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

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

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

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)

npm run build:templates

build-index.js

Generates transformer index

npm run build:index

Build Pipeline

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