@twobirds/microcomponents 0.1.21 → 0.2.0

package/dist/core/MC.js

@@ -0,0 +1,471 @@
+/**
+@module
+## Overview
+
+MicroComponents (MC) is a lightweight pattern for creating self-contained, event-driven, and composable UI components. It provides two core base classes: {@link MC} and {@link DC}, which differ primarily in their target attachment strategy and runtime environment requirements.
+
+In general, your code extends from either of these classes depending on whether you need DOM interaction or pure logic encapsulation.
+
+---
+
+## MC vs DC: Server vs Client
+
+The key distinction between the two base classes is their execution context:
+
+- **MC (MicroComponent)** – A general-purpose component that works in **any JavaScript environment**, including server-side runtimes (Node.js, Deno, etc.). It does not require a DOM and can be used for business logic, state management, or as a lightweight container. The `target` parameter is optional.
+
+- **DC (DOM Component)** – A DOM-centric component that operates wherever a real ( browser ) or simulated ( jsdom, etc. ) DOM exists. It attaches itself to an {@link HTMLElement} and provides event handling, DOM traversal, and lifecycle management. The `target` parameter is required and must be an HTMLElement.
+
+**HINT:** DCs can be attached to **any** DOM node ( HTMLElement ). That is you can connect them to <div>, <span> and the like. With a trick you can even define custom elements that convert themselves to e.g. a plain <div>.
+
+### When to use which?
+
+| Scenario | Recommended Class |
+|----------|-------------------|
+| Server-side rendering or logic | MC |
+| Pure data processing without DOM | MC |
+| Interactive UI elements in the browser | DC |
+| Event-driven components attached to HTML nodes | DC |
+
+---
+
+## The `target` Property: Backreference Concept
+
+Both MC and DC store a reference to their **host object** via the internal `_target` property (exposed as the `target` getter). This is a *backreference* — it points back to the object that contains or hosts this component instance.
+
+- For **DC instances**, `this.target` refers to the {@link HTMLElement} in the DOM (or testing DOM such as jsdom) to which the component is attached.
+- For **MC instances**, `this.target` can be any arbitrary object, allowing flexible composition patterns.
+
+The reference is held via a `WeakRef` ([MDN WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef)) internally to avoid circular references and prevent memory leaks.
+
+---
+
+## DOM Integration: The `_mc` Property and `data-mc` Attribute
+
+When a DC is attached to an element via {@linkcode DC.add}, two things happen:
+
+1. The element gains a `_mc` property (of type {@link McHost}) that holds references to all attached microcomponents, keyed by their unique identifiers.
+2. The element receives a `data-mc` attribute, signaling that it hosts at least one microcomponent. This attribute is used internally for DOM queries and selectors.
+
+This `_mc` property is the **only** interference with the native DOM structure, ensuring compatibility with other frameworks or libraries.
+
+---
+
+## Lifecycle & Automatic Event Handler Attachment
+
+DC instances automatically trigger an `"Init"` lifecycle event asynchronously after construction. Additionally, methods prefixed with `on` or `one` (e.g., `onClick`, `oneUpdate`) are auto-attached as event listeners on the target element, supporting both native HTML events and custom microcomponent events.
+
+---
+
+
+@example Understanding target in DC
+
+javascript:
+```javascript
+import { DC } from '@twobirds/microcomponents';
+
+class MyButton extends DC {
+    constructor(target: HTMLElement) {
+        super(target);
+    }
+
+    logTarget() {
+        // this.target is the <button> element itself
+        console.log(this.target.tagName); // "BUTTON"
+    }
+}
+
+const btn = document.querySelector('button');
+if (btn) {
+    const host = DC.add(btn, 'myButton', new MyButton(btn));
+    host._mc.myButton.logTarget();
+}
+```
+
+@example Understanding target in MC
+
+
+```javascript
+import { MC } from '@twobirds/microcomponents';
+
+class Counter extends MC {
+    private count = 0;
+
+    constructor(target?: object) {
+        super(target);
+    }
+
+    increment() {
+        this.count++;
+    }
+
+    getCount() {
+        return this.count;
+    }
+}
+
+// Works without any DOM — usable on server or client
+const counter = new Counter();
+counter.increment();
+console.log(counter.getCount()); // 1
+```
+
+@example Usage
+
+Below is a complete example demonstrating how to create, attach, and interact with a custom microcomponent:
+
+html before:
+```html
+<div id="container"></div>
+```
+
+javascript:
+```javascript
+import { DC } from '@twobirds/microcomponents';
+
+// 1. Create a custom micro component class extending DC
+class HelloWorld extends DC {
+    constructor(target: HTMLElement) {
+        super(target);
+    }
+
+    greet() {
+        console.log('Hello World');
+    }
+}
+
+// 2. Get an element from the DOM
+const element = document.getElementById('container')!;
+
+// 3. Attach the micro component instance to the target element
+DC.add(element, 'helloWorld', new HelloWorld(element));
+
+// 4. Invoke methods on the attached component
+element._mc.helloWorld.greet(); // "Hello World"
+```
+
+html after:
+```html
+<div id="container" data-mc></div>
+```
+
+The `data-mc` attribute indicates that this element contains at least one microcomponent. The `_mc` property provides direct programmatic access to the attached instances.
+
+---
+
+*/
+'use strict';
+import { trigger, on, one, off } from './events.js';
+import { isMcDOM } from './mcGuards.js';
+export { isMcDOM } from './mcGuards.js';
+function add(targetHTMLElement, key, element = {}) {
+    const node = targetHTMLElement;
+    // create the _mc property if necessary ('in' is tested on the unwidened
+    // element — testing the McHost-cast alias would narrow it to never)
+    if (!('_mc' in targetHTMLElement)) {
+        node._mc = new DC(targetHTMLElement);
+    }
+    // the public registry type has no string index signature; the dynamic write
+    // goes through a keyed view of the same object
+    const _mc = node._mc;
+    // add the element with the given property key to the _mc property
+    if (key.length && !_mc[key]) {
+        _mc[key] = element;
+        // add attribute if HTMLElement
+        if (targetHTMLElement instanceof HTMLElement && !targetHTMLElement.getAttribute('data-mc')) {
+            targetHTMLElement.setAttribute('data-mc', '');
+        }
+    }
+    return node;
+}
+/**
+Removes a named microcomponent from the internal `_mc` collection of a target DOM node.
+
+This function deletes the specified key from the element's `_mc` hash object and, if the
+collection becomes empty, removes the `data-mc` attribute from the DOM node.
+
+The bare poisoned value (`el._mc.gone` without member access) is `never`,
+which is assignable to anything — only member/method use of a removed entry is caught.
+
+@template T - A plain or already-enhanced element type.
+@template K - The literal registration key; its entry is poisoned in the registry type.
+@param target - The DOM element whose microcomponent should be removed.
+@param key - The property name/key corresponding to the microcomponent to remove.
+*/
+function remove(target, key) {
+    if (!key)
+        return; // silent fail
+    const node = target;
+    // keyed view: the public registry type has no string index signature
+    const _mc = node._mc;
+    if (!_mc)
+        return;
+    // delete the property from the HTMLElement _mc collection
+    if (_mc[key]) {
+        delete _mc[key];
+    }
+    // remove the _mc attribute if the DOM collection is empty
+    if (!Object.keys(_mc).length && target instanceof HTMLElement && target.hasAttribute('data-mc')) {
+        target.removeAttribute('data-mc');
+    }
+}
+/**
+Runs the "Init" lifecycle event on a DOM microcomponent instance asynchronously.
+
+This function schedules the `trigger('Init')` call in a microtask, ensuring
+that all synchronous initialization is complete before the lifecycle hook
+executes. Only `DC` instances have an Init lifecycle — the `McBase`
+constructor calls this exclusively behind an `instanceof DC` check, so the
+signature encodes that invariant instead of re-checking it at runtime.
+
+@param element - The DOM microcomponent instance on which to trigger the Init event.
+*/
+function init(element) {
+    queueMicrotask(() => {
+        element.trigger('Init');
+    });
+}
+/**
+Attaches event listeners to DOM elements based on method naming conventions.
+
+Scans the prototype of the provided element and attaches listeners for methods
+prefixed with `on` or `one`, corresponding to either native HTML events (e.g.,
+'onclick') or microcomponent-prefixed custom events (e.g., '_mcUpdate').
+
+@param element - The instance whose prototype should be scanned for event handlers.
+*/
+function autoAttachListeners(element) {
+    const sourceTarget = element.target;
+    const prototype = Object.getPrototypeOf(element);
+    const sourceElement = element;
+    const definedEventHandlerNames = Object.getOwnPropertyNames(prototype).filter((key) => /^(on[A-Z]|one[A-Z])/.test(key) && typeof prototype[key] === 'function');
+    for (const eventHandlerName of definedEventHandlerNames) {
+        const once = /^one/.test(eventHandlerName);
+        const eventName = eventHandlerName.replace(/^one?/, ''); // preserves upper/lowercase for non-native events
+        const listener = (ev) => sourceElement[eventHandlerName](ev);
+        on(sourceTarget, eventName, listener, once);
+    }
+}
+/**
+Retrieves immediate child microcomponents of a DOM node.
+
+Queries the DOM for descendant elements marked with `data-mc` that are direct
+children of the provided element and returns their associated `_mc` instances.
+
+@param domNode - The DOM element whose child microcomponents to find.
+@returns An array of child microcomponent instances.
+*/
+function getMcChildNodes(domNode) {
+    const selector = '[data-mc]:not(:scope [data-mc] [data-mc])';
+    const childMcElements = Array.from(domNode.querySelectorAll(selector))
+        .filter((e) => e instanceof HTMLElement && '_mc' in e)
+        .map((e) => e._mc);
+    return childMcElements;
+}
+/**
+Walks up the DOM from `from`, returning the `_mc` controller of the nearest
+`data-mc` ancestor — restricted, when `key` is given, to hosts whose registry
+actually carries that key. Hosts marked `data-mc` but not (yet) carrying an
+`_mc` record (e.g. autoload pending) are skipped rather than returned.
+
+@param from - The element whose ancestors to search (exclusive).
+@param key - Optional registry key the ancestor's `_mc` must contain.
+@returns The nearest matching controller, or null.
+*/
+function findMcAncestor(from, key) {
+    let el = from.parentElement?.closest('[data-mc]');
+    while (el instanceof HTMLElement) {
+        /* v8 ignore next */
+        if ('_mc' in el) {
+            const mc = el._mc;
+            if (key === undefined || key in mc)
+                return mc;
+        }
+        el = el.parentElement?.closest('[data-mc]');
+    }
+    return null;
+}
+/**
+The base class for all microcomponents.
+
+Implements a `WeakRef` to the target DOM element or other data, avoiding
+circular references. Automatically triggers the "Init" lifecycle event and
+attaches listeners via `autoAttachListeners` upon construction.
+*/
+class McBase {
+    _target; // avoid circular reference
+    /**
+    The constructor for the base `McBase` class.
+    
+    Initializes a weak reference to the target and triggers auto-attachment
+    of listeners and initialization lifecycle events.
+    
+    @param target - The object or element this microcomponent represents.
+    */
+    constructor(target) {
+        this._target = new WeakRef(target || {});
+        if (this instanceof DC) {
+            autoAttachListeners(this);
+            init(this);
+        }
+    }
+    /**
+    Returns the current target object (DOM node or other data) referenced by this microcomponent.
+    
+    Uses a `WeakRef` internally to avoid circular references, and safely dereferences it here.
+    
+    The dereference is asserted non-null: the controller is stored on its target
+    (`element._mc`), so any code that can reach the controller through the element is
+    holding the target alive. Only a controller retained independently after its element
+    was garbage-collected could observe a stale reference — do not cache controllers
+    detached from their elements.
+
+    @returns The target object.
+    */
+    get target() {
+        return this._target.deref();
+    }
+}
+/**
+A general-purpose base microcomponent that does not require a DOM target.
+
+Inherits from `McBase`, but is primarily used as a lightweight container or
+for logic not directly tied to DOM elements.
+
+@template TTarget - The concrete type of the wrapped target data; preserved by
+    the `target` getter, so `new MC({ some: 'data' }).target.some` stays typed.
+*/
+class MC extends McBase {
+    /**
+    Constructs an instance of the general-purpose microcomponent.
+    
+    @param target - Target object or data.
+    */
+    constructor(target) {
+        super(target);
+    }
+}
+/**
+A DOM-centric microcomponent that operates on a specific HTML element.
+
+Extends `McBase` and associates itself with an actual DOM node via the
+`_target` reference. Provides methods for event handling, DOM traversal,
+and interaction with sibling or ancestor microcomponents.
+
+@template T - The concrete element type of the host element.
+@template EM - The component's custom event map (`event name → payload type`).
+    Declaring it registers events on the type level: `trigger()` enforces the
+    payload for registered names, and `on()`/`one()` handlers receive
+    `CustomEvent<McDetail<Payload>>` with no annotation needed. Unregistered
+    names keep the open `unknown`-payload behavior.
+@example
+```ts
+class Cart extends DC<HTMLFormElement, { CartUpdate: { count: number } }> {
+    checkout() {
+        this.trigger('CartUpdate', { count: 2 }, 'u'); // payload checked
+        this.on('CartUpdate', (ev) => ev.detail.data.count); // ev fully typed
+    }
+}
+```
+*/
+class DC extends McBase {
+    constructor(target) {
+        super(target);
+    }
+    static add(target, key, element = {}) {
+        return add(target, key, element);
+    }
+    /**
+    Static helper to remove a named microcomponent from a DOM element.
+
+    Wrapper around the `remove()` utility function, providing a class-level API
+    for removing child microcomponents.
+
+    @template T - A plain or already-enhanced element type.
+    @template K - The literal registration key; its entry is poisoned in the registry type.
+    @param target - The DOM element from which to remove the microcomponent.
+    @param key - The property name/key corresponding to the microcomponent to remove.
+    */
+    static remove(target, key) {
+        remove(target, key);
+    }
+    /**
+    Class-verified entry lookup: returns the component stored under `key` on the
+    element's `_mc` record — but only if it is an instance of `Klass`.
+
+    This is the *sound* retrieval primitive: presence AND type identity are both
+    proven at runtime (`instanceof`), so it needs no global `McRegistry`
+    declaration and stays correct even when different elements use the same key
+    name for different component types. Accepts any value (including
+    `querySelector` results that may be null) — every failure mode returns
+    `undefined`.
+
+    @template E - The component type, inferred from `Klass`.
+    @param element - The value to look the entry up on; anything non-host yields undefined.
+    @param key - The registry key name to look under.
+    @param elementMcClass - The class the entry must be an instance of.
+    @returns The verified instance, or undefined.
+    @example
+    ```ts
+    const cart = DC.get(document.querySelector('form'), 'cart', Cart);
+    cart?.addItem(item); // Cart | undefined — no global declaration involved
+    ```
+    */
+    static get(element, key, elementMcClass) {
+        if (!isMcDOM(element))
+            return undefined;
+        const entry = element._mc[key];
+        return entry instanceof elementMcClass ? entry : undefined;
+    }
+    off(eventName, handler) {
+        off(this.target, eventName, handler);
+    }
+    on(eventName, handler) {
+        return on(this.target, eventName, handler);
+    }
+    one(eventName, handler) {
+        return one(this.target, eventName, handler);
+    }
+    /**
+    Triggers a custom event on the DOM node and optionally bubbles it.
+    
+    This is an instance method wrapper for `trigger()`, using the internal `_target` DOM reference.
+    
+    For event names registered in the component's event map `EM` the payload type
+    is enforced; unregistered names accept any payload (typed via inference or an
+    explicit `trigger<Payload>(...)` argument).
+    
+    @param eventName - The name of the event (will be prefixed if needed).
+    @param data - Additional data payload attached to `event.detail.data`.
+    @param bubble - Bubbling direction ('l', 'u', 'd' or combinations).
+    @param controller - Optional controller for managing bubbling behavior.
+    */
+    trigger(eventName, data = {}, bubble = 'l', controller) {
+        trigger(this.target, eventName, data, bubble, controller);
+    }
+    ancestors(key) {
+        const result = [];
+        let current = findMcAncestor(this.target, key);
+        while (current) {
+            result.push(current);
+            current = findMcAncestor(current.target, key);
+        }
+        return result;
+    }
+    closest(key) {
+        return findMcAncestor(this.target, key);
+    }
+    children(key) {
+        const kids = getMcChildNodes(this.target);
+        return key === undefined ? kids : kids.filter((mc) => key in mc);
+    }
+    descendants(key) {
+        const hosts = Array.from(this.target.querySelectorAll('[data-mc]'));
+        const mcArray = hosts
+            .filter((e) => e instanceof HTMLElement && '_mc' in e)
+            .map((e) => e._mc)
+            .filter((mc) => key === undefined || key in mc);
+        return mcArray;
+    }
+}
+export { MC, DC, McBase };

