jsx-dom - npm Package Compare versions

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

index.js

@@ -0,1 +1,2 @@
+/* eslint-disable */
 const keys = Object.keys
@@ -24,3 +25,3 @@ function identity(value) {
 function isComponentClass(Component) {
-  const prototype = Component.prototype
+  const { prototype } = Component
   return !!(prototype && prototype.isReactComponent)
@@ -285,2 +286,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) {
@@ -354,12 +372,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
   }
@@ -469,2 +479,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 = {
@@ -500,2 +544,3 @@ createElement,
   stopPropagation,
+  styled,
   identity as useCallback,
@@ -502,0 +547,0 @@ useClassList,

jsx-runtime.js

@@ -0,1 +1,2 @@
+/* eslint-disable */
 export { Fragment, jsx, jsx as jsxs } from "jsx-dom"

min/index.js

@@ -0,1 +1,2 @@
+/* eslint-disable */
 const keys = Object.keys
@@ -24,3 +25,3 @@ function identity(value) {
 function isComponentClass(Component) {
-  const prototype = Component.prototype
+  const { prototype } = Component
   return !!(prototype && prototype.isReactComponent)
@@ -161,2 +162,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) {
@@ -208,8 +222,4 @@ switch (key) {
     case "style":
-      if (isObject(value)) {
-        forEach(value, (val, key) => {
-          node.style[key] = val
-        })
-        return
-      }
+      style(node, value)
+      return
   }
@@ -311,2 +321,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 = {
@@ -342,2 +386,3 @@ createElement,
   stopPropagation,
+  styled,
   identity as useCallback,
@@ -344,0 +389,0 @@ useClassList,

min/jsx-runtime.js

@@ -0,1 +1,2 @@
+/* eslint-disable */
 export { Fragment, jsx, jsx as jsxs } from "jsx-dom/min"

package.json

 {
   "name": "jsx-dom",
-  "version": "8.0.1-beta.0",
+  "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

Improved metrics

Total package byte prevSize

104410

5.04%

Number of package files

16

23.08%

Lines of code

2852

7.14%

Number of lines in readme file

336

7.35%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes