propsAsVar

propsAsVar() returns a raw JavaScript expression like pphp.props.app.<hierarchy>.<prop> pointing to the prop in the current component’s scope. This avoids same-name collisions between parent/child components. Use it to read values in validations, conditionals, and loops. For updates, use dispatchEvent() or state setters.

Signature

protected function propsAsVar(string $name): string
// Returns a raw JS path: pphp.props.<base-hierarchy>.<name>
// If $name is empty → returns '' (no output).
Param Type Behavior
$name string Prop key or nested path relative to this component (e.g. selectedDate, form.user.name). Empty → returns ''.
Returns string A raw JS expression under pphp.props for the current hierarchy. If the last hierarchy segment equals the current component ID, it is removed to prevent duplication.

Read-only usage: Use the returned path to read the value in JS logic (guards, predicates, branching). For reactive updates, prefer pphp.dispatchEvent() or a state setter.

Example Component (Constructor Precompute)

<?php

declare(strict_types=1);

namespace Lib\PHPX\Components;

use Lib\PHPX\PHPX;

class ClassName extends PHPX
{
    public ?string $variant = '';
    public ?string $class = '';

    private string $variantVar = '';

    public function __construct(array $props = [])
    {
        parent::__construct($props);

        // Compute once: raw JS path for the prop named in $this->variant
        $this->variantVar = $this->propsAsVar($this->variant);
    }

    public function render(): string
    {
        $attributes = $this->getAttributes();
        $class = $this->getMergeClasses($this->class);

        return <<<HTML
        <div class="{$class}" {$attributes}>
            {$this->children}

            <script>
                // Use the raw expression directly (no quotes):
                if ({$this->variantVar}) {
                    // Safe: reads the exact prop for THIS component scope
                    console.log('Variant value =>', {$this->variantVar});
                }
            </script>
        </div>
        HTML;
    }
}
Do / Don’t:
  • ✅ if ($ this->propsAsVar('selectedDate')) { ... } — direct read in rendered output.
  • ❌ const v = "$ this->propsAsVar('selectedDate')"; — turns it into a string literal, not a live value.
  • ❌ Writing directly to the path may bypass reactivity — use dispatchEvent() for updates.

Validation & Conditions

<script>
  const nameOk = ($this->propsAsVar('form.user.name') ?? '').trim().length > 0;
  const age = $this->propsAsVar('form.user.age') ?? 0;

  if (nameOk && age >= 18) {
    pphp.dispatchEvent('eligibility', true, { scope: 'current' });
  }
</script>

Loops / Iteration

<script>
  const items = $this->propsAsVar('list.items');
  if (Array.isArray(items)) {
    for (const row of items) {
      console.log('Row =>', row);
    }
  }
</script>
Details:
  • Anchors under the current component’s hierarchy from getComponentHierarchy().
  • If the last hierarchy segment equals the current component ID, it is dropped to avoid duplication.
  • Accepts nested names (e.g. foo.bar.baz); appended as-is to the base hierarchy.
  • Returns '' when $name is empty to avoid emitting broken JS.