package/dist/core/autoload.d.ts

@@ -0,0 +1,54 @@
+/**
+@module
+
+The {@linkcode autoload} function enables automatic detection and instantiation of microcomponents in the DOM via a `MutationObserver`. When enabled, newly added elements with undefined custom tags or `data-mc` references will trigger dynamic script loading and component attachment.
+
+Kept in its own module so the core controller classes in MC.ts stay free of
+side-effect-bearing DOM machinery (`MutationObserver`, script injection):
+importing `DC`/`MC` never pulls a DOM observer into the bundle unless
+{@link autoload} itself is imported.
+*/
+/**
+The signature of {@link autoload}: an enable/disable toggle that also carries the
+set of microcomponent names currently loading via its `state` property.
+
+@example
+```ts
+import { autoload } from '@twobirds/microcomponents';
+
+autoload(true);  // enable auto-loading
+console.log(autoload.state); // Set of component names currently loading
+autoload(false); // disable
+```
+*/
+export interface Autoload {
+    /**
+  Enables or disables automatic detection and instantiation of microcomponents.
+
+  When enabled, the system uses a `MutationObserver` to watch for newly-added
+  DOM nodes. For each such node:
+    - If it contains custom elements that are not yet defined, attempts to load them
+    - If it references undefined microcomponent names in its `data-mc` attribute,
+      those definitions are also loaded and attached.
+
+  When disabled, the observer is disconnected and all internal tracking state is reset.
+
+  @param {boolean} [enable=true] - Whether to enable or disable auto-loading behavior.
+  @returns The new autoload state (true if enabled, false otherwise).
+  */
+    (enable?: boolean): boolean;
+    /**
+  The internal `loadingDCs` set, exposed for external inspection.
+
+  This property is attached to the `autoload()` function itself and contains
+  the names of microcomponent classes currently being loaded (or queued to load).
+  */
+    state: Set<string>;
+}
+declare global {
+    interface Window {
+        autoload?: Autoload;
+    }
+}
+export declare const autoload: Autoload;
+//# sourceMappingURL=autoload.d.ts.map

