jsx-dom - npm Package Compare versions

Comparing version 6.4.14-beta.0 to 6.4.14-beta.1

lib/index.cjs.js

@@ -45,3 +45,10 @@ "use strict"
 }
+function forEach(value, fn) {
+  if (!value) return
 
+  for (const key of keys(value)) {
+    fn(value[key], key)
+  }
+}
+
 function createRef() {
@@ -56,2 +63,58 @@ return Object.seal({
 
+const isUnitlessNumber = {
+  animationIterationCount: 0,
+  borderImageOutset: 0,
+  borderImageSlice: 0,
+  borderImageWidth: 0,
+  boxFlex: 0,
+  boxFlexGroup: 0,
+  boxOrdinalGroup: 0,
+  columnCount: 0,
+  columns: 0,
+  flex: 0,
+  flexGrow: 0,
+  flexPositive: 0,
+  flexShrink: 0,
+  flexNegative: 0,
+  flexOrder: 0,
+  gridArea: 0,
+  gridRow: 0,
+  gridRowEnd: 0,
+  gridRowSpan: 0,
+  gridRowStart: 0,
+  gridColumn: 0,
+  gridColumnEnd: 0,
+  gridColumnSpan: 0,
+  gridColumnStart: 0,
+  fontWeight: 0,
+  lineClamp: 0,
+  lineHeight: 0,
+  opacity: 0,
+  order: 0,
+  orphans: 0,
+  tabSize: 0,
+  widows: 0,
+  zIndex: 0,
+  zoom: 0,
+  fillOpacity: 0,
+  floodOpacity: 0,
+  stopOpacity: 0,
+  strokeDasharray: 0,
+  strokeDashoffset: 0,
+  strokeMiterlimit: 0,
+  strokeOpacity: 0,
+  strokeWidth: 0,
+}
+
+function prefixKey(prefix, key) {
+  return prefix + key.charAt(0).toUpperCase() + key.substring(1)
+}
+
+const prefixes = ["Webkit", "ms", "Moz", "O"]
+Object.keys(isUnitlessNumber).forEach(prop => {
+  prefixes.forEach(prefix => {
+    isUnitlessNumber[prefixKey(prefix, prop)] = 0
+  })
+})
+
 function useText(initialValue) {
@@ -182,10 +245,7 @@ const text = new Text()
     case "dataset":
-      for (const dataKey of keys(value || {})) {
-        const dataValue = value[dataKey]
-
+      forEach(value, (dataValue, dataKey) => {
         if (dataValue != null) {
           node.dataset[dataKey] = dataValue
         }
-      }
-
+      })
       return
@@ -214,3 +274,9 @@
       if (isObject(value)) {
-        Object.assign(node.style, value)
+        forEach(value, (val, key) => {
+          if (isNumber(val) && isUnitlessNumber[key] !== 0) {
+            node.style[key] = val + "px"
+          } else {
+            node.style[key] = val
+          }
+        })
         return
@@ -217,0 +283,0 @@ }

lib/index.js

@@ -41,3 +41,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
+function forEach(value, fn) {
+  if (!value) return
 
+  for (const key of keys(value)) {
+    fn(value[key], key)
+  }
+}
+
 function createRef() {
@@ -52,2 +59,58 @@ return Object.seal({
 
+const isUnitlessNumber = {
+  animationIterationCount: 0,
+  borderImageOutset: 0,
+  borderImageSlice: 0,
+  borderImageWidth: 0,
+  boxFlex: 0,
+  boxFlexGroup: 0,
+  boxOrdinalGroup: 0,
+  columnCount: 0,
+  columns: 0,
+  flex: 0,
+  flexGrow: 0,
+  flexPositive: 0,
+  flexShrink: 0,
+  flexNegative: 0,
+  flexOrder: 0,
+  gridArea: 0,
+  gridRow: 0,
+  gridRowEnd: 0,
+  gridRowSpan: 0,
+  gridRowStart: 0,
+  gridColumn: 0,
+  gridColumnEnd: 0,
+  gridColumnSpan: 0,
+  gridColumnStart: 0,
+  fontWeight: 0,
+  lineClamp: 0,
+  lineHeight: 0,
+  opacity: 0,
+  order: 0,
+  orphans: 0,
+  tabSize: 0,
+  widows: 0,
+  zIndex: 0,
+  zoom: 0,
+  fillOpacity: 0,
+  floodOpacity: 0,
+  stopOpacity: 0,
+  strokeDasharray: 0,
+  strokeDashoffset: 0,
+  strokeMiterlimit: 0,
+  strokeOpacity: 0,
+  strokeWidth: 0,
+}
+
+function prefixKey(prefix, key) {
+  return prefix + key.charAt(0).toUpperCase() + key.substring(1)
+}
+
+const prefixes = ["Webkit", "ms", "Moz", "O"]
+Object.keys(isUnitlessNumber).forEach(prop => {
+  prefixes.forEach(prefix => {
+    isUnitlessNumber[prefixKey(prefix, prop)] = 0
+  })
+})
+
 function useText(initialValue) {
@@ -178,10 +241,7 @@ const text = new Text()
     case "dataset":
-      for (const dataKey of keys(value || {})) {
-        const dataValue = value[dataKey]
-
+      forEach(value, (dataValue, dataKey) => {
         if (dataValue != null) {
           node.dataset[dataKey] = dataValue
         }
-      }
-
+      })
       return
@@ -210,3 +270,9 @@
       if (isObject(value)) {
-        Object.assign(node.style, value)
+        forEach(value, (val, key) => {
+          if (isNumber(val) && isUnitlessNumber[key] !== 0) {
+            node.style[key] = val + "px"
+          } else {
+            node.style[key] = val
+          }
+        })
         return
@@ -213,0 +279,0 @@ }

lib/svg.cjs.js

@@ -45,3 +45,10 @@ "use strict"
 }
+function forEach(value, fn) {
+  if (!value) return
 
+  for (const key of keys(value)) {
+    fn(value[key], key)
+  }
+}
+
 function createRef() {
@@ -56,2 +63,68 @@ return Object.seal({
 
+const isUnitlessNumber = {
+  animationIterationCount: 0,
+  borderImageOutset: 0,
+  borderImageSlice: 0,
+  borderImageWidth: 0,
+  boxFlex: 0,
+  boxFlexGroup: 0,
+  boxOrdinalGroup: 0,
+  columnCount: 0,
+  columns: 0,
+  flex: 0,
+  flexGrow: 0,
+  flexPositive: 0,
+  flexShrink: 0,
+  flexNegative: 0,
+  flexOrder: 0,
+  gridArea: 0,
+  gridRow: 0,
+  gridRowEnd: 0,
+  gridRowSpan: 0,
+  gridRowStart: 0,
+  gridColumn: 0,
+  gridColumnEnd: 0,
+  gridColumnSpan: 0,
+  gridColumnStart: 0,
+  fontWeight: 0,
+  lineClamp: 0,
+  lineHeight: 0,
+  opacity: 0,
+  order: 0,
+  orphans: 0,
+  tabSize: 0,
+  widows: 0,
+  zIndex: 0,
+  zoom: 0,
+  fillOpacity: 0,
+  floodOpacity: 0,
+  stopOpacity: 0,
+  strokeDasharray: 0,
+  strokeDashoffset: 0,
+  strokeMiterlimit: 0,
+  strokeOpacity: 0,
+  strokeWidth: 0,
+}
+Object.assign(isUnitlessNumber, {
+  fillOpacity: 0,
+  floodOpacity: 0,
+  stopOpacity: 0,
+  strokeDasharray: 0,
+  strokeDashoffset: 0,
+  strokeMiterlimit: 0,
+  strokeOpacity: 0,
+  strokeWidth: 0,
+})
+
+function prefixKey(prefix, key) {
+  return prefix + key.charAt(0).toUpperCase() + key.substring(1)
+}
+
+const prefixes = ["Webkit", "ms", "Moz", "O"]
+Object.keys(isUnitlessNumber).forEach(prop => {
+  prefixes.forEach(prefix => {
+    isUnitlessNumber[prefixKey(prefix, prop)] = 0
+  })
+})
+
 function useText(initialValue) {
@@ -272,10 +345,7 @@ const text = new Text()
     case "dataset":
-      for (const dataKey of keys(value || {})) {
-        const dataValue = value[dataKey]
-
+      forEach(value, (dataValue, dataKey) => {
         if (dataValue != null) {
           node.dataset[dataKey] = dataValue
         }
-      }
-
+      })
       return
@@ -304,3 +374,9 @@
       if (isObject(value)) {
-        Object.assign(node.style, value)
+        forEach(value, (val, key) => {
+          if (isNumber(val) && isUnitlessNumber[key] !== 0) {
+            node.style[key] = val + "px"
+          } else {
+            node.style[key] = val
+          }
+        })
         return
@@ -307,0 +383,0 @@ }

lib/svg.js

@@ -41,3 +41,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
+function forEach(value, fn) {
+  if (!value) return
 
+  for (const key of keys(value)) {
+    fn(value[key], key)
+  }
+}
+
 function createRef() {
@@ -52,2 +59,68 @@ return Object.seal({
 
+const isUnitlessNumber = {
+  animationIterationCount: 0,
+  borderImageOutset: 0,
+  borderImageSlice: 0,
+  borderImageWidth: 0,
+  boxFlex: 0,
+  boxFlexGroup: 0,
+  boxOrdinalGroup: 0,
+  columnCount: 0,
+  columns: 0,
+  flex: 0,
+  flexGrow: 0,
+  flexPositive: 0,
+  flexShrink: 0,
+  flexNegative: 0,
+  flexOrder: 0,
+  gridArea: 0,
+  gridRow: 0,
+  gridRowEnd: 0,
+  gridRowSpan: 0,
+  gridRowStart: 0,
+  gridColumn: 0,
+  gridColumnEnd: 0,
+  gridColumnSpan: 0,
+  gridColumnStart: 0,
+  fontWeight: 0,
+  lineClamp: 0,
+  lineHeight: 0,
+  opacity: 0,
+  order: 0,
+  orphans: 0,
+  tabSize: 0,
+  widows: 0,
+  zIndex: 0,
+  zoom: 0,
+  fillOpacity: 0,
+  floodOpacity: 0,
+  stopOpacity: 0,
+  strokeDasharray: 0,
+  strokeDashoffset: 0,
+  strokeMiterlimit: 0,
+  strokeOpacity: 0,
+  strokeWidth: 0,
+}
+Object.assign(isUnitlessNumber, {
+  fillOpacity: 0,
+  floodOpacity: 0,
+  stopOpacity: 0,
+  strokeDasharray: 0,
+  strokeDashoffset: 0,
+  strokeMiterlimit: 0,
+  strokeOpacity: 0,
+  strokeWidth: 0,
+})
+
+function prefixKey(prefix, key) {
+  return prefix + key.charAt(0).toUpperCase() + key.substring(1)
+}
+
+const prefixes = ["Webkit", "ms", "Moz", "O"]
+Object.keys(isUnitlessNumber).forEach(prop => {
+  prefixes.forEach(prefix => {
+    isUnitlessNumber[prefixKey(prefix, prop)] = 0
+  })
+})
+
 function useText(initialValue) {
@@ -268,10 +341,7 @@ const text = new Text()
     case "dataset":
-      for (const dataKey of keys(value || {})) {
-        const dataValue = value[dataKey]
-
+      forEach(value, (dataValue, dataKey) => {
         if (dataValue != null) {
           node.dataset[dataKey] = dataValue
         }
-      }
-
+      })
       return
@@ -300,3 +370,9 @@
       if (isObject(value)) {
-        Object.assign(node.style, value)
+        forEach(value, (val, key) => {
+          if (isNumber(val) && isUnitlessNumber[key] !== 0) {
+            node.style[key] = val + "px"
+          } else {
+            node.style[key] = val
+          }
+        })
         return
@@ -303,0 +379,0 @@ }

package.json

 {
   "name": "jsx-dom",
-  "version": "6.4.14-beta.0",
+  "version": "6.4.14-beta.1",
   "description": "JSX to document.createElement.",
@@ -5,0 +5,0 @@ "main": "lib/index.cjs.js",

README.md

@@ -73,7 +73,7 @@ # jsx-dom
 
-1. `style` accepts both strings and objects.
+1. `style` accepts both strings and objects. Unitless properties supported by React are also supported.
 
 ```jsx
 <div style="background: transparent;" />
-<div style={{ background: "transparent", fontFamily: "serif" }} />
+<div style={{ background: "transparent", fontFamily: "serif", fontSize: 16 }} />
 ```
@@ -114,3 +114,3 @@
 
-const textbox = React.createRef()
+const textbox = createRef()
 render(
@@ -126,2 +126,17 @@ <div>
 }
+
+// React.useRef
+import React, { useRef } from "jsx-dom"
+
+function Component() {
+  const textbox = useRef()
+  const onClick = () => textbox.current.focus()
+
+  return (
+    <div onClick={onClick}>
+      <label>Username:</label>
+      <input ref={textbox} />
+    </div>
+  )
+}
 ```
@@ -163,3 +178,5 @@
 
-const anchor = <a namespaceURI={SVGNamespace}>I am an SVG element!</a>
+function Anchor() {
+  return <a namespaceURI={ SVGNamespace }>I am an SVG element!</a>
+}
 ```
@@ -177,4 +194,8 @@
   const [text, setText] = useText("Downloading")
+
   fetch("./api").then(() => setText("Done!"))
-  return <div>Status: {text}</div>
+
+  return (
+    <div>Status: {text}</div>
+  )
 }
@@ -185,19 +206,28 @@ ```
 
-Three extra functions and one constant are provided by this package:
+Some extra features are provided by this package:
 
 ```ts
-declare module "jsx-dom" {
-  export function preventDefault(event: Event): Event
-  export function stopPropagation(event: Event): Event
-  /** `namespaceURI` string for SVG Elements. */
-  export const SVGNamespace: string
-  export function className(value: any): string
+function preventDefault(event: Event): Event
 
-  /** Short type aliases for HTML elements */
-  export namespace HTML {
+function stopPropagation(event: Event): Event
+
+/** `namespaceURI` string for SVG Elements. */
+const SVGNamespace: string
+
+function className(value: any): string
+
+/** Short type aliases for HTML elements */
+namespace HTML {
+    type Anchor = HTMLAnchorElement
     type Button = HTMLButtonElement
     type Div = HTMLDivElement
     ...
-  }
 }
+
+/** Short type aliases for SVG elements */
+namespace SVG {
+    type Anchor = SVGAElement
+    type Animate = SVGAnimateElement
+    ...
+}
 ```
@@ -210,3 +240,5 @@
 function createFactory(component: string): (props: object) => JSX.Element
-``` 
+function useRef<T>(initialValue?: T): RefObject<T>
+function memo<P, T extends (props: P) => JSX.Element>(render: T): T
+```
 
@@ -229,2 +261,2 @@ The following functions **will** ignore `deps`, and are only useful if you are
 `<div />`, and other tags, are inferred as a general `JSX.Element` in TypeScript instead of
-`HTMLDivElement` (or the equivalents). This is a known bug and its fix depends on [TypeScript#21699](https://github.com/Microsoft/TypeScript/issues/21699).
+`HTMLDivElement` (or the equivalent types). This is a known bug and its fix depends on [TypeScript#21699](https://github.com/Microsoft/TypeScript/issues/21699).

svg.d.ts

@@ -1,8 +0,1 @@
-/**
- * Adapted from React TypeScript definition from DefinitelyTyped.
- * @see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts
- */
-
-declare module "jsx-dom/svg" {
-  export * from "jsx-dom"
-}
+export * from "./index"

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

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

Total package byte prevSize

108573

increased by8.46%

Lines of code

3182

increased by11.38%

Number of lines in readme file

255

increased by14.35%

No dependency changes