max-mapper / yo-yo

A tiny library for building modular UI components using DOM diffing and ES6 tagged template literals

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Trying more modular version

nichoth opened this issue · comments

In the spirit of the code comments, I have factored out the event diffing functionality into nichoth/update-el, and created a more composable yo-yo at nichoth/yo-yo.

Now you can pass in any h(tag, attrs, content) function and any update function:

var h = require('bel').createElement
var update = require('update-el')
var yo = require('yo-yo/yo-yo')(h, update)
var el = yo('div', { onclick: function() { /*... */ } }, 'example')
yo.update(el, yo(/* ... */))

Also made the spec require-able by passing in createElement, update, and a tape instance.

Still trying things out, not sure how yo-yoify is affected.

yo-yo here is purely glue code. var yo = require('yo-yo') would serve as a convention/best practice.

Something like this plays well with morphdom-hooks, a proposed solution to #8 (comment)

I don't think I fully understand the problem this is trying to solve.

commented

Same, would love to hear more of the rationale. There is such a thing as too much modularity sometimes :D

@nichoth , were you thinking of this allowing one to use a library like morphdom-hooks more easily with yo-yo? When I commented above, that's what I was thinking of. After seeing #8 (comment), it seems this modularity wouldn't be necessary to get them playing well together.

What do you think?

It's not trying to solve a problem per se, because I don't know which problem I'm trying to solve yet :) I wanted to share this refactor in case anyone else finds it useful for experimenting with.

If you wanted to implement updating event listeners differently, there is a spec that is easy to use.

After using bel and yo-yo a bit more, I haven't found a need for alternative compositions yet. Although It's nice having the DOM update logic in yo (updating event listeners) as a standalone module, because there is nothing specific to bel or hyperscript in it.

I've recently had a need to pull the copying of events out of this, wanting to use morphdom, but not being able to enforce usage of bel because those parts are written by 3rd party developers, so i didn't want the extra dependency. I've pulled out just the copying of events into a separate repo copy-event-attributes.

I think it would be good to share that logic so things don't fall out of sync and I can submit a PR to yo-yo to include it, but it is pretty small, so if you don't want it that's cool.