package/dist/core/autoload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autoload.d.ts","sourceRoot":"","sources":["../../src/core/autoload.ts"],"names":[],"mappings":"AAAA;;;;;;;;;EASE;AAoJF;;;;;;;;;;;;EAYE;AACF,MAAM,WAAW,QAAQ;IACxB;;;;;;;;;;;;;IAaG;IACH,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B;;;;;IAKG;IACH,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACnB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,MAAM;QACf,QAAQ,CAAC,EAAE,QAAQ,CAAC;KACpB;CACD;AAID,eAAO,MAAM,QAAQ,EAAE,QAuBtB,CAAC"}

package/dist/core/autoload.js

@@ -0,0 +1,158 @@
+/**
+@module
+
+The {@linkcode autoload} function enables automatic detection and instantiation of microcomponents in the DOM via a `MutationObserver`. When enabled, newly added elements with undefined custom tags or `data-mc` references will trigger dynamic script loading and component attachment.
+
+Kept in its own module so the core controller classes in MC.ts stay free of
+side-effect-bearing DOM machinery (`MutationObserver`, script injection):
+importing `DC`/`MC` never pulls a DOM observer into the bundle unless
+{@link autoload} itself is imported.
+*/
+import { DC } from './MC.js';
+import { isMcDOM } from './mcGuards.js';
+const loadingDCs = new Set();
+/**
+Creates a closure that attaches DOM elements with the specified tag name to
+their corresponding microcomponent instances.
+
+Used internally by `makeLoadScript()` when dynamically loading external
+custom element definitions. The returned function is invoked after the
+element definition becomes available, and performs:
+  - Querying of all matching elements in the DOM
+  - Instantiation of new `DC` instances
+  - Attachment to each DOM node via `DC.add()`
+
+@param element - The tag name (custom element name) of the microcomponent to instantiate.
+@returns A closure that performs the attachment logic when invoked.
+*/
+function attachDC(element) {
+    return () => {
+        const elements = Array.from(document.querySelectorAll(`[data-mc*="${element}"]`)).filter((e) => e instanceof HTMLElement);
+        if (elements.length === 0)
+            return;
+        const customElementClass = customElements.get(element);
+        for (let node of elements) {
+            try {
+                DC.add(node, customElementClass.name, new customElementClass(node));
+            }
+            catch (error) {
+                /* v8 ignore start */
+                if ('create' in customElementClass && typeof customElementClass.create === 'function') {
+                    const customElement = customElementClass.create(node);
+                    if (!isMcDOM(customElement))
+                        throw `create() of Class ${customElementClass.name} did not return a McHost.`;
+                    customElement.setAttribute('data-mc', node.getAttribute('data-mc') ?? '');
+                    node.replaceWith(customElement);
+                    node = customElement;
+                }
+                else {
+                    throw `Class ${customElementClass.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`;
+                }
+                /* v8 ignore end */
+            }
+            const newMcName = node
+                .getAttribute('data-mc')
+                .split(' ')
+                .filter((name) => name !== element && name !== '')
+                .join(' ')
+                .trim();
+            node.setAttribute('data-mc', newMcName);
+        }
+    };
+}
+/**
+Dynamically loads and registers a custom element definition from an external JS file.
+
+Constructs the script URL based on kebab-case naming (e.g., `my-element` → `./my/element.js`).
+Registers a handler to be executed once the element is defined, then appends the
+`<script>` tag to `<head>`. Handles both successful loading and error cases.
+
+@param element - The custom element tag name (e.g., 'mc-button', 'my-widget').
+*/
+function makeLoadScript(element) {
+    /* v8 ignore next */
+    if (loadingDCs.has(element))
+        return; // already loading
+    loadingDCs.add(element);
+    const fileName = './' + element.split('-').join('/') + '.js';
+    const scriptElement = document.createElement('script');
+    scriptElement.setAttribute('src', fileName);
+    scriptElement.setAttribute('blocking', 'render');
+    scriptElement.async = true;
+    scriptElement.setAttribute('type', 'module');
+    scriptElement.setAttribute('data-name', element);
+    scriptElement.setAttribute('loading', '');
+    const loadedPromise = customElements.whenDefined(element);
+    loadedPromise.then(attachDC(element));
+    scriptElement.addEventListener('load', (ev) => {
+        loadingDCs.delete(element);
+        document.head.querySelector(`script[data-name="${element}"]`)?.remove();
+    });
+    scriptElement.addEventListener('error', (ev) => {
+        console.error('could not load DC code from', fileName);
+    });
+    document.head.append(scriptElement);
+}
+/**
+Scans the DOM for undefined custom elements and pending microcomponents,
+then loads their definitions if necessary.
+
+This is the main driver function for the autoload mechanism. It performs:
+  1. Finds all undefined custom elements in the document
+  2. Checks whether they are already loading or defined
+  3. Calls `makeLoadScript()` to fetch missing definitions
+  4. Invokes `attachDC()` where element definitions exist but haven't been attached yet
+
+It is called both immediately after enabling autoload and on each DOM mutation.
+*/
+function loadUndefinedMCs() {
+    // load unresolved custom elements
+    [...document.querySelectorAll(':not(:defined)')]
+        .filter((element) => !!element &&
+        !customElements.get(element.tagName.toLowerCase()) && // not in CustomElementsRegistry
+        !loadingDCs.has(element.tagName.toLowerCase()) // not in loading list
+    )
+        .forEach((el) => {
+        makeLoadScript(el.tagName.toLowerCase()); // will automatically be instantiated
+    });
+    // if defined in _mc attribute: instantiate DCs, load if necessary
+    [...document.querySelectorAll('[data-mc]:not([data-mc=""]')]
+        .filter((element) => !!element)
+        .forEach((el) => {
+        const _mc = el
+            .getAttribute('data-mc')
+            ?.split(' ')
+            .filter((name) => name !== '');
+        _mc?.forEach((element) => {
+            const isDefined = customElements.get(element);
+            if (!loadingDCs.has(element) && !isDefined) {
+                makeLoadScript(element);
+            }
+            else if (isDefined) {
+                attachDC(element)();
+            }
+        });
+    });
+}
+let observer = null;
+export const autoload = function (enable = true) {
+    if (!enable) {
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
+        return false;
+    }
+    const wasEnabled = !!observer;
+    if (wasEnabled)
+        return true;
+    // Initialize observer only once
+    observer = new MutationObserver(loadUndefinedMCs);
+    setTimeout(() => {
+        observer.observe(document.body, { childList: true, subtree: true });
+        loadUndefinedMCs();
+    }, 5);
+    window.autoload ??= autoload;
+    return true;
+};
+autoload.state = loadingDCs;