DioxusLabs / DioxusLabs/dioxus

Support Externally Managed Nodes

Open
#4,520 1 comment 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
Rust
Stars
39.1k
Forks
1.9k
Avg merge
4d 10h
Merged PRs (30d)
4

Description

## Feature Request

Dioxus needs a way for external nodes to live outside the template diffing engine. The use case for this is nodes that are managed by external js libraries. Currently, if any nodes are manipulated by js and the template structure changes, these are overwritten. An example of this is using [epub.js](https://github.com/futurepress/epub.js/). `epub.js` renders the book (iframe) to a target element with a provided id. Experiments show that if the tree structure changes, externally managed and inserted iframe is removed and even work around for re-applying the changes after render do not work since the iframe state is dropped, as well as performance considerations.

## Implement Suggestion

Functionally, I propose adding a new block to rsx

```rust
ExternalDiv {
id: “id”,
fallback: “

external html

}
```

Dioxus needs to keep track of these “external nodes”. These nodes should be ignored when applying a normal diff (never overwritten or first placed). Then after the diff, the [moveBefore](https://developer.mozilla.org/en-US/docs/Web/API/Element/moveBefore) api should be used to move the element to the new position in the tree (Note this new dom api does not recreate elements like `insertBefore` does). If a node in the tree does not already have the same `id`, then `fallback` is used to create the node.

Related to: https://github.com/DioxusLabs/dioxus/issues/628

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.