Rendering Lifecycle

Understanding the rendering lifecycle is key to using CandidTemplate correctly. It explains how templates are processed from input to final HTML.

---

1. High-Level Flow

Load Layout
   ↓
Register Slots / Includes
   ↓
Execute Data Files
   ↓
Render Includes (pass 1)
   ↓
Render Slots (recursive)
   ↓
Render Includes (pass 2)
   ↓
Process Loops
   ↓
Apply Assignments
   ↓
Final HTML Output

---

2. Step-by-Step Breakdown

---

Step 1: Load Layout

$tpl->bind('layout.html');

Initial DOM is created.

---

Step 2: Register Slots & Includes

$tpl->slot('content','home');
$tpl->include('#header','header');

No rendering yet — only registration.

---

Step 3: Execute Data Files

$tpl->addDataFile('data.php');

Data files modify templates using $this.

---

Step 4: Render Includes (Pass 1)

Static includes are processed.

---

Step 5: Render Slots (Recursive)

Slots are replaced with child templates. Each child template goes through the same lifecycle.

---

Step 6: Render Includes (Pass 2)

Includes introduced by slots are resolved.

---

Step 7: Process Loops

$item = $tpl->addLoopItem('users');

DOM nodes are cloned.

---

Step 8: Apply Assignments

All pick(), content(), attribute() are applied.

---

Step 9: Final Output

echo $tpl->build()->render();

---

3. Visual Flow Diagram

Template
  ↓
DOM Context
  ↓
Slots → Includes → Loops → Assignments
  ↓
Rendered HTML

---

4. Important Rules

---

5. Common Issues Explained

• Include not working → happens before slot render
• Loop missing → no items added
• Vue broken → DOM modified before mount

---