[BUG] Critical: Children components prevent rendering of subsequent elements/components

[TarekRaafat]

🐛 Bug Description

When a children component is inserted inside another component, any element or component that follows the children component in the template does not render.

🔄 Steps to Reproduce

Please provide detailed steps to reproduce the issue:

1. Framework Version: v1.0.0-rc.1

2. Environment:

   • Browser(s) and Version(s): Chrome v138.0.7204.50
   • Operating System(s): macOS v15.5
   • Module Format: UMD
   • Build Tool: Direct browser usage

3. Minimal Reproducible Example:

// Parent component with child component and subsequent element
const childComponent = {
  template: `
    <div>
      <h1>Hello, World!</h1>
    </div>
  `,
};

const mainApp = {
  template: `
    <div>
      <childComponent />
      <button>Increment</button>
      <p>This text should also appear after the button</p>
    </div>
  `,
  children: {
    childComponent: "childComponent"
  }
};

// Create Eleva instance and mount
const app = new Eleva("app");
app.component("childComponent", childComponent);
app.component("mainApp", mainApp);
app.mount(document.getElementById("app"), "mainApp");

// Steps that trigger the bug:
// 1. Load the page with the above component structure
// 2. Observe that only the `childComponent` renders
// 3. Notice that the button and paragraph after the `childComponent` do not appear in the DOM

✅ Expected Behavior

1. The child component should render correctly
2. All subsequent elements and components after the child component should render normally

Expected DOM structure:

<childcomponent>
  <div>
    <h1>Hello, World!</h1>
  </div>
</childcomponent>
<button>Increment</button>
<p>This text should also appear after the button</p>

❌ Actual Behavior

1. The child component renders correctly
2. All elements and components after the first child component fail to render
3. No error messages are thrown, making the bug silent and difficult to detect

Actual DOM structure:

<childcomponent>
  <div>
    <h1>Hello, World!</h1>
  </div>
</childcomponent>
<!-- Everything after this point is missing -->

📸 Screenshots or Screencasts

🔍 Error Messages

No error messages are thrown in the console, which makes this bug particularly dangerous as it fails silently.

// No console errors - silent failure

🧩 Related Components/Features

Which parts of Eleva.js are involved? (Check all that apply)

• Core component system
• Signal reactivity
• Template engine
• Event emitter
• Renderer/DOM diffing
• Lifecycle hooks
• Plugin system
• JSDoc comments
• TypeScript definitions
• Other: Children component parsing/mounting logic

🔄 Regression Information

• This is a regression (it worked in a previous version)
• Last working version: Unknown
• First broken version: v1.0.0-rc.1

🛠️ Additional Context

Critical Impact:

• This bug completely breaks component composition, which is a core feature of the framework
• Silent failure makes it difficult to debug and can lead to incomplete UIs in production
• Affects any component that uses children components with subsequent elements

Potential Root Cause:
The issue likely stems from the template parsing or rendering logic not properly handling content after child component tags. The parser might stop template processing after encountering a child component, instead of continuing to process the remaining template content.

Workaround:
Currently, the only workaround is to avoid placing any elements after child components, which severely limits the capabilities of component composition.

Performance Impact:
While not a performance issue per se, this bug prevents proper component architecture and could force developers to use less optimal component structures.

Testing Priority:
This should be considered a P0 critical bug as it breaks fundamental framework functionality.

🔗 Related Issues

This bug affects the core component composition functionality and should be prioritized for immediate resolution.