Component

The Component class is the heart of Probo UI. It manages state, rendering, and context.

---

component

Component

Bases: ComponentNode

The base class for all UI components in PROBO. Orchestrates state management, template rendering, and JIT CSS compilation.

This class acts as the conductor, coordinating the Body (Template/Elements), the Brain (ComponentState), and the Skin (JIT CSS). It supports lifecycle hooks, skin swapping, and root element proxying.

Parameters:

Name	Type	Description	Default
name	str	Unique identifier for the component registry. Used for debugging and hydration.	required
state	ComponentState	The state manager containing static/dynamic data and logic gates.	None
template	str	The raw HTML string containing element state placeholders.	str()
props	dict	context or configuration properties passed to the component.	None
**elements	dict	Child components or template fragments keyed by name.	{}

Attributes:

Name	Type	Description
name	str	The component's registry name.
comp_state	ComponentState	The internal state manager.
active_css_rules	List[CssRule]	The list of CSS rules currently applied.
default_css_rules	List[CssRule]	The baseline CSS rules (used for resetting skins).

Example:

static:

    >>> # Define template
    >>> template_string = div(span('hello',strong('world!')),)
    >>>
    >>> # Define Component
    >>> comp = Component("UserBadge",template_string)
    >>>
    >>>  #set root element
    >>>  comp.set_root_element('section',Id='root',Class='root-class')
    >>>
    >>> # Apply Style
    >>> comp.load_css_rules(span=CssRule(font_weight="bold"))
    >>>
    >>> # Render
    >>> html, css = comp.render()
    >>> html -> <section id="root" class="root-class"><span>hello<strong>world!</strong></span></section>
    >>> css -> span {font-weight:bold;}

state defined:
    >>> # Define State
    >>> es = ElementState('span', d_state='username')
    >>> template_string = div(span('User:',strong(es.placeholder)),)
    >>> state = ComponentState(d_data={'username': 'Admin'}, es)
    >>>
    >>> # Define Component
    >>> comp = Component("UserBadge", state=state, template=template_string)
    >>>
    >>> # Apply Style
    >>> comp.load_css_rules(span=CssRule(font_weight="bold"))
    >>>
    >>> # Render
    >>> html, css = comp.render()
    >>> html -> <section id="root" class="root-class"><span>User:<strong><span>Admin</span></strong></span></section>
    >>> css -> span {font-weight:bold;}

add_root_class(class_name)

Adds a CSS class to the root element.

before_render(**props)

Lifecycle Hook: Called before render. Override to modify state/props dynamically.

change_skin(source=None, root_attr=None, root_attr_value=None, **root_css)

Applies a new skin (CSS rules) to the component. Supports Dictionaries, other Components, Theme lists, and Root kwargs.

get(name) classmethod

Retrieves a registered component by name.

load_css_rules(**css)

Loads initial CSS rules into the component.

on_init()

Lifecycle Hook: Called after initialization. Override to add setup logic.

register(name, state=None, props=None, *elements) classmethod

Registers a new component instance.

render(override_props=None, force_state=False, add_to_global=False)

Compiles the component into final HTML and CSS.

Returns:

Name	Type	Description
tuple	str | tuple	(html_string, css_string) or str: html_string (if no CSS)

set_root_element(root='div', **attrs)

Defines a wrapper element for the component.

set_root_id(element_id)

Sets the ID of the root element.

sub_component(component)

Embeds another component inside this one.

  # 2. CONTENT CONTROL
  show_source: false        # Hide the "View Source" button (keep it clean)
  show_category_heading: true # Group things by "Methods", "Attributes", etc.

  # 3. FILTERING (Pick what to show)
  members:                  # Only show these specific methods
    - __init__
    - render
    - get_context

  # OR use filters (uncomment to use)
  # filters:
  #   - "!^_"               # Exclude anything starting with "_" (private methods)