jsx-dom - npm Package Compare versions

Comparing version 6.2.1 to 6.3.0

CHANGELOG.md

@@ -0,1 +1,4 @@
+# 6.3.0
+- Adds `defaultProps` support to functional componants.
+
 # 6.1.0
@@ -2,0 +5,0 @@ - Adds JSX.Fragment support.

lib/index.cjs.js

@@ -117,2 +117,6 @@ "use strict";
     // Custom elements.
+    if (isObject(tag.defaultProps)) {
+      attr = tslib_1.__assign({}, tag.defaultProps, attr);
+    }
+
     node = tag(
@@ -157,2 +161,6 @@ tslib_1.__assign({}, attr, {
   switch (key) {
+    case "htmlFor":
+      node.setAttribute("for", value);
+      return;
+
     case "dataset":
@@ -159,0 +167,0 @@ for (var _i = 0, _a = keys(value || {}); _i < _a.length; _i++) {

lib/index.js

@@ -110,2 +110,6 @@ import { __assign } from "tslib";
     // Custom elements.
+    if (isObject(tag.defaultProps)) {
+      attr = __assign({}, tag.defaultProps, attr);
+    }
+
     node = tag(
@@ -150,2 +154,6 @@ __assign({}, attr, {
   switch (key) {
+    case "htmlFor":
+      node.setAttribute("for", value);
+      return;
+
     case "dataset":
@@ -152,0 +160,0 @@ for (var _i = 0, _a = keys(value || {}); _i < _a.length; _i++) {

lib/svg.cjs.js

@@ -183,2 +183,6 @@ "use strict";
     // Custom elements.
+    if (isObject(tag.defaultProps)) {
+      attr = tslib_1.__assign({}, tag.defaultProps, attr);
+    }
+
     node = tag(
@@ -253,2 +257,6 @@ tslib_1.__assign({}, attr, {
   switch (key) {
+    case "htmlFor":
+      node.setAttribute("for", value);
+      return;
+
     case "dataset":
@@ -255,0 +263,0 @@ for (var _i = 0, _a = keys(value || {}); _i < _a.length; _i++) {

lib/svg.js

@@ -176,2 +176,6 @@ import { __assign } from "tslib";
     // Custom elements.
+    if (isObject(tag.defaultProps)) {
+      attr = __assign({}, tag.defaultProps, attr);
+    }
+
     node = tag(
@@ -246,2 +250,6 @@ __assign({}, attr, {
   switch (key) {
+    case "htmlFor":
+      node.setAttribute("for", value);
+      return;
+
     case "dataset":
@@ -248,0 +256,0 @@ for (var _i = 0, _a = keys(value || {}); _i < _a.length; _i++) {

package.json

 {
   "name": "jsx-dom",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "description": "JSX to document.createElement.",
@@ -21,20 +21,22 @@ "main": "lib/index.cjs.js",
   "devDependencies": {
-    "@babel/core": "^7.1.2",
-    "@types/babel__core": "^7.0.1",
-    "@types/chai": "^4.1.6",
-    "@types/jsdom": "^12.2.0",
-    "@types/mocha": "^5.2.5",
-    "@types/node": "^10.12.0",
+    "@babel/core": "^7.3.3",
+    "@types/babel__core": "^7.0.5",
+    "@types/chai": "^4.1.7",
+    "@types/jsdom": "^12.2.2",
+    "@types/mocha": "^5.2.6",
+    "@types/node": "^11.9.4",
+    "@types/prop-types": "^15.5.9",
     "babel-preset-minify": "^0.5.0",
     "chai": "^4.2.0",
     "coffeescript": "^2.3.2",
-    "jsdom": "^12.2.0",
-    "mocha": "^5.2.0",
-    "nyc": "^13.1.0",
-    "rollup": "^0.66.6",
-    "rollup-plugin-prettier": "^0.4.0",
+    "fs-extra": "^7.0.1",
+    "jsdom": "^13.2.0",
+    "mocha": "^6.0.0",
+    "nyc": "^13.3.0",
+    "rollup": "^1.2.2",
+    "rollup-plugin-prettier": "^0.6.0",
     "rollup-plugin-replace": "^2.1.0",
     "rollup-typescript": "^1.2.0",
-    "ts-node": "^7.0.1",
-    "typescript": "^3.1.3"
+    "ts-node": "^8.0.2",
+    "typescript": "^3.3.3"
   },
@@ -50,4 +52,5 @@ "repository": {
   "dependencies": {
+    "csstype": "^2.6.2",
     "tslib": "^1.9.3"
   }
 }

README.md

@@ -17,36 +17,24 @@ # jsx-dom
 ## Usage
+**Note:** If you previously use `h` as pragma, there is nothing you need to change.
+
 ```jsx
-import { h } from 'jsx-dom';
+import * as React from 'jsx-dom';
 
+// DOM Elements.
 document.body.appendChild(
   <div id="greeting" class="alert">Hello World</div>
 );
-```
 
-**Note:** If you need `JSX.Fragment` support, you must `import` the entire library as `React` namespace.
+// Functional components
+// `defaultProps` and `props.children` are supported natively and work as you expected.
+function Hello(props) {
+  return <div>Hello {props.firstName}, {props.lastName}!</div>;
+}
 
-Optionally, we recommend you to tell your transpiler to use the name `h` because it is shorter. If you prefer not to, or you need to use JSX.Fragment, [skip to the next section for instructions](#wildcard-import). For Babel users, specify within your `.babelrc`:
+document.body.appendChild(
+  <Hello firstName="Johny" lastName="Appleseed" />
+);
 
-```js
-"plugins": [
-  ["transform-react-jsx", {"pragma": "h"}]
-]
 ```
 
-Or if you prefer to work with TypeScript:
-
-```js
-// In tsconfig.json:
-"jsx": "react",
-"jsxFactory": "h",
-```
-
-### <a name="wildcard-import"></a>Usage without `.babelrc` or `tsconfig` options
-
-Simply import it using the `React` namespace:
-
-```js
-import * as React from 'jsx-dom';
-```
-
 ## Syntax
@@ -101,5 +89,5 @@ `jsx-dom` is based on the React JSX syntax with a few additions:
 // React.createRef
-import { createRef, h } from 'jsx-dom';
+import * as React from 'jsx-dom';
 
-const textbox = createRef();
+const textbox = React.createRef();
 render(
@@ -117,2 +105,6 @@ <div>
 
+### Functional components
+You can write functional components and receive passed `props` in the same way in React. Unlike
+React, `props.children` is guaranteed to be an array.
+
 ### SVG and Namespaces
@@ -123,5 +115,5 @@ A custom build with a list of commonly used SVG tags is included.
 // Use 'jsx-dom/svg';
-import { h } from 'jsx-dom/svg';
+import * as React from 'jsx-dom/svg';
 // Or if you prefer Common JS
-const { h } = require('jsx-dom/svg.cjs');
+const React = require('jsx-dom/svg.cjs');
 
@@ -146,5 +138,5 @@ document.body.appendChild(
 ```jsx
-import { h, SVGNamespace } from 'jsx-dom';
+import * as React from 'jsx-dom';
 
-<a namespaceURI={SVGNamespace}>I am an SVG element!</a>
+<a namespaceURI={ React.SVGNamespace }>I am an SVG element!</a>
 ```
@@ -151,0 +143,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

130427

increased by0.55%

Lines of code

3236

increased by0.75%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

20

increased by11.11%

Number of lines in readme file

153

decreased by-4.97%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedcsstype@^2.6.2

• + Addedcsstype@2.6.21(transitive)