A component-centric backend communication layer for Alpine.js.
Installation
Install using the following command:
composer require radio/radio
Install the @radioScripts into your Blade template, along with Alpine.js:
<html>
<head>
...
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
...
@radioScripts
</body>
</html>
Usage
- Create a new component class, and apply the
Radio\Radiotrait. The class may be located anywhere in your codebase, we recommendApp\Http\Components:
<?php
namespace App\Http\Components;
use Radio\Radio;
class MyComponent
{
use Radio;
// ...
}
- Use the
@radioBlade directive to connect your Alpine.js component to your Radio PHP class:
<div x-data="@radio(App\Http\Components\MyComponent::class)">
...
</div>
-
Use your PHP class with Alpine.js!
-
Interact with public methods and properties:
public $name = ''; public function saveName() { auth()->user()->update([ 'name' => $this->name, ]); return $this->name; }
<input x-model="name" type="text" /> <button @click="await saveName()">Save name</button>
-
Dispatch browser events:
use Radio\Concerns\WithEvents; public function closeUser($userId) { $this->dispatchEvent('closeUser', [ 'id' => $userId, ]); }
-
Render validation errors:
<template x-if="$radio.errors.has('name')"> <p x-text="$radio.errors.get('name')[0]"></p> </template>
-
Interact with PHP object properties:
// `Collection`s and `EloquentCollection`s are automatically cast using property type hinting. Note: objects within a collection are not cast with it. public Collection $users; // ...as well as `Stringable` objects. public Stringable $slug; // Implement the `Radio\Contracts\Castable` interface on any object for custom DTO support using `fromRadio()` and `toRadio` for hydration and dehydration. public CustomObject $dto;
-
Define computed properties:
#[Computed('getWelcomeMessage')] public $welcomeMessage; public function getWelcomeMessage() { $name = auth()->user()->name; return "Welcome {$name}!"; }
-
Need Help?
3 Sep 6, 2022
4 Apr 29, 2022
17 Dec 27, 2022
3 Jun 30, 2022
36 Nov 8, 2022
288 Dec 24, 2022
22 Aug 9, 2022
6 Aug 30, 2022
![[sCRiPTz-TEAM]](https://avatars.githubusercontent.com/u/533180?v=4&s=60)
3 Dec 31, 2021
1 Oct 22, 2021
2 Aug 15, 2022
1.2k Jan 6, 2023
0 Jan 9, 2022
8.3k Dec 29, 2022
199 Nov 23, 2022
11 Jun 10, 2021
26 Nov 17, 2022
9 Nov 16, 2021
1.8k Jan 7, 2023
3 Feb 20, 2022
138 Dec 26, 2022
4 Feb 14, 2022
1 Jan 30, 2022
1 Oct 29, 2021
2 Dec 24, 2021
4 Nov 19, 2022
0 Dec 25, 2021
39 May 25, 2022
1 Jan 15, 2022