html events sent to all Program instances?

[btheado]

At https://btheado.github.io/tweve/ (see "Storing eve state in tiddlers"), I have two instances of the same Eve code and it looks like the html events from one instance are getting sent to both instances.

Here is some simple code which I think demonstrates the same behavior.

import {Program} from "witheve";
  
let code = `
~~~ 
commit
  [#ui/button text: "click me"] 
~~~     
~~~     
search
  event = [#html/event/click element]
  element = [#ui/button]
commit
  [#ui/div text: "click from event {{event}}"]
~~~
`;
let prog1 = new Program("prog1");
prog1.attach("ui");
prog1.load(code);
let prog2 = new Program("prog2");
prog2.attach("ui");
prog2.load(code);

Clicking either button from either program seems to send the click event to both programs.

[joshuafcole]

Hey @btheado,

This is a bit of an interesting case. Since both programs are being attached to the same document, they'll both receive all events from that document. In 0.2, this wouldn't have been a huge issue since each record creating node in the document received a unique ID, to ensure that records from separate places did not collapse. We decided that this was a pretty magical process, and opted to leave it out in the 0.3 preview to see if it really impacted users. Unfortunately, this is one of the cases where it'll catch you. Even though both programs are separate, the only identifying info for the buttons created by both are identical. Thus, matching for a click on one will match on either.

If there isn't an elegant workaround within Eve itself, we have a couple options here. The most obvious is to revert back to having unique node ids, like we did in 0.2. Alternatively, the DOM watcher can check each bubbled event target to ensure it was created by that particular DOM watcher instance, which will allow us to simulate per-program event stacks in a single document. We'll need to think about this a little more to figure out what the best approach is.

Is this currently blocking any work you have underway? If so, targeting different documents or merging the separate programs is the simplest solution. If you need to keep this setup, there are still a few workarounds available. I'd personally recommend inserting an EAV like ["program number one", "tag", "program"] with inputEAVs. Then you can rewrite colliding blocks like:

search
  program = [#program]
commit
  [#ui/button program text: "click me"] 

Which will add per-program uniqueness to the elements. Let me know if the workarounds aren't sufficient for you, we'll work something else out. In the meantime, let's keep this open to track fixing the underlying issue.

[btheado]

The way I've setup the eve widget at https://btheado.github.io/tweve, it makes it really easy to have multiple eve programs in the same document. I ran across it when I instantiated the same program in two different ways in order to illustrate both with persistence and without. Sometime, I'll play around with the work-arounds and see how they go.

[joshuafcole]

Just an update, it occurred to me that I was over-complicating the problem. We'll get a patch for this out sometime this week.