Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork0
A standalone Preact 10+ implementation of the deprecated `replaceNode` parameter from Preact 10
License
preactjs/preact-root-fragment
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This is a standalone Preact 10+ implementation of the deprecatedreplaceNode parameter from Preact 10.
It provides a way to render or hydrate a Preact tree using a subset of the children within the parent element passed to render():
<body><divid="root"> ⬅ we pass this to render() as the parent DOM element...<scriptsrc="/etc.js"></script><divclass="app"> ⬅ ... but we want to use this tree, not the script<!-- ... --></div></div></body>
This is particularly useful forpartial hydration, which often requires rendering multiple distinct Preact trees into the same parent DOM element. Imagine the scenario below - which elements would we pass tohydrate(jsx, parent) such that each widget's<section> would get hydrated without clobbering the others?
<divid="sidebar"><sectionid="widgetA"><h1>Widget A</h1></section><sectionid="widgetB"><h1>Widget B</h1></section><sectionid="widgetC"><h1>Widget C</h1></section></div>
Preact 10 provided a somewhat obscure third argument forrender andhydrate calledreplaceNode, which could be used for the above case:
render(<A/>,sidebar,widgetA);// render into <div>, but only look at <section>render(<B/>,sidebar,widgetB);// same, but only look at widgetBrender(<C/>,sidebar,widgetC);// same, but only look at widgetC
While thereplaceNode argument proved useful for handling scenarios like the above, it was limited to a single DOM element and could not accommodate Preact trees with multiple root elements. It also didn't handle updates well when multiple trees were mounted into the same parent DOM element, which turns out to be a key usage scenario.
Going forward, we're providing this functionality as a standalone library calledpreact-root-fragment.
preact-root-fragment provides acreateRootFragment function:
createRootFragment(parent:ContainerNode,children:ContainerNode|ContainerNode[]);
Calling this function with a parent DOM element and one or more child elements returns a "Persistent Fragment". A persistent fragment is a fake DOM element, which pretends to contain the provided children while keeping them in their existing real parent element. It can be passed torender() orhydrate() instead of theparent argument.
Using the previous example, we can change the deprecatedreplaceNode usage out forcreateRootFragment:
import{createRootFragment}from'preact-root-fragment';render(<A/>,createRootFragment(sidebar,widgetA));render(<B/>,createRootFragment(sidebar,widgetB));render(<C/>,createRootFragment(sidebar,widgetC));
Since we're creating separate "Persistent Fragment" parents to pass to eachrender() call, Preact will treat each as an independent Virtual DOM tree.
Unlike thereplaceNode parameter from Preact 10,createRootFragment can accept an Array of children that will be used as the root elements when rendering. This is particularly useful when rendering a Virtual DOM tree that produces multiple root elements, such as a Fragment or an Array:
import{createRootFragment}from'preact-root-fragment';import{render}from'preact';functionApp(){return(<><h1>Example</h1><p>Hello world!</p></>);}// Use only the last two child elements within <body>:constchildren=[].slice.call(document.body.children,-2);render(<App/>,createRootFragment(document.body,children));
This library works with Preact 10 and 11.
- fix bug where nodes were appended instead of replaced (thanks @danielweck)
- fix
.__kassignment (thanks @danielweck) - fix Preact 10.6 debug error due to missing
nodeType(thanks @danielweck)
About
A standalone Preact 10+ implementation of the deprecated `replaceNode` parameter from Preact 10
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
