@gera2ld/jsx-dom - npm Package Compare versions

Comparing version 1.2.1 to 2.0.0-0

dist/index.js

@@ -1,53 +0,48 @@
-/*! @gera2ld/jsx-dom v1.2.1 | ISC License */
+/*! @gera2ld/jsx-dom v2.0.0-0 | ISC License */
 (function (exports) {
 'use strict';
 
-var propRules = ['innerHTML', 'innerText', 'textContent', {
-  key: 'value',
-  tag: 'textarea'
-}];
-var Fragment = {
-  name: 'Fragment'
-};
-function createElement(tag, props) {
-  var result;
-  var ref;
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-  if (tag === Fragment) {
-    result = document.createDocumentFragment();
-  } else if (typeof tag !== 'string') {
-    throw new Error("Invalid element type: " + tag);
-  } else {
-    var _el = createElement.createElement(tag);
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-    result = _el;
+    return target;
+  };
 
-    if (props) {
-      Object.keys(props).forEach(function (key) {
-        var value = props[key];
-        if (value == null) return;
+  return _extends.apply(this, arguments);
+}
 
-        if (key.startsWith('on')) {
-          _el.addEventListener(key.slice(2).toLowerCase(), value);
-        } else if (key === 'children') {
-          renderChildren(_el, value);
-        } else if (key === 'style' && typeof value === 'object') {
-          renderStyle(_el, value);
-        } else if (key === 'dangerouslySetInnerHTML' && value) {
-          _el.innerHTML = value.__html || ''; // eslint-disable-line no-underscore-dangle
-        } else if (key === 'ref' && typeof value === 'function') {
-          ref = value;
-        } else if (typeof value === 'boolean') {
-          if (value) _el.setAttribute(key, key);else _el.removeAttribute(key);
-        } else if (isProp(tag, key)) {
-          _el[key] = value;
-        } else {
-          if (key === 'className') key = 'class';else if (key === 'labelFor') key = 'for';
+var VTYPE_ELEMENT = 1;
+var VTYPE_FUNCTION = 2;
+var MOUNT_SINGLE = 1;
+var MOUNT_ARRAY = 4;
+var SVG_NS = 'http://www.w3.org/2000/svg';
+var XLINK_NS = 'http://www.w3.org/1999/xlink';
+var NS_ATTRS = {
+  show: XLINK_NS,
+  actuate: XLINK_NS,
+  href: XLINK_NS
+};
 
-          _el.setAttribute(key, "" + value);
-        }
-      });
-    }
-  }
-
+var isNonEmptyArray = function isNonEmptyArray(c) {
+  return Array.isArray(c) && c.length > 0;
+};
+var isLeaf = function isLeaf(c) {
+  return typeof c === 'string' || typeof c === 'number';
+};
+var isElement = function isElement(c) {
+  return (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT;
+};
+var isRenderFunction = function isRenderFunction(c) {
+  return (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION;
+};
+function h(type, props) {
   for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
@@ -57,51 +52,145 @@ children[_key - 2] = arguments[_key];
 
-  renderChildren(result, children);
-  if (ref) ref(result);
-  return result;
+  props = _extends({}, props, {
+    children: children.length === 1 ? children[0] : children
+  });
+  return jsx(type, props);
 }
+function jsx(type, props) {
+  var vtype;
+  if (typeof type === 'string') vtype = VTYPE_ELEMENT;else if (typeof type === 'function') vtype = VTYPE_FUNCTION;else throw new Error('Invalid VNode type');
+  return {
+    vtype: vtype,
+    type: type,
+    props: props
+  };
+}
+var jsxs = jsx;
+function Fragment(props) {
+  return props.children;
+}
 
-createElement.createElement = function (tag) {
-  return document.createElement(tag);
+var DEFAULT_ENV = {
+  isSvg: false
 };
-
-function isProp(tag, key) {
-  var ctx = {
-    tag: tag,
-    key: key
-  };
-  return propRules.some(function (rule) {
-    if (typeof rule === 'string') return key === rule;
-    return Object.keys(rule).every(function (rk) {
-      return rule[rk] === ctx[rk];
+function insertDom(parent, ref) {
+  if (ref.type === MOUNT_SINGLE) {
+    parent.append(ref.node);
+  } else if (ref.type === MOUNT_ARRAY) {
+    ref.children.forEach(function (ch) {
+      insertDom(parent, ch);
     });
-  });
+  } else {
+    throw new Error("Unkown ref type " + JSON.stringify(ref));
+  }
 }
+function mountAttributes(domElement, props, env) {
+  for (var key in props) {
+    if (key === 'key' || key === 'children' || key === 'ref') continue;
 
-function renderChildren(el, children) {
-  children.forEach(function (child) {
-    if (child == null || child === false) return;
-
-    if (Array.isArray(child)) {
-      renderChildren(el, child);
-      return;
+    if (key.startsWith('on')) {
+      domElement[key.toLowerCase()] = props[key];
+    } else {
+      setDOMAttribute(domElement, key, props[key], env.isSvg);
     }
+  }
+}
 
-    if (typeof child !== 'object') {
-      el.appendChild(document.createTextNode("" + child));
+function setDOMAttribute(el, attr, value, isSVG) {
+  if (value === true) {
+    el.setAttribute(attr, '');
+  } else if (value === false) {
+    el.removeAttribute(attr);
+  } else {
+    var namespace = isSVG ? NS_ATTRS[attr] : undefined;
+
+    if (namespace !== undefined) {
+      el.setAttributeNS(namespace, attr, value);
     } else {
-      el.appendChild(child);
+      el.setAttribute(attr, value);
     }
-  });
+  }
 }
 
-function renderStyle(el, style) {
-  Object.keys(style).forEach(function (key) {
-    var value = style[key];
-    if (typeof value === 'number') el.style[key] = value + "px";else el.style[key] = value;
-  });
+function mount(vnode, env) {
+  if (env === void 0) {
+    env = DEFAULT_ENV;
+  }
+
+  if (isRenderFunction(vnode)) {
+    var _ref = vnode,
+        type = _ref.type,
+        props = _ref.props;
+    var childVNode = type(props);
+    return mount(childVNode, env);
+  }
+
+  if (isLeaf(vnode)) {
+    return {
+      type: MOUNT_SINGLE,
+      node: document.createTextNode("" + vnode)
+    };
+  }
+
+  if (isElement(vnode)) {
+    var node;
+    var _ref2 = vnode,
+        _type = _ref2.type,
+        _props = _ref2.props;
+
+    if (!env.isSvg && _type === 'svg') {
+      env = _extends({}, env, {
+        isSvg: true
+      });
+    }
+
+    if (!env.isSvg) {
+      node = document.createElement(_type);
+    } else {
+      node = document.createElementNS(SVG_NS, _type);
+    }
+
+    mountAttributes(node, _props, env);
+    var childrenRef;
+
+    if (_props.children) {
+      var childEnv = env;
+
+      if (env.isSvg && _type === 'foreignObject') {
+        childEnv = _extends({}, childEnv, {
+          isSvg: false
+        });
+      }
+
+      childrenRef = mount(_props.children, childEnv);
+    }
+
+    if (childrenRef != null) insertDom(node, childrenRef);
+    var ref = _props.ref;
+    if (typeof ref === 'function') ref(node);
+    return {
+      type: MOUNT_SINGLE,
+      node: node,
+      children: childrenRef
+    };
+  }
+
+  if (isNonEmptyArray(vnode)) {
+    return {
+      type: MOUNT_ARRAY,
+      children: vnode.map(function (child) {
+        return mount(child, env);
+      })
+    };
+  }
+
+  throw new Error('mount: Invalid Vnode!');
 }
 
 exports.Fragment = Fragment;
-exports.createElement = createElement;
+exports.createElement = h;
+exports.h = h;
+exports.jsx = jsx;
+exports.jsxs = jsxs;
+exports.mount = mount;
 
-}(this.JSX = this.JSX || {}));
+})(this.JSX = this.JSX || {});

package.json

 {
   "name": "@gera2ld/jsx-dom",
-  "version": "1.2.1",
+  "version": "2.0.0-0",
   "description": "Use JSX for HTML elements.",
   "author": "Gerald <[e-mail]>",
   "license": "ISC",
-  "husky": {
-    "hooks": {
-      "pre-push": "npm run lint"
-    }
-  },
-  "scripts": {
-    "dev": "rollup -wc rollup.conf.js",
-    "prebuild": "npm run ci && npm run clean",
-    "build": "tsc && npm run build:js",
-    "lint": "eslint --ext .ts .",
-    "prepublishOnly": "npm run build",
-    "ci": "npm run lint",
-    "clean": "del dist types",
-    "build:js": "rollup -c rollup.conf.js"
-  },
   "keywords": [
@@ -34,18 +19,33 @@ "jsx",
   },
-  "main": "dist/index.common.js",
-  "module": "dist/index.esm.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
   "files": [
     "dist",
-    "types"
+    "types",
+    "jsx-runtime.js"
   ],
   "devDependencies": {
-    "@gera2ld/plaid": "~2.0.7",
-    "@gera2ld/plaid-common-ts": "~2.1.2",
-    "@gera2ld/plaid-rollup": "~2.1.1",
-    "del-cli": "^3.0.1",
-    "husky": "^4.3.0"
+    "@babel/preset-react": "^7.16.0",
+    "@gera2ld/plaid": "~2.4.0",
+    "@gera2ld/plaid-common-ts": "~2.4.0",
+    "@gera2ld/plaid-rollup": "~2.4.0",
+    "@gera2ld/plaid-test": "^2.4.0",
+    "del-cli": "^4.0.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "husky": "^7.0.4",
+    "prettier": "^2.4.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.11.2"
+    "@babel/runtime": "^7.16.0"
+  },
+  "scripts": {
+    "dev": "rollup -wc rollup.conf.js",
+    "build:types": "tsc",
+    "build:js": "rollup -c rollup.conf.js",
+    "build": "run-s lint test clean build:*",
+    "lint": "eslint --ext .ts,.tsx .",
+    "clean": "del-cli dist types",
+    "test": "cross-env BABEL_ENV=test jest test"
   }
-}
+}

README.md

@@ -7,3 +7,3 @@ # @gera2ld/jsx-dom
 
-Use JSX for HTML elements.
+Use JSX for HTML/SVG elements.
 
@@ -19,5 +19,6 @@ ## Usage
 ```js
-import React from '@gera2ld/jsx-dom';
+import { mount } from '@gera2ld/jsx-dom';
 
-document.body.appendChild(<div>hello</div>);
+const vdom = <div>hello</div>;
+document.body.appendChild(mount(vdom));
 ```
@@ -29,4 +30,7 @@
   // ...
-  "plugins": [
-    "@babel/plugin-transform-react-jsx",
+  "presets": [
+    [
+      "@babel/preset-react",
+      { "runtime": "automatic", "importSource": "@gera2ld/jsx-dom" }
+    ]
   ],
@@ -33,0 +37,0 @@ }

New 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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18266

increased by52.06%

Number of package files

13

increased by85.71%

Lines of code

531

increased by89.64%

Number of lines in readme file

50

increased by8.7%

Worsened metrics

Dev dependency count

10

increased by100%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@babel/runtime@^7.16.0