A lightweight turbolinks friendly JavaScript library

Usage no npm install needed!

<script type="module">
  import yuh from 'https://cdn.skypack.dev/yuh';


Yuh okay there, bud

Work in progress...

A light-weight JavaScript component library meant to be awesome with Turbolinks.

Has hard dependencies on both jQuery and lodash.

npm install yuh

gem install yuh

What I'm going on about, friend

  1. Rails template rendering is very powerful
  2. Paired with Turbolinks it is a very snappy experience
  3. Sometimes vanilla jQuery isn't enough, but Backbone/React/Angular/Ember is overkill
  4. Not intended to be a full framework, just a library for small pieces of JavaScript behaviour

Looking for features, guy?

  • ES6/Coffeescript class based component declaration
  • Data syncing with data-tags
  • Simple two-way binding
  • Some other crap

Some things to get working

  • Light template binding
  • more operations for dealing with children
  • Some other crap


<div data-yuh="MyComponent" data-user=<%= current_user.to_json %>>...</div>
class MyComponent extends Yuh.Component

  constructor: (el) ->

    @data.user # user data as json

    # bind to updating user.first_name
    @data.bind 'user.first_name', (value) ->
      # do something with updated value

    @data.set('user.first_name', 'Gabe')

    @emit('someEventToAllOtherComponents', 42)

    @on 'someEventFromAnotherComponent', (event, something) ->
      # do something with something

    @children # all components which are lower in hierarchy

    # returns an array of all child BrewhouseComponent

    # returns an array of all child components where data-cool-dude is 'Chuck'
    @children.where(coolDude: 'Chuck')

    # returns the first found child component where data-can-code is 'Chan'
    # and then bind to changes in puns
    @children.find(canCode: 'Chan').data.bind 'puns', (pun) ->
      # do something with pun