[Feature Request] Native Re-parenting: A Zero-Reset Teleport Component
- 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