Ema JavaScript API

[srid]

Allow users to 'control' Ema's live server through WebSocket. Add a window.ema object containing the API endpoints.

• ema.switchRoute to switch to different routes in live server: js: Add ema.switchRoute #70
• ... anything else?

Use cases:

• In-browser editing of notes emanote#121
• "Linked" preview #59

[applejag]

Could be nice with sending hot-reload events, such as:

window.dispatchEvent(new Event('EMABeforeDOMMorph'));
// do DOM morph
window.dispatchEvent(new Event('EMABeforeScriptReload'));
// do script reload
window.dispatchEvent(new Event('EMAHotReload'));

[applejag]

Would be useful to exclude some scripts from being force-reloaded, such as:

<script data-ema-reload="never">

With values for the data-ema-reload attribute being:

• auto (default) uses always on <script> and diff on anything else
• always reloads script on every hot-reload
• diff only reload script if the script tag changed by morphdom
• never skip reloading this script on hot-reloads, including skipping morphdom

The diff and never could maybe be supported on any arbitrary HTML tag as well to make morphdom ignore certain node trees, such as stopping morphdom from removing JS-created elements.

[srid]

@jilleJr Wouldn't it make more sense to upstream data-ema-reload (as data-morphdom-config for instance) to https://github.com/patrick-steele-idem/morphdom rather than implement it in Ema?

[applejag]

@jilleJr Wouldn't it make more sense to upstream data-ema-reload (as data-morphdom-config for instance) to https://github.com/patrick-steele-idem/morphdom rather than implement it in Ema?

Yes, well kind of. The script reloading is done by Ema, and it'd be great if that was configurable as well on a per-script-node basis.

[lua-vr]

I'm facing ema shim-related difficulties again. Some functions in JS must be called only once after the page is fully loaded, and sadly it's hard to do this currently. The DOMContentLoaded does not get called after route switches, and the EmaHotReload gets called many times. Another problem is properly sanitizing the environment after leaving the page, because event listeners that were added to the window will remain there.¹

Honestly, I don't know how to work around this issue, and I feel it would be much simpler if ema did not try to replicate all the route switching work and instead leave it to the browser, which does that very well. Instead, it would only live reload inside the same route.

But as you pointed out in the other issue, people may prefer the current behavior, so the shim could be customizable. Would you accept a PR adding the possibility for using a different ema shim (from the haskell side)?

Footnotes

1. (more detailed explanation, irrelevant to my suggestion)
   Let's say I have script X that I only want to get loaded on specific pages (katex, mathjax or reveal.js for instance).
   In general, I can make things work in a single page with live-reload, that is, when the user is not changing between pages but may be editing the current page. In this scenario, there is one event (DOMContentLoaded) that gets called only once, setting up things like listeners to the EMABeforeMorphDOMand EMAHotReload events.
   But if the user comes from a different page, this DOMContentLoaded event is not fired by ema, so things are not properly loaded.
   And when leaving to another page, the event listeners from the previous pages are still there, and are not removed. ↩

[srid]

Sorry, I let this comment slip by.

@lucasvreis Would you accept a PR adding the possibility for using a different ema shim (from the haskell side)?

Can you elaborate on this? I'm generally happy to see shim improvements.