# Milestone 1.3 — Widget Build Tooling Learning Guide

This directory documents the implementation of **Milestone 1, Step 1.3: Widget Build Tooling**.

---

## Overview

In Milestone 1.3, we established the Vanilla JavaScript build pipeline for the embeddable chatbot widget using `esbuild`.

---

## Documents in this folder

- **[01-widget-build-tooling.md](file:///c:/Users/alokc/chatbot/backend/docs/learning/m1-3-widget-build-tooling/01-widget-build-tooling.md)** — Core concepts: Vanilla JS, Node.js, `package.json`, `devDependencies`, bundling, and why `esbuild` was chosen.
- **[02-esbuild-and-iife.md](file:///c:/Users/alokc/chatbot/backend/docs/learning/m1-3-widget-build-tooling/02-esbuild-and-iife.md)** — Detailed analysis of `esbuild` CLI flags (`--bundle`, `--format=iife`, `--outfile`) and why IIFE encapsulation is vital for embeddable scripts.
- **[03-build-flow.md](file:///c:/Users/alokc/chatbot/backend/docs/learning/m1-3-widget-build-tooling/03-build-flow.md)** — End-to-end pipeline from source authoring in `src/widget.js` to browser execution in `demo.html`.
- **[04-m1-3-revision.md](file:///c:/Users/alokc/chatbot/backend/docs/learning/m1-3-widget-build-tooling/04-m1-3-revision.md)** — Summary cheat sheet, commands reference, and 10 interview-style Q&As.

---

## How to Run the Widget Build & Test Harness

1. **Navigate to the `widget` folder:**
   ```bash
   cd widget
   ```

2. **Install dependencies:**
   ```bash
   npm install
   ```

3. **Compile the bundle:**
   ```bash
   npm run build
   ```
   *Generates `widget/dist/widget.js`.*

4. **Verify in Browser:**
   Open `widget/demo.html` in your browser, press `F12` $\rightarrow$ `Console`, and verify log message:
   `Universal Chatbot Widget loaded`.

---

## What You Should Understand Before Moving to M1.4

1. **IIFE Execution:** The bundled script `dist/widget.js` runs automatically upon loading without requiring any manual initialization call from the host site.
2. **Build Isolation:** Frontend build tooling lives inside `widget/` independently of the FastAPI backend in `backend/`.
3. **M1.4 Scope:** In Milestone 1.4, we will construct the Shadow DOM container inside `src/widget.js` to ensure total CSS and DOM style isolation.