Merge pull request #692 from studiometa/bugfix/register-child-components

[Bugfix] Add child components to the registry

Author: titouanmathis

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix registering child components ([#690](https://github.com/studiometa/js-toolkit/issues/690), [#692](https://github.com/studiometa/js-toolkit/pull/692), [3ee1cc3b](https://github.com/studiometa/js-toolkit/commit/3ee1cc3b))
+
 ## [v3.4.0](https://github.com/studiometa/js-toolkit/compare/3.3.0..3.4.0) (2025-11-03)
 
 ### Added

packages/global.d.ts

@@ -1,9 +1,17 @@
+import { Base, BaseConstructor } from './js-toolkit/Base/Base.js';
+
 declare global {
   // eslint-disable-next-line vars-on-top, no-var
   var __DEV__: boolean;
+  var __JS_TOOLKIT_REGISTRY__: Map<string, BaseConstructor>;
+  var __JS_TOOLKIT_INSTANCES__: Set<Base>;
+
   interface Window {
     __DEV__: typeof __DEV__;
     ResizeObserver?: (callback: () => void) => void;
+
+    __JS_TOOLKIT_REGISTRY__: Map<string, BaseConstructor>;
+    __JS_TOOLKIT_INSTANCES__: Set<Base>;
   }
 
   interface CSSStyleDeclaration {

packages/js-toolkit/Base/Base.ts

@@ -301,8 +301,16 @@ export class Base<T extends BaseProps = BaseProps> {
       return;
     }
 
+    // Add current component to the registry
     addToRegistry($config.name, this.constructor);
 
+    // Add children components to the registry
+    for (const [selector, ctor] of Object.entries($config.components)) {
+      if ('$isBase' in ctor && ctor.$isBase) {
+        addToRegistry(selector, ctor);
+      }
+    }
+
     this.$id = `${$config.name}-${id}`;
     id += 1;
 

packages/tests/Base/Base.spec.ts

@@ -1,5 +1,12 @@
-import { describe, it, expect, vi } from 'vitest';
-import { Base, BaseConfig, BaseProps, getInstanceFromElement } from '@studiometa/js-toolkit';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  Base,
+  BaseConfig,
+  BaseProps,
+  getInstanceFromElement,
+  withExtraConfig,
+  withName,
+} from '@studiometa/js-toolkit';
 import { h } from '#test-utils';
 
 let mockedIsDev = true;
@@ -36,6 +43,10 @@ async function getContext() {
   return { Foo, element, foo };
 }
 
+beforeEach(() => {
+  globalThis['__JS_TOOLKIT_REGISTRY__'] = new Map();
+});
+
 describe('The abstract Base class', () => {
   it('must be extended', () => {
     expect(() => {
@@ -349,6 +360,44 @@ describe('A Base instance methods', () => {
     expect(fn).toHaveBeenNthCalledWith(2, 'method');
   });
 
+  it('should register itself on instantiation', async () => {
+    const TestComponent = withName(Base, 'TestComponent');
+    const registry = globalThis.__JS_TOOLKIT_REGISTRY__;
+    const component = new TestComponent(h('div'));
+
+    expect(registry.has('TestComponent')).toBe(true);
+    expect(registry.get('TestComponent')).toBe(TestComponent);
+
+    registry.delete('TestComponent');
+  });
+
+  it('should register sync configured children components on instantiation', async () => {
+    const Child = withName(Base, 'Child');
+    const Parent = withExtraConfig(Base, {
+      name: 'Parent',
+      components: {
+        Child,
+        div: Child,
+        AsyncChild: () => new Promise(() => {}),
+      },
+    });
+
+    const registry = globalThis.__JS_TOOLKIT_REGISTRY__;
+    const component = new Parent(h('div'));
+
+    // Check that it's in the registry
+    expect(registry.has('Parent')).toBe(true);
+    expect(registry.get('Parent')).toBe(Parent);
+
+    expect(registry.has('Child')).toBe(true);
+    expect(registry.get('Child')).toBe(Child);
+
+    expect(registry.has('div')).toBe(true);
+    expect(registry.get('div')).toBe(Child);
+
+    expect(registry.has('AsyncChild')).toBe(false);
+  });
+
   it('should not find children if none provided', async () => {
     const { foo } = await getContext();