snabbdom-on-rails

snabbdom-on-rails JavaScript for react_on_rails Ruby gem

Usage no npm install needed!

<script type="module">
  import snabbdomOnRails from 'https://cdn.skypack.dev/snabbdom-on-rails';
</script>

README

snabbdom-on-rails

npm version

snabbdom-on-rails JavaScript for react_on_rails Ruby gem allowing you to use snabbdom instead of react as your virtual dom.

Install

npm install snabbdom-on-rails --save

Getting Started

The setup for using snabbdom-on-rails is the same as for react_on_rails, you will simply need to swap the react-on-rails and react node modules for snabbdom, snabbdom-jsx and snabbdom-on-rails in your package.json.

  1. Add the following to your Gemfile and bundle install.
gem "react_on_rails", "~> 5"

  1. Commit this to git (you cannot run the generator unless you do this).

  2. Run the generator with a simple "Hello World" example (more options below):

rails generate react_on_rails:install
  1. As mentioned, remove react, react-router and react-on-rails node modules for snabbdom, snabbdom-jsx and snabbdom-on-rails in your package.json. snabbdom-to-html also if you need server rendering.
"snabbdom": "^0.5.3",
"snabbdom-jsx": "^0.3.1",
"snabbdom-to-html": "^2.1.3",
"snabbdom-on-rails": "^0.0.1",
  1. Bundle and NPM install. Make sure you are on a recent version of node. Please use at least Node v5. Bundle is for adding execJs. You can remove that if you are sure you will not server render.
bundle && npm install
  1. Start your Rails server:
foreman start -f Procfile.dev
  1. Visit localhost:3000/hello_world

Usage

An example below of rendering a simple component/function with snabbdom-on-rails. There is also an example project I am working on here

/** @jsx html */
import { html } from 'snabbdom-jsx'
import ReactOnRails from 'snabbdom-on-rails'

const HelloMessage = ({name}) =>
  <div on-click={ _ => alert('Hi ' + name) }>
    {name}
  </div>;

const MyComponent = (props) => ( <HelloMessage {...props} /> )

ReactOnRails.register({ MyComponent })

This registered component can then be used in a rails view, like this, e.g. using haml:

= react_component('MyComponent', props: { name: 'Iseki' })

It will be nice if instead of ReactOnRails.register could use SnabbdomOnRails.register, this is a work in progress, at the moment this module just leaves alone all of the calls to register and render from the react_on_rails gem, but instead of rendering react components, renders snabbdom components. Happy to get some help from anyone who has some time and some more react_on_rails or snabbdom experience to help improve the current implementation.

Development

npm install
npm run build
npm test

License

MIT