Messages sent on execution time from external code are not (always) received by the DOM (v0.4.1 and v0.4.3)

[lmeurs]

The Communication example works great, but as it seems only when the Bonsaijs code is sent as a code option when calling bonsai.run() and not when the code is in an external file, ie.:

var movie = bonsai.run(
  document.getElementById('movie'),
  {
    url: 'path/to/external/file.js'
  }
);
// emitted before code gets executed
movie.on('load', function() {
  // receive event from the runner context
  movie.on('message:ready', function() {
    // send a categorized message to the runner context
    movie.sendMessage('externalData', {
      nodeData: document.getElementById('movie').innerHTML
    });
    // send just a message to the runner context
    movie.sendMessage({
      bonsai: 'tree'
    });
  });
});

External file:

// receive data from the other side
var text = new Text().addTo(stage);
stage.on('message:externalData', function(data) {
  text.attr('text', data.nodeData);
});
stage.on('message', function(data) {
  if (data.bonsai === 'tree') {
    text.attr('textFillColor', 'red');
  }
});
stage.sendMessage('ready', {});

NB1: I could not get this to work on jsfiddle, since the external file from our server did not get loaded, probably due to cross domain issues. NB2: The movie.on('load', function() { ... }); event did get triggered.

When I call bonsai.run() on an external file (with or without the binding of load and message events):

var movie = bonsai.run(
  document.getElementById('movie'),
  {
    url: 'path/to/external/file.js'
  }
);

And the external file only contains:

var result = stage.sendMessage('ready', {});
console.log(result);

The output in the Chrome console is _Error logging argument: (Error: DataCloneError: DOM Exception 25)_, Firefox outputs something similar.

Is this a bug or am I missing something?

[lmeurs]

Ok, the problem got more clear. Sending messages from an external file is possible the way one expects, but not (always) at execution time. Perhaps a loading issue?

The Communication example code sends a ready message at the final line. When the example code remains in an external file, this message is not (always) received by the DOM, only when you delay the execution of the example code by ie. setTimeout(func, 10);.

NB: This always worked on my local setup in Chrome and 50% of the times in Firefox.

[iamdustan]

@lmeurs just to provide a little bit more color, I had a similar issue where the different bonsai events I expected to receive when I could start drawing and sending messages back wasn’t accurate when using plugins.

I have the following in my main bonsai code, and on the document side I wait for this message to be received before sending any messages across.

// emit ready event
  stage.once('tick', function () {
    stage.sendMessage('ready', {});
  });