dashersw / dashersw/gea

[Feature Request] Native Re-parenting: A Zero-Reset Teleport Component

Open
#4 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.2k
Forks
47
PR merge metrics
No merged PRs in 30d

Description

### 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 ``, ``, 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:
```jsx
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!

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reading packages/core and tracing how the Vite plugin tags JSX blocks and how the renderer attaches DOM nodes. The issue does not name specific files or tests, so first clarify the Teleport API and acceptance criteria; done should include reactive target changes that move the existing subtree without losing its state.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.