jsx-dom - npm Package Compare versions

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

index.d.ts

@@ -1,1 +0,1 @@
-export * from "./types/index.d"
+export * from "./types/index.d";

index.js

@@ -194,4 +194,10 @@ /* eslint-disable */
 }
-function Component(props) {
-  this.props = props
+class Component {
+  constructor(props) {
+    this.props = props
+  }
+
+  render() {
+    return null
+  }
 }
@@ -202,8 +208,10 @@ Object.defineProperties(Component.prototype, {
   },
-  render: {
-    value() {
-      return null
-    },
-  },
 })
+
+function initComponentClass(Class, attr, children) {
+  attr = { ...attr, children }
+  const instance = new Class(attr)
+  return instance.render()
+}
+
 function jsx(tag, { children, ...attr }) {
@@ -228,3 +236,3 @@ if (!attr.namespaceURI && svg[tag] === 0) {
     node = isComponentClass(tag)
-      ? new tag({ ...attr, children }).render()
+      ? initComponentClass(tag, attr, children)
       : tag({ ...attr, children })
@@ -231,0 +239,0 @@ }

jsx-dev-runtime.js

@@ -1,1 +0,1 @@
-export * from "./jsx-runtime"
+export * from "./jsx-runtime";

min/index.js

@@ -78,4 +78,10 @@ /* eslint-disable */
 }
-function Component(props) {
-  this.props = props
+class Component {
+  constructor(props) {
+    this.props = props
+  }
+
+  render() {
+    return null
+  }
 }
@@ -86,8 +92,10 @@ Object.defineProperties(Component.prototype, {
   },
-  render: {
-    value() {
-      return null
-    },
-  },
 })
+
+function initComponentClass(Class, attr, children) {
+  attr = { ...attr, children }
+  const instance = new Class(attr)
+  return instance.render()
+}
+
 function jsx(tag, { children, ...attr }) {
@@ -108,3 +116,3 @@ let node
     node = isComponentClass(tag)
-      ? new tag({ ...attr, children }).render()
+      ? initComponentClass(tag, attr, children)
       : tag({ ...attr, children })
@@ -111,0 +119,0 @@ }

package.json

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

README.md

@@ -18,2 +18,3 @@ # jsx-dom
 yarn install jsx-dom
+pnpm add jsx-dom
 ```
@@ -90,2 +91,14 @@
 )
+
+const Name = styled.div<{ large?: boolean }>`
+  font-size: ${props => props.large ? 40 : 20}px;
+  ${props => props.large ? "font-weight: 600;" : ""}
+`
+
+document.body.appendChild(
+  <Name large>
+    Welcome!
+  </Name>
+)
+
 ```
@@ -119,3 +132,3 @@
 
-1. `style` accepts both strings and objects. Unitless properties supported by React are also supported.
+1. `style` accepts a string, an object and an array of any combination of the above, including deeply nested arrays. Unitless properties supported by React are also supported.
 
@@ -129,3 +142,3 @@ ```jsx
 
-Passing `children` as an explicit attribute, when there is no other JSX child node, is also supported.
+Passing `children` as an explicit attribute, when there is no other JSX child node, is also supported. Any object that matches the TypeScript `ArrayLike` interface can be used as `children`, including jQuery objects.
 
@@ -189,3 +202,3 @@ ```jsx
 
-5. Rich data jsx properties are accepted, but populated as properties rather than dom attributes. 
+5. Rich data jsx properties are accepted, but populated as properties rather than DOM attributes. 
 
@@ -254,3 +267,5 @@ ```jsx
 
-  fetch("./api").then(() => setText("Done!"))
+  fetch("./api").then(() => {
+    setText("Done!")
+  })
 
@@ -322,3 +337,3 @@ return (
 
-The following functions will **not** have memoization, and are only useful if you are
+The following functions do **not** have memoization, and are only useful if you are
 migrating from/to React.
@@ -334,4 +349,3 @@
 
-There is no support for Internet Explorer, although it will very likely work if you bring your own
-polyfill.
+There is no support for Internet Explorer.
 
@@ -338,0 +352,0 @@ ## Known Issues

types/styled.d.ts

@@ -1,9 +0,2 @@
-import type {
-  FunctionComponent,
-  HTMLAttributes,
-  HTMLElementTagNames,
-  StyleInput,
-  // SVGElementTagNames,
-  // SVGAttributes,
-} from "./index"
+import type { FunctionComponent, JSX, StyleInput } from "./index"
 
@@ -18,5 +11,5 @@ export type InterpolationFunction<T> = (props: T) => string | number | null
 type HTMLStyledComponentMap = {
-  [key in HTMLElementTagNames]: StyledComponent<HTMLAttributes<HTMLElementTagNameMap[key]>>
+  [key in keyof JSX.IntrinsicElements]: StyledComponent<JSX.IntrinsicElements[key]>
 }
-type CustomStyledComponent = <Props extends { style }>(
+type CustomStyledComponent = <Props extends { style: any }>(
   customComponent: FunctionComponent<Props>
@@ -23,0 +16,0 @@ ) => (

Fixed 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

107013

2.49%

Number of package files

18

12.5%

Lines of code

2909

2%

Number of lines in readme file

350

4.17%

Number of medium supply chain risk alerts

0

-100%

No dependency changes