jsx-dom-cjs - npm Package Compare versions

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

index.js

@@ -108,2 +108,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"
@@ -242,7 +261,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)) {
@@ -256,2 +271,4 @@ if (isObject(tag.defaultProps)) {
       : tag({ ...attr, children })
+  } else {
+    throw new TypeError(`Invalid JSX element type: ${tag}`)
   }
@@ -276,2 +293,10 @@
 
+function attachRef(ref, node) {
+  if (isRef(ref)) {
+    ref.current = node
+  } else if (isFunction(ref)) {
+    ref(node)
+  }
+}
+
 function appendChild(child, node) {
@@ -286,2 +311,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)
   }
@@ -557,2 +586,3 @@ }
   Fragment,
+  ShadowRoot,
 }
@@ -572,2 +602,3 @@ function preventDefault(event) {
 exports.SVGNamespace = SVGNamespace
+exports.ShadowRoot = ShadowRoot$1
 exports.StrictMode = Fragment
@@ -574,0 +605,0 @@ exports.className = className

min/index.js

@@ -52,2 +52,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"
@@ -122,7 +141,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)) {
@@ -136,2 +151,4 @@ if (isObject(tag.defaultProps)) {
       : tag({ ...attr, children })
+  } else {
+    throw new TypeError(`Invalid JSX element type: ${tag}`)
   }
@@ -156,2 +173,10 @@
 
+function attachRef(ref, node) {
+  if (isRef(ref)) {
+    ref.current = node
+  } else if (isFunction(ref)) {
+    ref(node)
+  }
+}
+
 function appendChild(child, node) {
@@ -166,2 +191,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)
   }
@@ -399,2 +428,3 @@ }
   Fragment,
+  ShadowRoot,
 }
@@ -414,2 +444,3 @@ function preventDefault(event) {
 exports.SVGNamespace = SVGNamespace
+exports.ShadowRoot = ShadowRoot$1
 exports.StrictMode = Fragment
@@ -416,0 +447,0 @@ exports.className = className

package.json

 {
   "name": "jsx-dom-cjs",
-  "version": "8.0.1-beta.5",
+  "version": "8.0.1-beta.6",
   "description": "JSX to document.createElement.",
@@ -14,3 +14,3 @@ "main": "index.js",
   "dependencies": {
-    "csstype": "^3.0.10"
+    "csstype": "^3.1.0"
   },
@@ -17,0 +17,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

123561

increased by1.8%

Lines of code

3076

increased by2.36%

Number of lines in readme file

372

increased by3.91%

Dependency changes

• Updatedcsstype@^3.1.0