feat(repr): Pretty print

examples/test/print.py

@@ -0,0 +1,28 @@
+from trame.app import get_server
+from trame.ui.html import DivLayout
+from trame.widgets import html
+
+server = get_server()
+
+with DivLayout(server) as layout:
+    with html.Div():
+        with html.Div():
+            with html.Div(
+                style="border: 1px;",
+                classes=("dynaClass", {}),
+            ) as sub_container:
+                html.Span("Hello")
+
+            print("=" * 60)
+            print("widget")
+            print("=" * 60)
+            print(sub_container)
+
+            html.Span("world")
+        html.Span("What's")
+    html.Span("Up")
+
+    print("=" * 60)
+    print("Full layout")
+    print("=" * 60)
+    print(layout)

trame_client/ui/core.py

@@ -1,4 +1,5 @@
 import os
+from ..utils.formatter import to_pretty_html
 
 
 def css_unit(v):
@@ -87,6 +88,9 @@ def html(self):
         """
         return self.root.html
 
+    def __repr__(self):
+        return to_pretty_html(self.html)
+
     @property
     def server(self):
         """Return the server"""

trame_client/utils/formatter.py

@@ -0,0 +1,49 @@
+class BgColors:
+    HEADER = "\033[95m"
+    OKBLUE = "\033[94m"
+    OKCYAN = "\033[96m"
+    OKGREEN = "\033[92m"
+    WARNING = "\033[93m"
+    FAIL = "\033[91m"
+    ENDC = "\033[0m"
+    BOLD = "\033[1m"
+    UNDERLINE = "\033[4m"
+
+
+COLOR_PALETTE = [
+    BgColors.OKBLUE,
+    BgColors.WARNING,
+    BgColors.OKCYAN,
+    BgColors.FAIL,
+    BgColors.OKGREEN,
+]
+
+
+def compute_indent(line: str, increment=2) -> str:
+    if line.startswith("</"):
+        return -increment
+    if line.endswith("/>"):
+        return 0
+    if line.startswith("<"):
+        return increment
+    return 0
+
+
+def to_pretty_html(html_content: str) -> str:
+    indent_step = 2
+    output_lines = []
+    indent = 0
+    for line in html_content.splitlines():
+        delta = compute_indent(line, indent_step)
+        if delta < 0:
+            indent += compute_indent(line)
+
+        color = COLOR_PALETTE[int(indent / indent_step) % len(COLOR_PALETTE)]
+
+        output_lines.append(
+            f"{color}{' '*indent}{line.replace(' >', '>')}{BgColors.ENDC}"
+        )
+        if delta > 0:
+            indent += compute_indent(line)
+
+    return "\n".join(output_lines)

trame_client/widgets/core.py

@@ -1,4 +1,5 @@
 from ..utils.defaults import TrameDefault
+from ..utils.formatter import to_pretty_html
 
 SHARED_ATTRIBUTES = [
     "accesskey",
@@ -484,6 +485,7 @@ def clear(self):
         Remove all children
         """
         self._children.clear()
+        return self
 
     def hide(self):
         """
@@ -565,6 +567,9 @@ def html(self):
             print(e)
             return f"<{self._elem_name} html-error />"
 
+    def __repr__(self):
+        return to_pretty_html(self.html)
+
     # -------------------------------------------------------------------------
     # Resource manager
     # -------------------------------------------------------------------------