Introducing Wire for Drupal, the Livewire concepts adapted to work with Drupal

Wire docs: https://wire-drupal.com/docs/quickstart

Presentation recording: https://www.youtube.com/watch?v=rJRohjxBnSo

As a user of both Laravel and Drupal, I was dreaming of having something similar to Livewire in the Drupal ecosystem. One day, I sat down to reverse-engineer it and realized that Drupal can easily handle Livewire's concepts. I decided to give it a try because I needed some interactivity in my projects, and that's how Wire was born.

1. Cornel Andreev / cornel.co Bringing Livewire to Drupal Component-based dynamic interfaces twitter.com/hugronaphor drupal.org/u/hugronaphor linkedin.com/in/cornelandreev

2. Prelude

3. The £ has fallen sharply against everything

4. Performance chart

5. namespace Drupal\hello_ajax\Controller ; use Drupal\Core\Controller\ControllerBase ; use Drupal\Core\Render\RendererInterface ; use Symfony\Component\DependencyInjection\ContainerInterface ; use Symfony\Component\HttpFoundation\JsonResponse ; /** * Json response for Ajax route. */ class HelloAjaxController extends ControllerBase { protected ?RendererInterface $renderer ; public function __construct (RendererInterface $renderer ) { $this -> renderer = $renderer ; } public static function create (ContainerInterface $container ) { return new static ( $container -> get ( 'renderer' ) ) ; } public function createHelloAjaxResponse (): JsonResponse { $time = [ '#markup' => $this -> t ( 'My items: @items' , [ '@items' => '...' , ]) , ] ; $response [ 'items' ] = $this -> renderer -> render ( $time ) ; return new JsonResponse( $response ) ; } } ( function ($ , Drupal) { 'use strict'; /** * Replaces content response from Ajax call. */ Drupal. behaviors . replaceMyContent = { attach : function () { $. ajax ({ url : Drupal. url ( ‘my-url' ) , type : 'POST' , dataType : 'json' , success : function (response) { if (response. hasOwnProperty ( 'items' )) { $( “. content-to-replace ” ) . text (response. time ) ; } } }) ; } } ; })(jQuery , Drupal ) ;

6. @calebporzio

7. Livewire is not unique ( in a good way )

8. Basics

9. namespace Drupal\drupalcamp\Plugin\WireComponent ; use Drupal\wire\View ; use Drupal\wire\WireComponent ; /** * @WireComponent ( * id = "counter", * label = @Translation ("Counter component"), * ) */ class Counter extends WireComponent { public int $count = ; public function render (): ?View { return View:: fromTpl ( ‘counter' ) ; } } <div> <p> {{ count }} </p> </div> …/drupalcamp/src/Plugin/WireComponent/Counter.php …/drupalcamp/templates/wire/counter.html.twig

10. namespace Drupal\drupalcamp\Plugin\WireComponent ; use Drupal\wire\View ; use Drupal\wire\WireComponent ; /** * @WireComponent ( * id = "counter", * label = @Translation ("Counter component"), * ) */ class Counter extends WireComponent { public int $count = ; public function render (): ?View { return View:: fromTpl ( ‘counter' ) ; } } <div> <p> {{ count }} </p> </div> …/drupalcamp/src/Plugin/WireComponent/Counter.php …/drupalcamp/templates/wire/counter.html.twig

11. namespace Drupal\drupalcamp\Plugin\WireComponent ; use Drupal\wire\View ; use Drupal\wire\WireComponent ; /** * @WireComponent ( * id = "counter", * label = @Translation ("Counter component"), * ) */ class Counter extends WireComponent { public int $count = ; public function render (): ?View { return View:: fromTpl ( ‘counter' ) ; } } <div> <p> {{ count }} </p> </div> …/drupalcamp/src/Plugin/WireComponent/Counter.php …/drupalcamp/templates/wire/counter.html.twig

12. <div> {{ wire( 'counter' ) }} … </div> https://wire-drupal.com/docs/rendering-components $wire_counter_component = [ '#type' => 'wire' , '#id' => ‘counter' , ] ;

13. Actions wire :[dispatched browser event] ="[action]"

14. <button wire :click ="doSomething" > Do Something </button> <input wire :keydown.enter =“doSomething" > <form wire :submit.prevent ="save" > ... <button> Save </button> </form> <button wire :whatever_custom_event =“doSomething" ></button> <button wire :click ="changeTitle('a string', ' {{ random() }} ')" > Change Title to a random one </button>

15. <button wire :click ="doSomething" > Do Something </button> <input wire :keydown.enter =“doSomething" > <form wire :submit.prevent ="save" > ... <button> Save </button> </form> <button wire :whatever_custom_event =“doSomething" ></button> <button wire :click ="changeTitle('a string', ' {{ random() }} ')" > Change Title to a random one </button>

16. <button wire :click ="doSomething" > Do Something </button> <input wire :keydown.enter =“doSomething" > <form wire :submit.prevent ="save" > ... <button> Save </button> </form> <button wire :whatever_custom_event =“doSomething" ></button> <button wire :click ="changeTitle('a string', ' {{ random() }} ')" > Change Title to a random one </button>

17. <button wire :click ="doSomething" > Do Something </button> <input wire :keydown.enter =“doSomething" > <form wire :submit.prevent ="save" > ... <button> Save </button> </form> <button wire :whatever_custom_event =“doSomething" ></button> <button wire :click ="changeTitle('a string', ' {{ random() }} ')" > Change Title to a random one </button>

18. <button wire :click ="doSomething" > Do Something </button> <input wire :keydown.enter =“doSomething" > <form wire :submit.prevent ="save" > ... <button> Save </button> </form> <button wire :whatever_custom_event =“doSomething" ></button> <button wire :click ="changeTitle('a string', ' {{ random() }} ')" > Change Title to a random one </button>

19. <button wire :click ="doSomething" > Do Something </button> <input wire :keydown.enter =“doSomething" > <form wire :submit.prevent ="save" > ... <button> Save </button> </form> <button wire :whatever_custom_event =“doSomething" ></button> <button wire :click ="changeTitle('a string', ' {{ random() }} ')" > Change Title to a random one </button>

20. namespace Drupal\drupalcamp\Plugin\WireComponent ; use Drupal\wire\View ; use Drupal\wire\WireComponent ; /** * @WireComponent ( * id = "counter", * label = @Translation ("Demo counter component"), * ) */ class Counter extends WireComponent { public int $count = ; public function render (): ?View { return View:: fromTpl ( ‘counter' ) ; } } <div> <p> {{ count }} </p> </div> …/drupalcamp/src/Plugin/WireComponent/Counter.php …/drupalcamp/templates/wire/counter.html.twig

21. class Counter extends WireComponent { public int $count = ; public function render (): ?View { return View:: fromTpl ( ‘counter' ) ; } } <div> <p> {{ count }} </p> </div>

22. class Counter extends WireComponent { public int $count = ; public function increment (): void { $this -> count ++ ; } public function render (): ?View { return View:: fromTpl ( 'counter' ) ; } } <div> <span wire :click ="increment" > + </span> <p> {{ count }} </p> </div>

23. class Counter extends WireComponent { public int $count = ; public function decrement (): void { $this -> count -- ; } public function increment (): void { $this -> count ++ ; } public function render (): ?View { return View:: fromTpl ( 'counter' ) ; } } <div> <span wire :click ="decrement" > - </span> <span wire :click ="increment" > + </span> <p> {{ count }} </p> </div>

24. class Counter extends WireComponent { public int $count = ; public function decrement ( int $by ): void { $this -> count = $this -> count - $by ; } public function increment (): void { $this -> count ++ ; } public function render (): ?View { return View:: fromTpl ( 'counter' ) ; } } <div> <span wire :click =“decrement(2)” > - </span> <span wire :click ="increment" > + </span> <p> {{ count }} </p> </div>

25. Cornel Andreev cornel.co twitter.com/hugronaphor drupal.org/u/hugronaphor linkedin.com/in/cornelandreev wire-drupal.com