Description

I’ve been digging into GEA’s core and its "Surgical Patching" logic. One thing that’s currently missing is a native way to render components outside their parent’s DOM hierarchy (Portals/Teleport) without losing their internal state or triggering a full re-mount.

Since GEA doesn't use a Virtual DOM, we have a massive advantage here: True DOM Node Re-parenting.

The Idea

I want to propose a Teleport component (or a core utility) that allows moving a DOM subtree to a different target (e.g., document.body for modals or a sidebar slot for mini-players) simply by updating a reactive property.

Why this is "The GEA Way":

1. Zero State Loss: Unlike VDOM frameworks (React/Vue) that often unmount/remount when portal targets change, GEA can simply use Node.appendChild() to move the actual DOM node. This keeps <video>, <iframe>, or complex forms alive and untouched.
2. Reactive Targets: By making the to prop reactive via GEA’s Proxy system, we can "teleport" elements dynamically as the application state changes.
3. Surgical Precision: It fits perfectly with the "no-diffing" philosophy. It’s a literal surgical move of a DOM node.

Proposed Usage:

export default class App extends Component {
  target = '#main-content'

  template() {
    return (
      <div>
        <div id="main-content"></div>
        
        <Teleport to={this.target}>
          <MyComplexComponent />
        </Teleport>

        <div id="sidebar-slot"></div>
        
        <button click={() => this.target = '#sidebar-slot'}>
          Teleport to Sidebar
        </button>
      </div>
    )
  }
}

Implementation Strategy:

I’m planning to look into packages/core to see how the Vite plugin can tag these blocks and how the renderer can handle the node detachment/attachment.

I’d love to contribute this feature to the ecosystem. What do you think about the direction? If it aligns with the roadmap, I’m ready to start working on a PR!