diff --git a/README.md b/README.md index 7c9f715..6bc2a9f 100644 --- a/README.md +++ b/README.md @@ -121,6 +121,7 @@ patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new - [`patch`](#patch) - [Unmounting](#unmounting) - [`h`](#h) + - [`fragment`](#fragment-experimental) (experimental) - [`tovnode`](#tovnode) - [Hooks](#hooks) - [Overview](#overview) @@ -231,6 +232,27 @@ const vnode = h("div", { style: { color: "#000" } }, [ ]); ``` +### `fragment` (experimental) + +Caution: This feature is currently experimental and must be opted in. +Its API may be changed without an major version bump. + +```mjs +const patch = init(modules, undefined, { + experimental: { + fragments: true, + }, +}); +``` + +Creates a virtual node that will be converted to a document fragment containing the given children. + +```mjs +import { fragment, h } from "snabbdom"; + +const vnode = fragment(["I am", h("span", [" a", " fragment"])]); +``` + ### `tovnode` Converts a DOM node into a virtual node. Especially good for patching over an pre-existing, @@ -398,7 +420,7 @@ h("a", { class: { active: true, selected: false } }, "Toggle"); In JSX, you can use `class` like this: ```jsx -
+
// Renders as:
``` @@ -436,7 +458,7 @@ h("a", { attrs: { href: "/foo" } }, "Go to Foo"); In JSX, you can use `attrs` like this: ```jsx -
+
// Renders as:
``` @@ -492,11 +514,13 @@ h( In JSX, you can use `style` like this: ```jsx -
+
// Renders as:
```