jsx-dom-cjs - npm Package Compare versions

Comparing version 7.0.4 to 8.0.1-beta.1

index.js

@@ -0,1 +1,2 @@
+/* eslint-disable */
 "use strict"
@@ -28,3 +29,3 @@
 function isComponentClass(Component) {
-  const prototype = Component.prototype
+  const { prototype } = Component
   return !!(prototype && prototype.isReactComponent)
@@ -230,3 +231,3 @@ }
     node = isComponentClass(tag)
-      ? new tag({ ...tag.defaultProps, ...attr, children }).render()
+      ? new tag({ ...attr, children }).render()
       : tag({ ...attr, children })
@@ -290,2 +291,19 @@ }
 
+function style(node, value) {
+  if (value == null || value === false);
+  else if (Array.isArray(value)) {
+    value.forEach(v => style(node, v))
+  } else if (isString(value)) {
+    node.setAttribute("style", value)
+  } else if (isObject(value)) {
+    forEach(value, (val, key) => {
+      if (isNumber(val) && isUnitlessNumber[key] !== 0) {
+        node.style[key] = val + "px"
+      } else {
+        node.style[key] = val
+      }
+    })
+  }
+}
+
 function attribute(key, value, node) {
@@ -359,12 +377,4 @@ switch (key) {
     case "style":
-      if (isObject(value)) {
-        forEach(value, (val, key) => {
-          if (isNumber(val) && isUnitlessNumber[key] !== 0) {
-            node.style[key] = val + "px"
-          } else {
-            node.style[key] = val
-          }
-        })
-        return
-      }
+      style(node, value)
+      return
   }
@@ -384,9 +394,5 @@
     node[key] = value
-  } else if (isBoolean(value)) {
-    if (value === true) {
-      attr(node, key, "")
-    }
-
-    node[key] = value
-  } else if (value != null) {
+  } else if (value === true) {
+    attr(node, key, "")
+  } else if (value !== false && value != null) {
     if (node instanceof SVGElement && !nonPresentationSVGAttributes.test(key)) {
@@ -479,2 +485,36 @@ attr(node, normalizeAttribute(key, "-"), value)
 
+const cache = new Map()
+
+const createStyledComponent =
+  name =>
+  (list, ...interpolations) =>
+  ({ style, ...props }) => {
+    const lastIndex = list.length - 1
+    const css =
+      list.slice(0, lastIndex).reduce((p, s, i) => p + s + interpolations[i](props), "") +
+      list[lastIndex]
+    return createElement(name, {
+      style: [css, style],
+      ...props,
+    })
+  }
+
+const baseStyled = customComponent => createStyledComponent(customComponent)
+
+const styled = new Proxy(baseStyled, {
+  get(_, name) {
+    return setIfAbsent(cache, name, () => createStyledComponent(name))
+  },
+})
+
+function setIfAbsent(map, key, getValue) {
+  if (map.has(key)) {
+    return map.get(key)
+  } else {
+    const value = getValue(key)
+    map.set(key, value)
+    return value
+  }
+}
+
 var index = {
@@ -509,2 +549,3 @@ createElement,
 exports.stopPropagation = stopPropagation
+exports.styled = styled
 exports.useCallback = identity
@@ -511,0 +552,0 @@ exports.useClassList = useClassList

jsx-runtime.js

@@ -0,1 +1,2 @@
+/* eslint-disable */
 "use strict"
@@ -2,0 +3,0 @@

min/index.js

@@ -0,1 +1,2 @@
+/* eslint-disable */
 "use strict"
@@ -28,3 +29,3 @@
 function isComponentClass(Component) {
-  const prototype = Component.prototype
+  const { prototype } = Component
   return !!(prototype && prototype.isReactComponent)
@@ -110,3 +111,3 @@ }
     node = isComponentClass(tag)
-      ? new tag({ ...tag.defaultProps, ...attr, children }).render()
+      ? new tag({ ...attr, children }).render()
       : tag({ ...attr, children })
@@ -166,2 +167,15 @@ }
 
+function style(node, value) {
+  if (value == null || value === false);
+  else if (Array.isArray(value)) {
+    value.forEach(v => style(node, v))
+  } else if (isString(value)) {
+    node.setAttribute("style", value)
+  } else if (isObject(value)) {
+    forEach(value, (val, key) => {
+      node.style[key] = val
+    })
+  }
+}
+
 function attribute(key, value, node) {
@@ -213,8 +227,4 @@ switch (key) {
     case "style":
-      if (isObject(value)) {
-        forEach(value, (val, key) => {
-          node.style[key] = val
-        })
-        return
-      }
+      style(node, value)
+      return
   }
@@ -234,9 +244,5 @@
     node[key] = value
-  } else if (isBoolean(value)) {
-    if (value === true) {
-      attr(node, key, "")
-    }
-
-    node[key] = value
-  } else if (value != null) {
+  } else if (value === true) {
+    attr(node, key, "")
+  } else if (value !== false && value != null) {
     attr(node, key, value)
@@ -321,2 +327,36 @@ }
 
+const cache = new Map()
+
+const createStyledComponent =
+  name =>
+  (list, ...interpolations) =>
+  ({ style, ...props }) => {
+    const lastIndex = list.length - 1
+    const css =
+      list.slice(0, lastIndex).reduce((p, s, i) => p + s + interpolations[i](props), "") +
+      list[lastIndex]
+    return createElement(name, {
+      style: [css, style],
+      ...props,
+    })
+  }
+
+const baseStyled = customComponent => createStyledComponent(customComponent)
+
+const styled = new Proxy(baseStyled, {
+  get(_, name) {
+    return setIfAbsent(cache, name, () => createStyledComponent(name))
+  },
+})
+
+function setIfAbsent(map, key, getValue) {
+  if (map.has(key)) {
+    return map.get(key)
+  } else {
+    const value = getValue(key)
+    map.set(key, value)
+    return value
+  }
+}
+
 var index = {
@@ -351,2 +391,3 @@ createElement,
 exports.stopPropagation = stopPropagation
+exports.styled = styled
 exports.useCallback = identity
@@ -353,0 +394,0 @@ exports.useClassList = useClassList

min/jsx-runtime.js

@@ -0,1 +1,2 @@
+/* eslint-disable */
 "use strict"
@@ -2,0 +3,0 @@

package.json

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

README.md

@@ -11,2 +11,4 @@ # jsx-dom
 
+**NEW!** [Styled components are now supported.](#styled-components)
+
 ## Installation
@@ -54,2 +56,5 @@
 // so `render` function will be called only once.
+//
+// Component lifecycle functions are currently not supported. This may change in
+// the future.
 class Welcome extends React.Component {
@@ -72,2 +77,19 @@ static defaultProps = {
 
+### Styled Components
+```tsx
+import { styled } from "jsx-dom"
+
+const HeaderText = styled.h2`
+  font-size: 20px;
+  font-weight: 500;
+`
+
+document.body.appendChild(
+  <HeaderText style={{ /* you can override here */ }}>
+    Welcome!
+  </HeaderText>
+)
+```
+
+
 ## Syntax
@@ -316,2 +338,2 @@
 
-* [html](https://github.com/developit/htm) library is [not currently compatible](https://github.com/proteriax/jsx-dom/issues/32) with jsx-dom.
+* [html](https://github.com/developit/htm) library is [not currently compatible](https://github.com/proteriax/jsx-dom/issues/32) with jsx-dom.

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

105902

4.88%

Number of package files

16

23.08%

Lines of code

2892

6.79%

Number of lines in readme file

336

7.35%

Worsened metrics

Number of low quality alerts

1

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes