Skip to content

Advanced Component Patterns

Beyond simple functions, PhpSPA offers several powerful ways to structure and call your components, giving you flexibility for any project architecture.

Class-Based Components

Complex Components

For more complex components that might have their own methods or properties, you can use a class. If a class has a __render() method, PhpSPA will automatically call it when the class is used as a component. Props and children are passed as arguments to the __render method.

<?php
class Alert {
   // This method is called automatically
   public function __render($type, $children) {
      $class = "alert alert-{$type}"; // e.g., 'alert alert-success'

      return <<<HTML
         <div class="{$class}">
            {$children}
         </div>
      HTML;
   }
}

// How to use it:
function StatusMessage() {
   return <<<HTML
      <Alert type="success">
         <strong>Success!</strong> Your profile has been updated.
      </Alert>
   HTML;
}

Method Components

You can even call other public methods of a class directly as components using the :: syntax.

<MyComponent::Header />
<MyComponent::Footer />

Namespaced and Variable Components

Flexible Organization

PhpSPA makes it easy to organize and use components from different parts of your codebase.

If your component function is in a namespace, use a dot (.) instead of a backslash (\) to call it.

<?php
// Assuming Button is in the UI\Elements namespace
function SomePage() {
   return <<<HTML
      <UI.Elements.Button />
   HTML;
}

You can assign a component to a variable and use it directly. This is great for dynamic components or for keeping your template logic clean. To use a variable component, prefix its name with @ or $ (if using $, escape it within heredoc strings: <\$Link />).

<?php
function Navigation() {
   // Define a component as a callable variable
   $NavLink = fn ($to, $children) => <<<HTML
      <a href="{$to}" class="nav-link">{$children}</a>
   HTML;

   // Export the variable to make it available in the heredoc scope
   scope(compact('NavLink'));

   // Use the variable component with the @ prefix
   return <<<HTML
      <nav>
         <@NavLink to="/">Home</@NavLink>
         <@NavLink to="/about">About</@NavLink>

         <!-- Or using the $ prefix (escaped) -->
         <\$NavLink to="/contact">Contact</\$NavLink>
      </nav>
   HTML;
}