# 03 - End-to-End Build & Execution Flow

This document details the step-by-step pipeline from writing Vanilla JS source code to executing the bundle in a browser environment.

---

## 1. Complete M1.3 Build Pipeline Diagram

```text
  ┌───────────────────────────────────────────────────────────┐
  │ 1. Developer Writes Source Code                           │
  │    File: widget/src/widget.js                             │
  │    Content: Vanilla JS logic                              │
  └──────────────────────────┬────────────────────────────────┘
                             │
                             ▼
  ┌───────────────────────────────────────────────────────────┐
  │ 2. Build Trigger                                          │
  │    Command: npm run build                                 │
  └──────────────────────────┬────────────────────────────────┘
                             │
                             ▼
  ┌───────────────────────────────────────────────────────────┐
  │ 3. esbuild Bundler Execution                              │
  │    Reads: src/widget.js                                   │
  │    Bundles code & wraps in IIFE format                    │
  └──────────────────────────┬────────────────────────────────┘
                             │
                             ▼
  ┌───────────────────────────────────────────────────────────┐
  │ 4. Output Generation                                      │
  │    File generated: widget/dist/widget.js                  │
  └──────────────────────────┬────────────────────────────────┘
                             │
                             ▼
  ┌───────────────────────────────────────────────────────────┐
  │ 5. Integration into Test Harness                          │
  │    File: widget/demo.html                                 │
  │    Tag: <script src="./dist/widget.js"></script>           │
  └──────────────────────────┬────────────────────────────────┘
                             │
                             ▼
  ┌───────────────────────────────────────────────────────────┐
  │ 6. Browser Runtime Execution                              │
  │    - Browser downloads & executes dist/widget.js           │
  │    - IIFE fires immediately                               │
  │    - Console logs: "Universal Chatbot Widget loaded"      │
  └───────────────────────────────────────────────────────────┘
```

---

## 2. Step-by-Step Breakdown

### Step 1: Source Authoring (`src/widget.js`)
Developers write clean modular JavaScript inside the `src/` directory.

### Step 2: Running Build (`npm run build`)
Executing `npm run build` runs `esbuild` using devDependencies defined in `package.json`.

### Step 3: Fast Bundling with esbuild
esbuild parses source files, resolves internal imports, removes unused whitespace, and wraps the combined output in an IIFE wrapper.

### Step 4: Artifact Output (`dist/widget.js`)
The output bundle is generated inside `dist/widget.js`.

### Step 5: Test Harness (`demo.html`)
The local test harness webpage `demo.html` references `./dist/widget.js` using a standard HTML script tag.

### Step 6: Browser Execution
When `demo.html` is opened in a browser, the browser loads `dist/widget.js` and immediately executes the IIFE. Opening Developer Tools (`F12` $\rightarrow$ `Console`) displays:
`Universal Chatbot Widget loaded`.

---

## 3. Development Mode: Watch Command (`npm run watch`)

During active development, manually re-running `npm run build` after every code change is tedious.

Executing:
```bash
npm run watch
```
instructs `esbuild` to monitor files in `src/`. Whenever a source file is edited and saved, esbuild automatically re-compiles `dist/widget.js` in under 10ms!