A web client framework to build reactive web app in Ruby with WebAssembly.

The framwork use only standard Ruby libs which include ERB to render HTML. The render is then morphed to the actual DOM.

It need less directive like v-if or v-for because it can be done using Ruby and ERB.

Some directive is still needed to register listener.

The classic simple counter example looks like this.

class CounterComponent < Component
  attr_reactive :count

  def initialize(count: 0)
    @count = count
  end

  def template
    <<~ERB
      <%= count %>
      <button r-on:click="self.count += 1">Count</button>
    ERB
  end
end

See it live https://bhacaz.github.io/vuerb/counter

More examples.

curl -s https://raw.githubusercontent.com/Bhacaz/vuerb/refs/heads/main/dist/init.rb | ruby - my_new_app

The structure of the project should look like this:

my_new_app/
├── index.html
├── app.rb
├──components
   └── my_component.rb

Simply launch a web server in the root of the project like http-server or with Ruby:

ruby -run -e httpd . -p 8000

Then open the browser at http://localhost:8000.

A component is a class that inherit from Component. They must be located in the ./components folder and the class name must end with Component.

# ./components/MyComponent.rb

class MyComponent < Component
  def template
    <<-ERB
      <h1>My new component</h1>
    ERB
  end
end

To use a component in another component, you need to:

1. Import the component at the top of the file.
2. Use the r-source directive to render the component, without the Component suffix.

require_relative 'components/my_component'

class App < Component
  def template
    <<-ERB
      <div r-source="My"></div>
    ERB
  end
end

To make an attribute reactive, use the attr_reactive method. When the value of the attribute is reassigned using the setter, the component will be re-rendered.

class CounterComponent < Component
  attr_reactive :count

  def initialize(count: 0)
    @count = count
  end

  def template
    <<~ERB
      <%= count %>
      <button r-on:click="self.count += 1">Count</button>
    ERB
  end
end

• click
• change

The value to this attribute use inline Ruby code that will be evalutated in the context of the instance of the component.

<button r-on:click="self.count += 1">Count</button>

Set the name of an attr_reactive so on input change the new value is assign to the attr_reactive.

class MyComponent < Component
  attr_reactive :message

  def template
    <<-ERB
      <input r-model="message" value="<%= message %>">
      <p>The message is: <%= message %></p>
    ERB
  end
end

Used to render a component. WIP will change to use custom HTML tag.

<div r-source="Count"></div>

Will render the CountComponent

To pass initial data to the initializer of a component.

class CountComponent < Component
  attr_reactive :count

  def initialize(count:)
    @count = count
  end
end

<div r-source="Count" r-data="{ count: 42 }"></div>

To help during morphing.

<% todos.each do |todo|
 <div data-key=<%= todo.id %>>
  <h1><%= todo.title %></h1>
 </div>
<% end %>

• https://dev.to/ycmjason/building-a-simple-virtual-dom-from-scratch-3d05
• https://github.com/ycmjason-talks/2018-11-21-manc-web-meetup-4/blob/master/src/vdom/diff.js
• https://todomvc.com/examples/vue/dist/#/
• https://github.com/tastejs/todomvc/blob/gh-pages/examples/vue/src/components/TodoItem.vue