Setting data between two components, from a transition, breaks completion

[giovannipiller]

Description:

Follow-up to #3260. Extremely edge case, but might be worth checking.

Transitions in component A that set data in component B, never completes. Note:

• component A is rendered manually via .render()
• component B uses the standard new Ractive({ el: ... })

This gave me an headache to write, so here's an example.

Versions affected:

0.10.10-build-3

Platforms affected:

All

Reproduction:

JSFiddle – read the comments at line 6 and 16 JSFiddle after applying change documented at line 16

const MyComponent = Ractive.extend({
  template: '<h1 myTransition-in-out></h1>',

  transitions: {
    myTransition(t) {
      // REMOVE THIS or the `onrender`, and suddenly the render completes properly
      window.r.push('eventsLogs', `started transition ${t.isIntro ? 'in' : 'out'}`);

      setTimeout(() => {
        t.complete();
      }, 500);
    }
  },

  onrender() {
    // REMOVE THIS or the first `window.r.push` in the transition, and suddenly the render completes properly
    window.r.push('eventsLogs', 'render')
  },
});

const r = window.r = new Ractive({
  el: '#main',
  template: `
    <h1>Render is never technically completed</h1>

    <ol>
        {{#each eventsLogs}}
        <li>{{.}}</li>
      {{/each}}
    </ol>

    <div id="component-wrapper"></div>
  `,

  components: {
    MyComponent,
  },

  data: {
    showComponent: false,

    eventsLogs: [],
  },

  oncomplete() {
    const componentInstance = new MyComponent()

    componentInstance.render('#component-wrapper').then(() => {
      // never gets executed
      window.r.push('eventsLogs', 'completed render!!');
    })
  }
});