# Phase 5: `<template>` lazy-mount (stretch goal — DEFERRED)

> **Decision (2026-05-22):** Phase 5 отложен как post-merge follow-up. Phases 1-4 уже дали lab.html 5180→3499L (-32%) и решили основные задачи (modular CSS, modular glue JS, token purification, deep-link routing). Phase 5 требует рефакторинга 38 engine классов (нужен `destroy()` для cleanup), memory-leak verification, и риск сломать любую из 38 симуляций. Лучше merge'нуть 4 чистых фазы и оценить в проде.



**Status:** 🟡 Deferred (post-merge) — see decision log below
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective

Уменьшить initial DOM size: вместо 39 `<div id="sim-X">` с `display:none` — обернуть каждую в `<template id="tpl-sim-X">`, активация sim → clone template + mount into placeholder. Initial page load становится легче (нет render'а скрытых canvas-ов).

**ВНИМАНИЕ:** Это stretch goal — может быть пропущен если Phase 1-4 успешны и не хочется добавлять риск.

## Tasks

- [ ] Identify все `<div id="sim-X" class="sim-proj-wrap" style="display:none">` блоки (~38 штук, скрытых; 1 default visible)
- [ ] Обернуть каждый в `<template id="tpl-sim-X">...</template>`
- [ ] Создать mount point `<div id="sim-mount"></div>` (или использовать existing #sim-grid)
- [ ] В lab-glue.js / lab-router.js:
  - `activateSim(name)` → clone `<template id="tpl-sim-X">` → replace content of `#sim-mount`
  - Initialize sim engine (CollisionSim, ProjectileSim, etc.) **после** mount'а
  - Cleanup previous sim engine (stop animations, remove listeners) перед switching
- [ ] Test: переключить 5 sims подряд, no memory leak, animations stop когда sim de-activated

## Files to Modify

- `frontend/lab.html` — wrap 38+ `<div id="sim-X">` в `<template>` (большое change but mechanical)
- `frontend/js/labs/lab-glue.js` — add template-clone activation logic

## Acceptance Criteria

- Initial DOM size уменьшен (verify через DevTools — count nodes)
- Все 39 sims активируются и работают
- No memory leak при переключении (verify через DevTools Performance / Memory tab — heap не растёт неограниченно)
- Sim engines properly cleanup previous instance

## Risks (HIGH)

- **Sim engines binds to specific canvas IDs by JS** (e.g. `document.getElementById('canvas-proj')`). После template clone — `getElementById` может вернуть element до момента когда engine ищет его. Time it carefully.
- **Animations не stop'аются** автоматически при template removal. Engine классы должны иметь `destroy()` метод — проверить.
- **Initial sim** (тот что default visible) — изначально mount'ed, не template. Обработать особо.

## Notes

Если в течение фазы выясняется что engine классы плохо cleanup'ятся (нет `destroy()`, requestAnimationFrame продолжает работать), MARK phase as 🟡 partial и оставить как known limitation. Не нужно рефакторить 30 engine классов.

## Mitigation: opt-out

Если эта фаза создаёт реальный риск — **пропустить**. lab.html без Phase 5 будет ~4000L (после Phase 1 убрали 856L style + 825L glue), что уже сильно лучше 5180L. Phase 5 опционален.

## Review Checklist

- [ ] All 39 sims активируются успешно
- [ ] No memory leak при переключении (Heap snapshot до и после — diff не растёт)
- [ ] Browser DevTools showsменьше nodes на initial load
- [ ] No console errors

## Handoff to Next Phase

<!-- Финальная фаза. Implementer записывает: что осталось как known-limitation, какие engine классы не имеют destroy(). -->