### Yoyo Installation

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Provides the Composer command to install the Yoyo package and specific instructions for integrating Yoyo with the Phalcon framework, including DI registration, router setup, and controller inheritance.

```bash
composer require clickfwd/yoyo
```

```php
$di->register(new \Clickfwd\Yoyo\YoyoPhalconServiceProvider());

$router->add('/yoyo', [
            'controller' => 'yoyo',
            'action' => 'handle',
        ]);
```

--------------------------------

### Yoyo Twig Installation

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Provides the Composer commands required to install Yoyo and the Twig templating engine. This is the initial step for using Yoyo with Twig.

```bash
composer require clickfwd/yoyo
composer require twig/twig

```

--------------------------------

### Yoyo Installation with Blade

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Provides the Composer commands required to install Yoyo and the Jenssegers Blade templating engine for use in a project without Laravel.

```bash
composer require clickfwd/yoyo
composer require jenssegers/blade
```

--------------------------------

### Yoyo Counter Component Example

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates a simple Yoyo component for a counter, including the PHP class definition and its corresponding HTML template. It highlights the use of the `$props` property for state persistence.

```php
<?php 
namespace App\Yoyo; 

use Clickfwd\Yoyo\Component;

class Counter extends Component
{
	public $count = 0;
	
	protected $props = ['count'];

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

```html
<!-- /app/resources/views/yoyo/counter.php -->

<div>

	<button yoyo:get="increment">+</button>
	
	<span><?php echo $count; ?></span>

</div>
```

--------------------------------

### Inline Views in Yoyo Components

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates creating Yoyo components with inline views directly in the `render` method, bypassing separate template files. Includes an example of binding a component property to an input field.

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

public function render()
{
	return <<<'twig'
		<div>
		    <input yoyo name="message" type="text" value="{{ message }}">
		    <h1>{{ message }}</h1>
		</div>		
	twig;
}
```

--------------------------------

### Dynamic Component Template

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Illustrates the template for a dynamic component where props are managed by the component class. The `yoyo:get` directive is used to trigger methods.

```html
<div>
	<button yoyo:get="increment">+</button>
	<span><?php echo $count; ?></span>
</div>
```

--------------------------------

### Defining Component Actions

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Explains how to trigger specific component methods (actions) via user interaction or page events using directives like `yoyo:get`, `yoyo:post`, `yoyo:put`, `yoyo:patch`, and `yoyo:delete`. The `render` method is the default action.

```php
public function render()
{
	return $this->view($this->componentName, ['foo' => 'bar']);
}
```

```php
public function helpful()
{
    $this->review->userFoundHelpful($userId);
}
```

```html
<div>
    <button yoyo:on="click" yoyo:get="helpful">Found Helpful</button>
</div>
```

--------------------------------

### Yoyo Configuration with Blade

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Configures Yoyo with Blade as the view provider, registers the Yoyo service provider, and sets up Blade for anonymous components and view rendering. This setup is crucial for integrating Yoyo's component system with a Laravel-like application structure.

```php
<?php

use Clickfwd\Yoyo\Blade\Application;
use Clickfwd\Yoyo\Blade\YoyoServiceProvider;
use Clickfwd\Yoyo\ViewProviders\BladeViewProvider;
use Clickfwd\Yoyo\Yoyo;
use Illuminate\Contracts\Foundation\Application as ApplicationContract;
use Illuminate\Contracts\View\Factory as ViewFactory;
use Illuminate\Support\Fluent;
use Jenssegers\Blade\Blade;

define('APP_PATH', __DIR__);

$yoyo = new Yoyo();

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

// Create a Blade instance

$app = Application::getInstance();

$app->bind(ApplicationContract::class, Application::class);

// Needed for Blade anonymous components

$app->alias('view', ViewFactory::class);

$app->extend('config', function (array $config) {
    return new Fluent($config);
});

$blade = new Blade(
    [
        APP_PATH.'/resources/views',
        APP_PATH.'/resources/views/yoyo',
        APP_PATH.'/resources/views/components',
    ],
    APP_PATH.'/../cache',
    $app
);

$app->bind('view', function () use ($blade) {
    return $blade;
});

(new YoyoServiceProvider($app))->boot();

// Optionally register Blade components

$blade->compiler()->components([
    // 'button' => 'button',
]);

// Register Blade view provider for Yoyo

$yoyo->registerViewProvider(function() use ($blade) {
    return new BladeViewProvider($blade);
});

```

