PHP code example of clickfwd / yoyo

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

clickfwd / yoyo example snippets

# /app/Yoyo/Counter.php

 
namespace App\Yoyo;

use Clickfwd\Yoyo\Component;

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

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

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

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

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,
];

 yoyo_scripts(); 

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

# /app/Yoyo/Search



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]);
	}
}

 echo yoyo_render('search'); 

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

 echo yoyo_render('form'); 

 echo yoyo_update(); 

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

class HelloWorld extends Component
{
    public $message;

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

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

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

class Review extends Component
{
    public Review $review;

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

class Review extends Component {

	public $reviewId;

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

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

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();
}

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

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

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;
	}
}

<div>
	<h1> echo $this->hello_world ;

<div>
	<h1> echo $this->errors('title') ;

// 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);

 $count = $count ?? 0 ; 

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

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

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

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

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

 $this->emit('counter-updated', $count) ; 

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

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

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

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

class Counter extends Component {

	public $message;

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

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

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

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

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

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

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);
});

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

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;
}

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

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

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);
});

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

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;
}

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

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

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

<div>

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

html
// resources/views/yoyo/search.php

<form>
    <input type="text" name="query" value=" echo $query ?? ''; 

html
<form>
    <input type="text" name="query" value=" echo $query; 

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

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

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

html
<div>
    <h1> echo $message; 

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

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

html
<button yoyo:get="addToCart( echo $productId; 

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

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

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

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

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

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