Event handlers starting with on that you set via attributes will get updated.

`js
function a () { console.log('a') }
function b () { console.log('b') }

var el = yohi
el.click() // logs 'a' to console

var newEl = yohi
yo.update(el, newEl)
el.click() // logs 'b' to console
`

This works because we explicitly copy common event attributes. When yo.update is called above, el is still the same JavaScript Object instance before and after. The only difference is that yo.update will copy any new attributes from newEl onto el. However, if you add custom properties or events to newEl before calling yo.update, for example newEl.addEventListener('foo', handleFoo), they will not be copied onto el.

Modules that work well with yo-yo

The functionality built in to yo-yo covers the same problems as React and JSX, (DOM diffing and templating), using these dependencies of yo-yo:

- bel - creates DOM elements from template strings
- morphdom - efficiently morphs DOM elements (without a virtual DOM)

However you might consider these alternatives to the above built-in choices based on your use case:

- hyperscript - alternative to template literals
- diffhtml - alternative to morphdom

There are also UI problems that yo-yo does not currently address, such as events. But it's easy to use other modules alongside yo-yo to create your own framework. We might even add some of these to yo-yo in the future:

$3

If you are targeting browsers that may not support template literals and would
like to get a performance boost by transforming your yo-yo elements into raw
document calls:

- yo-yoify

$3

- dom-css - inline CSS helper
- csjs - namespaced CSS helper
- csjs-extractify - csjs browserify transform to compile css bundles
- csjs-injectify - csjs browserify transform that uses insert-css
- sheetify - browserify modular css transform
- plain css files - you don't always have to use a fancy CSS module :)

$3

In yo-yo state management is left completely up to you. The simplest approach is the "yo-yo" pattern: simply call a callback up until it reaches a parent where you want to handle updates, then yo.update() the changes down from there, which keeps the elements isolated. But since you are just working with DOM elements, you can do yo.update(document.querySelector('.some-other-element'), newelement) as well.

There are also some other approaches that introduce their own patterns for managing state:

- store-emitter - redux-inspired state management library
- minidux - mini version of redux
- good-old-fashioned-redux-example - a redux example implemented in un-fancy JS

Overview of default dependencies

$3

bel is a module that takes the output from a tagged template string and creates or updates (using DOM diffing) a DOM element tree.

$3

Tagged template literals are a way to use template literals (AKA template strings) with functions that take the output of the template string and format them in a certain way.

Regular template literals lets you take code like this:

`js
var multiline = 'hello\n' +
'this\n' +
'is\n' +
'multiline'
`

And write the same thing like this instead:

`js
var multiline = hello
this
is
multiline
`

Tagged template literals is where you put a function name in front of the template tags, similar to calling a function with () but using the backticks `` instead of parens.

`js
function doesNothing () {}

doesNothingim a string
`

The above example causes the doesNothing function to get invoked (AKA called), similar to if you did doesNothing('im a string').

The difference is that tagged template strings return a specific output value.

`js
function logArguments (a, b, c, d) {
console.log(a, b, c, d)
}

logArgumentsim a string
`

Running the above produces ["im a string", raw: "im a string"] undefined undefined undefined.

If you were to just run console.log(im a string) it would produce "im a string".

However, tagged template strings return the above tagged template array output format.

The first item in the array is an array of all of the strings in your template string. In our case there is only one:

`js
["im a string", raw: "im a string"]
`

The raw is a property that also contains an array, but where the values are the 'raw' values as there were entered.

If you had this template for example:

`js
logArguments\u9999
`

It would produce this as the first argument to logArguments: ["香", raw: ["\u9999"]]

In template literals, tagged or not, you can interpolate values by embedding javascript expressions inside of ${}

`js
var name = 'bob'
console.log(hello ${name}!)
`

The above produces "hello bob!". However, when called like this:

`js
function logArguments (a, b, c, d) {
console.log(a, b, c, d)
}

var name = 'bob'
logArgumentshello ${name}!
`

It produces the tagged template array ["hello ", "!", raw: ["hello ", "!"]] "bob" undefined undefined

As you can see the first argument is an array of all of the strings, and the rest of the arguments are all of the interpolated values one at a time.

Using this array you can implement your own custom way to render the strings and values. For example to simply print a string you print the strings and values in 'zipped' order):

`js
function printString(strings, valueA, valueB, valueC) {
console.log(strings[0] + valueA + strings[1] + valueB + strings[2] + valueC)
}
`

You could also imagine writing the above function in a more general way using loops etc. Or do something entirely different:

$3

yo-yo uses a module called bel which in turn uses hyperx to turn tagged template arrays into DOM builder data.

For example:

`js
var hyperx = require('hyperx')

var convertTaggedTemplateOutputToDomBuilder = hyperx(function (tagName, attrs, children) {
console.log(tagName, attrs, children)
})

convertTaggedTemplateOutputToDomBuilder

hello world

Running this produces h1 {} [ 'hello world' ], which aren't yet DOM elements but have all the data you need to build your own DOM elements however you like. These three arguments, tagName, attrs, children are a sort of pseudo-standard used by various DOM building libraries such as virtual-dom, hyperscript and react, and now hyperx and bel.

You can also use DOM elements not created using hyperx and bel:

`js
var yo = require('yo-yo')
var vanillaElement = document.createElement('h3')
vanillaElement.textContent = 'Hello'

var app = yo

Running the above sets app to an element with this HTML:

`


yo-yo lets you do two basic things: create an element and update it. When you create an element it simply creates a new DOM element tree using hyperx and its own custom code that uses document.createElement.

However, when you update an element using yo.update() it actually uses a module called morphdom to transform the existing DOM tree to match the new DOM tree while minimizing the number of changes to the existing DOM tree. This is a really similar approach to what react and virtual-dom do, except morphdom` does not use a virtual DOM, it simply uses the actual DOM.

Benchmarks

You can find benchmarks at https://github.com/shama/yo-yo-perf