Context & Scope Management

Manage data flow between nested components. PulsePoint allows you to pass data down via attributes (props) or explicitly switch scopes to access parent state.

Passing Data (Props)

To pass state to a child component, use standard HTML attributes. The child accesses these attributes as its own initial state.

Reactive Props Rule: Always use mustache syntax {value} for reactive data.
Attributes without braces are treated as static strings and will not update when the parent state changes.
layout.html 
<!-- pp-scope:app -->
<div user="{user}" parent-count="{0}" user-role="{userRole}" pp-component="slg1xlf">
    <div pp-component="user-card" user-name="{user}" user-role="{userRole}">
        <!-- Child content -->
        <h3>Child Component</h3>
        <p>Name: {userName}</p>
        <p>Role: {userRole}</p>
    </div>
</div>
<!-- /pp-scope -->

<script type="text/pp">
    const [user, setUser] = pp.state("Alice");
    const [userRole, setUserRole] = pp.state("Admin");
</script>

Scope Switching

Sometimes a child element needs to trigger an action in the Parent's scope (like a "Log Out" button inside a nested card). Use <!-- pp-scope:id --> to context-switch.

How it works: Elements wrapped in the scope comment skip the local component's script and execute directly against the target ID's script.
context-switching.html 
<!-- ROOT APP (ID: app-root) -->
<div id="app-root">
  <p>Global Counter: {globalCount}</p>

  <!-- CHILD COMPONENT -->
  <div pp-component="child-widget" class="p-4 bg-gray-100 mt-4">
    <p>I am the child widget.</p>
    
    <!-- 1. Normal Button (Runs in Child Scope) -->
    <button onclick="console.log('Child clicked')">Local Action</button>

    <!-- 2. Scoped Button (Runs in Parent Scope) -->
    <!-- pp-scope:app-root -->
    <button onclick="incrementGlobal()" class="bg-blue-500 text-white">
       Update Parent State directly
    </button>
    <!-- /pp-scope -->

    <script type="text/pp">
       // Child Logic
    </script>
  </div>
</div>

<script type="text/pp">
  // Root Logic
  const [globalCount, setGlobal] = pp.state(0);
  
  function incrementGlobal() {
    setGlobal(globalCount + 1);
  }
</script>

Deep Nesting (Prop Drilling)

You can nest components as deeply as needed. Data flows down recursively via reactive attributes.

nested-layers.html 
<div pp-component="parent">
  <h2>Layer 1: Parent</h2>

  <!-- Pass 'count' down using {mustache} -->
  <div pp-component="child" data-count="{count}">
    <h3>Layer 2: Child (Prop: {dataCount})</h3>
    
    <!-- Pass it down again -->
    <div pp-component="grandchild" data-count="{dataCount}">
      <h4>Layer 3: Grandchild</h4>
      <p>Value passed down 2 layers: {dataCount}</p>
      
      <script type="text/pp">
         const [dataCount] = pp.state(0);
      </script>
    </div>

    <script type="text/pp">
       const [dataCount] = pp.state(0);
    </script>
  </div>

  <script type="text/pp">
     const [count, setCount] = pp.state(100);
  </script>
</div>
Component Children Next: Portals