--------------------------------

### Debouncing and Throttling Component Requests

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Details methods for limiting component update requests: `delay` for debouncing, `throttle` for rate limiting, and `changed` to only send requests when input values differ. Examples show applying these directives.

```html
<input yoyo:on="keyup delay:300ms" name="message" type="text" value="<?php echo $message; ?>">
```

```html
<input yoyo:on="input throttle:2s" name="message" type="text" value="<?php echo $message; ?>">
```

```html
<input yoyo:on="keyup delay:300ms changed" name="message" type="text" value="<?php echo $message; ?>">
```

--------------------------------

### Yoyo Component Computed Properties

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Explains how to define and use computed properties in Yoyo components. A computed property is defined by a `get` method and can be accessed like a regular property in Twig templates.

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

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

```

```twig
<div>
	<h1>{{ this.hello_world }}</h1>
	<!-- Will output "Hello World!" -->
</div>
```

--------------------------------

### Initializing Component Properties with Mount

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Explains how to initialize component properties using the `mount` method, which executes after instantiation and before the `render` method.

```php
class HelloWorld extends Component
{
    public $message;

    public function mount()
    {
        $this->message = 'Hello World!';
    }
}
```

--------------------------------

### Load Yoyo Assets

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Instructions to copy the yoyo.js file from the vendor directory to the project's public assets directory.

```file
/vendor/clickfwd/yoyo/src/assets/js/yoyo.js
```

--------------------------------

### Yoyo Configuration

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Illustrates how to configure the Yoyo framework, including setting the base URL for component updates, the path to `yoyo.js`, and the PHP namespace for auto-loading components. It also shows how to register custom view providers and components.

```php
use Clickfwd\Yoyo\View;
use Clickfwd\Yoyo\ViewProviders\YoyoViewProvider;
use Clickfwd\Yoyo\Yoyo;

$yoyo = new Yoyo();

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

// Register the native Yoyo view provider 
// Pass the Yoyo components' template directory path in the constructor

$yoyo->registerViewProvider(function() {
  return new YoyoViewProvider(new View(__DIR__.'/resources/views/yoyo'));
});

