Enable Nested Component Rendering

[Jonorusc]

Currently, the framework only supports rendering a single component at a time using the following method: render(Component, mountPoint). We need to extend this functionality to allow components to be nested within each other. This would enable a more structured and modular approach to component development, similar to how modern frameworks like Vue and React handle nested components.

Requirements:

1. Allow components to render other components inside them, similar to how HTML elements can contain child elements.
2. The initial render function render(Component, mountPoint) should remain the same.
3. Support for using <component> tags in the template, enabling components to be nested within other components.
4. Ensure that nested components have access to the parent's reactive data and lifecycle hooks, where appropriate.
5. Components should be able to import and use other components, and the system should handle the lifecycle and data flow correctly.
6. The system should maintain simplicity and performance, avoiding unnecessary complexity.

Example Usage:

<component>
  <template>
    <div class="hello_world">
      <h1>Hello World</h1>
      <span>Counter: {{ count }}</span>
      <button id="incrementBtn">Increment</button>
      <button id="decrementBtn">Decrement</button>
    </div>
    <ComponentB />
  </template>

  <script>
    import ComponentB from 'path/to/ComponentB.jon';

    const { $reactive, $onMounted } = window;

    const state = $reactive({
      count: 0
    });

    $onMounted(() => {
      document.getElementById('incrementBtn').addEventListener('click', () => {
        state.count++;
      });

      document.getElementById('decrementBtn').addEventListener('click', () => {
        state.count--;
      });
    });
  </script>

  <style>
    span {
      color: blue;
    }
    button {
      margin: 5px;
      padding: 10px;
      background-color: lightblue;
      border: none;
      border-radius: 5px;
    }
  </style>
</component>

Acceptance Criteria:

1. The render(Component, mountPoint) method remains functional for rendering a single component.
2. Components can render other components inside them using a tag.
3. Nested components should be able to access the parent’s data and lifecycle hooks.
4. A clear and simple method for importing and using other components within the parent component.
5. Proper handling of component lifecycle (mounting, updating, unmounting) for nested components.
6. Documentation on how to create and use nested components.

Priority: High