Yoyo PHP Framework

Yoyo provides several specialized features within Twig templates:

Re-rendering state

Use the spinning variable to detect if a component is currently being re-rendered.

{% if spinning %}
  Component updated
{% endif %}

Event Emission

All event methods are available as functions to emit events from the component:

• emit('eventName', payload): Emits an event.
• emitUp('eventName', payload): Emits an event up the component tree.
• emitSelf('eventName', payload): Emits an event to itself.
• emitTo('component-name', 'eventName', payload): Emits an event to a specific component.

Example:

{{ emit('eventName', {'foo':'bar'}) }}

Computed Properties

If a component defines a getter method following the pattern get{PropertyName}Property(), you can access it in Twig using this.{property_name} (snake_case).

class HelloWorld extends Component
{
    public $message = 'Hello World!';

    public function getHelloWorldProperty()
    {
        return $this->message;
    }
}

<div quite>
    <h1>{{ this.hello_world }}</h1>
    <!-- Outputs: Hello World! -->
</div>

Yoyo provides a robust event system for communication between components on the same page. Events can be emitted from component methods or templates and listened to by other components or JavaScript.

Emitting Events (PHP)

• emit('eventName', ...$args): Emits to all Yoyo components.
• emitUp('eventName', ...$args): Emits to parent components only.
• emitTo('componentName', 'eventName', ...$args): Emits to a specific component by name or CSS selector (selectors do not support arguments).
• emitSelf('eventName', ...$args): Emits to the current component.

Listening for Events (PHP)

Register listeners in a component using the protected $listeners property. The key is the event name, and the value is the method name.

Listening for Events (JavaScript)

Use Yoyo.on('eventName', callback) to listen for component-emitted events in the browser.

Dispatching Events (JavaScript)

Use Yoyo.dispatch('eventName', data) to trigger events globally, or Yoyo.dispatchTo('componentName', 'eventName', data) for specific components.

// Emitting from a method
$this->emit('counter-updated', $count);

// Listening in a component
protected $listeners = ['counter-updated' => 'showNewCount'];

protected function showNewCount($count)
{
    $this->message = "The new count is: $count";
}

// Listening in JS
Yoyo.on('productAddedToCart', id => {
    alert('ID: ' + id);
});

// Dispatching from JS
Yoyo.dispatch('post-created', { postId: 2 });

Yoyo uses a server-side component model to create reactive interfaces.

1. Rendering: Components are rendered on page load using yoyo_render().
2. Interaction: When a user interacts with a component (e.g., clicking a button with a yoyo:get attribute), a request is sent to the configured Yoyo url.
3. Update: Yoyo processes the request on the server, updates the component state, and sends back an HTML partial.
4. Reactivity: The browser receives the partial and updates the DOM without a full page reload.

Components consist of a PHP Class (handling logic and state) and a Template (handling the HTML markup).

// Component Class
class Counter extends Component
{
    public $count = 0;
    protected $props = ['count']; // Persists 'count' across requests

    public function increment()
    {
        $this->count++;
    }
}

<!-- Component Template -->
<div>
    <button yoyo:get="increment">+</button>
    <span><?php echo $count; ?></span>
</div>

When using Twig, initialize Yoyo with your project configuration (URL, scripts path, and namespace) and register a callback for registerViewProvider that returns a TwigViewProvider instance wrapping your Twig environment. Additionally, add YoyoTwigExtension to your Twig environment to enable Yoyo-specific Twig functions.

use Clickfwd\
Yoyo\
Twig\
YoyoTwigExtension;
use Clickfwd\
Yoyo\
ViewProviders\
TwigViewProvider;
use Clickfwd\
Yoyo\
Yoyo;
use Twig\
Environment;
use Twig\
Loader\
FilesystemLoader;

$yoyo = new Yoyo();

$yoyo->configure([
  'url' => 'yoyo',
  'scriptsPath' => APP_PATH.'/app/resources/assets/js/',
  'namespace' => 'App\\Yoyo\\',
]);

$loader = new FilesystemLoader([
  APP_PATH.'/resources/views',
  APP_PATH.'/resources/views/yoyo',
]);

$twig = new Environment($loader, [
  'cache' => APP_PATH.'/../cache',
  'auto_reload' => true,
]);

// Add Yoyo's Twig Extension
$twig->addExtension(new YoyoTwigExtension());

// Register Twig view provider for Yoyo
$yoyo->registerViewProvider(function() use ($twig) {
  return new TwigViewProvider($twig);
});