dev-docs/lib_core_runtime_AvenxPage.js.html at master · Avenx-JS/dev-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: lib/core/runtime/AvenxPage.js</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: lib/core/runtime/AvenxPage.js</h1>


    <section>
        <article>
            <pre class="prettyprint source linenums"><code>import { AvenxComponent } from './AvenxComponent.js';

/**
 * AvenxPage is a specialized component that can host child components.
 * It automatically mounts child components defined in its template via [data-avenx-comp].
 */
export class AvenxPage extends AvenxComponent {
    /** @type {Map&lt;string, typeof AvenxComponent>} @private */
    #componentRegistry;
    /** @type {Map&lt;Element, AvenxComponent>} @private */
    #childComponents = new Map();

    /**
     * @param {Object} initialState - Initial state.
     * @param {Object} computed - Computed properties.
     * @param {Object} bridges - Shared bridges.
     * @param {string} template - HTML template.
     * @param {Object} methods - Component methods.
     * @param {Map&lt;string, typeof AvenxComponent>} componentRegistry - Registry of available components.
     */
    constructor(initialState = {}, computed = {}, bridges = {}, template = '', methods = {}, componentRegistry = new Map(), props = {}) {
        super(initialState, computed, bridges, template, methods, props);
        this.#componentRegistry = componentRegistry;
    }

    /**
     * Updates the page and then mounts/updates child components.
     */
    update() {
        super.update();
        this.#mountChildComponents();
    }

    /**
     * Unmounts the page and all child components.
     */
    unmount() {
        for (const compInstance of this.#childComponents.values()) {
            if (typeof compInstance.unmount === 'function') {
                compInstance.unmount();
            }
        }
        this.#childComponents.clear();
        super.unmount();
    }

    /**
     * Finds all mount points for child components and initializes or updates them.
     * @private
     */
    #mountChildComponents() {
        const root = this._getElement();
        if (!root) return;

        const mountPoints = root.querySelectorAll('[data-avenx-comp]');
        const currentElements = new Set(mountPoints);

        // 1. Clean up/unmount child components whose elements are no longer in the DOM/page
        for (const [el, compInstance] of this.#childComponents.entries()) {
            if (!currentElements.has(el) || !root.contains(el)) {
                if (typeof compInstance.unmount === 'function') {
                    compInstance.unmount();
                }
                this.#childComponents.delete(el);
            }
        }

        // 2. Instantiate new components or update existing ones
        mountPoints.forEach(el => {
            const compName = el.getAttribute('data-avenx-comp');
            const CompClass = this.#componentRegistry.get(compName);

            if (CompClass) {
                // Extract props from element's data-props-* attributes
                const props = {};
                for (const attr of el.attributes) {
                    if (attr.name.startsWith('data-props-')) {
                        const propName = attr.name.slice('data-props-'.length);
                        try {
                            props[propName] = this._evaluate(attr.value);
                        } catch (e) {
                            console.warn(`[AvenxPage] Failed to evaluate prop expression: ${attr.value}`, e);
                        }
                    }
                }

                if (this.#childComponents.has(el)) {
                    const compInstance = this.#childComponents.get(el);
                    if (typeof compInstance.setProps === 'function') {
                        compInstance.setProps(props);
                    } else if (typeof compInstance.update === 'function') {
                        compInstance.update();
                    }
                } else {
                    const compInstance = new CompClass(this._getBridges(), props);
                    compInstance.mount(el);
                    this.#childComponents.set(el, compInstance);
                }
            } else {
                console.warn(`[AvenxPage] Component '${compName}' not found in registry.`);
            }
        });
    }
}

</code></pre>
        </article>
    </section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-lib_core_index.html">lib/core/index</a></li></ul><h3>Classes</h3><ul><li><a href="AvenxApp.html">AvenxApp</a></li><li><a href="AvenxBridge.html">AvenxBridge</a></li><li><a href="AvenxCLI.html">AvenxCLI</a></li><li><a href="AvenxCompiler.html">AvenxCompiler</a></li><li><a href="AvenxComponent.html">AvenxComponent</a></li><li><a href="AvenxError.html">AvenxError</a></li><li><a href="AvenxGuard.html">AvenxGuard</a></li><li><a href="AvenxPage.html">AvenxPage</a></li><li><a href="AvenxRouter.html">AvenxRouter</a></li><li><a href="ComponentParser.html">ComponentParser</a></li><li><a href="ComputedRegistry.html">ComputedRegistry</a></li><li><a href="DomPatcher.html">DomPatcher</a></li><li><a href="DynamicEvaluator.html">DynamicEvaluator</a></li><li><a href="EventBinder.html">EventBinder</a></li><li><a href="EventExecutor.html">EventExecutor</a></li><li><a href="ExpressionParser.html">ExpressionParser</a></li><li><a href="HtmlDiff.html">HtmlDiff</a></li><li><a href="HtmlEscaper.html">HtmlEscaper</a></li><li><a href="LifecycleManager.html">LifecycleManager</a></li><li><a href="ListManager.html">ListManager</a></li><li><a href="ProxyHandlerFactory_ProxyHandlerFactory.html">ProxyHandlerFactory</a></li><li><a href="SafeHtml.html">SafeHtml</a></li><li><a href="Sanitizer.html">Sanitizer</a></li><li><a href="StateFactory.html">StateFactory</a></li><li><a href="StyleProcessor.html">StyleProcessor</a></li><li><a href="TemplateRenderer.html">TemplateRenderer</a></li></ul><h3>Global</h3><ul><li><a href="global.html#AvenxErrorCodes">AvenxErrorCodes</a></li><li><a href="global.html#AvenxErrorMessages">AvenxErrorMessages</a></li><li><a href="global.html#RAW_SYMBOL">RAW_SYMBOL</a></li><li><a href="global.html#belongsToComponent">belongsToComponent</a></li><li><a href="global.html#flushJobs">flushJobs</a></li><li><a href="global.html#formatMessage">formatMessage</a></li><li><a href="global.html#html">html</a></li><li><a href="global.html#isReactiveTarget">isReactiveTarget</a></li><li><a href="global.html#processBindDirectives">processBindDirectives</a></li><li><a href="global.html#queueJob">queueJob</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.5</a> on Thu Jun 25 2026 13:00:09 GMT+0200 (Mitteleuropäische Sommerzeit)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>