jsx-dom - npm Package Compare versions

Comparing version 8.0.1-beta.5 to 8.0.1-beta.6

index.js

@@ -104,2 +104,21 @@ /* eslint-disable */
 
+const jsxDomType = Symbol.for("jsx-dom:type")
+var JsxDomType
+
+;(function (JsxDomType) {
+  JsxDomType["ShadowRoot"] = "ShadowRoot"
+})(JsxDomType || (JsxDomType = {}))
+
+function ShadowRoot$1({ children, ref, ...attr }) {
+  return {
+    [jsxDomType]: JsxDomType.ShadowRoot,
+    ref,
+    attr,
+    children,
+  }
+}
+function isShadowRoot(el) {
+  return el != null && el[jsxDomType] === JsxDomType.ShadowRoot
+}
+
 const SVGNamespace = "http://www.w3.org/2000/svg"
@@ -238,7 +257,3 @@ const XLinkNamespace = "http://www.w3.org/1999/xlink"
 
-    if (isRef(attr.ref)) {
-      attr.ref.current = node
-    } else if (isFunction(attr.ref)) {
-      attr.ref(node)
-    }
+    attachRef(attr.ref, node)
   } else if (isFunction(tag)) {
@@ -252,2 +267,4 @@ if (isObject(tag.defaultProps)) {
       : tag({ ...attr, children })
+  } else {
+    throw new TypeError(`Invalid JSX element type: ${tag}`)
   }
@@ -272,2 +289,10 @@
 
+function attachRef(ref, node) {
+  if (isRef(ref)) {
+    ref.current = node
+  } else if (isFunction(ref)) {
+    ref(node)
+  }
+}
+
 function appendChild(child, node) {
@@ -282,2 +307,6 @@ if (isArrayLike(child)) {
     appendChildToNode(child, node)
+  } else if (isShadowRoot(child)) {
+    const shadowRoot = node.attachShadow(child.attr)
+    appendChild(child.children, shadowRoot)
+    attachRef(child.ref, shadowRoot)
   }
@@ -553,2 +582,3 @@ }
   Fragment,
+  ShadowRoot,
 }
@@ -569,2 +599,3 @@ function preventDefault(event) {
   SVGNamespace,
+  ShadowRoot$1 as ShadowRoot,
   Fragment as StrictMode,
@@ -571,0 +602,0 @@ className,

min/index.js

@@ -48,2 +48,21 @@ /* eslint-disable */
 
+const jsxDomType = Symbol.for("jsx-dom:type")
+var JsxDomType
+
+;(function (JsxDomType) {
+  JsxDomType["ShadowRoot"] = "ShadowRoot"
+})(JsxDomType || (JsxDomType = {}))
+
+function ShadowRoot$1({ children, ref, ...attr }) {
+  return {
+    [jsxDomType]: JsxDomType.ShadowRoot,
+    ref,
+    attr,
+    children,
+  }
+}
+function isShadowRoot(el) {
+  return el != null && el[jsxDomType] === JsxDomType.ShadowRoot
+}
+
 const SVGNamespace = "http://www.w3.org/2000/svg"
@@ -118,7 +137,3 @@
 
-    if (isRef(attr.ref)) {
-      attr.ref.current = node
-    } else if (isFunction(attr.ref)) {
-      attr.ref(node)
-    }
+    attachRef(attr.ref, node)
   } else if (isFunction(tag)) {
@@ -132,2 +147,4 @@ if (isObject(tag.defaultProps)) {
       : tag({ ...attr, children })
+  } else {
+    throw new TypeError(`Invalid JSX element type: ${tag}`)
   }
@@ -152,2 +169,10 @@
 
+function attachRef(ref, node) {
+  if (isRef(ref)) {
+    ref.current = node
+  } else if (isFunction(ref)) {
+    ref(node)
+  }
+}
+
 function appendChild(child, node) {
@@ -162,2 +187,6 @@ if (isArrayLike(child)) {
     appendChildToNode(child, node)
+  } else if (isShadowRoot(child)) {
+    const shadowRoot = node.attachShadow(child.attr)
+    appendChild(child.children, shadowRoot)
+    attachRef(child.ref, shadowRoot)
   }
@@ -395,2 +424,3 @@ }
   Fragment,
+  ShadowRoot,
 }
@@ -411,2 +441,3 @@ function preventDefault(event) {
   SVGNamespace,
+  ShadowRoot$1 as ShadowRoot,
   Fragment as StrictMode,
@@ -413,0 +444,0 @@ className,

package.json

 {
   "name": "jsx-dom",
-  "version": "8.0.1-beta.5",
+  "version": "8.0.1-beta.6",
   "description": "JSX to document.createElement.",
@@ -15,3 +15,3 @@ "main": "index.js",
   "dependencies": {
-    "csstype": "^3.0.10"
+    "csstype": "^3.1.0"
   },
@@ -18,0 +18,0 @@ "eslintIgnore": [

README.md

@@ -102,3 +102,17 @@ # jsx-dom
 
+### Shadow DOM
+```tsx
+import { ShadowRoot } from "jsx-dom"
 
+document.body.appendChild(
+  <dialog>
+    <ShadowRoot mode="closed">
+      <style>:root { font-family: Helvetica Neue; }</style>
+      <button>Hello</button>
+    </ShadowRoot>
+  </dialog>
+)
+```
+
+
 ## Syntax
@@ -358,2 +372,2 @@
 
-* [html](https://github.com/developit/htm) library is [not currently compatible](https://github.com/proteriax/jsx-dom/issues/32) with jsx-dom.
+* [htm](https://github.com/developit/htm) library is [not currently compatible](https://github.com/proteriax/jsx-dom/issues/32) with jsx-dom.

No alert changes

Improved metrics

Total package byte prevSize

122045

increased by1.82%

Lines of code

3036

increased by2.39%

Number of lines in readme file

372

increased by3.91%

Dependency changes

• Updatedcsstype@^3.1.0