jsx-dom - npm Package Compare versions

Comparing version 5.1.1 to 5.1.2

index.cjs.js

@@ -173,2 +173,4 @@ 'use strict';
                 continue;
+            case 'spellCheck':
+                node.spellcheck = value;
             case 'class':
@@ -175,0 +177,0 @@ case 'className':

index.js

@@ -171,2 +171,4 @@
                 continue;
+            case 'spellCheck':
+                node.spellcheck = value;
             case 'class':
@@ -173,0 +175,0 @@ case 'className':

package.json

 {
   "name": "jsx-dom",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "JSX to document.createElement.",
@@ -5,0 +5,0 @@ "main": "index.cjs.js",

README.md

@@ -24,3 +24,3 @@ # jsx-dom
 "plugins": [
-  [ "transform-react-jsx", { "pragma": "createElement" } ]
+  ["transform-react-jsx", {"pragma": "createElement"}]
 ]
@@ -50,14 +50,32 @@ ```
 ### Class
-1. `class` is supported as an attribute as well as `className`
-2. `class` can take an object with the format `{ [key: string]: boolean }`. Keys with a truthy value will be added to the classList.
-2. `class` can also take an array of values: 
-Note that `false`, `true`, `null`, `undefined` will be ignored per [React documentations](https://facebook.github.io/react/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored), and everything else will be used. As an example: `<div class={[ condition && "class" ]} />`;
+1. `class` is supported as an attribute as well as `className`.
+2. `class` can take:
 
+   * a string
+   * an object with the format `{ [key: string]: boolean }`. Keys with a truthy value will be added to the classList
+   * an array of values where falsy values (see below) are filtered out
+   * an array of any combination of the above
+
+Note that `false`, `true`, `null`, `undefined` will be ignored per [React documentations](https://facebook.github.io/react/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored), and everything else will be used. For example,
+
+```jsx
+<div class="greeting" />
+<div class={[ condition && "class" ]} />
+<div class={{ hidden: isHidden, 'has-item': this.array.length > 0 }} />
+<div class={[ classArray1, classArray2, ['nested'] ]} />
+```
+
 ### Style
 1. `style` accepts both strings and objects.
 
+```jsx
+<div style="background: transparent;" />
+<div style={{ background: 'transparent', fontFamily: 'serif' }} />
+```
+
 ### Other Attributes
 1. `dataset` accepts an object.
-2. Attributes starts with `on` and has a function value will be treated as an event listener and thus attached to the node.
+2. Attributes starts with `on` and has a function value will be treated as an event listener and attached to the node with `addEventListener`.
 3. `innerHTML`, `innerText` and `textContent` are accepted.
+4. `ref` accepts a callback `(node: Element) => void` that allows access to the node after being created. This is useful when you have a nested node tree and need to access a node inside without creating an intermediary variable.
 
@@ -64,0 +82,0 @@ ### SVG and Namespaces

svg.cjs.js

@@ -173,2 +173,4 @@ 'use strict';
                 continue;
+            case 'spellCheck':
+                node.spellcheck = value;
             case 'class':
@@ -175,0 +177,0 @@ case 'className':

svg.js

@@ -171,2 +171,4 @@
                 continue;
+            case 'spellCheck':
+                node.spellcheck = value;
             case 'class':
@@ -173,0 +175,0 @@ case 'className':

No alert changes

Improved metrics

Total package byte prevSize

129888

increased by0.8%

Lines of code

3215

increased by0.25%

Number of lines in readme file

121

increased by17.48%

No dependency changes