Animations, Transitions & Experiential Sites

Hey there! I’m really enjoying Hyperapp so far. I’m trying to use it for building a rich/experiential/animated site (imagine lots of animations/transitions, WebGL/Canvas, etc) and it seems to have a couple of unique issues.

1. When using onremove with a delayed callback (e.g. fade out), if the user quickly adds/removes the component from the tree they will end up with multiple of the same component. I am hoping for something closer to “React Transition Group” so that my view looks like this. But in this case I don’t want multiple error messages to stack up.

<div>
  <TextField />
  <TransitionGroup>
    {state.isError ? <AnimatedErrorMessage /> : undefined}
  </TransitionGroup>
</div>

1. Right now, using onremove sometimes leads to an error:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Full code to reproduce. Try clicking +/- really quickly.

import { h, app } from 'hyperapp';

const noop = () => {};

const state = {
  count: 0
};

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
};

const fadeIn = (el) => {
  console.log('fade in', el);
};

const fadeOut = (el, done = noop) => {
  console.log('fade out', el);
  setTimeout(() => done(), 1000);
};

const animations = {
  oncreate: fadeIn,
  onremove: fadeOut
};

const Message = (state, children) => {
  return <div {...state} {...animations}>Above one!</div>;
};

const view = (state, actions) => {
  return <main>
    <h1>{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
    {state.count >= 1 && <Message key='message' />}
  </main>;
};

app(state, actions, view, document.body);

1. This is more a question… I often end up needing local state in a component. I have seen a few issues mentioning this but they all point to different things: components, modules, mixins, embed utility functions that call app(), etc. I’m wondering what the official/suggested solution is for this?

For example: storing Canvas2D context for a component, or storing the millisecond time that the component was first created (but not replacing it on subsequent renders). I do not want to move all of this information into my global app state/actions.

[mattdesl]

Here is a test case, it’s a bit wonky since I had to use setTimeout. You’ll see how it throws an error right now, but then if you replace removeElement with a safety check, the error will be gone but the test will fail as the elements won’t be removed.

test('removes all tags', done => {
  const state = {
    count: 0
  }
  
  const actions = {
    finish: () => () => {
      expect(document.body.innerHTML).toBe(
        `<div></div>`
      )
      return done()
    },
    up: () => state => ({ count: state.count + 1 }),
    down: () => state => ({ count: state.count - 1 })
  }

  const animations = {
    onremove: (el, done) => {
      setTimeout(done, 100)
    }
  }
  
  const view = (state, actions) => (
    h('div', {}, [
      state.count > 0 && h('span', {
        onremove: animations.onremove,
        key: 'one'
      }, [ 'One' ]),
      state.count > 0 && h('span', {
        onremove: animations.onremove,
        key: 'two'
      }, [ 'Two' ])
    ].filter(Boolean))
  )

  const main = app(state, actions, view, document.body)
  main.up();
  setTimeout(() => {
    main.down()
    setTimeout(() => {
      main.up()
      setTimeout(() => {
        main.down()
        setTimeout(() => main.finish(), 120);
      })
    })
  })
})

[jorgebucaran]

#663 helps a bit, that’s all I said. A definitive fix requires #499.