Files

T

Maxim Dolgolyov 77ebe9e3e4 chore(plan): lab-split 5-phase plan

PLAN.md + 5 subplans + CONTEXT.md

Strategy: Incremental | Mode: Automated | Execution: Direct

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

2026-05-22 22:33:41 +03:00

3.6 KiB

Raw Blame History

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

Status: ⬜ Not Started 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

3.6 KiB Raw Blame History Unescape Escape

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