@devtools-ds/dom-inspector - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/cjs/DOMInspector.css.js

@@ -1,1 +0,1 @@
-module.exports = {"text":"DOMInspector-text-ea77452","dark":"DOMInspector-dark-a5712bc","chrome":"DOMInspector-chrome-168fdd8","light":"DOMInspector-light-64785a2"};
+module.exports = {"text":"DOMInspector-text-a9b591c","dark":"DOMInspector-dark-974ec02","chrome":"DOMInspector-chrome-4956ec5","light":"DOMInspector-light-e579380"};

dist/cjs/index.js

@@ -1,2 +0,235 @@
-"use strict";var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.DOMInspector=exports.DOMInspectorItem=exports.getElementLabel=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _clsx=_interopRequireDefault(require("clsx"));var _themes=require("@devtools-ds/themes");var _tree=require("@devtools-ds/tree");var _node=require("@devtools-ds/node");var _DOMInspector=_interopRequireDefault(require("./DOMInspector.css"));const getInlineText=(data,open)=>{const hasInlineText=Boolean(data.childNodes.length===0||data.childNodes.length===1&&data.childNodes[0].nodeType===Node.TEXT_NODE&&data.textContent&&data.textContent.length<80);if(hasInlineText&&!open){return data.textContent}return"\u2026"};const emptyElements=["area","base","br","col","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"];const isElement=data=>{return data.nodeType===Node.ELEMENT_NODE};const isText=data=>{return data.nodeType===Node.TEXT_NODE};const isCDATA=data=>{return data.nodeType===Node.CDATA_SECTION_NODE};const isProcessingInstruction=data=>{return data.nodeType===Node.PROCESSING_INSTRUCTION_NODE};const isComment=data=>{return data.nodeType===Node.COMMENT_NODE};const isDocument=data=>{return data.nodeType===Node.DOCUMENT_NODE};const isDocumentType=data=>{return data.nodeType===Node.DOCUMENT_TYPE_NODE};const isDocumentFragment=data=>{return data.nodeType===Node.DOCUMENT_FRAGMENT_NODE};const getElementLabel=(data,open,tagName,isEmpty)=>{const properties={};if(data.attributes){for(let i=0;i<data.attributes.length;i++){const attr=data.attributes.item(i);if(attr){properties[attr.name]=attr.value}}}return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_node.Node,{name:tagName,properties:properties}),data.childNodes.length!==0&&!isEmpty&&!open&&_react.default.createElement(_react.default.Fragment,null,getInlineText(data,open),_react.default.createElement(_node.Node,{closing:true,name:tagName})))};exports.getElementLabel=getElementLabel;const DOMInspectorItem=props=>{var _data$textContent;const{data,depth,expandLevel}=props;const[open,setOpen]=(0,_react.useState)(depth<expandLevel);const text=(_data$textContent=data.textContent)===null||_data$textContent===void 0?void 0:_data$textContent.trim();const children=[];for(let i=0;i<data.childNodes.length;i++){children.push(data.childNodes[i])}if(isElement(data)){const tagName=data.tagName.toLowerCase();const isEmpty=emptyElements.includes(tagName);return _react.default.createElement(_tree.Tree,{open:open,label:getElementLabel(data,open,tagName,isEmpty),onUpdate:value=>{setOpen(value)}},children.map((child,index)=>{return _react.default.createElement(DOMInspectorItem,{key:index,data:child,depth:depth+1,expandLevel:expandLevel})}),children.length>0&&!isEmpty&&_react.default.createElement(_tree.Tree,{label:_react.default.createElement(_node.Node,{closing:true,name:tagName})}))}if(isText(data)){if(text){return _react.default.createElement(_tree.Tree,{label:`${data.textContent}`})}return null}if(isCDATA(data)){return _react.default.createElement(_tree.Tree,{label:`<![CDATA[${text}]]>`})}if(isProcessingInstruction(data)){return _react.default.createElement(_tree.Tree,{label:data.nodeName})}if(isComment(data)){return _react.default.createElement(_tree.Tree,{label:_react.default.createElement(_node.Node,{variant:"comment",name:text||""})})}if(isDocument(data)||isDocumentFragment(data)){return _react.default.createElement(_tree.Tree,{open:open,label:data.nodeName,onUpdate:value=>{setOpen(value)}},children.map((child,index)=>{return _react.default.createElement(DOMInspectorItem,{key:index,data:child,depth:depth+1,expandLevel:expandLevel})}))}if(isDocumentType(data)){const publicId=data.publicId?` PUBLIC "${data.publicId}"`:"";const systemId=data.systemId?` "${data.systemId}"`:"";return _react.default.createElement(_tree.Tree,{label:_react.default.createElement(_node.Node,{variant:"doctype",name:`${data.name}${publicId}${systemId}`})})}return null};exports.DOMInspectorItem=DOMInspectorItem;const DOMInspector=props=>{const{data,theme,colorScheme,expandLevel,className}=props,html=(0,_objectWithoutProperties2.default)(props,["data","theme","colorScheme","expandLevel","className"]);const{themeClass,currentTheme,currentColorScheme}=(0,_themes.useTheme)({theme,colorScheme},_DOMInspector.default);if(!data)return null;return _react.default.createElement("div",(0,_extends2.default)({className:(0,_clsx.default)(className,themeClass,_DOMInspector.default.text)},html),_react.default.createElement(_themes.ThemeProvider,{theme:currentTheme,colorScheme:currentColorScheme},_react.default.createElement(DOMInspectorItem,{data:data,depth:0,expandLevel:expandLevel})))};exports.DOMInspector=DOMInspector;DOMInspector.defaultProps={expandLevel:0};
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getElementLabel = exports.DOMInspectorItem = exports.DOMInspector = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _themes = require("@devtools-ds/themes");
+var _tree = require("@devtools-ds/tree");
+var _node = require("@devtools-ds/node");
+var _DOMInspector = _interopRequireDefault(require("./DOMInspector.css"));
+const _excluded = ["data", "theme", "colorScheme", "expandLevel", "className"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** Get text to inline based on current state */
+const getInlineText = (data, open) => {
+  const hasInlineText = Boolean(data.childNodes.length === 0 || data.childNodes.length === 1 && data.childNodes[0].nodeType === Node.TEXT_NODE && data.textContent && data.textContent.length < 80);
+  if (hasInlineText && !open) {
+    return data.textContent;
+  }
+  return "…";
+};
+const emptyElements = ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"];
+
+/** Type narrowing is Element function */
+const isElement = data => {
+  return data.nodeType === Node.ELEMENT_NODE;
+};
+
+/** Type narrowing is Text function */
+const isText = data => {
+  return data.nodeType === Node.TEXT_NODE;
+};
+
+/** Type narrowing is CDATA function */
+const isCDATA = data => {
+  return data.nodeType === Node.CDATA_SECTION_NODE;
+};
+
+/** Type narrowing is ProcessingInstruction function */
+const isProcessingInstruction = data => {
+  return data.nodeType === Node.PROCESSING_INSTRUCTION_NODE;
+};
+
+/** Type narrowing is Comment function */
+const isComment = data => {
+  return data.nodeType === Node.COMMENT_NODE;
+};
+
+/** Type narrowing is Document function */
+const isDocument = data => {
+  return data.nodeType === Node.DOCUMENT_NODE;
+};
+
+/** Type narrowing is DocumentType function */
+const isDocumentType = data => {
+  return data.nodeType === Node.DOCUMENT_TYPE_NODE;
+};
+
+/** Type narrowing is DocumentFragment function */
+const isDocumentFragment = data => {
+  return data.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+};
+
+/** Create the label with attributes for an HTML Element */
+const getElementLabel = (data, open, tagName, isEmpty) => {
+  const properties = {};
+  if (data.attributes) {
+    for (let i = 0; i < data.attributes.length; i++) {
+      const attr = data.attributes.item(i);
+      if (attr) {
+        properties[attr.name] = attr.value;
+      }
+    }
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_node.Node, {
+    name: tagName,
+    properties: properties
+  }), data.childNodes.length !== 0 && !isEmpty && !open && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, getInlineText(data, open), /*#__PURE__*/_react.default.createElement(_node.Node, {
+    closing: true,
+    name: tagName
+  })));
+};
+
+/** A component for rendering DOM items. */
+exports.getElementLabel = getElementLabel;
+const DOMInspectorItem = props => {
+  var _data$textContent;
+  const {
+    data,
+    depth,
+    expandLevel
+  } = props;
+  const [open, setOpen] = (0, _react.useState)(depth < expandLevel);
+  const text = (_data$textContent = data.textContent) === null || _data$textContent === void 0 ? void 0 : _data$textContent.trim();
+  const children = [];
+  for (let i = 0; i < data.childNodes.length; i++) {
+    children.push(data.childNodes[i]);
+  }
+
+  // Element Node
+  if (isElement(data)) {
+    const tagName = data.tagName.toLowerCase();
+    const isEmpty = emptyElements.includes(tagName);
+    return /*#__PURE__*/_react.default.createElement(_tree.Tree, {
+      open: open,
+      label: getElementLabel(data, open, tagName, isEmpty),
+      onUpdate: value => {
+        setOpen(value);
+      }
+    }, children.map((child, index) => {
+      return /*#__PURE__*/_react.default.createElement(DOMInspectorItem
+      // eslint-disable-next-line
+      , {
+        key: index,
+        data: child,
+        depth: depth + 1,
+        expandLevel: expandLevel
+      });
+    }), children.length > 0 && !isEmpty && /*#__PURE__*/_react.default.createElement(_tree.Tree, {
+      label: /*#__PURE__*/_react.default.createElement(_node.Node, {
+        closing: true,
+        name: tagName
+      })
+    }));
+  }
+
+  // Text
+  if (isText(data)) {
+    if (text) {
+      return /*#__PURE__*/_react.default.createElement(_tree.Tree, {
+        label: `${data.textContent}`
+      });
+    }
+    return null;
+  }
+
+  // CDATA
+  if (isCDATA(data)) {
+    return /*#__PURE__*/_react.default.createElement(_tree.Tree, {
+      label: `<![CDATA[${text}]]>`
+    });
+  }
+
+  // Processing Instruction
+  if (isProcessingInstruction(data)) {
+    return /*#__PURE__*/_react.default.createElement(_tree.Tree, {
+      label: data.nodeName
+    });
+  }
+
+  // Comment
+  if (isComment(data)) {
+    return /*#__PURE__*/_react.default.createElement(_tree.Tree, {
+      label: /*#__PURE__*/_react.default.createElement(_node.Node, {
+        variant: "comment",
+        name: text || ""
+      })
+    });
+  }
+
+  // Document
+  if (isDocument(data) || isDocumentFragment(data)) {
+    return /*#__PURE__*/_react.default.createElement(_tree.Tree, {
+      open: open,
+      label: data.nodeName,
+      onUpdate: value => {
+        setOpen(value);
+      }
+    }, children.map((child, index) => {
+      return /*#__PURE__*/_react.default.createElement(DOMInspectorItem
+      // eslint-disable-next-line
+      , {
+        key: index,
+        data: child,
+        depth: depth + 1,
+        expandLevel: expandLevel
+      });
+    }));
+  }
+
+  // Document Type
+  if (isDocumentType(data)) {
+    const publicId = data.publicId ? ` PUBLIC "${data.publicId}"` : "";
+    const systemId = data.systemId ? ` "${data.systemId}"` : "";
+    return /*#__PURE__*/_react.default.createElement(_tree.Tree, {
+      label: /*#__PURE__*/_react.default.createElement(_node.Node, {
+        variant: "doctype",
+        name: `${data.name}${publicId}${systemId}`
+      })
+    });
+  }
+  return null;
+};
+
+/** An Inspector for DOM nodes and HTML Documents. */
+exports.DOMInspectorItem = DOMInspectorItem;
+const DOMInspector = props => {
+  const {
+      data,
+      theme,
+      colorScheme,
+      expandLevel,
+      className
+    } = props,
+    html = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    themeClass,
+    currentTheme,
+    currentColorScheme
+  } = (0, _themes.useTheme)({
+    theme,
+    colorScheme
+  }, _DOMInspector.default);
+  if (!data) return null;
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)(className, themeClass, _DOMInspector.default.text)
+  }, html), /*#__PURE__*/_react.default.createElement(_themes.ThemeProvider, {
+    theme: currentTheme,
+    colorScheme: currentColorScheme
+  }, /*#__PURE__*/_react.default.createElement(DOMInspectorItem, {
+    data: data,
+    depth: 0,
+    expandLevel: expandLevel
+  })));
+};
+exports.DOMInspector = DOMInspector;
+DOMInspector.defaultProps = {
+  expandLevel: 0
+};
 //# sourceMappingURL=index.js.map

