mAAdhaTTah / brookjs

reactive programming tools for well-structured, testable applications
https://mAAdhaTTah.github.io/brookjs/
MIT License
15 stars 1 forks source link

[BREAKING] Change animation API #76

Closed mAAdhaTTah closed 6 years ago

mAAdhaTTah commented 7 years ago

I don't want to make additional breaking API changes at this point, but I'm not convinced the current animation API is effective. The problem is that the callback currently doesn't have any way of interacting with other renders, so you can't cancel a render based another render starting.

What I'd like to do is change the callback to take a stream of renders:

export default render(
    template,
    effects$$ => effects$$.map(effect$ => /* do things with it */)
);

The effect$ can hang meta off it, and now you're able to cancel your animations based on other effects:

export default render(template, effects$$ => effects$$.map(effect$ => {
    if (effect$.$meta.type === 'ATTACH') {
        return Kefir.concat([
            // Hide the element first.
            hideElement$(effect$.$meta.element),
            // Attach the element to the DOM.
            effect$,
            // Fade in the element over time.
            fadeInElement(effect$.$meta.element)
        ])
            // Cancel animation if incoming element is about to be detached
            .takeUntilBy(effect$$.filter(other$ =>
                other$.$meta.type === 'DETACH' &&
                    other$.$meta.element === effect$.$meta.element
            ));
    }

    return effect$;
});

This should be more flexible than the current implementation, which only gives you access to the current effect but doesn't allow coordination between effects.

The evolution of this framework has been to replace API's that pass individual values to pass streams of values, so this keeps in line with that evolution, but it would cause a breaking change, as the stream being passed is no longer the effect itself but a stream of effects.

I don't have any committed work taking advantage of the animation API, so if someone is, please let me know. Otherwise, we are going to go ahead with this change in 0.9.0.

mAAdhaTTah commented 7 years ago

I'm going to go ahead with implementing this, although meta -> $meta, following the convention Vue uses to indicate built-in methods/data prefixed with $.

mAAdhaTTah commented 7 years ago

I think we're going to have to yank the current animation implementation until we can do #78 and solve it with slit.

mAAdhaTTah commented 6 years ago

This is going out next release.