@coherent.js/devtools 1.0.0-rc.2 → 1.0.0-rc.3

package/dist/component-visualizer.js

@@ -0,0 +1,374 @@
+// src/component-visualizer.js
+import {
+  isCoherentObject,
+  hasChildren,
+  normalizeChildren
+} from "@coherent.js/core";
+var ComponentVisualizer = class {
+  constructor(options = {}) {
+    this.options = {
+      maxDepth: options.maxDepth || 50,
+      showProps: options.showProps !== false,
+      showMetadata: options.showMetadata !== false,
+      colorOutput: options.colorOutput !== false,
+      compactMode: options.compactMode || false,
+      ...options
+    };
+    this.stats = {
+      totalComponents: 0,
+      totalDepth: 0,
+      staticComponents: 0,
+      dynamicComponents: 0,
+      renderTime: 0
+    };
+  }
+  /**
+   * Visualize a component tree
+   */
+  visualize(component, name = "Root") {
+    const startTime = performance.now();
+    this.stats = { totalComponents: 0, totalDepth: 0, staticComponents: 0, dynamicComponents: 0, renderTime: 0 };
+    const tree = this.buildTree(component, name, 0);
+    const visualization = this.renderTree(tree);
+    this.stats.renderTime = performance.now() - startTime;
+    return {
+      visualization,
+      stats: { ...this.stats },
+      tree
+    };
+  }
+  /**
+   * Build component tree structure
+   */
+  buildTree(component, name, depth) {
+    if (depth > this.options.maxDepth) {
+      return {
+        name: "MAX_DEPTH_REACHED",
+        type: "warning",
+        depth,
+        children: [],
+        metadata: { message: `Maximum depth ${this.options.maxDepth} exceeded` }
+      };
+    }
+    this.stats.totalComponents++;
+    this.stats.totalDepth = Math.max(this.stats.totalDepth, depth);
+    const node = {
+      name,
+      depth,
+      children: [],
+      metadata: {}
+    };
+    if (component === null || component === void 0) {
+      node.type = "empty";
+      node.value = "";
+      this.stats.staticComponents++;
+    } else if (typeof component === "string") {
+      node.type = "text";
+      node.value = component;
+      node.metadata.length = component.length;
+      this.stats.staticComponents++;
+    } else if (typeof component === "number") {
+      node.type = "number";
+      node.value = component;
+      this.stats.staticComponents++;
+    } else if (typeof component === "boolean") {
+      node.type = "boolean";
+      node.value = component;
+      this.stats.staticComponents++;
+    } else if (typeof component === "function") {
+      node.type = "function";
+      node.value = `Function: ${component.name || "anonymous"}`;
+      node.metadata.arity = component.length;
+      node.metadata.isAsync = component.constructor.name === "AsyncFunction";
+      this.stats.dynamicComponents++;
+    } else if (Array.isArray(component)) {
+      node.type = "array";
+      node.metadata.length = component.length;
+      component.forEach((item, _index) => {
+        const childNode = this.buildTree(item, `[${_index}]`, depth + 1);
+        node.children.push(childNode);
+      });
+      this.stats.dynamicComponents++;
+    } else if (isCoherentObject(component)) {
+      const entries = Object.entries(component);
+      if (entries.length === 1) {
+        const [tagName, props] = entries;
+        node.type = "element";
+        node.tagName = tagName;
+        node.props = this.options.showProps ? this.analyzeProps(props) : {};
+        if (hasChildren(props)) {
+          const children = normalizeChildren(props.children);
+          children.forEach((child, _index) => {
+            const childNode = this.buildTree(child, `${tagName}[${_index}]`, depth + 1);
+            node.children.push(childNode);
+          });
+        }
+        if (this.hasDynamicContent(props)) {
+          this.stats.dynamicComponents++;
+          node.metadata.dynamic = true;
+        } else {
+          this.stats.staticComponents++;
+          node.metadata.dynamic = false;
+        }
+      } else {
+        node.type = "complex";
+        node.metadata.keys = entries.map(([key]) => key);
+        this.stats.dynamicComponents++;
+      }
+    } else {
+      node.type = "unknown";
+      node.value = String(component);
+      node.metadata.constructor = component.constructor?.name || "Object";
+      this.stats.staticComponents++;
+    }
+    return node;
+  }
+  /**
+   * Analyze component props
+   */
+  analyzeProps(props) {
+    const analyzed = {};
+    if (!props || typeof props !== "object") {
+      return analyzed;
+    }
+    Object.entries(props).forEach(([key, value]) => {
+      if (key === "children") return;
+      if (typeof value === "function") {
+        analyzed[key] = {
+          type: "function",
+          name: value.name || "anonymous",
+          isEvent: /^on[A-Z]/.test(key)
+        };
+      } else if (typeof value === "string") {
+        analyzed[key] = {
+          type: "string",
+          length: value.length,
+          preview: value.length > 50 ? `${value.substring(0, 47)}...` : value
+        };
+      } else if (typeof value === "object" && value !== null) {
+        analyzed[key] = {
+          type: "object",
+          keys: Object.keys(value),
+          constructor: value.constructor?.name || "Object"
+        };
+      } else {
+        analyzed[key] = {
+          type: typeof value,
+          value
+        };
+      }
+    });
+    return analyzed;
+  }
+  /**
+   * Check if component has dynamic content
+   */
+  hasDynamicContent(props) {
+    if (typeof props === "object" && props !== null) {
+      for (const value of Object.values(props)) {
+        if (typeof value === "function") return true;
+        if (typeof value === "object" && this.hasDynamicContent(value)) return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Render tree as formatted text
+   */
+  renderTree(tree) {
+    const lines = [];
+    if (this.options.colorOutput) {
+      lines.push(this.colorize("\u{1F333} Coherent.js Component Tree", "cyan"));
+      lines.push(this.colorize("\u2550".repeat(40), "cyan"));
+    } else {
+      lines.push("\u{1F333} Coherent.js Component Tree");
+      lines.push("\u2550".repeat(40));
+    }
+    this.renderNode(tree, lines, "", true);
+    if (this.options.showMetadata) {
+      lines.push("");
+      lines.push("\u{1F4CA} Tree Statistics:");
+      lines.push(`   Total Components: ${this.stats.totalComponents}`);
+      lines.push(`   Max Depth: ${this.stats.totalDepth}`);
+      lines.push(`   Static Components: ${this.stats.staticComponents}`);
+      lines.push(`   Dynamic Components: ${this.stats.dynamicComponents}`);
+      lines.push(`   Render Time: ${this.stats.renderTime.toFixed(2)}ms`);
+    }
+    return lines.join("\n");
+  }
+  /**
+   * Render individual node
+   */
+  renderNode(node, lines, prefix = "", isLast = true) {
+    const connector = isLast ? "\u2514\u2500\u2500 " : "\u251C\u2500\u2500 ";
+    const childPrefix = prefix + (isLast ? "    " : "\u2502   ");
+    let nodeLine = prefix + connector;
+    if (this.options.colorOutput) {
+      nodeLine += this.getNodeIcon(node.type);
+      nodeLine += this.colorize(node.name, this.getNodeColor(node.type));
+    } else {
+      nodeLine += this.getNodeIcon(node.type) + node.name;
+    }
+    if (!this.options.compactMode) {
+      nodeLine += ` (${node.type})`;
+      if (node.type === "element") {
+        nodeLine += ` <${node.tagName}>`;
+      } else if (node.type === "text" && node.value) {
+        nodeLine += `: "${node.value.substring(0, 30)}${node.value.length > 30 ? "..." : ""}"`;
+      } else if (node.type === "function") {
+        nodeLine += `(${node.metadata.arity || 0} args)`;
+      }
+      if (node.metadata.dynamic !== void 0) {
+        nodeLine += node.metadata.dynamic ? " \u{1F504}" : " \u{1F4CC}";
+      }
+    }
+    lines.push(nodeLine);
+    if (this.options.showProps && node.props && !this.options.compactMode) {
+      Object.entries(node.props).forEach(([key, prop], _index) => {
+        const isLastProp = _index === Object.keys(node.props).length - 1;
+        const propConnector = isLastProp ? "\u2514\u2500\u2500 " : "\u251C\u2500\u2500 ";
+        const _propPrefix = childPrefix + (isLastProp && node.children.length === 0 ? "    " : "\u2502   ");
+        let propLine = childPrefix + propConnector;
+        if (this.options.colorOutput) {
+          propLine += this.colorize(key, "yellow");
+        } else {
+          propLine += key;
+        }
+        propLine += `: ${this.formatPropValue(prop)}`;
+        lines.push(propLine);
+      });
+    }
+    node.children.forEach((child, index) => {
+      const isLastChild = index === node.children.length - 1;
+      this.renderNode(child, lines, childPrefix, isLastChild);
+    });
+  }
+  /**
+   * Get node icon based on type
+   */
+  getNodeIcon(type) {
+    const icons = {
+      element: "\u{1F3F7}\uFE0F ",
+      text: "\u{1F4DD} ",
+      function: "\u26A1 ",
+      array: "\u{1F4CB} ",
+      empty: "\u2B55 ",
+      number: "\u{1F522} ",
+      boolean: "\u2611\uFE0F ",
+      complex: "\u{1F4E6} ",
+      unknown: "\u2753 ",
+      warning: "\u26A0\uFE0F "
+    };
+    return icons[type] || "\u{1F4C4} ";
+  }
+  /**
+   * Get node color based on type
+   */
+  getNodeColor(type) {
+    const colors = {
+      element: "green",
+      text: "blue",
+      function: "magenta",
+      array: "cyan",
+      empty: "gray",
+      number: "yellow",
+      boolean: "yellow",
+      complex: "red",
+      unknown: "red",
+      warning: "red"
+    };
+    return colors[type] || "white";
+  }
+  /**
+   * Format property value for display
+   */
+  formatPropValue(prop) {
+    if (prop.type === "function") {
+      return `\u26A1 ${prop.name}${prop.isEvent ? " (event)" : ""}`;
+    } else if (prop.type === "string") {
+      return `"${prop.preview}"`;
+    } else if (prop.type === "object") {
+      return `${prop.constructor} {${prop.keys.join(", ")}}`;
+    } else {
+      return String(prop.value);
+    }
+  }
+  /**
+   * Add color to text (ANSI colors)
+   */
+  colorize(text, color) {
+    const colors = {
+      black: "\x1B[30m",
+      red: "\x1B[31m",
+      green: "\x1B[32m",
+      yellow: "\x1B[33m",
+      blue: "\x1B[34m",
+      magenta: "\x1B[35m",
+      cyan: "\x1B[36m",
+      white: "\x1B[37m",
+      gray: "\x1B[90m"
+    };
+    const reset = "\x1B[0m";
+    return `${colors[color] || ""}${text}${reset}`;
+  }
+  /**
+   * Export tree as JSON for further analysis
+   */
+  exportAsJSON(tree) {
+    return JSON.stringify(tree, null, 2);
+  }
+  /**
+   * Export tree as DOT format for Graphviz
+   */
+  exportAsDOT(tree) {
+    const lines = ["digraph ComponentTree {"];
+    lines.push("  rankdir=TB;");
+    lines.push("  node [shape=box, style=rounded];");
+    this.generateDOTNodes(tree, lines, "root");
+    lines.push("}");
+    return lines.join("\n");
+  }
+  /**
+   * Generate DOT nodes
+   */
+  generateDOTNodes(node, lines, parentId) {
+    const nodeId = `${parentId}_${node.name.replace(/[^a-zA-Z0-9]/g, "_")}`;
+    let label = node.name;
+    if (node.type === "element") {
+      label = `<${node.tagName}>\\n${node.name}`;
+    }
+    lines.push(`  "${nodeId}" [label="${label}"];`);
+    if (parentId !== "root") {
+      lines.push(`  "${parentId}" -> "${nodeId}";`);
+    }
+    node.children.forEach((child, _index) => {
+      this.generateDOTNodes(child, lines, nodeId);
+    });
+  }
+};
+function createComponentVisualizer(options = {}) {
+  return new ComponentVisualizer(options);
+}
+function visualizeComponent(component, name = "Root", options = {}) {
+  const visualizer = createComponentVisualizer(options);
+  return visualizer.visualize(component, name);
+}
+function logComponentTree(component, name = "Root", options = {}) {
+  const result = visualizeComponent(component, name, options);
+  console.log(result.visualization);
+  return result;
+}
+var component_visualizer_default = {
+  ComponentVisualizer,
+  createComponentVisualizer,
+  visualizeComponent,
+  logComponentTree
+};
+export {
+  ComponentVisualizer,
+  createComponentVisualizer,
+  component_visualizer_default as default,
+  logComponentTree,
+  visualizeComponent
+};
+//# sourceMappingURL=component-visualizer.js.map

package/dist/component-visualizer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/component-visualizer.js"],
+  "sourcesContent": ["/**\n * Component Tree Visualizer for Coherent.js\n *\n * Provides beautiful visualization of functional component trees\n * making it easy to debug and understand pure JavaScript object components\n *\n * @module ComponentVisualizer\n */\n\nimport {\n  isCoherentObject,\n  hasChildren,\n  normalizeChildren\n} from '@coherent.js/core';\n\n/**\n * Component tree visualizer with enhanced debugging\n */\nexport class ComponentVisualizer {\n  constructor(options = {}) {\n    this.options = {\n      maxDepth: options.maxDepth || 50,\n      showProps: options.showProps !== false,\n      showMetadata: options.showMetadata !== false,\n      colorOutput: options.colorOutput !== false,\n      compactMode: options.compactMode || false,\n      ...options\n    };\n\n    this.stats = {\n      totalComponents: 0,\n      totalDepth: 0,\n      staticComponents: 0,\n      dynamicComponents: 0,\n      renderTime: 0\n    };\n  }\n\n  /**\n   * Visualize a component tree\n   */\n  visualize(component, name = 'Root') {\n    const startTime = performance.now();\n    this.stats = { totalComponents: 0, totalDepth: 0, staticComponents: 0, dynamicComponents: 0, renderTime: 0 };\n\n    const tree = this.buildTree(component, name, 0);\n    const visualization = this.renderTree(tree);\n\n    this.stats.renderTime = performance.now() - startTime;\n\n    return {\n      visualization,\n      stats: { ...this.stats },\n      tree\n    };\n  }\n\n  /**\n   * Build component tree structure\n   */\n  buildTree(component, name, depth) {\n    if (depth > this.options.maxDepth) {\n      return {\n        name: 'MAX_DEPTH_REACHED',\n        type: 'warning',\n        depth,\n        children: [],\n        metadata: { message: `Maximum depth ${this.options.maxDepth} exceeded` }\n      };\n    }\n\n    this.stats.totalComponents++;\n    this.stats.totalDepth = Math.max(this.stats.totalDepth, depth);\n\n    const node = {\n      name,\n      depth,\n      children: [],\n      metadata: {}\n    };\n\n    // Handle different component types\n    if (component === null || component === undefined) {\n      node.type = 'empty';\n      node.value = '';\n      this.stats.staticComponents++;\n    } else if (typeof component === 'string') {\n      node.type = 'text';\n      node.value = component;\n      node.metadata.length = component.length;\n      this.stats.staticComponents++;\n    } else if (typeof component === 'number') {\n      node.type = 'number';\n      node.value = component;\n      this.stats.staticComponents++;\n    } else if (typeof component === 'boolean') {\n      node.type = 'boolean';\n      node.value = component;\n      this.stats.staticComponents++;\n    } else if (typeof component === 'function') {\n      node.type = 'function';\n      node.value = `Function: ${component.name || 'anonymous'}`;\n      node.metadata.arity = component.length;\n      node.metadata.isAsync = component.constructor.name === 'AsyncFunction';\n      this.stats.dynamicComponents++;\n    } else if (Array.isArray(component)) {\n      node.type = 'array';\n      node.metadata.length = component.length;\n      component.forEach((item, _index) => {\n        const childNode = this.buildTree(item, `[${_index}]`, depth + 1);\n        node.children.push(childNode);\n      });\n      this.stats.dynamicComponents++;\n    } else if (isCoherentObject(component)) {\n      const entries = Object.entries(component);\n      if (entries.length === 1) {\n        const [tagName, props] = entries;\n        node.type = 'element';\n        node.tagName = tagName;\n        node.props = this.options.showProps ? this.analyzeProps(props) : {};\n\n        // Extract children\n        if (hasChildren(props)) {\n          const children = normalizeChildren(props.children);\n          children.forEach((child, _index) => {\n            const childNode = this.buildTree(child, `${tagName}[${_index}]`, depth + 1);\n            node.children.push(childNode);\n          });\n        }\n\n        // Analyze if static or dynamic\n        if (this.hasDynamicContent(props)) {\n          this.stats.dynamicComponents++;\n          node.metadata.dynamic = true;\n        } else {\n          this.stats.staticComponents++;\n          node.metadata.dynamic = false;\n        }\n      } else {\n        node.type = 'complex';\n        node.metadata.keys = entries.map(([key]) => key);\n        this.stats.dynamicComponents++;\n      }\n    } else {\n      node.type = 'unknown';\n      node.value = String(component);\n      node.metadata.constructor = component.constructor?.name || 'Object';\n      this.stats.staticComponents++;\n    }\n\n    return node;\n  }\n\n  /**\n   * Analyze component props\n   */\n  analyzeProps(props) {\n    const analyzed = {};\n\n    if (!props || typeof props !== 'object') {\n      return analyzed;\n    }\n\n    Object.entries(props).forEach(([key, value]) => {\n      if (key === 'children') return;\n\n      if (typeof value === 'function') {\n        analyzed[key] = {\n          type: 'function',\n          name: value.name || 'anonymous',\n          isEvent: /^on[A-Z]/.test(key)\n        };\n      } else if (typeof value === 'string') {\n        analyzed[key] = {\n          type: 'string',\n          length: value.length,\n          preview: value.length > 50 ? `${value.substring(0, 47)}...` : value\n        };\n      } else if (typeof value === 'object' && value !== null) {\n        analyzed[key] = {\n          type: 'object',\n          keys: Object.keys(value),\n          constructor: value.constructor?.name || 'Object'\n        };\n      } else {\n        analyzed[key] = {\n          type: typeof value,\n          value\n        };\n      }\n    });\n\n    return analyzed;\n  }\n\n  /**\n   * Check if component has dynamic content\n   */\n  hasDynamicContent(props) {\n    if (typeof props === 'object' && props !== null) {\n      for (const value of Object.values(props)) {\n        if (typeof value === 'function') return true;\n        if (typeof value === 'object' && this.hasDynamicContent(value)) return true;\n      }\n    }\n    return false;\n  }\n\n  /**\n   * Render tree as formatted text\n   */\n  renderTree(tree) {\n    const lines = [];\n\n    if (this.options.colorOutput) {\n      lines.push(this.colorize('\uD83C\uDF33 Coherent.js Component Tree', 'cyan'));\n      lines.push(this.colorize('\u2550'.repeat(40), 'cyan'));\n    } else {\n      lines.push('\uD83C\uDF33 Coherent.js Component Tree');\n      lines.push('\u2550'.repeat(40));\n    }\n\n    this.renderNode(tree, lines, '', true);\n\n    if (this.options.showMetadata) {\n      lines.push('');\n      lines.push('\uD83D\uDCCA Tree Statistics:');\n      lines.push(`   Total Components: ${this.stats.totalComponents}`);\n      lines.push(`   Max Depth: ${this.stats.totalDepth}`);\n      lines.push(`   Static Components: ${this.stats.staticComponents}`);\n      lines.push(`   Dynamic Components: ${this.stats.dynamicComponents}`);\n      lines.push(`   Render Time: ${this.stats.renderTime.toFixed(2)}ms`);\n    }\n\n    return lines.join('\\n');\n  }\n\n  /**\n   * Render individual node\n   */\n  renderNode(node, lines, prefix = '', isLast = true) {\n    const connector = isLast ? '\u2514\u2500\u2500 ' : '\u251C\u2500\u2500 ';\n    const childPrefix = prefix + (isLast ? '    ' : '\u2502   ');\n\n    let nodeLine = prefix + connector;\n\n    // Add node icon and name\n    if (this.options.colorOutput) {\n      nodeLine += this.getNodeIcon(node.type);\n      nodeLine += this.colorize(node.name, this.getNodeColor(node.type));\n    } else {\n      nodeLine += this.getNodeIcon(node.type) + node.name;\n    }\n\n    // Add type information\n    if (!this.options.compactMode) {\n      nodeLine += ` (${node.type})`;\n\n      // Add additional info based on type\n      if (node.type === 'element') {\n        nodeLine += ` <${node.tagName}>`;\n      } else if (node.type === 'text' && node.value) {\n        nodeLine += `: \"${node.value.substring(0, 30)}${node.value.length > 30 ? '...' : ''}\"`;\n      } else if (node.type === 'function') {\n        nodeLine += `(${node.metadata.arity || 0} args)`;\n      }\n\n      // Add dynamic indicator\n      if (node.metadata.dynamic !== undefined) {\n        nodeLine += node.metadata.dynamic ? ' \uD83D\uDD04' : ' \uD83D\uDCCC';\n      }\n    }\n\n    lines.push(nodeLine);\n\n    // Add props if enabled and not compact\n    if (this.options.showProps && node.props && !this.options.compactMode) {\n      Object.entries(node.props).forEach(([key, prop], _index) => {\n        const isLastProp = _index === Object.keys(node.props).length - 1;\n        const propConnector = isLastProp ? '\u2514\u2500\u2500 ' : '\u251C\u2500\u2500 ';\n        const _propPrefix = childPrefix + (isLastProp && node.children.length === 0 ? '    ' : '\u2502   ');\n\n        let propLine = childPrefix + propConnector;\n        if (this.options.colorOutput) {\n          propLine += this.colorize(key, 'yellow');\n        } else {\n          propLine += key;\n        }\n\n        propLine += `: ${  this.formatPropValue(prop)}`;\n        lines.push(propLine);\n      });\n    }\n\n    // Render children\n    node.children.forEach((child, index) => {\n      const isLastChild = index === node.children.length - 1;\n      this.renderNode(child, lines, childPrefix, isLastChild);\n    });\n  }\n\n  /**\n   * Get node icon based on type\n   */\n  getNodeIcon(type) {\n    const icons = {\n      element: '\uD83C\uDFF7\uFE0F ',\n      text: '\uD83D\uDCDD ',\n      function: '\u26A1 ',\n      array: '\uD83D\uDCCB ',\n      empty: '\u2B55 ',\n      number: '\uD83D\uDD22 ',\n      boolean: '\u2611\uFE0F ',\n      complex: '\uD83D\uDCE6 ',\n      unknown: '\u2753 ',\n      warning: '\u26A0\uFE0F '\n    };\n    return icons[type] || '\uD83D\uDCC4 ';\n  }\n\n  /**\n   * Get node color based on type\n   */\n  getNodeColor(type) {\n    const colors = {\n      element: 'green',\n      text: 'blue',\n      function: 'magenta',\n      array: 'cyan',\n      empty: 'gray',\n      number: 'yellow',\n      boolean: 'yellow',\n      complex: 'red',\n      unknown: 'red',\n      warning: 'red'\n    };\n    return colors[type] || 'white';\n  }\n\n  /**\n   * Format property value for display\n   */\n  formatPropValue(prop) {\n    if (prop.type === 'function') {\n      return `\u26A1 ${prop.name}${prop.isEvent ? ' (event)' : ''}`;\n    } else if (prop.type === 'string') {\n      return `\"${prop.preview}\"`;\n    } else if (prop.type === 'object') {\n      return `${prop.constructor} {${prop.keys.join(', ')}}`;\n    } else {\n      return String(prop.value);\n    }\n  }\n\n  /**\n   * Add color to text (ANSI colors)\n   */\n  colorize(text, color) {\n    const colors = {\n      black: '\\x1b[30m',\n      red: '\\x1b[31m',\n      green: '\\x1b[32m',\n      yellow: '\\x1b[33m',\n      blue: '\\x1b[34m',\n      magenta: '\\x1b[35m',\n      cyan: '\\x1b[36m',\n      white: '\\x1b[37m',\n      gray: '\\x1b[90m'\n    };\n\n    const reset = '\\x1b[0m';\n    return `${colors[color] || ''}${text}${reset}`;\n  }\n\n  /**\n   * Export tree as JSON for further analysis\n   */\n  exportAsJSON(tree) {\n    return JSON.stringify(tree, null, 2);\n  }\n\n  /**\n   * Export tree as DOT format for Graphviz\n   */\n  exportAsDOT(tree) {\n    const lines = ['digraph ComponentTree {'];\n    lines.push('  rankdir=TB;');\n    lines.push('  node [shape=box, style=rounded];');\n\n    this.generateDOTNodes(tree, lines, 'root');\n\n    lines.push('}');\n    return lines.join('\\n');\n  }\n\n  /**\n   * Generate DOT nodes\n   */\n  generateDOTNodes(node, lines, parentId) {\n    const nodeId = `${parentId  }_${  node.name.replace(/[^a-zA-Z0-9]/g, '_')}`;\n\n    let label = node.name;\n    if (node.type === 'element') {\n      label = `<${node.tagName}>\\\\n${node.name}`;\n    }\n\n    lines.push(`  \"${nodeId}\" [label=\"${label}\"];`);\n\n    if (parentId !== 'root') {\n      lines.push(`  \"${parentId}\" -> \"${nodeId}\";`);\n    }\n\n    node.children.forEach((child, _index) => {\n      this.generateDOTNodes(child, lines, nodeId);\n    });\n  }\n}\n\n/**\n * Create a component visualizer\n */\nexport function createComponentVisualizer(options = {}) {\n  return new ComponentVisualizer(options);\n}\n\n/**\n * Quick visualize function\n */\nexport function visualizeComponent(component, name = 'Root', options = {}) {\n  const visualizer = createComponentVisualizer(options);\n  return visualizer.visualize(component, name);\n}\n\n/**\n * Visualize component and log to console\n */\nexport function logComponentTree(component, name = 'Root', options = {}) {\n  const result = visualizeComponent(component, name, options);\n  console.log(result.visualization);\n  return result;\n}\n\nexport default {\n  ComponentVisualizer,\n  createComponentVisualizer,\n  visualizeComponent,\n  logComponentTree\n};\n"],
+  "mappings": "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",
+  "names": []
+}