Skip to content

Fix nested component initialization to preserve child components and their events #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Fix nested component initialization to preserve child components and their events #20

wants to merge 4 commits into from

Conversation

Copilot
Copy link

@Copilot Copilot AI commented Aug 20, 2025 •
edited
Loading

Problem

When using nested SipaComponent structures, child components defined within other components were not being properly initialized, causing their events to be inaccessible. This affected scenarios like:

<parent-component>
    <child-component sipa-alias="myChild">
        <grandchild-component sipa-alias="myGrandchild"></grandchild-component>
    </child-component>
</parent-component>

In this case, myGrandchild would not be initialized and parent.children().myChild.children().myGrandchild would be undefined, breaking event subscriptions and component references.

Root Cause

The issue was in the _applySlots method. When a component didn't have explicit <slot> elements in its template, any nested content (including child components) was completely ignored and lost during template rendering.

Components that defined their templates without slots like:

static template = () => {
    return `<child-component><%= message %></child-component>`;
}

Would lose any nested components that were defined inside them in the parent's template.

Solution

Modified the _applySlots method to automatically preserve and append child components from body nodes when no explicit slots are present. The fix:

  1. Detects when no slots are defined but body nodes exist
  2. Filters body nodes to only include registered component elements (avoiding plain HTML elements)
  3. Appends component elements to the parsed template DOM
} else if (this._meta.sipa.body_nodes?.length > 0) {
    // If no explicit slots but there are body nodes, append them to the component
    // This allows nested components to be properly initialized
    // Only append component elements (registered component tag names)
    const registered_tag_names = self._registered_components.map(x => x.tagName().toLowerCase());
    [...this._meta.sipa.body_nodes].forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE && registered_tag_names.includes(node.tagName.toLowerCase())) {
            parsed.appendChild(node.cloneNode(true));
        }
    });
}

Testing

Added comprehensive test cases covering:

  • Basic nested component initialization
  • Event subscription preservation through updates
  • Deep nesting scenarios (grandchild components)
  • Component reference stability after parent updates

All tests now pass, confirming that nested components are properly initialized and their events work correctly.

Impact

This fix enables proper use of nested component architectures in SipaJS applications, allowing developers to create complex component hierarchies where events and component references work as expected at all nesting levels.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • accounts.google.com
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3457 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-63145743 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,4676642323610872200,4071665905546289216,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-63145743 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=63145743 (dns block)
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3687 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-76954777 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,15958608692870724369,14936992825570280982,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
  • android.clients.google.com
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3457 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-63145743 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,4676642323610872200,4071665905546289216,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-63145743 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=63145743 (dns block)
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3687 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-76954777 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,15958608692870724369,14936992825570280982,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
  • clients2.google.com
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3457 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-63145743 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,4676642323610872200,4071665905546289216,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-63145743 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=63145743 (dns block)
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3687 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-76954777 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,15958608692870724369,14936992825570280982,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
  • clientservices.googleapis.com
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3457 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-63145743 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,4676642323610872200,4071665905546289216,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-63145743 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=63145743 (dns block)
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3687 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-76954777 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,15958608692870724369,14936992825570280982,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
  • optimizationguide-pa.googleapis.com
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3457 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-63145743 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,4676642323610872200,4071665905546289216,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-63145743 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=63145743 (dns block)
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3687 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-76954777 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,15958608692870724369,14936992825570280982,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
  • redirector.gvt1.com
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3457 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-63145743 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,4676642323610872200,4071665905546289216,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-63145743 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=63145743 (dns block)
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3687 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-76954777 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,15958608692870724369,14936992825570280982,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
  • safebrowsingohttpgateway.googleapis.com
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3457 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-63145743 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,4676642323610872200,4071665905546289216,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-63145743 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=63145743 (dns block)
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3687 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-76954777 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,15958608692870724369,14936992825570280982,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
  • www.google.com
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3457 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-63145743 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,4676642323610872200,4071665905546289216,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-63145743 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=63145743 (dns block)
    • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3687 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-76954777 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,15958608692870724369,14936992825570280982,262144 --disable-features=PaintHolding --variations-seed-version (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI and others added 3 commits August 20, 2025 07:11
@Copilot @magynhard
Initial investigation: Create test case revealing nested component ev…
6a6a8db 
…ent issue

Co-authored-by: magynhard <14541962+magynhard@users.noreply.github.com>
@Copilot @magynhard
Fix nested component initialization to preserve child components and …
4e28231 
…their events

Co-authored-by: magynhard <14541962+magynhard@users.noreply.github.com>
@Copilot @magynhard
Successfully fix nested component initialization - preserve child com…
6076541 
…ponents in templates without explicit slots

Co-authored-by: magynhard <14541962+magynhard@users.noreply.github.com>
@Copilot Copilot AI changed the title [WIP] check the sipa-component.js - when nested, events can be not be referenced correctly anymore. check for causes Fix nested component initialization to preserve child components and their events Aug 20, 2025
@Copilot Copilot AI requested a review from magynhard August 20, 2025 07:22
Copilot finished work on behalf of magynhard August 20, 2025 07:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@magynhard magynhard Awaiting requested review from magynhard

Assignees

@magynhard magynhard

Copilot code review Copilot

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@Copilot @magynhard