Files

T

Maxim Dolgolyov 5fa2844451 docs(lab-split): mark phases 1-4 done, phase 5 deferred

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-22 23:03:56 +03:00

4.2 KiB

Raw Permalink Blame History

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 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

4.2 KiB Raw Permalink Blame History Unescape Escape

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