Getting Started

Introduction

Edgewire allows you to build reactive interfaces without leaving your server using Adonis. It is heavily inspired by the PHP library Livewire and even share some code.

Installation

Start by installing the edgewire library.

node ace add @foadonis/edgewire

Installs the @foadonis/edgewire package using the detected package manager.

Registers the following service provider and commands inside the adonisrc.ts file.

{
  commands: [
    // ...other providers
    () => import('@foadonis/edgewire/commands')
  ],
  providers: [
    // ...other providers
    () => import('@foadonis/edgewire/providers/shopkeeper')
  ]
}

Creates the config/edgewire.ts file.

Include scripts in your layout

In order to work, Edgewire requires Livewire Javascript library and Alpinejs.

You can the @edgewireScripts Edge tag at the end of your body in your root layout to load the scripts.

resources/views/layouts/app.edge

</head>
<body>
  ...

  @edgewireScripts
</body>

Create your first component

Edgewire provides different commands to quickly generate new components. Run the following command to make a new Counter component:

node ace make:edgewire counter

Generates an empty component app/components/counter.ts
Generates an empty template resources/views/edgewire/counter.edge
Registers the component in start/view.ts

Open app/components/counter.ts and replace its content with the following:

app/components/counter.ts

import { Component, view } from 'edgewire'

export default class CounterComponent extends Component {
  count = 1

  increment() {
    this.count++
    console.log('Increment', count)
  }

  decrement() {
    this.count--
    console.log('Decrement', count)
  }

  // This is optional as the template defaults to the component name.
  render() {
    return view('edgewire/counter')
  }
}

The above code:

Declares a property called count. As it is public, it will be available in your template.
Declares two methods increment and decrement. As they are public, they can be triggered directly from the browser.
Defines how to render the component using the render method.

Writing the View

Open the template resources/view/edgewire/counter.edge and replace its content with the following:

resources/view/edgewire/counter.edge

<div>
  <h1>{{ count }}</h1>

  <button wire:click="increment">+</button>

  <button wire:click="decrement">-</button>
</div>

This code will display the value of the count property and two buttons that increment and decrement the count property, respectively.

Test it out

You can now display your component using the @edgewire tag:

<body>
  @!edgewire("counter")
</body>

After clicking one of the buttons, you will notice that the count updates in real time.

Not impressive if we know React. But if you check your server and browser logs, you will discover that all the business logic inside our component is running by the server and not the client!