jsx-dom - npm Package Compare versions

Comparing version 6.4.5 to 6.4.6

lib/index.cjs.js

@@ -104,2 +104,7 @@ "use strict"
   attr = attr || {}
+
+  if (attr.children != null && !children.length) {
+    children = attr.children
+  }
+
   var node
@@ -112,3 +117,3 @@
     attributes(attr, node)
-    appendChildren(children, node)
+    appendChild(children, node)
   } else if (isFunction(tag)) {
@@ -115,0 +120,0 @@ if (isObject(tag.defaultProps)) {

lib/index.js

@@ -99,2 +99,7 @@ var __assign = Object.assign
   attr = attr || {}
+
+  if (attr.children != null && !children.length) {
+    children = attr.children
+  }
+
   var node
@@ -107,3 +112,3 @@
     attributes(attr, node)
-    appendChildren(children, node)
+    appendChild(children, node)
   } else if (isFunction(tag)) {
@@ -110,0 +115,0 @@ if (isObject(tag.defaultProps)) {

lib/svg.cjs.js

@@ -170,2 +170,6 @@ "use strict"
 
+  if (attr.children != null && !children.length) {
+    children = attr.children
+  }
+
   var node
@@ -178,3 +182,3 @@
     attributes(attr, node)
-    appendChildren(children, node)
+    appendChild(children, node)
   } else if (isFunction(tag)) {
@@ -181,0 +185,0 @@ if (isObject(tag.defaultProps)) {

lib/svg.js

@@ -165,2 +165,6 @@ var __assign = Object.assign
 
+  if (attr.children != null && !children.length) {
+    children = attr.children
+  }
+
   var node
@@ -173,3 +177,3 @@
     attributes(attr, node)
-    appendChildren(children, node)
+    appendChild(children, node)
   } else if (isFunction(tag)) {
@@ -176,0 +180,0 @@ if (isObject(tag.defaultProps)) {

package.json

 {
   "name": "jsx-dom",
-  "version": "6.4.5",
+  "version": "6.4.6",
   "description": "JSX to document.createElement.",
@@ -5,0 +5,0 @@ "main": "lib/index.cjs.js",

README.md

 # jsx-dom
+
 [![License](https://img.shields.io/badge/License-BSD%203--Clause-blue.svg)](https://opensource.org/licenses/BSD-3-Clause)
@@ -11,2 +12,3 @@ [![build status](https://travis-ci.org/proteriax/jsx-dom.svg?branch=master)](https://travis-ci.org/proteriax/jsx-dom)
 ## Installation
+
 ```bash
@@ -18,11 +20,14 @@ npm install --save jsx-dom
 ## Usage
+
 **Note:** If you previously use `h` as pragma, there is nothing you need to change.
 
 ```jsx
-import * as React from 'jsx-dom';
+import * as React from "jsx-dom"
 
 // DOM Elements.
 document.body.appendChild(
-  <div id="greeting" class="alert">Hello World</div>
-);
+  <div id="greeting" class="alert">
+    Hello World
+  </div>
+)
 
@@ -32,22 +37,25 @@ // Functional components
 function Hello(props) {
-  return <div>Hello {props.firstName}, {props.lastName}!</div>;
+  return (
+    <div>
+      Hello {props.firstName}, {props.lastName}!
+    </div>
+  )
 }
 
-document.body.appendChild(
-  <Hello firstName="Johny" lastName="Appleseed" />
-);
-
+document.body.appendChild(<Hello firstName="Johnny" lastName="Appleseed" />)
 ```
 
 ## Syntax
+
 `jsx-dom` is based on the React JSX syntax with a few additions:
 
 ### 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
+   - 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
 
@@ -64,2 +72,3 @@ 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,
 ### Style
+
 1. `style` accepts both strings and objects.
@@ -72,4 +81,14 @@
 
+### Children
+
+Passing `children` as an explicit attribute, when there is no other JSX child nodes, is also supported.
+
+```jsx
+<div children={["Total: ", 20]} />
+```
+
 ### Other Attributes
+
 1. `dataset` accepts an object, where keys with a `null` or `undefined` value will be ignored.
+
 ```jsx
@@ -80,4 +99,5 @@ <div dataset={{ user: "guest", isLoggedIn: false }} />
 2. Attributes starts with `on` and has a function value will be treated as an event listener and attached to the node with `addEventListener`.
+
 ```jsx
-<div onClick={ e => e.preventDefault() } />
+<div onClick={e => e.preventDefault()} />
 ```
@@ -91,21 +111,22 @@
 // Callback
-<input ref={ node => $(node).typehead({ hint: true }) } />
+;<input ref={node => $(node).typehead({ hint: true })} />
 
 // React.createRef
-import * as React from 'jsx-dom';
+import * as React from "jsx-dom"
 
-const textbox = React.createRef();
+const textbox = React.createRef()
 render(
   <div>
     <label>Username:</label>
-    <input ref={ textbox } />
+    <input ref={textbox} />
   </div>
-);
+)
 
 window.onerror = () => {
-  textbox.current.focus();
-};
+  textbox.current.focus()
+}
 ```
 
 ### Functional components
+
 You can write functional components and receive passed `props` in the same way in React. Unlike
@@ -115,2 +136,3 @@ React, `props.children` is guaranteed to be an array.
 ### SVG and Namespaces
+
 A custom build with a list of commonly used SVG tags is included.
@@ -120,6 +142,6 @@
 // Use 'jsx-dom/svg';
-import * as React from 'jsx-dom/svg';
+import * as React from "jsx-dom/svg"
 
 document.body.appendChild(
-  <div class="flag" style={{ display: 'flex' }}>
+  <div class="flag" style={{ display: "flex" }}>
     <h1>Flag of Italy</h1>
@@ -132,6 +154,7 @@ <svg width="150" height="100" viewBox="0 0 3 2" class="flag italy">
   </div>
-);
+)
 ```
 
 Below is a list of SVG tags included.
+
 > svg, animate, circle, clipPath, defs, desc, ellipse, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, filter, foreignObject, g, image, line, linearGradient, marker, mask, metadata, path, pattern, polygon, polyline, radialGradient, rect, stop, switch, symbol, text, textPath, tspan, use, view
@@ -142,8 +165,8 @@
 ```jsx
-import * as React from 'jsx-dom';
-
-<a namespaceURI={ React.SVGNamespace }>I am an SVG element!</a>
+import * as React from "jsx-dom"
+;<a namespaceURI={React.SVGNamespace}>I am an SVG element!</a>
 ```
 
 ## Goodies
+
 Two extra functions and one constant are provided by this package:
@@ -156,2 +179,3 @@
 ## Browser Support
+
 There is no support for Internet Explorer.
@@ -161,3 +185,3 @@
 
-`<div />`, and other tags, are inferred as a general `JSX.Element` in TypeScript instead of 
+`<div />`, and other tags, are inferred as a general `JSX.Element` in TypeScript instead of
 `HTMLDivElement` (or the equivalents). This is a known bug and its fix depends on [TypeScript#21699](https://github.com/Microsoft/TypeScript/issues/21699).

No alert changes

Improved metrics

Total package byte prevSize

256140

increased by0.2%

Lines of code

3291

increased by0.37%

Number of lines in readme file

175

increased by15.89%

No dependency changes