jsx-dom - npm Package Compare versions

Comparing version 6.4.23 to 7.0.0-beta.0

CHANGELOG.md

@@ -0,1 +1,9 @@
+# 7.0.0
+- Breaking change:
+  - TypeScript 4 is required. This particular release only requires TypeScript 3, but further updates may require TypeScript 4 specific features without a major version bump.
+  - Remove `jsx-dom/svg` alias.
+- Merges #39 - “Fix solution for #33”.
+- Merges #38 - “Added support for Class Components”.
+- Updates type definition with upstream (#d498b7c).
+
 # 6.4.16
@@ -2,0 +10,0 @@ - Fixes #27

min.js

@@ -1,2 +0,333 @@
-export * from "./lib/min"
-export { default } from "./lib/min"
+const keys = Object.keys
+function identity(value) {
+  return value
+}
+function isBoolean(val) {
+  return typeof val === "boolean"
+}
+function isElement(val) {
+  return val && typeof val.nodeType === "number"
+}
+function isString(val) {
+  return typeof val === "string"
+}
+function isNumber(val) {
+  return typeof val === "number"
+}
+function isObject(val) {
+  return typeof val === "object" ? val !== null : isFunction(val)
+}
+function isFunction(val) {
+  return typeof val === "function"
+}
+function isComponentClass(Component) {
+  const prototype = Component.prototype
+  return !!(prototype && prototype.isReactComponent)
+}
+function isArrayLike(obj) {
+  return isObject(obj) && typeof obj.length === "number" && typeof obj.nodeType !== "number"
+}
+function forEach(value, fn) {
+  if (!value) return
+
+  for (const key of keys(value)) {
+    fn(value[key], key)
+  }
+}
+
+function createRef() {
+  return Object.seal({
+    current: null,
+  })
+}
+function isRef(maybeRef) {
+  return isObject(maybeRef) && "current" in maybeRef
+}
+function useMemo(factory) {
+  return factory()
+}
+
+const SVGNamespace = "http://www.w3.org/2000/svg"
+
+function isVisibleChild(value) {
+  return !isBoolean(value) && value != null
+}
+
+function className(value) {
+  if (Array.isArray(value)) {
+    return value.map(className).filter(Boolean).join(" ")
+  } else if (isObject(value)) {
+    return keys(value)
+      .filter((k) => value[k])
+      .join(" ")
+  } else if (isVisibleChild(value)) {
+    return "" + value
+  } else {
+    return ""
+  }
+}
+function createFactory(tag) {
+  return createElement.bind(null, tag)
+}
+function Fragment(attr) {
+  const fragment = document.createDocumentFragment()
+  appendChildren(attr.children, fragment)
+  return fragment
+}
+function Component(props) {
+  this.props = props
+}
+Object.defineProperties(Component.prototype, {
+  isReactComponent: {
+    value: true,
+  },
+  render: {
+    value() {
+      return null
+    },
+  },
+})
+function jsx(tag, { children, ...attr }) {
+  let node
+
+  if (isString(tag)) {
+    node = attr.namespaceURI
+      ? document.createElementNS(attr.namespaceURI, tag)
+      : document.createElement(tag)
+    attributes(attr, node)
+    appendChild(children, node)
+  } else if (isFunction(tag)) {
+    if (isObject(tag.defaultProps)) {
+      attr = { ...tag.defaultProps, ...attr }
+    }
+
+    node = isComponentClass(tag)
+      ? new tag({ ...tag.defaultProps, ...attr, children }).render()
+      : tag({ ...attr, children })
+  }
+
+  if (isRef(attr.ref)) {
+    attr.ref.current = node
+  } else if (isFunction(attr.ref)) {
+    attr.ref(node)
+  }
+
+  return node
+}
+function createElement(tag, attr, ...children) {
+  if (isString(attr) || Array.isArray(attr)) {
+    children.unshift(attr)
+    attr = {}
+  }
+
+  attr = attr || {}
+
+  if (attr.children != null && !children.length) {
+    ;({ children, ...attr } = attr)
+  }
+
+  return jsx(tag, { ...attr, children }, attr.key)
+}
+
+function appendChild(child, node) {
+  if (isArrayLike(child)) {
+    appendChildren(child, node)
+  } else if (isString(child) || isNumber(child)) {
+    appendChildToNode(document.createTextNode(child), node)
+  } else if (child === null) {
+    appendChildToNode(document.createComment(""), node)
+  } else if (isElement(child)) {
+    appendChildToNode(child, node)
+  }
+}
+
+function appendChildren(children, node) {
+  for (const child of children) {
+    appendChild(child, node)
+  }
+
+  return node
+}
+
+function appendChildToNode(child, node) {
+  if (node instanceof window.HTMLTemplateElement) {
+    node.content.appendChild(child)
+  } else {
+    node.appendChild(child)
+  }
+}
+
+function attribute(key, value, node) {
+  switch (key) {
+    case "htmlFor":
+      attr(node, "for", value)
+      return
+
+    case "dataset":
+      forEach(value, (dataValue, dataKey) => {
+        if (dataValue != null) {
+          node.dataset[dataKey] = dataValue
+        }
+      })
+      return
+
+    case "innerHTML":
+    case "innerText":
+    case "textContent":
+      node[key] = value
+      return
+
+    case "spellCheck":
+      node.spellcheck = value
+      return
+
+    case "class":
+    case "className":
+      if (isFunction(value)) {
+        value(node)
+      } else {
+        attr(node, "class", className(value))
+      }
+
+      return
+
+    case "ref":
+    case "namespaceURI":
+      return
+
+    case "style":
+      if (isObject(value)) {
+        forEach(value, (val, key) => {
+          node.style[key] = val
+        })
+        return
+      }
+  }
+
+  if (isFunction(value)) {
+    if (key[0] === "o" && key[1] === "n") {
+      const attribute = key.toLowerCase()
+
+      if (node[attribute] == null) {
+        node[attribute] = value
+      } else {
+        node.addEventListener(key, value)
+      }
+    }
+  } else if (value === true) {
+    attr(node, key, "")
+  } else if (value !== false && value != null) {
+    attr(node, key, value)
+  }
+}
+
+function attr(node, key, value) {
+  node.setAttribute(key, value)
+}
+
+function attributes(attr, node) {
+  for (const key of keys(attr)) {
+    attribute(key, attr[key], node)
+  }
+
+  return node
+}
+
+function useText(initialValue) {
+  const text = new Text()
+  Object.defineProperty(text, "toString", {
+    value() {
+      return this.textContent
+    },
+  })
+
+  function setText(value) {
+    text.textContent = value
+  }
+
+  if (initialValue != null) {
+    setText(initialValue)
+  }
+
+  return [text, setText]
+}
+function useClassList(initialValue) {
+  const div = document.createElement("div")
+
+  if (initialValue != null) {
+    div.className = className(initialValue)
+  }
+
+  let list = div.classList
+
+  function ClassList(value) {
+    value.className = list.value
+    list = value.classList
+  }
+
+  Object.defineProperties(
+    ClassList,
+    Object.getOwnPropertyDescriptors({
+      get size() {
+        return list.length
+      },
+
+      get value() {
+        return list.value
+      },
+
+      add(...tokens) {
+        list.add(...tokens)
+      },
+
+      remove(...tokens) {
+        list.remove(...tokens)
+      },
+
+      toggle(token, force) {
+        list.toggle(token, force)
+      },
+
+      contains(token) {
+        return list.contains(token)
+      },
+    })
+  )
+  return ClassList
+}
+
+var index = {
+  createElement,
+  Fragment,
+  Component,
+}
+function preventDefault(event) {
+  event.preventDefault()
+  return event
+}
+function stopPropagation(event) {
+  event.stopPropagation()
+  return event
+}
+
+export default index
+export {
+  Component,
+  Fragment,
+  SVGNamespace,
+  className,
+  createElement,
+  createFactory,
+  createRef,
+  createElement as h,
+  isRef,
+  jsx,
+  identity as memo,
+  preventDefault,
+  stopPropagation,
+  identity as useCallback,
+  useClassList,
+  useMemo,
+  createRef as useRef,
+  useText,
+}

package.json

 {
   "name": "jsx-dom",
-  "version": "6.4.23",
+  "version": "7.0.0-beta.0",
   "description": "JSX to document.createElement.",
-  "main": "lib/index.cjs.js",
-  "module": "lib/index.js",
-  "publishConfig": {},
-  "scripts": {
-    "build": "./build build",
-    "prepare": "./scripts/prepublish.sh",
-    "postpublish": "./scripts/postpublish.sh",
-    "test": "nyc --reporter=html mocha test/test-*.tsx --require test/register"
-  },
+  "main": "index.cjs.js",
+  "module": "index.js",
   "keywords": [
@@ -22,33 +15,4 @@ "jsx",
   "dependencies": {
-    "csstype": "^3.0.3"
+    "csstype": "^3.0.6"
   },
-  "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
-    "@babel/plugin-transform-typescript": "^7.12.1",
-    "@rollup/plugin-babel": "^5.2.1",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.3.3",
-    "@types/babel__core": "^7.1.10",
-    "@types/chai": "^4.2.14",
-    "@types/jsdom": "^16.2.4",
-    "@types/mocha": "^8.0.3",
-    "@types/node": "^14.11.10",
-    "@types/prop-types": "^15.7.3",
-    "babel-plugin-minify-constant-folding": "^0.5.0",
-    "babel-plugin-minify-dead-code-elimination": "^0.5.1",
-    "babel-plugin-minify-guarded-expressions": "^0.4.4",
-    "chai": "^4.2.0",
-    "coffeescript": "^2.5.1",
-    "fs-extra": "^9.0.1",
-    "jsdom": "^16.4.0",
-    "mocha": "^8.2.0",
-    "nyc": "^15.1.0",
-    "prettier": "^2.1.2",
-    "rollup": "^2.32.0",
-    "rollup-plugin-prettier": "^2.1.0",
-    "ts-node": "^9.0.0",
-    "tslib": "^2.0.3",
-    "typescript": "^4.0.3"
-  },
   "repository": {
@@ -61,10 +25,3 @@ "type": "git",
   },
-  "homepage": "https://github.com/proteriax/jsx-dom#readme",
-  "prettier": {
-    "tabWidth": 2,
-    "printWidth": 97,
-    "semi": false,
-    "singleQuote": false,
-    "trailingComma": "es5"
-  }
+  "homepage": "https://github.com/proteriax/jsx-dom#readme"
 }

README.md

@@ -20,4 +20,6 @@ # jsx-dom
 
-**Note:** Using HyperScript? `h` pragma is also supported. <!--**Experimental:** If you are using [React Automatic Runtime](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx), simply set `jsxImportSource` to `jsx-dom`.-->
+**Note:** Using HyperScript? `h` pragma is also supported.
 
+**New:** If you are using [React Automatic Runtime](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx), simply set `jsxImportSource` to `jsx-dom` and you can omit the import.
+
 ```jsx
@@ -38,3 +40,3 @@ import React from "jsx-dom"
     <div>
-      Hello {props.firstName}, {props.lastName}!
+      Hello, {props.firstName} {props.lastName}!
     </div>
@@ -48,2 +50,22 @@ )
 document.body.appendChild(<Hello firstName="Johnny" lastName="Appleseed" />)
+
+// Class components
+// `defaultProps` and `props.children` are supported natively and work as you expect.
+// In terms of React jsx-dom class components have no state,
+// so `render` function will be called only once.
+class Welcome extends React.Component {
+  static defaultProps = {
+    firstName: "John",
+  }
+
+  render() {
+    return (
+      <div>
+        Welcome, {this.props.firstName} {this.props.lastName}!
+      </div>
+    )
+  }
+}
+
+document.body.appendChild(<Welcome firstName="Johnny" lastName="Appleseed" />)
 ```
@@ -144,5 +166,5 @@
 
-### Functional components
+### Functional and class components
 
-You can write functional components and receive passed `props` in the same way in React. Unlike
+You can write functional and class components and receive passed `props` in the same way in React. Unlike
 React, `props.children` is guaranteed to be an array.
@@ -177,3 +199,3 @@
 function Anchor() {
-  return <a namespaceURI={ SVGNamespace }>I am an SVG element!</a>
+  return <a namespaceURI={SVGNamespace}>I am an SVG element!</a>
 }
@@ -180,0 +202,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

0

decreased by-100%

Lines of code

3346

increased by4.07%

Number of lines in readme file

300

increased by7.91%

Worsened metrics

Total package byte prevSize

114059

decreased by-41.74%

Number of package files

10

decreased by-28.57%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updatedcsstype@^3.0.6