Maxim Dolgolyov
64 lines
4.2 KiB
Markdown
64 lines
4.2 KiB
Markdown
# 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(). -->
|