Download the PHP package clickfwd/yoyo without Composer

On this page you can find all versions of the php package clickfwd/yoyo. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of clickfwd/yoyo

Informations about the package yoyo

Yoyo

Yoyo is a full-stack PHP framework that you can use on any project to create rich dynamic interfaces using server-rendered HTML.

With Yoyo, you create reactive components that are seamlessly updated without the need to write any Javascript code.

Yoyo ships with a simple templating system, and offers out-of-the-box support for Blade, without having to use Laravel, and Twig.

Inspired by Laravel Livewire and Sprig, and using htmx.

🚀 Yoyo Demo Apps

Check out the Yoyo Demo App to get a better idea of what you can build with Yoyo. It showcases many different types of Yoyo components. You can also clone and install the demo apps:

Documentation

How it Works

Yoyo components are rendered on page load and can be individually updated, without the need for page-reloads, based on user interaction and specific events.

Component update requests are sent directly to a Yoyo-designated route, where it processes the request and then sends the updated component HTML partial back to the browser.

Yoyo can update the browser URL state and trigger browser events straight from the server.

Below you can see what a Counter component looks like:

Component class

Component template

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

Phalcon Framework Installation

For phalcon, you need to add di

and you need to add router:

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 instructions.

Configuring Yoyo

It's necessary to bootstrap Yoyo with a few configuration settings. This code should run when rendering and updating components.

'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:

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.

Load Assets

Find yoyo.js in the following vendor path and copy it to your project's public assets directory.

To load the necessary scripts in your template add the following code inside the <head> tag:

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:

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:

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:

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.

And the template:

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.

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.

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:

Rendering on updates

Use the yoyo_update function to automatically process the component request and output the updated component.

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.

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.

Data Binding

You can automatically bind, or synchronize, the value of an HTML element with a component public property.

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.

You can modify this behavior using the yoyo:on directive which accepts multiple events separated by comma:

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.

throttle limits request to one dwithin the specified interval.

changed - only makes the request when the input value has changed.

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.

To specify an action you use one of the available action directives with the name of the action as the value.

For example:

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.

You can also use yoyo:val.name for individual values. kebab-case variable names are automatically converted to camel-case.

Yoyo will automatically track and send component public properties and input values with every request.

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:

Extra parameters passed to an action are made available to the component method as regular arguments:

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:

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:

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:

Computed Properties

Now, you can access $this->hello_world from either the component's class or template:

Computed properties with arguments behave like normal class methods that you can call in your templates:

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:

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:

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.

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.

Query String

Components have the ability to automatically update the browser's query string on state changes.

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.

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:

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:

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.

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:

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:

You can also remove specific class names by adding the remove modifier:

Toggling Element Attributes

Similar to CSS class toggling, you can also add or remove attributes while the component is updating.

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.

From a template

Emitting an Event to Parent Components

When dealing with nested components you can emit events to parents and not children or sibling components.

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).

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.

Emitting an Event to Itself

When you need to emit an event on the same component.

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.

Listening For Events In JavaScript

Yoyo allows registering event listeners for component emitted events:

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 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:

And listen for the event anywhere on the page:

Redirecting

Sometimes you may want to redirect the user to a different page after performing an action within a Yoyo component.

Using Blade

You can use Yoyo with Laravel's Blade templating engine, without having to use Laravel.

Installation

To get started install the following packages in your project:

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.

Load Assets

Find yoyo.js in the following vendor path and copy it to your project's public assets directory.

To load the necessary scripts in your Blade template you can use the yoyo_scripts directive in the <head> tag:

Rendering a Blade View

You can use the Blade instance to render any Blade view.

Rendering Yoyo Blade Components

To render Yoyo components inside Blade views, use the @yoyo directive.

Updating Yoyo Blade Components

To update Yoyo components in the Yoyo-designated route.

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.

Other Blade Features

Yoyo implements several Blade directives that can be used within Yoyo component templates.

Using Twig

You can use Yoyo with Symfony's Twig templating engine.

Installation

To get started install the following packages in your project:

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.

Load Assets

Find yoyo.js in the following vendor path and copy it to your project's public assets directory.

To load the necessary scripts in your Twig template you can use the yoyo_scripts function in the <head> tag:

Rendering a Twig View

You can use the Twig instance to render any Twig view.

Rendering Yoyo Twig Components

To render Yoyo components inside Twig views, use the yoyo function.

Updating Yoyo Twig Components

To update Yoyo components in the Yoyo-designated route.

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.

Other Twig Features

Yoyo adds a few functions and variables that can be used within Yoyo component templates.

License

Copyright © ClickFWD

Yoyo is open-sourced software licensed under the MIT license.

All versions of yoyo with dependencies

PHP Build Version
Package Version
Requires php Version ^7.3|^8.0|^8.1|^8.2|^8.3
illuminate/container Version ^8.0||^9.0||^10.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package clickfwd/yoyo contains the following files

Loading the files please wait ....