@gera2ld/jsx-dom - npm Package Compare versions

Comparing version 2.0.0-0 to 2.0.0-1

dist/index.js

@@ -1,23 +0,5 @@
-/*! @gera2ld/jsx-dom v2.0.0-0 | ISC License */
+/*! @gera2ld/jsx-dom v2.0.0-1 | ISC License */
 (function (exports) {
 'use strict';
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
 var VTYPE_ELEMENT = 1;
@@ -52,3 +34,3 @@ var VTYPE_FUNCTION = 2;
 
-  props = _extends({}, props, {
+  props = Object.assign({}, props, {
     children: children.length === 1 ? children[0] : children
@@ -77,3 +59,3 @@ });
   if (ref.type === MOUNT_SINGLE) {
-    parent.append(ref.node);
+    if (ref.node != null) parent.append(ref.node);
   } else if (ref.type === MOUNT_ARRAY) {
@@ -91,3 +73,7 @@ ref.children.forEach(function (ch) {
 
-    if (key.startsWith('on')) {
+    if (key === 'dangerouslySetInnerHTML') {
+      domElement.innerHTML = props[key].__html;
+    } else if (key === 'innerHTML' || key === 'textContent' || key === 'innerText') {
+      domElement[key] = props[key];
+    } else if (key.startsWith('on')) {
       domElement[key.toLowerCase()] = props[key];
@@ -99,4 +85,10 @@ } else {
 }
+var attrMap = {
+  className: 'class',
+  labelFor: 'for'
+};
 
 function setDOMAttribute(el, attr, value, isSVG) {
+  attr = attrMap[attr] || attr;
+
   if (value === true) {
@@ -122,2 +114,9 @@ el.setAttribute(attr, '');
 
+  if (vnode == null || typeof vnode === 'boolean') {
+    return {
+      type: MOUNT_SINGLE,
+      node: null
+    };
+  }
+
   if (isRenderFunction(vnode)) {
@@ -145,3 +144,3 @@ var _ref = vnode,
     if (!env.isSvg && _type === 'svg') {
-      env = _extends({}, env, {
+      env = Object.assign({}, env, {
         isSvg: true
@@ -164,3 +163,3 @@ });
       if (env.isSvg && _type === 'foreignObject') {
-        childEnv = _extends({}, childEnv, {
+        childEnv = Object.assign({}, childEnv, {
           isSvg: false
@@ -178,4 +177,3 @@ });
       type: MOUNT_SINGLE,
-      node: node,
-      children: childrenRef
+      node: node
     };
@@ -196,2 +194,29 @@ }
 
+function flattenWithoutNull(array) {
+  var result = [];
+
+  for (var i = 0; i < array.length; i += 1) {
+    var item = array[i];
+    if (Array.isArray(item)) result = result.concat(flattenWithoutNull(item));else if (item != null) result.push(item);
+  }
+
+  return result;
+}
+
+function asDom(result) {
+  if (result.type === MOUNT_SINGLE) {
+    return result.node;
+  }
+
+  return result.children.map(asDom);
+}
+
+function mountDom(vnode) {
+  if (Array.isArray(vnode)) {
+    return flattenWithoutNull(vnode.map(mountDom));
+  }
+
+  return asDom(mount(vnode));
+}
+
 exports.Fragment = Fragment;
@@ -202,4 +227,4 @@ exports.createElement = h;
 exports.jsxs = jsxs;
-exports.mount = mount;
+exports.mountDom = mountDom;
 
 })(this.JSX = this.JSX || {});

package.json

 {
   "name": "@gera2ld/jsx-dom",
-  "version": "2.0.0-0",
+  "version": "2.0.0-1",
   "description": "Use JSX for HTML elements.",
@@ -43,3 +43,3 @@ "author": "Gerald <[e-mail]>",
     "dev": "rollup -wc rollup.conf.js",
-    "build:types": "tsc",
+    "build:types": "tsc -p tsconfig.prod.json",
     "build:js": "rollup -c rollup.conf.js",
@@ -46,0 +46,0 @@ "build": "run-s lint test clean build:*",

README.md

@@ -18,9 +18,35 @@ # @gera2ld/jsx-dom
 ```js
-import { mount } from '@gera2ld/jsx-dom';
+import { mountDom } from '@gera2ld/jsx-dom';
 
+// Create vdom
 const vdom = <div>hello</div>;
-document.body.appendChild(mount(vdom));
+
+// Mount as DOM element
+const dom = mountDom(vdom);
+
+// Attach to document
+document.body.appendChild(dom);
 ```
 
 ```js
+// .eslintrc.js
+module.exports = {
+  plugins: [
+    // ...
+    'react',
+  ],
+  rules: {
+    // ...
+    'react/jsx-uses-react': 'error',
+  },
+};
+```
+
+You may also need [@babe/preset-react](https://babeljs.io/docs/en/babel-preset-react) to transform JSX with either automatic runtime or classic runtime. See below for Babel configuration for different runtimes, `tsconfig.json`/`jsconfig.json` is also recommended to provide better type definitions.
+
+### Automatic runtime
+
+When using automatic runtime with Babel, you don't need to import any extra helpers.
+
+```js
 // .babelrc
@@ -39,13 +65,41 @@ {
 ```js
-// .eslintrc.js
-module.exports = {
-  plugins: [
-    // ...
-    'react',
+// tsconfig.json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@gera2ld/jsx-dom",
+  }
+}
+```
+
+### Classic runtime
+
+Another option is to use classic runtime. Note that you need `import JSX from '@gera2ld/jsx-dom'` whereever JSX is used.
+
+```
+// .babelrc
+{
+  // ...
+  "presets": [
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "classic",
+        "pragma": "JSX.h",
+        "pragmaFrag": "JSX.Fragment"
+      }
+    ],
   ],
-  rules: {
-    // ...
-    'react/jsx-uses-react': 'error',
-  },
-};
+}
 ```
+
+```js
+// tsconfig.json
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "JSX.h",
+    "jsxFragmentFactory": "JSX.Fragment",
+  }
+}
+```

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22463

increased by22.98%

Lines of code

627

increased by18.08%

Number of lines in readme file

104

increased by108%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

12

decreased by-7.69%

No dependency changes