@gera2ld/jsx-dom - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

dist/index.js

@@ -1,12 +0,10 @@
-/*! @gera2ld/jsx-dom v2.1.1 | ISC License */
+/*! @gera2ld/jsx-dom v2.2.0 | ISC License */
 (function (exports) {
 'use strict';
 
-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 = {
+const VTYPE_ELEMENT = 1;
+const VTYPE_FUNCTION = 2;
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
+const NS_ATTRS = {
   show: XLINK_NS,
@@ -17,11 +15,5 @@ actuate: XLINK_NS,
 
-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;
-};
+const isLeaf = c => typeof c === 'string' || typeof c === 'number';
+const isElement = c => (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT;
+const isRenderFunction = c => (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION;
 function h(type, props) {
@@ -38,11 +30,11 @@ for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
 function jsx(type, props) {
-  var vtype;
+  let 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
+    vtype,
+    type,
+    props
   };
 }
-var jsxs = jsx;
+const jsxs = jsx;
 function Fragment(props) {
@@ -52,18 +44,12 @@ return props.children;
 
-var DEFAULT_ENV = {
+const DEFAULT_ENV = {
   isSvg: false
 };
-function insertDom(parent, ref) {
-  if (ref.type === MOUNT_SINGLE) {
-    if (ref.node != null) 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 insertDom(parent, nodes) {
+  if (!Array.isArray(nodes)) nodes = [nodes];
+  nodes = nodes.filter(Boolean);
+  if (nodes.length) parent.append(...nodes);
 }
 function mountAttributes(domElement, props, env) {
-  for (var key in props) {
+  for (const key in props) {
     if (key === 'key' || key === 'children' || key === 'ref') continue;
@@ -82,3 +68,3 @@
 }
-var attrMap = {
+const attrMap = {
   className: 'class',
@@ -96,3 +82,3 @@ labelFor: 'for'
   } else {
-    var namespace = isSVG ? NS_ATTRS[attr] : undefined;
+    const namespace = isSVG ? NS_ATTRS[attr] : undefined;
 
@@ -107,2 +93,6 @@ if (namespace !== undefined) {
 
+function mountChildren(children, env) {
+  return Array.isArray(children) ? children.map(child => mount(child, env)) : mount(children, env);
+}
+
 function mount(vnode, env) {
@@ -114,35 +104,27 @@ if (env === void 0) {
   if (vnode == null || typeof vnode === 'boolean') {
-    return {
-      type: MOUNT_SINGLE,
-      node: null
-    };
+    return null;
   }
 
   if (vnode instanceof Node) {
-    return {
-      type: MOUNT_SINGLE,
-      node: vnode
-    };
+    return vnode;
   }
 
   if (isRenderFunction(vnode)) {
-    var _ref = vnode,
-        type = _ref.type,
-        props = _ref.props;
+    const {
+      type,
+      props
+    } = vnode;
 
     if (type === Fragment) {
-      var node = document.createDocumentFragment();
+      const node = document.createDocumentFragment();
 
       if (props.children) {
-        var childrenRef = mount(props.children, env);
-        insertDom(node, childrenRef);
+        const children = mountChildren(props.children, env);
+        insertDom(node, children);
       }
 
-      return {
-        type: MOUNT_SINGLE,
-        node: node
-      };
+      return node;
     }
 
-    var childVNode = type(props);
+    const childVNode = type(props);
     return mount(childVNode, env);
@@ -152,16 +134,13 @@ }
   if (isLeaf(vnode)) {
-    return {
-      type: MOUNT_SINGLE,
-      node: document.createTextNode("" + vnode)
-    };
+    return document.createTextNode("" + vnode);
   }
 
   if (isElement(vnode)) {
-    var _node;
+    let node;
+    const {
+      type,
+      props
+    } = vnode;
 
-    var _ref2 = vnode,
-        _type = _ref2.type,
-        _props = _ref2.props;
-
-    if (!env.isSvg && _type === 'svg') {
+    if (!env.isSvg && type === 'svg') {
       env = Object.assign({}, env, {
@@ -173,15 +152,13 @@ isSvg: true
     if (!env.isSvg) {
-      _node = document.createElement(_type);
+      node = document.createElement(type);
     } else {
-      _node = document.createElementNS(SVG_NS, _type);
+      node = document.createElementNS(SVG_NS, type);
     }
 
-    mountAttributes(_node, _props, env);
+    mountAttributes(node, props, env);
 
-    var _childrenRef;
+    if (props.children) {
+      let childEnv = env;
 
-    if (_props.children) {
-      var childEnv = env;
-
-      if (env.isSvg && _type === 'foreignObject') {
+      if (env.isSvg && type === 'foreignObject') {
         childEnv = Object.assign({}, childEnv, {
@@ -192,44 +169,15 @@ isSvg: false
 
-      _childrenRef = mount(_props.children, childEnv);
+      const children = mountChildren(props.children, childEnv);
+      if (children != null) insertDom(node, children);
     }
 
-    if (_childrenRef != null) insertDom(_node, _childrenRef);
-    var ref = _props.ref;
-    if (typeof ref === 'function') ref(_node);
-    return {
-      type: MOUNT_SINGLE,
-      node: _node
-    };
+    const {
+      ref
+    } = props;
+    if (typeof ref === 'function') ref(node);
+    return node;
   }
 
-  if (Array.isArray(vnode)) {
-    return {
-      type: MOUNT_ARRAY,
-      children: vnode.map(function (child) {
-        return mount(child, env);
-      })
-    };
-  }
-
   throw new Error('mount: Invalid Vnode!');
 }
-
-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);
-}
 /**
@@ -239,9 +187,4 @@ * Mount vdom as real DOM nodes.
 
-
 function mountDom(vnode) {
-  if (Array.isArray(vnode)) {
-    return flattenWithoutNull(vnode.map(mountDom));
-  }
-
-  return asDom(mount(vnode));
+  return mount(vnode);
 }
@@ -253,3 +196,3 @@ /**
 function hm() {
-  return mountDom(h.apply(void 0, arguments));
+  return mountDom(h(...arguments));
 }
@@ -256,0 +199,0 @@

package.json

 {
   "name": "@gera2ld/jsx-dom",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Use JSX for HTML elements.",
   "author": "Gerald <[e-mail]>",
   "license": "ISC",
+  "scripts": {
+    "prepare": "husky install",
+    "dev": "rollup -wc rollup.conf.js",
+    "build:types": "tsc -p tsconfig.prod.json",
+    "build:js": "rollup -c rollup.conf.js",
+    "build": "run-s lint test clean build:*",
+    "lint": "eslint --ext .ts,.tsx .",
+    "prepublishOnly": "run-s build",
+    "clean": "del-cli dist types",
+    "test": "cross-env BABEL_ENV=test jest test"
+  },
   "keywords": [
@@ -28,25 +39,16 @@ "jsx",
   "devDependencies": {
-    "@babel/plugin-transform-react-jsx": "^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"
+    "@babel/plugin-transform-react-jsx": "^7.18.6",
+    "@gera2ld/plaid": "~2.5.5",
+    "@gera2ld/plaid-common-ts": "~2.5.1",
+    "@gera2ld/plaid-rollup": "~2.5.0",
+    "@gera2ld/plaid-test": "^2.5.0",
+    "del-cli": "^5.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "husky": "^8.0.1",
+    "prettier": "^2.7.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.0"
-  },
-  "scripts": {
-    "dev": "rollup -wc rollup.conf.js",
-    "build:types": "tsc -p tsconfig.prod.json",
-    "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"
+    "@babel/runtime": "^7.18.9"
   }
-}
+}

README.md

@@ -119,1 +119,13 @@ # @gera2ld/jsx-dom
 ```
+
+### Type Declaration
+
+```ts
+import { VNode, DomNode } from '@gera2ld/jsx-dom';
+
+declare global {
+  namespace JSX {
+    type Element = VNode; // use `DomNode` instead if you want to omit `mountDom` and set pragma to `JSX.hm`
+  }
+}
+```

types/consts.d.ts

 export declare const VTYPE_ELEMENT = 1;
 export declare const VTYPE_FUNCTION = 2;
 export declare type VType = typeof VTYPE_ELEMENT | typeof VTYPE_FUNCTION;
-export declare const MOUNT_SINGLE = 1;
-export declare const MOUNT_ARRAY = 4;
-export declare type MountType = typeof MOUNT_SINGLE | typeof MOUNT_ARRAY;
 export declare const SVG_NS = "http://www.w3.org/2000/svg";
@@ -8,0 +5,0 @@ export declare const NS_ATTRS: {

types/mount.d.ts

 import { h } from './h';
-import { VChildren, VProps, MountEnv, MountResult, DomNode, VChild } from './types';
-export declare function insertDom(parent: HTMLElement | SVGElement | DocumentFragment, ref: MountResult): void;
+import { VChild, VProps, MountEnv } from './types';
+export declare function insertDom(parent: HTMLElement | SVGElement | DocumentFragment, nodes: Node | Node[]): void;
 export declare function mountAttributes(domElement: HTMLElement | SVGElement, props: VProps, env: MountEnv): void;
-export declare function mount(vnode: VChildren, env?: MountEnv): MountResult;
+export declare function mount(vnode: VChild, env?: MountEnv): Node;
 /**
  * Mount vdom as real DOM nodes.
  */
-export declare function mountDom(vnode: VChild): DomNode;
-export declare function mountDom(vnode: VChildren[]): DomNode[];
+export declare function mountDom(vnode: VChild): Node;
 /**
@@ -12,0 +11,0 @@ * Render and mount without returning VirtualDOM, useful when you don't need SVG support.

types/types.d.ts

@@ -1,6 +0,14 @@
-import { VType, VTYPE_ELEMENT, VTYPE_FUNCTION, MOUNT_SINGLE, MOUNT_ARRAY } from './consts';
-export interface VProps {
-    [key: string]: any;
+import { VType, VTYPE_ELEMENT, VTYPE_FUNCTION } from './consts';
+export declare type VProps = {
+    ref?: (el: Node) => void;
+    innerHTML?: string;
+    innerText?: string;
+    textContent?: string;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    };
     children?: VChildren;
-}
+} & {
+    [key: string]: string | boolean | ((...args: unknown[]) => unknown);
+};
 export declare type VFunction = (props: VProps) => VNode;
@@ -21,3 +29,3 @@ export interface VNode {
 export declare type VChild = string | number | boolean | null | Node | VNode;
-export declare type VChildren = VChild | VChildren[];
+export declare type VChildren = VChild | VChild[];
 export interface MountEnv {
@@ -28,10 +36,1 @@ isSvg: boolean;
 export declare type DomResult = DomNode | DomResult[];
-export interface MountSingleResult {
-    type: typeof MOUNT_SINGLE;
-    node: DomNode | null;
-}
-export interface MountArrayResult {
-    type: typeof MOUNT_ARRAY;
-    children: MountResult[];
-}
-export declare type MountResult = MountSingleResult | MountArrayResult;

No alert changes

Improved metrics

Number of lines in readme file

131

increased by10.08%

Worsened metrics

Total package byte prevSize

21516

decreased by-13.71%

Lines of code

555

decreased by-21.16%

Dependency changes

• Updated@babel/runtime@^7.18.9