```
Yes, it's that simple! One thing to note above is the use of the protected property `$props`. This indicates to Yoyo that the `count` variable, which is not explicitly available within the template, should be persisted and updated in every request.
## Installation
### Install the Package
```bash
composer require clickfwd/yoyo
```
#### Phalcon Framework Installation
For phalcon, you need to add di
```php
$di->register(new \Clickfwd\Yoyo\YoyoPhalconServiceProvider());
```
and you need to add router:
```php
$router->add('/yoyo', [
'controller' => 'yoyo',
'action' => 'handle',
]);
```
and you should create a controller and inherit from `Clickfwd\Yoyo\PhalconController` class.
## Updating
After performing the usual `composer update`, remember to also update the `yoyo.js` script per the [Load Assets](#load-assets) instructions.
## Configuring Yoyo
It's necessary to bootstrap Yoyo with a few configuration settings. This code should run when rendering and updating 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'));
});
```
**'url'**
Absolute or relative URL that will be used to request component updates.
**'scriptsPath'**
The location where you copied the `yoyo.js` script.
**'namespace'**
This is the PHP class namespace that will be used to discover auto-loaded dynamic components (components that use a PHP class).
If the namespace is not provided or components are in different namespaces, you need to register them manually:
```php
$yoyo->registerComponents([
'counter' => App\Yoyo\Counter::class,
];
```
You are required to load the component classes at run time, either using a `require` statement to load the component's PHP class file, or by including your component namespaces in you project's `composer.json`.
Anonymous components don't need to be registered, but the template name needs to match the component name.
### Dependency Injection Container
Yoyo includes a built-in container and automatically detects Laravel's `illuminate/container` if installed.
**Simple dependency injection:**
```php
class UserProfile extends Component
{
public function mount(UserRepository $users, $userId)
{
$this->user = $users->find($userId);
}
}
```
**For advanced container features**, install `illuminate/container` (automatically detected):
```bash
composer require illuminate/container
```
**Using a custom PSR-11 container:**
```php
use Clickfwd\Yoyo\ContainerResolver;
ContainerResolver::setPreferred($myContainer);
```
### Load Assets
Find `yoyo.js` in the following vendor path and copy it to your project's public assets directory.
```file
/vendor/clickfwd/yoyo/src/assets/js/yoyo.js
```
To load the necessary scripts in your template add the following code inside the `` tag:
```php
```
## Creating Components
Dynamic components require a class and a template. When using the Blade and Twig view providers, you can also use inline views, where the component markup is returned directly in the component's `render` method.
Anonymous components allow creating components with just a template file.
To create a simple search component that retrieves results from the server and updates itself, create the component template:
```html
// resources/views/yoyo/search.php
```
Yoyo will render the component output and compile it to add the necessary attributes that makes it dynamic and reactive.
When you submit the form, posted data is automatically made available within the component template. The template code can be expanded to show a list of results, or an empty state:
```php
```
```html
No results found
```
The `$results` array can be populated from any source (i.e. database, API, etc.)
The example can be converted into a live search input, with a 300ms debounce to minimize the number of requests. Replace the `form` tag with:
```html
```
The `yoyo:on="keyup delay:300ms change"` directive tells Yoyo to make a request on the keyup event, with a 300ms debounce, and only if the input text changed.
Now let's turn this into a dynamic component using a class.
```php
# /app/Yoyo/Search
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]);
}
}
```
And the template:
```html
No results found
```
A couple of things to note here that are covered in more detail in other sections.
1. The component class includes a `queryString` property that tells Yoyo to automatically include the queryString values in the browser URL after a component update. If you re-load the page with the `query` value in the URL, you'll automatically see the search results on the page.
2. Yoyo will automatically make available component class public properties as template variables. This allows using `$this->query` to access the search keyword in the component and `$query` in the template.
When you compare this search example to the counter example at the beginning, you can see that there are no action methods (i.e. increment, decrement). A component update will always default to the `render` method, unless an action is specified via one of the method attributes (i.e. yoyo:get, yoyo:post, etc.). In that case, the action method always runs before the render method.
## Rendering Components
There are two instances when components are rendered. On page load, and on component updates.
### Rendering on Page Load
To render any component on page load within your templates, use the `yoyo_render` function and pass the component name as the first parameter.
```php
```
For dynamic components, the component name is a hyphenated version of the class name (i.e. LiveSearch → live-search). If you register components while bootstrapping Yoyo using the `registerComponents` method, then you can use the registered alias as the component name.
```php
$yoyo->registerComponent('search', App\Yoyo\LiveSearch::class);
```
For anonymous components, the component name should match the template name without the file extension. So if the template name is `form.php`, the component can be rendered with:
```php
```
### Rendering on updates
Use the `yoyo_update` function to automatically process the component request and output the updated component.
```php
```
You need to add this function call for requests routed to the Yoyo `url` used in the initial configuration.
## Properties
In dynamic components, all public properties in the component class are automatically made available to the view and tracked in component updates.
```php
class HelloWorld extends Component
{
public $message = 'Hello World!';
}
```
```html
```
Public properties should only be of type: `string`, `int`, `array`, `boolean`, and should not contain any sensitive information because they can be used in component requests to keep the data in sync.
### Initializing Properties
You can initialize properties using the `mount` method of your component which runs right after the component is instantiated, and before the `render` method.
```php
class HelloWorld extends Component
{
public $message;
public function mount()
{
$this->message = 'Hello World!';
}
}
```
### Data Binding
You can automatically bind, or synchronize, the value of an HTML element with a component public property.
```php
class HelloWorld extends Component
{
public $message = 'Hello World!';
}
```
```html
```
Adding the `yoyo` attribute to any input will instantly make it reactive. Any changes to the input will be updated in the component.
By the default, the natural event of an element will be used as the event trigger.
- input, textarea and select elements are triggered on the change event.
- form elements are triggered on the submit event.
- All other elements are triggered on the click event.
You can modify this behavior using the `yoyo:on` directive which accepts multiple events separated by comma:
```html
```
### Debouncing and Throttling Requests
The are several ways to limit the requests to update components.
**`delay`** - debounces the request so it's made only after the specified period passes after the last trigger.
```html
```
**`throttle`** limits request to one dwithin the specified interval.
```html
```
**`changed`** - only makes the request when the input value has changed.
```html
```
## Actions
An action is a request made to a Yoyo component method to update (re-render) it as a result of a user interaction or page event (click, mouseover, scroll, load, etc.).
The `render` method is the default action when one is not provided explicitly. You can also override it in the component class to change the template name or when you need to send additional variables to the template in addition to the public properties.
```php
public function render()
{
return $this->view($this->componentName, ['foo' => 'bar']);
}
```
To specify an action you use one of the available action directives with the name of the action as the value.
- `yoyo:get`
- `yoyo:post`
- `yoyo:put`
- `yoyo:patch`
- `yoyo:delete`
For example:
```php
class Review extends Component
{
public Review $review;
public function helpful()
{
$this->review->userFoundHelpful($userId);
}
}
```
```html
```
All components automatically listen for the `refresh` event and trigger the `render` action to refresh the component state.
### Passing Data to Actions
You can include additional data to send to the server on component update requests using the `yoyo:vals` directive which accepts a JSON encoded list of name-value pairs.
```html
```
You can also use `yoyo:val.name` for individual values. kebab-case variable names are automatically converted to camel-case.
```html
```
Yoyo will automatically track and send component public properties and input values with every request.
```php
class Review extends Component {
public $reviewId;
public function helpful()
{
// access reviewId via $this->reviewId
}
}
```
You can also pass extra parameters to an action as arguments using an expression, without having to define them as public properties in the component:
```html
```
Extra parameters passed to an action are made available to the component method as regular arguments:
```php
public function addToCart($productId, $style)
{
// ...
}
```
### Actions Without a Response
Sometimes you may want to use a component action only to make changes to a database and trigger events, without rendering a response. You can use the component `skipRender` method for this:
```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();
}
```
## View Data
Sometimes you want to send data to a view without declaring the variable as a public property. You can do this by defining a render method in your component and passing a data array as the second argument:
```php
public function render()
{
return $this->view($this->componentName, ['foo' => 'bar']);
}
```
Then access the $foo variable in your template.
You can also send data to the component view using the `set` method in any component action. For example:
```php
public function increment()
{
$this->set('foo', 'bar');
// or
$this->set(['foo' => 'bar']);
}
```
## Computed Properties
```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;
}
}
```
Now, you can access `$this->hello_world` from either the component's class or template:
```php
hello_world ;?>
```
Computed properties with arguments behave like normal class methods that you can call in your templates:
```php
errors('title') ;?>
```
The output of computed properties is cached within the same component request, allowing you to perform complex tasks like querying the database and not duplicating the tasks if the property is accessed multiple times. If you need to clear the cache for a computed property:
```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);
```
## Component Props
Yoyo can persist and update variables in requests without the need to explicitly include an input element.
For an anonymous component, it's possible to specify the props directly in the component root node using a comma-separated list of variable names and this allows implementing a counter without the need for a component class:
```php
```
By adding the `yoyo:props="count"`, Yoyo knows to automatically include the value of `count` in every request.
For dynamic components, there's no need to use the `yoyo:props` attribute because we use the protected method $props in the component class with an array of variable names.
```php
class Counter extends Component
{
public $count = 0;
protected $props = ['count'];
public function increment()
{
$this->count++;
}
}
```
Since the `$count` variable is also defined as a public property, it's already available in the template and the value is incremented throgh the `increment` method in the component class without having to use `yoyo:val.count`.
```html
```
## Query String
Components have the ability to automatically update the browser's query string on state changes.
```php
class Search extends Component
{
public $query;
protected $queryString = ['query'];
}
```
Yoyo is smart enough to automatically remove the query string when the current state value matches the property's default value.
For example, in a pagination component, you don't need the `?page=1` query string to appear in the URL.
```php
class Posts extends Component
{
public $page = 1;
protected $queryString = ['page'];
}
```
## Loading States
Updating Yoyo components requires an Ajax request to the server and depending on what the component does, the response time will vary. The `yoyo:spinning` directive allows you to do all sorts of cool things when a component is updating to provide a visual indicator to end-users.
### Toggling Elements During Loading States
To show an element at the start of a Yoyo update request and hide it again when the update is complete:
```html
Processing your submission...
```
Yoyo adds some CSS to the page to automatically hide the element with the `yoyo:spinning` directive.
To hide a visible element while the component is updating you can add the `remove` modifier:
```html
Text hidden while updating ...
```
## Delaying Loading States
Some actions may update quickly and showing a loading state in these cases may be more of a distraction. The `delay` modifier ensures that the loading state changes are applied only after 200ms if the component hasn't finished updating.
```html
Processing your submission...
```
### Targeting Specific Actions
If you need to toggle different indicators for different component actions, you can add the `yoyo:spin-on` directive and pass a comma separated list of action names. For example:
```html
Show for edit action
Show for like action
Show for edit and like actions
```
## Toggling Element CSS Classes
Instead of toggling the visibility of an element you can also add specific CSS classes while the component updates. Use the `class` modifier and include the space-separated class names as the attribute value:
```html
```
You can also remove specific class names by adding the `remove` modifier:
```html
```
## Toggling Element Attributes
Similar to CSS class toggling, you can also add or remove attributes while the component is updating.
```html
```
## Events
Events are a great way to establish communication between Yoyo components on the same page, where one or more components can listen to events fired by another component.
Events can be fired from component methods and templates using a variety of emit methods.
All emit methods accept any number of arguments that allow sending data (string, number, array) to listeners.
### Emitting an Event to All Yoyo Components
From a component method.
```php
public function increment()
{
$this->count++;
$this->emit('counter-updated', $count);
}
```
From a template
```php
emit('counter-updated', $count) ; ?>
```
### Emitting an Event to Parent Components
When dealing with nested components you can emit events to parents and not children or sibling components.
```php
$this->emitUp('postWascreated', $arg1, $arg2);
```
### Emitting an Event to a Specific Component
When you need to emit an event to a specific component using the component name (e.g. `cart`).
```php
$this->emitTo('cart', 'productAddedToCart', $arg1, $arg2);
```
### Emitting an Event to an Element Using a Selector
The `emitTo` method also works with selectors. When a component is not found, the selector is used instead. Emitting events using selectors doesn't support passing arguments.
```php
$this->emitTo('.cart', 'productAddedToCart');
$this->emitTo('#cart', 'productAddedToCart');
$this->emitTo('.post-100', 'saved');
```
#### Emitting an Event to Itself
When you need to emit an event on the same component.
```php
$this->emitSelf('productAddedToCart', $arg1, $arg2);
```
### Listening for Events
To register listeners in Yoyo, use the `$listeners` protected property of the component.
Listeners are a key->value pair where the key is the event to listen for, and the value is the method to call on the component. If the event and method are the same, you can leave out the key.
```php
class Counter extends Component {
public $message;
protected $listeners = ['counter-updated' => 'showNewCount'];
protected function showNewCount($count)
{
$this->message = "The new count is: $count";
}
}
```
### Listening For Events In JavaScript
Yoyo allows registering event listeners for component emitted events:
```js
```
With this feature you can control toasters, alerts, modals, etc. directly from a component action on the server by emitting the event and listening for it on the browser.
### Dispatching Events From JavaScript
You can also trigger component events directly from your custom JavaScript using the `Yoyo.dispatch()` method. This is useful when you need to interact with other JavaScript libraries or custom browser APIs.
```js
// Dispatch an event to all Yoyo components listening for it
Yoyo.dispatch('post-created');
// You can also pass named parameters to the event listener
Yoyo.dispatch('post-created', { postId: 2 });
// Dispatch an event to a specific component by name
Yoyo.dispatchTo('dashboard', 'post-created', { postId: 2 });
```
Parameters are passed as named arguments that match the listener method's parameter names:
```php
protected $listeners = [
'post-created' => 'handlePostCreated',
];
public function handlePostCreated($postId)
{
// $postId will be 2
}
```
### Dispatching Browser Events
In addition to allowing components to communicate with each other, you can also send browser window events directly from a component method or template:
```php
// passing single value
$this->dispatchBrowserEvent('counter-updated', $count);
// Passing an array
$this->dispatchBrowserEvent('counter-updated', ['count' => $count]);
```
And listen for the event anywhere on the page:
```js
```
## Redirecting
Sometimes you may want to redirect the user to a different page after performing an action within a Yoyo component.
```php
class Registration extends Component
{
public function register()
{
// Create the user
$this->redirect('/welcome');
}
}
```
## Response Headers
Yoyo components have access to `$this->response` which provides methods for controlling how HTMX handles the response. These map directly to [HTMX response headers](https://htmx.org/reference/#response_headers).
### Retargeting
Override which element receives the swap:
```php
public function save()
{
// Swap the response into a different element instead of the component itself
$this->response->retarget('#notification-area');
}
```
### Changing Swap Strategy
Override the swap strategy for the response:
```php
public function update()
{
// Use innerHTML instead of the default outerHTML swap
$this->response->reswap('innerHTML');
}
```
### Selecting Response Content
Select a subset of the response HTML to swap:
```php
public function load()
{
// Only swap the #content portion of the response
$this->response->reselect('#content');
}
```
### URL Management
Push or replace the browser URL without a full page reload:
```php
public function navigate()
{
// Push a new URL to browser history
$this->response->pushUrl('/new-page');
}
public function filter()
{
// Replace the current URL without adding a history entry
$this->response->replaceUrl('/results?q=search');
}
```
### Client-Side Navigation
Perform a client-side redirect (AJAX-style, no full reload) or a full redirect:
```php
public function softRedirect()
{
// AJAX navigation — loads content without a full page reload
$this->response->location('/dashboard');
}
public function fullRedirect()
{
// Full page redirect via HX-Redirect header
$this->response->redirect('/login');
}
```
> **Note:** `$this->response->redirect()` sets the `HX-Redirect` header (HTMX native redirect). This is different from `$this->redirect()` which uses Yoyo's own `Yoyo-Redirect` header. Both achieve a full page redirect but through different mechanisms.
### Triggering Client-Side Events
Trigger browser events from the server that JavaScript can listen for:
```php
public function save()
{
// Trigger immediately after the response is received
$this->response->trigger('item-saved');
// Trigger after the swap is complete
$this->response->triggerAfterSwap('swap-complete');
// Trigger after the settle phase (CSS transitions finished)
$this->response->triggerAfterSettle('settle-complete');
}
```
Listen for these events in JavaScript:
```js
document.body.addEventListener('item-saved', function() {
// Show a toast notification, update a counter, etc.
});
```
### Full Page Refresh
Force a full page refresh from a component action:
```php
public function reset()
{
$this->response->refresh();
}
```
## Using Blade
You can use Yoyo with Laravel's [Blade](https://laravel.com/docs/8.x/blade) templating engine, without having to use Laravel.
### Installation
To get started install the following packages in your project:
```bash
composer require clickfwd/yoyo
composer require jenssegers/blade
```
### Configuration
Create a Blade instance and set it as the view provider for Yoyo. We also add the `YoyoServiceProvider` for Blade.
This code should run when rendering and updating components.
```php
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);
});
```
### Load Assets
Find `yoyo.js` in the following vendor path and copy it to your project's public assets directory.
```file
/vendor/clickfwd/yoyo/src/assets/js/yoyo.js
```
To load the necessary scripts in your Blade template you can use the `yoyo_scripts` directive in the `` tag:
```blade
@yoyo_scripts
```
### Rendering a Blade View
You can use the Blade instance to render any Blade view.
```
$blade = \Clickfwd\Yoyo\Yoyo::getViewProvider()->getProviderInstance();
echo $blade->render('home');
```
### Rendering Yoyo Blade Components
To render Yoyo components inside Blade views, use the `@yoyo` directive.
```blade
@yoyo('search')
```
### Updating Yoyo Blade Components
To update Yoyo components in the Yoyo-designated route.
```php
echo (new \Clickfwd\Yoyo\Blade\Yoyo())->update();
```
### Inline Views
When dealing with simple templates, you can create components without a template file and instead return an inline view in the component's `render` method.
```php
class HelloWorld extends Component
{
public $message = 'Hello World!';
}
public function render()
{
return <<<'yoyo'
{{ $message }}
yoyo;
}
```
### Other Blade Features
Yoyo implements several Blade directives that can be used within Yoyo component templates.
- `@spinning` and `@endspinning` - Check if a component is being re-rendered.
```blade
@spinnning
Component updated
@endspinning
@spinning($liked == 1)
Component updated and liked == 1
@endspinning
```
- All event methods are available as directives within blade components
```blade
@emit('eventName', ['foo' => 'bar']);
@emitUp('eventName', ['foo' => 'bar']);
@emitSelf('eventName', ['foo' => 'bar']);
@emitTo('component-name', 'eventName', ['foo' => 'bar']);
```
- Computed properties
```php
class HelloWorld extends Component
{
public $message = 'Hello World!';
public function getHelloWorldProperty()
{
return $message;
}
}
```
```blade
{{ $this->hello_world }}
```
## Using Twig
You can use Yoyo with Symfony's [Twig](https://twig.symfony.com/) templating engine.
### Installation
To get started install the following packages in your project:
```bash
composer require clickfwd/yoyo
composer require twig/twig
```
### Configuration
Create a Twig instance and set it as the view provider for Yoyo. We also add the `YoyoTwigExtension` to Twig.
This code should run when rendering and updating components.
```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);
});
```
### Load Assets
Find `yoyo.js` in the following vendor path and copy it to your project's public assets directory.
```file
/vendor/clickfwd/yoyo/src/assets/js/yoyo.js
```
To load the necessary scripts in your Twig template you can use the `yoyo_scripts` function in the `` tag:
```twig
{{ yoyo_scripts() }}
```
### Rendering a Twig View
You can use the Twig instance to render any Twig view.
```
$twig = \Clickfwd\Yoyo\Yoyo::getViewProvider()->getProviderInstance();
echo $twig->render('home');
```
### Rendering Yoyo Twig Components
To render Yoyo components inside Twig views, use the `yoyo` function.
```twig
yoyo('search')
```
### Updating Yoyo Twig Components
To update Yoyo components in the Yoyo-designated route.
```php
echo (new \Clickfwd\Yoyo\Yoyo())->update();
```
### Inline Views
When dealing with simple templates, you can create components without a template file and instead return an inline view in the component's `render` method.
```php
class HelloWorld extends Component
{
public $message = 'Hello World!';
}
public function render()
{
return <<<'twig'
{{ message }}
twig;
}
```
### Other Twig Features
Yoyo adds a few functions and variables that can be used within Yoyo component templates.
- The `spinning` variable can be used to check if a component is being re-rendered.
```twig
{% if spinning %}
Component updated
{% endif %}
```
- All event methods are available as functions within blade components
```twig
{{ emit('eventName', {'foo':'bar'}) }}
{{ emitUp('eventName', {'foo':'bar'}) }}
{{ emitSelf('eventName', {'foo':'bar'}) }}
{{ emitTo('component-name', 'eventName', {'foo':'bar'}) }}
```
- Computed properties
```php
class HelloWorld extends Component
{
public $message = 'Hello World!';
public function getHelloWorldProperty()
{
return $this->message;
}
}
```
```twig
Key finding: Attribute scanning (3 separate passes per element) is the #1 scaling cost at {SCAN_PCT}%.
Combined with the redundant XPath in getOuterHTML ({OUTER_PCT}%), these two account for {COMBINED_PCT}% of compile time —
and both are optimizable.
Scaling is linear with reactive element count. Each element adds ~{PER_ELEM_COST}ms.
The fixed overhead (regex + DOM parse + XPath + serialize) is ~{FIXED_COST}ms regardless of size.
4. Optimization Opportunities
Optimization
Target
Expected Impact
Single-pass attribute scan
Children: attr scanning ({SCAN_PCT}%)
Eliminate 2 of 3 passes → ~{SCAN_SAVE}% total savings
Eliminate redundant XPath in getOuterHTML
Output: getOuterHTML ({OUTER_PCT}%)
Reuse existing XPath → ~{OUTER_SAVE}% savings
Inline addRequestMethodAttribute for children
Part of attr scanning
Avoid 16 DOM calls per element → included in single-pass
PHP 8.4 Dom\HTMLDocument
DOM: loadHTML ({PARSE_PCT}%)
Actually ~20% slower for small/medium HTML
Generated by profile-compiler.php
HTML;
// Fill in placeholders
$scanPct = sprintf('%.1f', ($table50['phases'][3]['per_op_ms'] / $table50['full']['per_op_ms']) * 100);
$outerPct = sprintf('%.1f', ($table50['phases'][6]['per_op_ms'] / $table50['full']['per_op_ms']) * 100);
$combinedPct = sprintf('%.1f', (float)$scanPct + (float)$outerPct);
$parsePct = sprintf('%.1f', ($table50['phases'][1]['per_op_ms'] / $table50['full']['per_op_ms']) * 100);
// Per-element cost = (50-row total - minimal total) / 100 elements
$perElemCost = sprintf('%.4f', ($scaling[5]['per_op_ms'] - $scaling[0]['per_op_ms']) / 100);
$fixedCost = sprintf('%.3f', $scaling[0]['per_op_ms']);
$replacements = [
'{PHASE_BAR_TABLE50}' => phaseBar($table50, $phaseColors),
'{PHASE_TABLE_TABLE50}' => phaseTable($table50),
'{PHASE_BAR_TODO}' => phaseBar($todoList, $phaseColors),
'{PHASE_TABLE_TODO}' => phaseTable($todoList),
'{PHASE_BAR_MINIMAL}' => phaseBar($minimal, $phaseColors),
'{PHASE_TABLE_MINIMAL}' => phaseTable($minimal),
'{SCALING_CHART}' => scalingChart($scaling),
'{SCAN_PCT}' => $scanPct,
'{OUTER_PCT}' => $outerPct,
'{COMBINED_PCT}' => $combinedPct,
'{PARSE_PCT}' => $parsePct,
'{SCAN_SAVE}' => sprintf('%.0f', (float)$scanPct * 0.7),
'{OUTER_SAVE}' => $outerPct,
'{PER_ELEM_COST}' => $perElemCost,
'{FIXED_COST}' => $fixedCost,
];
$html = str_replace(array_keys($replacements), array_values($replacements), $html);
$outputPath = __DIR__ . '/profile-report.html';
file_put_contents($outputPath, $html);
fwrite(STDERR, "\nReport saved to: $outputPath\n");
================================================
FILE: tests/Browser/BrowserServer.php
================================================
*/
private array $pipes = [];
public const HOST = 'localhost';
public const PORT = 8765;
private function __construct()
{
}
public static function url(): string
{
return sprintf('http://%s:%d', self::HOST, self::PORT);
}
/**
* Ensure the server is running. Safe to call multiple times.
*/
public static function ensureRunning(): void
{
if (self::$instance !== null) {
return;
}
self::$instance = new self();
// Already running externally (manual start)?
if (self::isListening()) {
return;
}
self::$instance->start();
register_shutdown_function([self::class, 'stop']);
}
/**
* Start the PHP built-in server.
*/
private function start(): void
{
$router = realpath(__DIR__.'/server/index.php');
if ($router === false) {
throw new \RuntimeException('Browser test server router not found at tests/Browser/server/index.php');
}
$cmd = sprintf(
'php -S %s:%d %s',
self::HOST,
self::PORT,
escapeshellarg($router)
);
$this->process = proc_open(
$cmd,
[
0 => ['pipe', 'r'],
1 => ['pipe', 'w'],
2 => ['pipe', 'w'],
],
$this->pipes,
dirname($router)
);
if (! is_resource($this->process)) {
throw new \RuntimeException('Failed to start browser test server');
}
// Wait for server to accept connections (up to 5 seconds)
for ($i = 0; $i < 50; $i++) {
if (self::isListening()) {
return;
}
usleep(100_000); // 100ms
}
self::stop();
throw new \RuntimeException(
sprintf('Browser test server failed to start on %s:%d within 5 seconds', self::HOST, self::PORT)
);
}
/**
* Check if the server port is accepting connections.
*/
public static function isListening(): bool
{
$sock = @fsockopen(self::HOST, self::PORT, $errno, $errstr, 0.5);
if ($sock) {
fclose($sock);
return true;
}
return false;
}
/**
* Stop the server if we started it.
*/
public static function stop(): void
{
if (self::$instance === null) {
return;
}
$instance = self::$instance;
if (is_resource($instance->process)) {
// Close stdin to signal shutdown
if (isset($instance->pipes[0]) && is_resource($instance->pipes[0])) {
fclose($instance->pipes[0]);
}
proc_terminate($instance->process);
proc_close($instance->process);
$instance->process = null;
}
self::$instance = null;
}
}
================================================
FILE: tests/Browser/Components/ActionButton.php
================================================
emit('notification');
}
}
================================================
FILE: tests/Browser/Components/Counter.php
================================================
count++;
}
public function decrement()
{
$this->count--;
}
}
================================================
FILE: tests/Browser/Components/DeleteItem.php
================================================
skipRender();
}
}
================================================
FILE: tests/Browser/Components/DispatchBystander.php
================================================
'handlePostCreated',
'status-changed' => 'handleStatusChanged',
'simple-refresh' => 'handleSimpleRefresh',
];
public function handlePostCreated($postId)
{
$this->message = "Post created with ID: {$postId}";
}
public function handleStatusChanged($status, $reason = 'none')
{
$this->message = "Status: {$status}, Reason: {$reason}";
}
public function handleSimpleRefresh()
{
$this->message = 'Refreshed without params';
}
}
================================================
FILE: tests/Browser/Components/FavoriteButton.php
================================================
isFavorited = $this->isFavorited ? 0 : 1;
}
}
================================================
FILE: tests/Browser/Components/Form.php
================================================
errors = [];
if (empty($this->name)) {
$this->errors['name'] = 'Name is required.';
}
if (empty($this->email)) {
$this->errors['email'] = 'Email is required.';
}
if (empty($this->errors)) {
$this->success = true;
}
}
}
================================================
FILE: tests/Browser/Components/LiveSearch.php
================================================
'PHP Basics'],
['title' => 'PHP Advanced'],
['title' => 'JavaScript Guide'],
['title' => 'CSS Flexbox'],
['title' => 'HTML Forms'],
['title' => 'Laravel Framework'],
['title' => 'Yoyo Components'],
['title' => 'Alpine JS'],
];
protected function getResultsProperty()
{
if (! $this->q) {
return [];
}
return array_filter(self::$data, function ($item) {
return stripos($item['title'], $this->q) !== false;
});
}
}
================================================
FILE: tests/Browser/Components/ModalTrigger.php
================================================
isOpen = 1;
}
public function closeModal()
{
$this->isOpen = 0;
}
}
================================================
FILE: tests/Browser/Components/MultiScreen.php
================================================
'onNotification'];
public function onNotification()
{
$this->count = $this->count + 1;
}
}
================================================
FILE: tests/Browser/Components/NullProp.php
================================================
clicks++;
}
}
================================================
FILE: tests/Browser/Components/Pagination.php
================================================
totalItems; $i++) {
$items[] = ['title' => "Item $i"];
}
$offset = ($this->page - 1) * $this->perPage;
return array_slice($items, $offset, $this->perPage);
}
protected function getTotalPagesProperty()
{
return (int) ceil($this->totalItems / $this->perPage);
}
protected function getStartProperty()
{
return (($this->page - 1) * $this->perPage) + 1;
}
protected function getEndProperty()
{
return min($this->page * $this->perPage, $this->totalItems);
}
}
================================================
FILE: tests/Browser/Components/ResponseHeaders.php
================================================
response->retarget('#retarget-receiver');
$this->message = 'retargeted content';
}
public function doReswap()
{
$this->response->reswap('innerHTML');
$this->message = 'inner-swapped';
}
public function doTrigger()
{
$this->response->trigger('custom-event');
$this->message = 'triggered';
}
public function doTriggerAfterSettle()
{
$this->response->triggerAfterSettle('settle-event');
$this->message = 'settled';
}
public function doPushUrl()
{
$this->response->pushUrl('/pushed-path');
$this->message = 'url-pushed';
}
public function doReplaceUrl()
{
$this->response->replaceUrl('/replaced-path');
$this->message = 'url-replaced';
}
}
================================================
FILE: tests/Browser/Components/StatusDropdown.php
================================================
isOpen = ! $this->isOpen;
}
public function setStatus()
{
$this->status = $this->newStatus;
$this->isOpen = false;
}
}
================================================
FILE: tests/Browser/Components/TodoList.php
================================================
1, 'title' => 'Build a framework', 'completed' => false],
['id' => 2, 'title' => 'Buy groceries', 'completed' => false],
['id' => 3, 'title' => 'Write tests', 'completed' => true],
];
}
}
public function add()
{
$title = trim($this->request->get('task', ''));
if ($title) {
$id = max(array_column($_SESSION['todos'], 'id')) + 1;
$_SESSION['todos'][] = ['id' => $id, 'title' => $title, 'completed' => false];
}
}
public function toggle()
{
$id = (int) $this->request->get('id', 0);
foreach ($_SESSION['todos'] as &$todo) {
if ($todo['id'] === $id) {
$todo['completed'] = ! $todo['completed'];
break;
}
}
}
public function delete()
{
$id = (int) $this->request->get('id', 0);
$_SESSION['todos'] = array_values(array_filter($_SESSION['todos'], function ($todo) use ($id) {
return $todo['id'] !== $id;
}));
}
protected function getEntriesProperty()
{
$todos = $_SESSION['todos'] ?? [];
if ($this->filter === 'active') {
return array_filter($todos, fn ($t) => ! $t['completed']);
}
if ($this->filter === 'completed') {
return array_filter($todos, fn ($t) => $t['completed']);
}
return $todos;
}
protected function getCountProperty()
{
return count($_SESSION['todos'] ?? []);
}
protected function getActiveCountProperty()
{
return count(array_filter($_SESSION['todos'] ?? [], fn ($t) => ! $t['completed']));
}
}
================================================
FILE: tests/Browser/CounterTest.php
================================================
visit(BASE_URL.'/counter')
->assertVisible('#counter')
->assertSeeIn('[data-count]', '0');
});
it('increments count when clicking +', function () {
$this->visit(BASE_URL.'/counter')
->assertSeeIn('[data-count]', '0')
->click('[data-action="increment"]')
->assertSeeIn('[data-count]', '1');
});
it('decrements count when clicking -', function () {
$this->visit(BASE_URL.'/counter')
->click('[data-action="decrement"]')
->assertSeeIn('[data-count]', '-1');
});
it('maintains state across multiple actions', function () {
$page = $this->visit(BASE_URL.'/counter');
for ($i = 0; $i < 3; $i++) {
$page->click('[data-action="increment"]')
->assertSeeIn('[data-count]', (string) ($i + 1))
->wait(0.3);
}
});
it('updates query string with count value', function () {
$this->visit(BASE_URL.'/counter')
->click('[data-action="increment"]')
->assertQueryStringHas('count', '1');
});
================================================
FILE: tests/Browser/CrossComponentEventsTest.php
================================================
visit(BASE_URL.'/events')
->assertVisible('#events-test')
->assertVisible('#badge')
->assertSeeIn('#badge [data-count]', '0')
->assertVisible('#btn-email')
->assertVisible('#btn-add');
});
it('increments badge count when action button emits event', function () {
$page = $this->visit(BASE_URL.'/events')
->assertSeeIn('#badge [data-count]', '0');
$page->click('#btn-email [data-action="fire"]')
->assertSeeIn('#badge [data-count]', '1');
});
it('increments badge count from multiple buttons', function () {
$page = $this->visit(BASE_URL.'/events')
->assertSeeIn('#badge [data-count]', '0');
$page->click('#btn-email [data-action="fire"]')
->assertSeeIn('#badge [data-count]', '1')
->wait(0.3);
$page->click('#btn-add [data-action="fire"]')
->assertSeeIn('#badge [data-count]', '2');
});
it('badge has notification listener in hx-trigger', function () {
$this->visit(BASE_URL.'/events')
->assertSourceHas('hx-trigger="refresh,notification"');
});
================================================
FILE: tests/Browser/DispatchTest.php
================================================
visit(BASE_URL.'/dispatch')
->assertSourceHas('yoyo:name="dispatch-listener"')
->assertSourceHas('hx-trigger="refresh,post-created,status-changed,simple-refresh"');
});
it('dispatches event with single named param', function () {
$this->visit(BASE_URL.'/dispatch')
->click('#btn-dispatch')
->assertSeeIn('#message', 'Post created with ID: 42');
});
it('dispatches event with multiple named params', function () {
$this->visit(BASE_URL.'/dispatch')
->click('#btn-dispatch-multi')
->assertSeeIn('#message', 'Status: active, Reason: manual');
});
it('dispatches targeted event via dispatchTo', function () {
$this->visit(BASE_URL.'/dispatch')
->click('#btn-dispatch-to')
->assertSeeIn('#message', 'Post created with ID: 7');
});
it('dispatches event without params', function () {
$this->visit(BASE_URL.'/dispatch')
->click('#btn-dispatch-no-params')
->assertSeeIn('#message', 'Refreshed without params');
});
it('does not update non-listening bystander component', function () {
$this->visit(BASE_URL.'/dispatch')
->assertSeeIn('#bystander', 'unchanged')
->click('#btn-dispatch')
->assertSeeIn('#message', 'Post created with ID: 42')
->assertSeeIn('#bystander', 'unchanged');
});
it('dispatchTo non-existent component is a silent no-op', function () {
$page = $this->visit(BASE_URL.'/dispatch');
$page->click('#btn-dispatch-nonexistent');
$page->wait(1);
// Listener should still have empty message — component was not updated
$page->assertSourceHas('');
});
================================================
FILE: tests/Browser/FormTest.php
================================================
visit(BASE_URL.'/form')
->assertVisible('#form')
->assertVisible('input#name')
->assertVisible('input#email')
->assertVisible('button[type="submit"]');
});
it('shows validation errors when submitting empty form', function () {
$this->visit(BASE_URL.'/form')
->click('button[type="submit"]')
->assertVisible('[data-error="name"]')
->assertSee('Name is required')
->assertVisible('[data-error="email"]')
->assertSee('Email is required');
});
it('shows success message after valid submission', function () {
$this->visit(BASE_URL.'/form')
->fill('input#name', 'John Doe')
->fill('input#email', 'john@example.com')
->click('button[type="submit"]')
->assertVisible('[data-success]')
->assertSee('Thank you for registering!');
});
it('replaces form with success state', function () {
$this->visit(BASE_URL.'/form')
->fill('input#name', 'Jane')
->fill('input#email', 'jane@test.com')
->click('button[type="submit"]')
->assertMissing('input#name')
->assertMissing('button[type="submit"]')
->assertSee('Thank you for registering!');
});
================================================
FILE: tests/Browser/InfrastructureTest.php
================================================
visit(BASE_URL.'/counter')
->assertSourceHas('htmx');
});
it('includes yoyo.js script', function () {
$this->visit(BASE_URL.'/counter')
->assertSourceHas('yoyo.js');
});
it('initializes Yoyo configuration in JavaScript', function () {
$this->visit(BASE_URL.'/counter')
->assertSourceHas('Yoyo.url')
->assertSourceHas('Yoyo.config(');
});
it('includes yoyo spinning CSS', function () {
$this->visit(BASE_URL.'/counter')
->assertSourceHas('yoyo\\:spinning');
});
it('compiles yoyo: attributes to hx- attributes', function () {
$this->visit(BASE_URL.'/counter')
->assertSourceHas('hx-get="increment"')
->assertSourceHas('hx-get="decrement"');
});
it('adds yoyo wrapper attributes to component root', function () {
$this->visit(BASE_URL.'/counter')
->assertSourceHas('yoyo:name="counter"')
->assertSourceHas('hx-ext="yoyo"')
->assertSourceHas('hx-include="this"');
});
================================================
FILE: tests/Browser/LiveSearchTest.php
================================================
visit(BASE_URL.'/live-search')
->assertVisible('#live-search')
->assertVisible('input[name="q"]')
->assertMissing('[data-results]');
});
it('shows matching results when typing', function () {
$this->visit(BASE_URL.'/live-search')
->typeSlowly('input[name="q"]', 'php', 100)
->assertVisible('[data-results]')
->assertSeeIn('[data-results]', 'PHP Basics')
->assertSeeIn('[data-results]', 'PHP Advanced');
});
it('shows no results message for unmatched query', function () {
$this->visit(BASE_URL.'/live-search')
->typeSlowly('input[name="q"]', 'zzzzz', 100)
->assertVisible('[data-no-results]')
->assertSee('No results found');
});
it('filters results based on query', function () {
$this->visit(BASE_URL.'/live-search')
->typeSlowly('input[name="q"]', 'yoyo', 100)
->assertSeeIn('[data-results]', 'Yoyo Components')
->assertDontSeeIn('[data-results]', 'PHP Basics');
});
================================================
FILE: tests/Browser/ModalTest.php
================================================
visit(BASE_URL.'/modal')
->assertVisible('#modal-trigger')
->assertVisible('[data-action="open"]')
->assertNotPresent('[data-modal]');
});
it('opens modal on button click', function () {
$this->visit(BASE_URL.'/modal')
->assertNotPresent('[data-modal]')
->click('[data-action="open"]')
->assertVisible('[data-modal]')
->assertSeeIn('[data-modal-title]', 'Modal Content')
->assertSee('This is the modal body.');
});
it('closes modal on close button click', function () {
$page = $this->visit(BASE_URL.'/modal');
$page->click('[data-action="open"]')
->assertVisible('[data-modal]')
->wait(0.3);
$page->click('[data-action="close"]')
->assertNotPresent('[data-modal]');
});
it('can reopen modal after closing', function () {
$page = $this->visit(BASE_URL.'/modal');
$page->click('[data-action="open"]')
->assertVisible('[data-modal]')
->wait(0.3);
$page->click('[data-action="close"]')
->assertNotPresent('[data-modal]')
->wait(0.3);
$page->click('[data-action="open"]')
->assertVisible('[data-modal]');
});
it('uses native dialog element', function () {
$this->visit(BASE_URL.'/modal')
->click('[data-action="open"]')
->assertSourceHas('assertSourceHas('data-modal');
});
================================================
FILE: tests/Browser/MultiScreenTest.php
================================================
visit(BASE_URL.'/multi-screen')
->assertVisible('#wizard')
->assertVisible('[data-screen="initial"]')
->assertSeeIn('[data-info]', 'Ready to begin')
->assertVisible('[data-action="open"]');
});
it('transitions to form screen on open', function () {
$this->visit(BASE_URL.'/multi-screen')
->assertVisible('[data-screen="initial"]')
->click('[data-action="open"]')
->assertVisible('[data-screen="form"]')
->assertMissing('[data-screen="initial"]')
->assertVisible('input[name="message"]')
->assertVisible('[data-action="submit"]')
->assertVisible('[data-action="cancel"]');
});
it('transitions to success screen on submit', function () {
$page = $this->visit(BASE_URL.'/multi-screen');
$page->click('[data-action="open"]')
->assertVisible('[data-screen="form"]')
->wait(0.3);
$page->fill('input[name="message"]', 'Hello World')
->click('[data-action="submit"]')
->assertVisible('[data-screen="success"]')
->assertMissing('[data-screen="form"]')
->assertSeeIn('[data-result]', 'Submitted: Hello World');
});
it('returns to initial screen on cancel', function () {
$page = $this->visit(BASE_URL.'/multi-screen');
$page->click('[data-action="open"]')
->assertVisible('[data-screen="form"]')
->wait(0.3);
$page->click('[data-action="cancel"]')
->assertVisible('[data-screen="initial"]')
->assertMissing('[data-screen="form"]');
});
it('returns to initial screen from success via reset', function () {
$page = $this->visit(BASE_URL.'/multi-screen');
$page->click('[data-action="open"]')
->assertVisible('[data-screen="form"]')
->wait(0.3);
$page->fill('input[name="message"]', 'Test')
->click('[data-action="submit"]')
->assertVisible('[data-screen="success"]')
->wait(0.3);
$page->click('[data-action="reset"]')
->assertVisible('[data-screen="initial"]')
->assertMissing('[data-screen="success"]');
});
================================================
FILE: tests/Browser/NullPropTest.php
================================================
visit(BASE_URL.'/null-prop')
->assertVisible('#null-prop')
->assertAttribute('[data-icon-slot-type]', 'data-icon-slot-type', 'NULL')
->assertSeeIn('[data-icon-slot-display]', 'NULL_OK')
->click('[data-action="increment"]')
->assertSeeIn('[data-clicks]', '1')
->assertAttribute('[data-icon-slot-type]', 'data-icon-slot-type', 'NULL')
->assertSeeIn('[data-icon-slot-display]', 'NULL_OK');
});
it('preserves PHP false prop after request roundtrip', function () {
$this->visit(BASE_URL.'/null-prop')
->assertAttribute('[data-enabled-type]', 'data-enabled-type', 'boolean')
->assertSeeIn('[data-enabled-display]', 'FALSE_OK')
->click('[data-action="increment"]')
->assertSeeIn('[data-clicks]', '1')
->assertAttribute('[data-enabled-type]', 'data-enabled-type', 'boolean')
->assertSeeIn('[data-enabled-display]', 'FALSE_OK');
});
it('emits JSON null and false in button hx-vals', function () {
$this->visit(BASE_URL.'/null-prop')
->assertAttributeContains('[data-action="increment"]', 'hx-vals', '"iconSlot":null')
->assertAttributeContains('[data-action="increment"]', 'hx-vals', '"enabled":false')
->assertAttributeDoesntContain('[data-action="increment"]', 'hx-vals', '"iconSlot":"null"')
->assertAttributeDoesntContain('[data-action="increment"]', 'hx-vals', '"enabled":"false"');
});
================================================
FILE: tests/Browser/PaginationTest.php
================================================
visit(BASE_URL.'/pagination')
->assertVisible('#pagination')
->assertVisible('[data-results]')
->assertSeeIn('[data-page-info]', 'Showing 1 to 3')
->assertSeeIn('[data-results]', 'Item 1');
});
it('navigates to page 2', function () {
$this->visit(BASE_URL.'/pagination')
->click('[data-page="2"]')
->assertSeeIn('[data-page-info]', 'Showing 4 to 6')
->assertSeeIn('[data-results]', 'Item 4');
});
it('navigates to last page', function () {
$this->visit(BASE_URL.'/pagination')
->click('[data-page="4"]')
->assertSeeIn('[data-page-info]', 'Showing 10 to 12')
->assertSeeIn('[data-results]', 'Item 12');
});
it('updates query string with page number', function () {
$this->visit(BASE_URL.'/pagination')
->click('[data-page="3"]')
->assertQueryStringHas('page', '3');
});
it('highlights active page', function () {
$this->visit(BASE_URL.'/pagination')
->assertAttribute('[data-page="1"]', 'class', 'active');
});
================================================
FILE: tests/Browser/ProductListTest.php
================================================
visit(BASE_URL.'/product-list')
->assertVisible('#product-list')
->assertVisible('#fav-1')
->assertVisible('#fav-2')
->assertVisible('#fav-3')
->assertVisible('#status-1')
->assertVisible('#status-2')
->assertVisible('#status-3');
});
it('renders each favorite button with unfavorited state', function () {
$this->visit(BASE_URL.'/product-list')
->assertSeeIn('#fav-1', '☆')
->assertSeeIn('#fav-2', '☆')
->assertSeeIn('#fav-3', '☆');
});
it('renders each status dropdown with correct initial status', function () {
$this->visit(BASE_URL.'/product-list')
->assertSeeIn('#status-1 [data-status]', 'Active')
->assertSeeIn('#status-2 [data-status]', 'Draft')
->assertSeeIn('#status-3 [data-status]', 'Archived');
});
it('toggles favorite on one item without affecting others', function () {
$page = $this->visit(BASE_URL.'/product-list')
->assertSeeIn('#fav-1', '☆')
->assertSeeIn('#fav-2', '☆');
$page->click('#fav-1 [data-action="toggle"]')
->assertSeeIn('#fav-1', '★')
->assertSeeIn('#fav-2', '☆');
});
it('toggles favorite back to unfavorited', function () {
$page = $this->visit(BASE_URL.'/product-list')
->assertSeeIn('#fav-2', '☆');
$page->click('#fav-2 [data-action="toggle"]')
->assertSeeIn('#fav-2', '★')
->wait(0.3);
$page->click('#fav-2 [data-action="toggle"]')
->assertSeeIn('#fav-2', '☆');
});
it('can favorite multiple items independently', function () {
$page = $this->visit(BASE_URL.'/product-list')
->assertSeeIn('#fav-1', '☆');
$page->click('#fav-1 [data-action="toggle"]')
->assertSeeIn('#fav-1', '★')
->wait(0.3);
$page->click('#fav-3 [data-action="toggle"]')
->assertSeeIn('#fav-3', '★');
$page->assertSeeIn('#fav-2', '☆');
});
it('opens status dropdown menu', function () {
$page = $this->visit(BASE_URL.'/product-list');
$page->assertNotPresent('#status-1 [data-menu]');
$page->click('#status-1 [data-action="toggle-menu"]')
->assertVisible('#status-1 [data-menu]')
->assertSeeIn('#status-1 [data-option="active"]', 'Active')
->assertSeeIn('#status-1 [data-option="draft"]', 'Draft')
->assertSeeIn('#status-1 [data-option="archived"]', 'Archived');
});
it('changes status via dropdown without affecting other items', function () {
$page = $this->visit(BASE_URL.'/product-list');
$page->click('#status-1 [data-action="toggle-menu"]')
->assertVisible('#status-1 [data-menu]')
->wait(0.3);
$page->click('#status-1 [data-option="draft"]')
->assertSeeIn('#status-1 [data-status]', 'Draft')
->assertNotPresent('#status-1 [data-menu]')
->assertSeeIn('#status-2 [data-status]', 'Draft')
->assertSeeIn('#status-3 [data-status]', 'Archived');
});
it('each dropdown operates independently', function () {
$page = $this->visit(BASE_URL.'/product-list');
$page->click('#status-3 [data-action="toggle-menu"]')
->assertVisible('#status-3 [data-menu]')
->wait(0.3);
$page->click('#status-3 [data-option="active"]')
->assertSeeIn('#status-3 [data-status]', 'Active');
$page->assertSeeIn('#status-1 [data-status]', 'Active')
->assertSeeIn('#status-2 [data-status]', 'Draft');
});
it('each component has unique yoyo IDs in the DOM', function () {
$this->visit(BASE_URL.'/product-list')
->assertSourceHas('id="fav-1"')
->assertSourceHas('id="fav-2"')
->assertSourceHas('id="fav-3"')
->assertSourceHas('id="status-1"')
->assertSourceHas('id="status-2"')
->assertSourceHas('id="status-3"')
->assertSourceHas('yoyo:name="favorite-button"')
->assertSourceHas('yoyo:name="status-dropdown"');
});
================================================
FILE: tests/Browser/ResponseHeadersTest.php
================================================
visit(BASE_URL.'/response-headers')
->assertVisible('#response-headers-test')
->assertSeeIn('#rh-message', 'initial')
->assertSeeIn('#retarget-content', 'original');
});
it('retargets response to a different element via HX-Retarget', function () {
// HX-Retarget with outerHTML swap replaces #retarget-receiver with the component response
$this->visit(BASE_URL.'/response-headers')
->assertSeeIn('#retarget-content', 'original')
->click('#btn-retarget')
->assertSee('retargeted content');
});
it('changes swap strategy to innerHTML via HX-Reswap', function () {
// Default swap is outerHTML — the component root is replaced entirely.
// With HX-Reswap: innerHTML, the component root stays and content goes inside it.
$this->visit(BASE_URL.'/response-headers')
->click('#btn-reswap')
->assertSeeIn('#response-headers', 'inner-swapped');
});
it('triggers client-side event via HX-Trigger', function () {
$this->visit(BASE_URL.'/response-headers')
->click('#btn-trigger')
->assertSeeIn('#event-log', 'custom-event,');
});
it('triggers client-side event after settle via HX-Trigger-After-Settle', function () {
$this->visit(BASE_URL.'/response-headers')
->click('#btn-trigger-settle')
->assertSeeIn('#event-log', 'settle-event,');
});
it('executes pushUrl action and re-renders component', function () {
// URL push is not assertable in browser tests because historyEnabled is false
// in the test server config. Feature tests verify the HX-Push-Url header is set.
$this->visit(BASE_URL.'/response-headers')
->click('#btn-push-url')
->assertSeeIn('#rh-message', 'url-pushed');
});
it('executes replaceUrl action and re-renders component', function () {
// Same as pushUrl — HX-Replace-Url header verified in feature tests.
$this->visit(BASE_URL.'/response-headers')
->click('#btn-replace-url')
->assertSeeIn('#rh-message', 'url-replaced');
});
================================================
FILE: tests/Browser/SkipRenderTest.php
================================================
visit(BASE_URL.'/skip-render')
->assertVisible('#skip-render-test')
->assertVisible('#item-1')
->assertVisible('#item-2')
->assertSeeIn('#item-1 [data-title]', 'First Item')
->assertSeeIn('#item-2 [data-title]', 'Second Item');
});
it('keeps component in DOM after skipRender (204)', function () {
$page = $this->visit(BASE_URL.'/skip-render')
->assertSeeIn('#item-1 [data-title]', 'First Item');
// Click delete — should return 204, no swap
$page->click('#item-1 [data-action="delete"]')
->waitForEvent('networkidle');
// Component should still be in the DOM (204 = no swap)
$page->assertVisible('#item-1')
->assertSeeIn('#item-1 [data-title]', 'First Item');
});
it('does not affect other components on 204', function () {
$page = $this->visit(BASE_URL.'/skip-render')
->assertSeeIn('#item-2 [data-title]', 'Second Item');
$page->click('#item-1 [data-action="delete"]')
->waitForEvent('networkidle');
$page->assertVisible('#item-2')
->assertSeeIn('#item-2 [data-title]', 'Second Item');
});
================================================
FILE: tests/Browser/TodoListTest.php
================================================
visit(BASE_URL.'/todo-list')
->assertVisible('#todo-list')
->assertVisible('[data-entries]')
->assertSee('Build a framework')
->assertSee('Buy groceries')
->assertSee('Write tests');
});
it('shows active item count', function () {
$this->visit(BASE_URL.'/todo-list')
->assertVisible('[data-active-count]')
->assertSeeIn('[data-active-count]', 'items left');
});
it('adds a new todo item', function () {
$this->visit(BASE_URL.'/todo-list')
->fill('input[name="task"]', 'New browser test task')
->keys('input[name="task"]', ['Enter'])
->assertSee('New browser test task');
});
it('toggles todo completion', function () {
$this->visit(BASE_URL.'/todo-list')
->click('[data-todo-id="1"] input[type="checkbox"]')
->assertChecked('[data-todo-id="1"] input[type="checkbox"]');
});
it('deletes a todo item', function () {
$this->visit(BASE_URL.'/todo-list')
->assertSee('Buy groceries')
->click('[data-todo-id="2"] [data-delete]')
->assertDontSee('Buy groceries');
});
================================================
FILE: tests/Browser/bootstrap.php
================================================
configure([
'url' => '/yoyo',
'namespace' => 'Tests\\Browser\\Components\\',
]);
$yoyo->registerViewProvider(function () {
return new YoyoViewProvider(new View(__DIR__.'/views'));
});
$uri = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
// Yoyo AJAX endpoint
if ($uri === '/yoyo') {
echo $yoyo->update();
exit;
}
// Serve yoyo.js from src
if ($uri === '/yoyo.js' || $uri === '/assets/js/yoyo.js') {
header('Content-Type: application/javascript');
readfile(__DIR__.'/../../../src/assets/js/yoyo.js');
exit;
}
// Component isolation pages
$page = ltrim($uri, '/') ?: 'index';
$pagePath = __DIR__.'/pages/'.$page.'.php';
if (file_exists($pagePath)) {
ob_start();
include $pagePath;
$content = ob_get_clean();
echo $content;
exit;
}
http_response_code(404);
echo '404 Not Found';
================================================
FILE: tests/Browser/server/layout.php
================================================
<?php echo $title; ?>
';
$html .= '