Changeset 0.25.1 (#161)

src/js/file-tree.js

@@ -18,11 +18,11 @@
 //   tree.destroy();
 
 const FileTree = {
-    _instances: new Map(),
+    ...createComponentRegistry('FileTree'),
 
     create(opts) {
         const pfx = opts.id || 'editor';
-        const instance = {
+        const instance = componentMixin({
             id: pfx,
             itemsEl:     document.getElementById(pfx + 'TreeItems'),
             newFileEl:   document.getElementById(pfx + 'TreeNewFile'),
@@ -34,7 +34,6 @@ const FileTree = {
             _expandedDirs:  new Set(['']),
             _gitStatusMap:  new Map(),
             _activeFile:    null,
-            _listeners:     [],
 
             // ── Public API ──────────────────────
 
@@ -166,7 +165,7 @@ const FileTree = {
                         row.innerHTML =
                             '<span class="file-tree-arrow ' + (expanded ? 'expanded' : '') + '">' + (expanded ? '▾' : '▸') + '</span>' +
                             '<span class="file-tree-icon">📁</span>' +
-                            '<span class="file-tree-name">' + _ftEsc(node.name) + '</span>';
+                            '<span class="file-tree-name">' + esc(node.name) + '</span>';
                         row.addEventListener('click', () => {
                             if (self._expandedDirs.has(node.path)) {
                                 self._expandedDirs.delete(node.path);
@@ -182,7 +181,7 @@ const FileTree = {
                     } else {
                         row.innerHTML =
                             '<span class="file-tree-icon">' + _ftFileIcon(node.name) + '</span>' +
-                            '<span class="file-tree-name">' + _ftEsc(node.name) + '</span>';
+                            '<span class="file-tree-name">' + esc(node.name) + '</span>';
                         row.addEventListener('click', () => {
                             if (self.onSelect) self.onSelect(node.path);
                         });
@@ -233,34 +232,20 @@ const FileTree = {
                 });
             },
 
-            // ── Lifecycle ───────────────────────
-
-            destroy() {
-                this._listeners.forEach(({ el, event, handler }) => el.removeEventListener(event, handler));
-                this._listeners = [];
+            _cleanup() {
                 this._treeData = [];
                 this._expandedDirs = new Set(['']);
                 this._gitStatusMap.clear();
-                FileTree._instances.delete(this.id);
             },
+        }, FileTree);
 
-            _on(el, event, handler) {
-                if (!el) return;
-                el.addEventListener(event, handler);
-                this._listeners.push({ el, event, handler });
-            },
-        };
-
-        FileTree._instances.set(pfx, instance);
+        FileTree._register(pfx, instance);
         return instance;
     },
-
-    get(id) { return this._instances.get(id) || null; },
 };
 
 // ── Helpers ─────────────────────────────────
 
-function _ftEsc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
 
 function _ftFileIcon(name) {
     const ext = name.split('.').pop()?.toLowerCase();