dist/esm/DOMInspector.css.js

@@ -1,1 +0,1 @@
-module.exports = {"text":"DOMInspector-text-ea77452","dark":"DOMInspector-dark-a5712bc","chrome":"DOMInspector-chrome-168fdd8","light":"DOMInspector-light-64785a2"};
+export default {"text":"DOMInspector-text-a9b591c","dark":"DOMInspector-dark-974ec02","chrome":"DOMInspector-chrome-4956ec5","light":"DOMInspector-light-e579380"};

dist/esm/index.js

@@ -1,3 +0,224 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import React,{useState}from"react";import makeClass from"clsx";import{useTheme,ThemeProvider}from"@devtools-ds/themes";import{Tree}from"@devtools-ds/tree";import{Node as TreeNode}from"@devtools-ds/node";import styles from"./DOMInspector.css";const getInlineText=(data,open)=>{const hasInlineText=Boolean(data.childNodes.length===0||data.childNodes.length===1&&data.childNodes[0].nodeType===Node.TEXT_NODE&&data.textContent&&data.textContent.length<80);if(hasInlineText&&!open){return data.textContent}return"\u2026"};const emptyElements=["area","base","br","col","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"];const isElement=data=>{return data.nodeType===Node.ELEMENT_NODE};const isText=data=>{return data.nodeType===Node.TEXT_NODE};const isCDATA=data=>{return data.nodeType===Node.CDATA_SECTION_NODE};const isProcessingInstruction=data=>{return data.nodeType===Node.PROCESSING_INSTRUCTION_NODE};const isComment=data=>{return data.nodeType===Node.COMMENT_NODE};const isDocument=data=>{return data.nodeType===Node.DOCUMENT_NODE};const isDocumentType=data=>{return data.nodeType===Node.DOCUMENT_TYPE_NODE};const isDocumentFragment=data=>{return data.nodeType===Node.DOCUMENT_FRAGMENT_NODE};export const getElementLabel=(data,open,tagName,isEmpty)=>{const properties={};if(data.attributes){for(let i=0;i<data.attributes.length;i++){const attr=data.attributes.item(i);if(attr){properties[attr.name]=attr.value}}}return React.createElement(React.Fragment,null,React.createElement(TreeNode,{name:tagName,properties:properties}),data.childNodes.length!==0&&!isEmpty&&!open&&React.createElement(React.Fragment,null,getInlineText(data,open),React.createElement(TreeNode,{closing:true,name:tagName})))};export const DOMInspectorItem=props=>{var _data$textContent;const{data,depth,expandLevel}=props;const[open,setOpen]=useState(depth<expandLevel);const text=(_data$textContent=data.textContent)===null||_data$textContent===void 0?void 0:_data$textContent.trim();const children=[];for(let i=0;i<data.childNodes.length;i++){children.push(data.childNodes[i])}if(isElement(data)){const tagName=data.tagName.toLowerCase();const isEmpty=emptyElements.includes(tagName);return React.createElement(Tree,{open:open,label:getElementLabel(data,open,tagName,isEmpty),onUpdate:value=>{setOpen(value)}},children.map((child,index)=>{return React.createElement(DOMInspectorItem,{key:index,data:child,depth:depth+1,expandLevel:expandLevel})}),children.length>0&&!isEmpty&&React.createElement(Tree,{label:React.createElement(TreeNode,{closing:true,name:tagName})}))}if(isText(data)){if(text){return React.createElement(Tree,{label:`${data.textContent}`})}return null}if(isCDATA(data)){return React.createElement(Tree,{label:`<![CDATA[${text}]]>`})}if(isProcessingInstruction(data)){return React.createElement(Tree,{label:data.nodeName})}if(isComment(data)){return React.createElement(Tree,{label:React.createElement(TreeNode,{variant:"comment",name:text||""})})}if(isDocument(data)||isDocumentFragment(data)){return React.createElement(Tree,{open:open,label:data.nodeName,onUpdate:value=>{setOpen(value)}},children.map((child,index)=>{return React.createElement(DOMInspectorItem,{key:index,data:child,depth:depth+1,expandLevel:expandLevel})}))}if(isDocumentType(data)){const publicId=data.publicId?` PUBLIC "${data.publicId}"`:"";const systemId=data.systemId?` "${data.systemId}"`:"";return React.createElement(Tree,{label:React.createElement(TreeNode,{variant:"doctype",name:`${data.name}${publicId}${systemId}`})})}return null};export const DOMInspector=props=>{const{data,theme,colorScheme,expandLevel,className}=props,html=_objectWithoutProperties(props,["data","theme","colorScheme","expandLevel","className"]);const{themeClass,currentTheme,currentColorScheme}=useTheme({theme,colorScheme},styles);if(!data)return null;return React.createElement("div",_extends({className:makeClass(className,themeClass,styles.text)},html),React.createElement(ThemeProvider,{theme:currentTheme,colorScheme:currentColorScheme},React.createElement(DOMInspectorItem,{data:data,depth:0,expandLevel:expandLevel})))};DOMInspector.defaultProps={expandLevel:0};
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["data", "theme", "colorScheme", "expandLevel", "className"];
+import React, { useState } from "react";
+import makeClass from "clsx";
+import { useTheme, ThemeProvider } from "@devtools-ds/themes";
+import { Tree } from "@devtools-ds/tree";
+import { Node as TreeNode } from "@devtools-ds/node";
+import styles from "./DOMInspector.css";
+/** Get text to inline based on current state */
+const getInlineText = (data, open) => {
+  const hasInlineText = Boolean(data.childNodes.length === 0 || data.childNodes.length === 1 && data.childNodes[0].nodeType === Node.TEXT_NODE && data.textContent && data.textContent.length < 80);
+  if (hasInlineText && !open) {
+    return data.textContent;
+  }
+  return "…";
+};
+const emptyElements = ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"];
+
+/** Type narrowing is Element function */
+const isElement = data => {
+  return data.nodeType === Node.ELEMENT_NODE;
+};
+
+/** Type narrowing is Text function */
+const isText = data => {
+  return data.nodeType === Node.TEXT_NODE;
+};
+
+/** Type narrowing is CDATA function */
+const isCDATA = data => {
+  return data.nodeType === Node.CDATA_SECTION_NODE;
+};
+
+/** Type narrowing is ProcessingInstruction function */
+const isProcessingInstruction = data => {
+  return data.nodeType === Node.PROCESSING_INSTRUCTION_NODE;
+};
+
+/** Type narrowing is Comment function */
+const isComment = data => {
+  return data.nodeType === Node.COMMENT_NODE;
+};
+
+/** Type narrowing is Document function */
+const isDocument = data => {
+  return data.nodeType === Node.DOCUMENT_NODE;
+};
+
+/** Type narrowing is DocumentType function */
+const isDocumentType = data => {
+  return data.nodeType === Node.DOCUMENT_TYPE_NODE;
+};
+
+/** Type narrowing is DocumentFragment function */
+const isDocumentFragment = data => {
+  return data.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+};
+
+/** Create the label with attributes for an HTML Element */
+export const getElementLabel = (data, open, tagName, isEmpty) => {
+  const properties = {};
+  if (data.attributes) {
+    for (let i = 0; i < data.attributes.length; i++) {
+      const attr = data.attributes.item(i);
+      if (attr) {
+        properties[attr.name] = attr.value;
+      }
+    }
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeNode, {
+    name: tagName,
+    properties: properties
+  }), data.childNodes.length !== 0 && !isEmpty && !open && /*#__PURE__*/React.createElement(React.Fragment, null, getInlineText(data, open), /*#__PURE__*/React.createElement(TreeNode, {
+    closing: true,
+    name: tagName
+  })));
+};
+
+/** A component for rendering DOM items. */
+export const DOMInspectorItem = props => {
+  var _data$textContent;
+  const {
+    data,
+    depth,
+    expandLevel
+  } = props;
+  const [open, setOpen] = useState(depth < expandLevel);
+  const text = (_data$textContent = data.textContent) === null || _data$textContent === void 0 ? void 0 : _data$textContent.trim();
+  const children = [];
+  for (let i = 0; i < data.childNodes.length; i++) {
+    children.push(data.childNodes[i]);
+  }
+
+  // Element Node
+  if (isElement(data)) {
+    const tagName = data.tagName.toLowerCase();
+    const isEmpty = emptyElements.includes(tagName);
+    return /*#__PURE__*/React.createElement(Tree, {
+      open: open,
+      label: getElementLabel(data, open, tagName, isEmpty),
+      onUpdate: value => {
+        setOpen(value);
+      }
+    }, children.map((child, index) => {
+      return /*#__PURE__*/React.createElement(DOMInspectorItem
+      // eslint-disable-next-line
+      , {
+        key: index,
+        data: child,
+        depth: depth + 1,
+        expandLevel: expandLevel
+      });
+    }), children.length > 0 && !isEmpty && /*#__PURE__*/React.createElement(Tree, {
+      label: /*#__PURE__*/React.createElement(TreeNode, {
+        closing: true,
+        name: tagName
+      })
+    }));
+  }
+
+  // Text
+  if (isText(data)) {
+    if (text) {
+      return /*#__PURE__*/React.createElement(Tree, {
+        label: `${data.textContent}`
+      });
+    }
+    return null;
+  }
+
+  // CDATA
+  if (isCDATA(data)) {
+    return /*#__PURE__*/React.createElement(Tree, {
+      label: `<![CDATA[${text}]]>`
+    });
+  }
+
+  // Processing Instruction
+  if (isProcessingInstruction(data)) {
+    return /*#__PURE__*/React.createElement(Tree, {
+      label: data.nodeName
+    });
+  }
+
+  // Comment
+  if (isComment(data)) {
+    return /*#__PURE__*/React.createElement(Tree, {
+      label: /*#__PURE__*/React.createElement(TreeNode, {
+        variant: "comment",
+        name: text || ""
+      })
+    });
+  }
+
+  // Document
+  if (isDocument(data) || isDocumentFragment(data)) {
+    return /*#__PURE__*/React.createElement(Tree, {
+      open: open,
+      label: data.nodeName,
+      onUpdate: value => {
+        setOpen(value);
+      }
+    }, children.map((child, index) => {
+      return /*#__PURE__*/React.createElement(DOMInspectorItem
+      // eslint-disable-next-line
+      , {
+        key: index,
+        data: child,
+        depth: depth + 1,
+        expandLevel: expandLevel
+      });
+    }));
+  }
+
+  // Document Type
+  if (isDocumentType(data)) {
+    const publicId = data.publicId ? ` PUBLIC "${data.publicId}"` : "";
+    const systemId = data.systemId ? ` "${data.systemId}"` : "";
+    return /*#__PURE__*/React.createElement(Tree, {
+      label: /*#__PURE__*/React.createElement(TreeNode, {
+        variant: "doctype",
+        name: `${data.name}${publicId}${systemId}`
+      })
+    });
+  }
+  return null;
+};
+
+/** An Inspector for DOM nodes and HTML Documents. */
+export const DOMInspector = props => {
+  const {
+      data,
+      theme,
+      colorScheme,
+      expandLevel,
+      className
+    } = props,
+    html = _objectWithoutProperties(props, _excluded);
+  const {
+    themeClass,
+    currentTheme,
+    currentColorScheme
+  } = useTheme({
+    theme,
+    colorScheme
+  }, styles);
+  if (!data) return null;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: makeClass(className, themeClass, styles.text)
+  }, html), /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: currentTheme,
+    colorScheme: currentColorScheme
+  }, /*#__PURE__*/React.createElement(DOMInspectorItem, {
+    data: data,
+    depth: 0,
+    expandLevel: expandLevel
+  })));
+};
+DOMInspector.defaultProps = {
+  expandLevel: 0
+};
 //# sourceMappingURL=index.js.map
 import "../main.css";

package.json

 {
   "name": "@devtools-ds/dom-inspector",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "./dist/cjs/index.js",
@@ -33,5 +33,5 @@ "module": "./dist/esm/index.js",
     "@babel/runtime": "7.7.2",
-    "@devtools-ds/node": "^1.2.0",
-    "@devtools-ds/themes": "^1.2.0",
-    "@devtools-ds/tree": "^1.2.0",
+    "@devtools-ds/node": "^1.2.1",
+    "@devtools-ds/themes": "^1.2.1",
+    "@devtools-ds/tree": "^1.2.1",
     "clsx": "1.1.0"
@@ -51,3 +51,3 @@ },
   ],
-  "gitHead": "66f7d45baeabc9552acb25e3b3ebe28c8bb20d4f"
+  "gitHead": "53e5c67af2fa62f8044be93fb6e2af8573988aa4"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59348

increased by10.15%

Lines of code

729

increased by111.92%

Number of low quality alerts

1

decreased by-50%

Dependency changes

• + Added@types/react@19.0.3(transitive)

• - Removed@types/react@19.0.4(transitive)

• Updated@devtools-ds/node@^1.2.1

• Updated@devtools-ds/themes@^1.2.1

• Updated@devtools-ds/tree@^1.2.1