$yoyo->registerComponents([
    'counter' => App\Yoyo\Counter::class,
];
```

--------------------------------

### Load Yoyo Scripts

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Includes the necessary Yoyo JavaScript file and initializes Yoyo functionality in your project. This is typically placed within the `<head>` tag of your HTML template.

```php
<?php yoyo_scripts(); ?>
```

--------------------------------

### Targeting Specific Actions for Loading States

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Illustrates how to use `yoyo:spin-on` to control which component actions trigger specific loading indicators. Multiple actions can be specified using a comma-separated list.

```html
<div>
	<button yoyo:get="edit">Edit</button>

	<button yoyo:get="like">Like</button>

    <div yoyo:spinning yoyo:spin-on="edit">
        Show for edit action
    </div>

    <div yoyo:spinning yoyo:spin-on="like">
        Show for like action
    </div>

    <div yoyo:spinning yoyo:spin-on="edit, like">
        Show for edit and like actions
    </div>

</div>
```

--------------------------------

### Rendering Components on Page Load

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how to render Yoyo components directly within templates using the `yoyo_render` function. It covers rendering by component name, hyphenated class names, registered aliases, and anonymous template names.

```php
<?php echo yoyo_render('search'); ?>
```

```php
$yoyo->registerComponent('search', App\Yoyo\LiveSearch::class);
```

```php
<?php echo yoyo_render('form'); ?>
```

--------------------------------

### Render Twig View with Yoyo

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to obtain the Twig instance through Yoyo and render a Twig view named 'home'.

```php
$twig = \Clickfwd\Yoyo\Yoyo::getViewProvider()->getProviderInstance();

echo $twig->render('home');
```

--------------------------------

### Receiving Action Arguments

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how extra parameters passed to an action are made available to the component method as regular arguments.

```php
public function addToCart($productId, $style)
{
    // ...
}
```

--------------------------------

### Rendering a Blade View with Yoyo

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to obtain the Blade instance managed by Yoyo and use it to render a standard Blade view. This is useful for integrating Yoyo components within existing Blade templates.

```php
$blade = \Clickfwd\Yoyo\Yoyo::getViewProvider()->getProviderInstance();

echo $blade->render('home');

```

--------------------------------

### Data Binding with HTML Elements

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how to bind HTML input elements to component public properties using the `yoyo` attribute for automatic synchronization. It also covers default event triggers and customizing them with `yoyo:on`.

```html
<input yoyo name="message" type="text" value="<?php echo $message; ?>">
<h1><?php echo $message;?></h1>
```

```html
<input yoyo:on="keyup" name="message" type="text" value="<?php echo $message; ?>">
```

--------------------------------

### Setting View Data with the `set` Method

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how to send data to the component view using the `set` method within any component action, either for a single variable or multiple variables.

```php
public function increment()
{
	$this->set('foo', 'bar');
	// or
	$this->set(['foo' => 'bar']);
}
```

--------------------------------

### Yoyo Configuration with Twig

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Configures Yoyo with Twig as the view provider, including setting up Twig extensions and registering the provider. This code is intended to run during component rendering and updating.

```php
use Clickfwd\Yoyo\Twig\YoyoTwigExtension;
use Clickfwd\Yoyo\ViewProviders\TwigViewProvider;
use Clickfwd\Yoyo\Yoyo;
use Twig\Extension\DebugExtension;

define('APP_PATH', __DIR__);

$yoyo = new Yoyo();

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

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

$twig = new \Twig\Environment($loader, [
  'cache' => APP_PATH.'/../cache',
  'auto_reload' => true,
  // 'debug' => 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);
});
```

--------------------------------

### Listening for Events in JavaScript

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how to listen for Yoyo-emitted events in JavaScript using `Yoyo.on()`. This allows for client-side actions like updating UI elements based on server-side events.

```javascript
<script>
Yoyo.on('productAddedToCart', id => {
	alert('A product was added to the cart with ID:' + id
});
</script>
```

--------------------------------

### Updating Components

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to use the `yoyo_update` function to process component requests and output updated component content. This function should be called for requests routed to the Yoyo URL.

```php
<?php echo yoyo_update(); ?>
```

--------------------------------

### Render Yoyo Twig Components

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Illustrates how to render Yoyo components within Twig views using the `yoyo` function.

```twig
yoyo('search')
```

--------------------------------

### Listening for Dispatched Browser Events

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how to listen for browser window events dispatched from Yoyo components using `window.addEventListener`. It shows how to access single values or array data from the event details.

```javascript
<script>
window.addEventListener('counter-updated', event => {
	// Reading a single value
	alert('Counter is now: ' + event.detail);

	// Reading from an array
	alert('Counter is now: ' + event.detail.count);
})
</script>
```

--------------------------------

### Loading Yoyo Scripts

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how to load Yoyo's JavaScript assets into your Blade template using a custom directive. This ensures that Yoyo's client-side functionality is available when the page loads.

```blade
@yoyo_scripts
```

--------------------------------

### Passing Data with yoyo:vals

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how to include additional data in component update requests using the `yoyo:vals` directive with JSON encoded data or PHP helper functions.

```html
<button yoyo:on="click" yoyo:get="helpful" yoyo:vals='{"reviewId":100}'>Found Helpful</button>

<!-- Or use the encode_vals helper function to pass an array of name-value pairs -->
<button yoyo:on="click" yoyo:get="helpful" yoyo:vals='<?php Yoyo\encode_vals(["reviewId"=> 100]); ?>'>Found Helpful</button>
```

--------------------------------

### Toggling Elements During Loading States

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how to use the `yoyo:spinning` directive to show an element when a component is updating and hide it upon completion. Yoyo automatically applies CSS to manage visibility.

```html
<div>
    <button yoyo:post="submit">Submit</button>

    <div yoyo:spinning>
        Processing your submission...
    </div>
</div>
```

--------------------------------

### Delaying Loading States

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Explains how to use the `delay` modifier with `yoyo:spinning` to ensure loading state indicators are only shown after a specified delay (default 200ms), preventing visual clutter for quick updates.

```html
<div>
    <button yoyo:post="submit">Submit</button>

    <div yoyo:spinning.delay>
        Processing your submission...
    </div>
</div>
```

--------------------------------

### Emitting Event to a Specific Component

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates emitting an event named 'productAddedToCart' with arguments to a specific component identified by its name, 'cart'. This enables targeted communication between components.

```php
$this->emitTo('cart', 'productAddedToCart', $arg1, $arg2);
```

--------------------------------

### Dispatching Browser Events

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to dispatch browser window events from a Yoyo component, either with a single value or an array. These events can be caught by standard JavaScript event listeners.

```php
// passing single value
$this->dispatchBrowserEvent('counter-updated', $count);

// Passing an array
$this->dispatchBrowserEvent('counter-updated', ['count' => $count]);
```

--------------------------------

### Passing Individual Values with yoyo:val

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to pass individual values using the `yoyo:val.name` directive, with automatic conversion of kebab-case to camel-case variable names.

```html
<button yoyo:on="click" yoyo:get="helpful" yoyo:val.review-id="100">Found Helpful</button>
```

--------------------------------

### Dynamic Component Props

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to manage component props for dynamic components using the protected $props array within the component class. Public properties are automatically available in the template.

```php
class Counter extends Component
{
	public $count = 0;
	
	protected $props = ['count'];

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

--------------------------------

### Passing Action Arguments Directly

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Explains how to pass extra parameters to an action as arguments using expressions in the template, making them available as regular arguments in the component method.

```html
<button yoyo:get="addToCart(<?php echo $productId; ?>, '<?php echo $style; ?>')">
    Add Todo
</button>
```

--------------------------------

### Yoyo Search Component Class

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Defines a Yoyo component class for handling search functionality. It includes a `queryString` property to sync the 'query' parameter with the URL and a `render` method to process search logic and return the view.

```php
<?php

namespace App\Yoyo;

use Clickfwd\Yoyo\Component;

class Search extends Component
{
	public $query;
	
	protected $queryString = ['query'];
	
	public function render()
	{
		$query = $this->query;
	
		// Perform your database query
		$entries = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
	
		$results = array_filter($entries, function($entry) use ($query) {
			return $query && stripos($entry, $query) !== false;
		});
	
	  // Render the component view
		return $this->view('search',['results' => $results]);
	}
}
```

--------------------------------

### Computed Properties

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Details the creation and usage of computed properties in Yoyo components, including properties with and without arguments, and their caching behavior.

```php
class HelloWorld extends Component
{
	public $message = 'Hello World!';
	
   	// Computed Property
	public function getHelloWorldProperty()
	{
		return $message;
	}

   	// Computed Property with argument
	public function getErrorsProperty($name)
	{
		return [
			'title' => 'Please enter a title',
			'description' => 'Please enter a description',
		][$name] ?? null;
	}
}
```

--------------------------------

### Yoyo Asset Path

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Specifies the file path for the Yoyo JavaScript asset within the vendor directory.

```file
/vendor/clickfwd/yoyo/src/assets/js/yoyo.js
```

--------------------------------

### Basic Search Component Template

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

A simple HTML form for a search component. It includes an input field for the search query and a submit button. The query value is displayed using PHP.

```html
<form>
    <input type="text" name="query" value="<?php echo $query ?? ''; ?>">
    <button type="submit">Submit</button>
</form>
```

--------------------------------

### Enhanced Search Component Template with Results

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

An enhanced HTML template for the search component, displaying search results. It includes logic to show 'No results found' if the query is present but no matches are found, and iterates through the results.

```html
<form>
    <input type="text" name="query" value="<?php echo $query; ?>">
    <button type="submit">Submit</button>
</form>
    
<ul>
    <?php if ($query && empty($results)): ?>
        <li>No results found</li>
    <?php endif; ?>
    
    <?php foreach ($results as $entry): ?>
        <li><?php echo $entry; ?></li>
    <?php endforeach; ?>
</ul>
```

--------------------------------

### Inline Views in Yoyo Components

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how to define a component's template directly within its class using an inline view. This is suitable for simple components that do not require a separate template file.

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

public function render()
{
	return <<<'yoyo'
		<div>
		    <input yoyo name="message" type="text" value="{{ $message }}">
		    <h1>{{ $message }}</h1>
		</div>		yoyo;
}

```

--------------------------------

### Yoyo Twig Features: Event Emission Functions

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Lists and demonstrates the usage of Yoyo's event emission functions within Twig templates, including `emit`, `emitUp`, `emitSelf`, and `emitTo`.

```twig
{{ emit('eventName', {'foo':'bar'}) }}
{{ emitUp('eventName', {'foo':'bar'}) }}
{{ emitSelf('eventName', {'foo':'bar'}) }}
{{ emitTo('component-name', 'eventName', {'foo':'bar'}) }}
```

--------------------------------

### Skipping Component Rendering

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to use the `skipRender` method to prevent template rendering after an action, useful for actions that only modify data or trigger events.

```php
public function savePost()
{
	// Store the post to the database

	// Send event to the browser to close modal, or trigger a notification
	$this->emitSelf('PostSaved');

	// Skip template rendering
	$this->skipRender();
}
```

--------------------------------

### Search Component Logic and Rendering

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

PHP code to process search queries and filter results. It initializes a list of entries and filters them based on the provided query. This logic is intended to be used within a Yoyo component.

```php
<?php
$query = $query ?? '';
$entries = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
$results = array_filter($entries, function($entry) use ($query) {
    return $query && strpos($entry, $query) !== false;
});
?>
```

--------------------------------

### Component Property Access in Actions

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Illustrates how Yoyo automatically tracks and sends component public properties and input values with requests, and how to access them within component methods.

```php
class Review extends Component {

	public $reviewId;

	public function helpful()
	{
		// access reviewId via $this->reviewId
	}
}
```

--------------------------------

### Redirecting to a Different Page

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Illustrates how to redirect the user to a new URL after a component action is completed. This is typically used after successful form submissions or state changes.

```php
class Registration extends Component
{
    public function register()
    {
	// Create the user 

	$this->redirect('/welcome');
    }
}
```

--------------------------------

### Passing View Data via Render Method

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Explains how to send data to a view without declaring it as a public property by defining a render method and passing a data array as the second argument.

```php
public function render()
{
	return $this->view($this->componentName, ['foo' => 'bar']);
}
```

--------------------------------

### Yoyo Search Component Template (Dynamic)

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

The template for the dynamic Yoyo search component. It uses a Yoyo-enhanced input for live search and displays results in a list. The `yoyo:ignore` directive prevents the list from being re-rendered unnecessarily.

```html
<!-- /app/resources/views/yoyo/search.php -->

<input yoyo:on="keyup delay:300ms changed" type="text" name="query" value="<?php echo $query; ?>" />

<ul yoyo:ignore>
    <?php if ($query && empty($results)): ?>
        <li>No results found</li>
    <?php endif; ?>
    
    <?php foreach ($results as $entry): ?>
        <li><?php echo $entry; ?></li>
    <?php endforeach; ?>
</ul>
```

--------------------------------

### Emitting Event to All Components (Method)

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how to emit an event named 'counter-updated' with the current count from a component method. This event can be listened to by any Yoyo component on the page.

```php
public function increment()
{
	$this->count++;
		
	$this->emit('counter-updated', $count);
}
```

--------------------------------

### Emitting Event to Itself

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Illustrates emitting an event named 'productAddedToCart' with arguments to the component itself. This is useful for internal component logic.

```php
$this->emitSelf('productAddedToCart', $arg1, $arg2);
```

--------------------------------

### Listening for Events in a Component

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to define event listeners within a Yoyo component using the protected `$listeners` property. It maps an event name ('counter-updated') to a component method ('showNewCount').

```php
class Counter extends Component {

	public $message;

	protected $listeners = ['counter-updated' => 'showNewCount'];

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

--------------------------------

### Emitting Event to an Element Using a Selector

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to emit an event to a component or element using CSS selectors like class names or IDs. This method does not support passing arguments.

```php
$this->emitTo('.cart', 'productAddedToCart');
$this->emitTo('#cart', 'productAddedToCart');
$this->emitTo('.post-100', 'saved');
```

--------------------------------

### Rendering Yoyo Blade Components

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Illustrates the usage of the `@yoyo` directive in Blade templates to render Yoyo components. This is the primary method for embedding Yoyo's interactive components within your application's views.

```blade
@yoyo('search')

```

--------------------------------

### Emitting Event to Parent Components

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Illustrates emitting an event named 'postWascreated' with arguments to parent components in a nested component structure. This allows for upward communication in the component hierarchy.

```php
$this->emitUp('postWascreated', $arg1, $arg2);
```

--------------------------------

### Update Yoyo Components

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Provides the PHP code to update Yoyo components via the designated Yoyo route.

```php
echo (new \Clickfwd\Yoyo\Yoyo())->update();
```

--------------------------------

### Live Search Input with Debounce

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Modifies the search input to enable live searching with a 300ms debounce. The `yoyo:on` directive triggers a request on keyup events, only if the input value has changed.

```html
<input yoyo:on="keyup delay:300ms changed" type="text" name="query" value="<?php echo $query; ?>" />
```

--------------------------------

### Anonymous Component Props

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how to define component props directly in the root node for anonymous components using a comma-separated list of variable names. This allows for state management without a component class.

```php
<?php $count = $count ?? 0 ; ?>
<div yoyo:props="count">
	<button yoyo:val.count="<?php echo $count + 1; ?>">+</button> 
    <p><?php echo $count; ?></p>
</div>
```

--------------------------------

### Include Yoyo Scripts in Twig

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how to include the necessary Yoyo scripts in the head section of a Twig template using the `yoyo_scripts` function.

```twig
{{ yoyo_scripts() }}
```

--------------------------------

### Accessing Computed Properties

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to access computed properties from both the component's class and its template, including computed properties with arguments.

```html
<div>
	<h1><?php echo $this->hello_world ;?></h1>
	<!-- Will output "Hello World!" -->
</div>

<div>
	<h1><?php echo $this->errors('title') ;?></h1>
	<!-- Will output "Please enter a title" -->
</div>
```

--------------------------------

### Query String Management

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Explains how components can automatically update the browser's query string by defining the `$queryString` property in the component class. Yoyo intelligently removes query strings when the state matches the default value.

```php
class Search extends Component
{
	public $query;
	
	protected $queryString = ['query'];
}
```

```php
class Posts extends Component
{
	public $page = 1;
	
	protected $queryString = ['page'];
}
```

--------------------------------

### Emitting Event to All Components (Template)

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to emit an event named 'counter-updated' with a count variable directly from a template. This is useful for triggering actions based on template data.

```php
<?php $this->emit('counter-updated', $count) ; ?>
```

--------------------------------

### Yoyo Blade Directives for Re-rendering and Events

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Explains the use of `@spinning` and event-emitting directives (`@emit`, `@emitUp`, `@emitSelf`, `@emitTo`) within Yoyo component templates. These directives control component re-rendering logic and facilitate communication between components.

```blade
@spinnning
Component updated
@endspinning

@spinning($liked == 1)
Component updated and liked == 1
@endspinning

@emit('eventName', ['foo' => 'bar']);
@emitUp('eventName', ['foo' => 'bar']);
@emitSelf('eventName', ['foo' => 'bar']);
@emitTo('component-name', 'eventName', ['foo' => 'bar']);

```

--------------------------------

### Updating Yoyo Blade Components

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Provides the PHP code to trigger an update for Yoyo components. This is typically called from a Yoyo-designated route to handle component interactions and state changes.

```php
echo (new \Clickfwd\Yoyo\Blade\Yoyo())->update();

```

--------------------------------

### Component Public Properties

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Illustrates how public properties in a Yoyo component class are automatically exposed to the view and tracked for updates. Properties should be of primitive types and not contain sensitive data.

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

```html
<div>
    <h1><?php echo $message; ?></h1>
    <!-- Will output "Hello World!" -->
</div>
```

--------------------------------

### Hiding Elements During Loading States

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to use the `remove` modifier with `yoyo:spinning` to hide an element while the component is updating.

```html
<div>
    <button yoyo:post="submit">Submit</button>

    <div yoyo:spinning.remove>
        Text hidden while updating ...
    </div>
</div>
```

--------------------------------

### Yoyo Twig Features: Spinning Variable

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to use the `spinning` variable in Twig templates to check if a Yoyo component is currently being re-rendered.

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

--------------------------------

### Toggling Element Attributes During Loading

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Demonstrates how to use the `yoyo:spinning.attr` directive to add or remove HTML attributes from an element while a component is updating, such as disabling a button.

```html
<div>
    <button yoyo:post="submit" yoyo:spinning.attr="disabled">
		Submit
	</button>
</div>
```

--------------------------------

### Toggling Element CSS Classes During Loading

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to use the `yoyo:spinning.class` directive to add CSS classes to an element while a component is updating. The `remove` modifier can be used to remove specific classes.

```html
<div>
    <button yoyo:post="submit" yoyo:spinning.class="text-gray-300">
		Submit
	</button>
</div>
```

```html
<div>
    <button yoyo:post="submit" yoyo:spinning.class.remove="bg-blue-200" class="bg-blue-200">
		Submit
	</button>
</div>
```

--------------------------------

### Computed Properties in Yoyo Components

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Illustrates how to define and use computed properties within Yoyo components. Computed properties are dynamically generated values that can be accessed like regular properties in the component's template.

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

    public function getHelloWorldProperty()
    {
	    return $message;
    }
}

```

--------------------------------

### Clearing Computed Property Cache

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Provides methods for clearing the cache of computed properties, including clearing all properties, single properties, multiple properties, and single properties with arguments.

```php
// Clear all computed properties, including those with arguments
$this->forgetComputed();

// Clear a single property
$this->forgetComputed($property);

// Clear multiple properties
$this->forgetComputed([$property1, $property2]);

// Clear a single computed property with arguments
$this->forgetComputedWithArgs($property, $arg1, $arg2);
```

--------------------------------

### Using Computed Properties in Blade

Source: https://github.com/clickfwd/yoyo/blob/master/README.md

Shows how to display the value of a computed property within a Blade template. The computed property is accessed using its camelCase name, converted to snake_case in the template.

```blade
<div>
    <h1>{{ $this->hello_world }}</h1>
    <!-- Will output "Hello World!" -->
</div>

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.