Component Props - Pulse Point Docs

Passing Props

Props allow you to pass reactive data from a parent scope down to a child component.

1 Reactive Syntax

PulsePoint props must use mustache syntax {props} to be reactive. String literals without brackets are treated as static HTML attributes.

Variables: user-id="{id}"
Booleans: disabled="{true}"

<!-- Reactive (Correct) -->
<div pp-component="btn" disabled="{isLoading}">...</div>

<!-- Static String (Not Reactive) -->
<div pp-component="btn" class="p-4">...</div>

2 Casing & Compiler Rules

Web browsers force all HTML attributes to lowercase. To support modern camelCase variable naming (e.g., myVariable), PulsePoint uses a kebab-case mapping strategy.

The Lifecycle of a Prop

1. Backend / Compiler

userProfile="{data}"

Compiler transforms camelCase to kebab-case.

2. Browser DOM (HTML)

user-profile="{data}"

Browser sees standard kebab-case attributes.

3. PulsePoint Component

userProfile

Restored to camelCase for JavaScript use.

Reactive Patterns & Usage

Props in PulsePoint are not just static values; they are reactive signals. Below are the three common patterns for reading, watching, and updating props.

1. Reading Props

Directly accessing the variable passed from the parent.

<!-- Note: parent passes 'count', child receives 'parentCount' -->
<!-- pp-scope:app -->
<div pp-component="counter-display" parent-count="{count}">
    
    <!-- The prop is automatically available as a variable -->
    <p>Props Count: {parentCount}</p>

</div>
<!-- /pp-scope -->

<script type="text/pp">
    const [count, setCount] = pp.state(0);
</script>

2. Reacting to Changes (Effects)

Using pp.effect to trigger logic when a prop updates.

<!-- pp-scope:app -->
<div pp-component="alert-box" parent-count="{count}">
    
    <p>Current Count: {parentCount}</p>

    <script type="text/pp">
        // Watch 'parentCount' for changes
        pp.effect(() => {
            console.log("Props Count changed to: ", parentCount);

            if (parentCount > 5) {
                alert("Limit reached! Count is > 5");
            }
        }, [parentCount]);
    </script>

</div>
<!-- /pp-scope -->

<!-- Controls (Updates the parent state) -->
<button onclick="setCount(count + 1)">Increment</button>

<script type="text/pp">
    const [count, setCount] = pp.state(0);
</script>

3. Two-Way Binding (Writing Upward)

Passing a "Setter" function to allow the child to update the parent.

<!-- We pass the value AND the setter function -->
<!-- pp-scope:app -->
<div 
    pp-component="smart-counter" 
    parent-count="{count}" 
    set-parent-count="{setCount}"
>
    <p>Count: {parentCount}</p>

    <script type="text/pp">
        pp.effect(() => {
            // If count gets too high, reset it from the child
            if (parentCount > 5) {
                alert("Resetting count to 0...");

                // Check if setter was passed before calling
                if (typeof setParentCount === 'function') {
                    setParentCount(0); 
                }
            }
        }, [parentCount]);
    </script>

</div>
<!-- /pp-scope -->

<button onclick="setCount(count + 1)">Increment</button>

<script type="text/pp">
    const [count, setCount] = pp.state(0);
</script>

Components Next: Component Children

Documentation