From 63822b477a21369e8f13942fd77cc26f643760f6 Mon Sep 17 00:00:00 2001
From: George Treviranus <3946669+geotrev@users.noreply.github.com>
Date: Wed, 26 May 2021 09:55:31 -0700
Subject: [PATCH] docs: add additional JSX usage information

- adds JSX examples to module sections
- removes file extension requirement in babel config section
---
 README.md | 38 ++++++++++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 5fda93a..2ac9553 100644
--- a/README.md
+++ b/README.md
@@ -382,7 +382,7 @@ modules.
 
 ## Modules documentation
 
-This describes the core modules. All modules are optional.
+This describes the core modules. All modules are optional. JSX examples assume you're using the [`jsx` pragma](#jsx) provided by this library.
 
 ### The class module
 
@@ -395,6 +395,13 @@ not the class should stay or go on the vnode.
 h("a", { class: { active: true, selected: false } }, "Toggle");
 ```
 
+In JSX, you can use the `class` key.
+
+```jsx
+<div class={{ "foo": true, "bar": true }} />
+// Renders as: <div class="foo bar"></div>
+```
+
 ### The props module
 
 Allows you to set properties on DOM elements.
@@ -403,6 +410,13 @@ Allows you to set properties on DOM elements.
 h("a", { props: { href: "/foo" } }, "Go to Foo");
 ```
 
+In JSX, you can use the `props` key.
+
+```jsx
+<input props={{ name: "foo" }} />
+// Renders as: <input name="foo" /> with input.name === "foo"
+```
+
 Properties can only be set. Not removed. Even though browsers allow addition and
 deletion of custom properties, deletion will not be attempted by this module.
 This makes sense, because native DOM properties cannot be removed. And
@@ -419,6 +433,13 @@ Same as props, but set attributes instead of properties on DOM elements.
 h("a", { attrs: { href: "/foo" } }, "Go to Foo");
 ```
 
+In JSX, you can use the `attrs` key.
+
+```jsx
+<div attrs={{ 'aria-label': "I'm a div" }} />
+// Renders as: <div aria-label="I'm a div"></div>
+```
+
 Attributes are added and updated using `setAttribute`. In case of an
 attribute that had been previously added/set and is no longer present
 in the `attrs` object, it is removed from the DOM element's attribute
@@ -442,6 +463,13 @@ Allows you to set custom data attributes (`data-*`) on DOM elements. These can t
 h("button", { dataset: { action: "reset" } }, "Reset");
 ```
 
+In JSX, you can use the `dataset` key.
+
+```jsx
+<div dataset={{ foo: "bar" }} />
+// Renders as: <div data-foo="bar"></div>
+```
+
 ### The style module
 
 The style module is for making your HTML look slick and animate smoothly. At
@@ -586,7 +614,7 @@ express that by supplying an array at the named event property. The
 first element in the array should be a function that will be invoked
 with the value in the second element once the event occurs.
 
-```mjs
+```mjse
 function clickHandler(number) {
   console.log("button " + number + " was clicked!");
 }
@@ -790,14 +818,14 @@ Add the following options to your babel configuration:
 }
 ```
 
-Then make sure that you use the `.jsx` file extension and import the `jsx` function at the top of the file:
+Then import the `jsx` function at the top of the file:
 
 ```jsx
 import { jsx } from "snabbdom";
 
 const node = (
   <div>
-    <span>I was created with JSX</span>
+    <span>I was created with JSX.</span>
   </div>
 );
 ```
@@ -838,8 +866,6 @@ For example `h('div', {props: {className: 'container'}}, [...])` will produce a
 });
 ```
 
-as its `.data` object.
-
 ### children : Array<vnode>
 
 The `.children` property of a virtual node is the third (optional)