jsx-dom - npm Package Compare versions

Comparing version 6.1.1 to 6.2.1

package.json

 {
   "name": "jsx-dom",
-  "version": "6.1.1",
+  "version": "6.2.1",
   "description": "JSX to document.createElement.",
-  "main": "index.cjs.js",
-  "jsnext:main": "index.js",
-  "module": "index.js",
+  "main": "lib/index.cjs.js",
+  "jsnext:main": "lib/index.js",
+  "module": "lib/index.js",
   "scripts": {
     "build": "cake build",
     "pretest": "npm run build",
-    "postpublish": "rm index.js index.cjs.js svg.js svg.cjs.js",
-    "test": "nyc --reporter=html mocha ./test/test.tsx --require ts-node/register"
+    "postpublish": "rm lib/*.js",
+    "test": "nyc --reporter=html mocha test/test.tsx --require test/register"
   },
@@ -21,20 +21,20 @@ "keywords": [
   "devDependencies": {
-    "@alexlur/rollup-plugin-typescript": "^1.0.4",
-    "@types/babel-core": "^6.25.3",
-    "@types/chai": "^4.1.2",
-    "@types/jsdom": "^11.0.4",
-    "@types/mocha": "^2.2.48",
-    "@types/node": "^9.4.6",
-    "babel-core": "^6.26.0",
-    "babel-preset-minify": "^0.3.0",
-    "chai": "^4.1.2",
-    "coffeescript": "^2.2.2",
-    "jsdom": "^11.6.2",
-    "mocha": "^5.0.2",
-    "nyc": "^11.4.1",
-    "rollup": "^0.56.4",
+    "@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-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",
-    "rollup-plugin-replace": "^2.0.0",
-    "ts-node": "^5.0.1",
-    "typescript": "^2.7.2"
+    "rollup-plugin-replace": "^2.1.0",
+    "rollup-typescript": "^1.2.0",
+    "ts-node": "^7.0.1",
+    "typescript": "^3.1.3"
   },
@@ -50,4 +50,4 @@ "repository": {
   "dependencies": {
-    "tslib": "^1.9.0"
+    "tslib": "^1.9.3"
   }
 }

README.md

@@ -7,3 +7,3 @@ # jsx-dom
 [![npm version](https://badge.fury.io/js/jsx-dom.svg)](https://badge.fury.io/js/jsx-dom)
-![current status](https://img.shields.io/badge/looking%20for-a%20job-blue.svg)
+![big mood](https://img.shields.io/badge/kirito-eugeo-blue.svg)
 
@@ -26,5 +26,5 @@ Use JSX for creating DOM elements.
 
-**Note:** If you need JSX.Fragment support in TypeScript, you must `import` the entire library as `React` namespace because of TypeScript restrictions.
+**Note:** If you need `JSX.Fragment` support, you must `import` the entire library as `React` namespace.
 
-You need to tell your transpiler to use the name `h`. If you prefer not to, or you need to use JSX.Fragment, skip to the next section for instructions. For Babel users, specify within your `.babelrc`:
+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`:
 
@@ -45,6 +45,5 @@ ```js
 
-### Usage without `.babelrc` or `tsconfig` options
+### <a name="wildcard-import"></a>Usage without `.babelrc` or `tsconfig` options
 
-If you don’t want to configure your transpiler to use `jsx-dom`, simply import it using 
-the React namespace:
+Simply import it using the `React` namespace:
 
@@ -86,6 +85,35 @@ ```js
 1. `dataset` accepts an object, where keys with a `null` or `undefined` value will be ignored.
+```jsx
+<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() } />
+```
+
 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.
 
+4. `ref` accepts either 1) a callback `(node: Element) => void` that allows access to the node after being created, or 2) a [React style `ref` object](https://reactjs.org/docs/react-api.html#reactcreateref). This is useful when you have a nested node tree and need to access a node inside without creating an intermediary variable.
+
+```jsx
+// Callback
+<input ref={ node => $(node).typehead({ hint: true }) } />
+
+// React.createRef
+import { createRef, h } from 'jsx-dom';
+
+const textbox = createRef();
+render(
+  <div>
+    <label>Username:</label>
+    <input ref={ textbox } />
+  </div>
+);
+
+window.onerror = () => {
+  textbox.current.focus();
+};
+```
+
 ### SVG and Namespaces
@@ -92,0 +120,0 @@ A custom build with a list of commonly used SVG tags is included.

tslint.json

@@ -9,2 +9,3 @@ {
     "arrow-parens": false,
+    "interface-name": false,
     "no-console": false,
@@ -11,0 +12,0 @@ "no-trailing-whitespace": true,

No alert changes

Improved metrics

Total package byte prevSize

129720

increased by1.55%

Lines of code

3212

increased by2.2%

Number of lines in readme file

161

increased by21.05%

Dependency changes

• Updatedtslib@^1.9.3