4 ms·

Let's say I streamed the first chunk with a little JavaScript, would that JavaScript be able to listen to future chunks coming in? In a real application it is c

by msoad 3y ago

Let's say I streamed the first chunk with a little JavaScript, would that JavaScript be able to listen to future chunks coming in? In a real application it is crucial to be able to update your frontend state once new data is ready. First thought is [mutation observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObs...) but that seems too deep into the weeds

AirMax98 3y ago
I'd assume that the only reason one would need to know if chunks were incoming is to indicate a loading state in disparate parts of your webpage, e.g. chunk B has some widget that indicates chunk A is loading. In this case, you can probably work off the assumption that loading is the default initialization state, and use JS to communicate to the disparate parts of your page once on chunk A load. There may be something different that you're thinking about here though.
eyelidlessness 3y ago
Another approach would be to correlate observation with specific custom elements. You can define them in the first chunk, then use their connectedCallback method to observe them as they arrive. The benefit of an approach like this is that the custom element lifecycle APIs are synchronous (which is also the drawback of the approach, and where MutationObserver is more appropriate if that synchrony is a concern).
andipodean 3y ago
Perhaps the most horrible JavaScript I ever wrote did something like this, and has been very useful for over a decade and still going strong. It's a log file that starts with a header: just a script tag with some JS, followed by a special string (I used a special HTML comment as a boundary indicator). The server then appends its logging to this file in a web hosted directory. The JS periodically does an XHR of it's own location.href, polling itself. It then splits on the special boundary string, thus collecting the latest log data, parses it to generate pretty/coloured/linked HTML, and updates the current page according (and controls scrolling if required). This gives you a log file that's continuously being appended to, but can be visited in the browser using any static file serving and automatically updates as it's populated.
its-summertime 3y ago
Mutation observer is pretty easy once you get used to it, just look for data you care about and ignore the rest. Alternatively, I think slotting raises an event, so you could use js to remove the pre-existing content when new content gets added

by msoad 3y ago

AirMax98 3y ago

I'd assume that the only reason one would need to know if chunks were incoming is to indicate a loading state in disparate parts of your webpage, e.g. chunk B has some widget that indicates chunk A is loading. In this case, you can probably work off the assumption that loading is the default initialization state, and use JS to communicate to the disparate parts of your page once on chunk A load. There may be something different that you're thinking about here though.

eyelidlessness 3y ago

Another approach would be to correlate observation with specific custom elements. You can define them in the first chunk, then use their connectedCallback method to observe them as they arrive. The benefit of an approach like this is that the custom element lifecycle APIs are synchronous (which is also the drawback of the approach, and where MutationObserver is more appropriate if that synchrony is a concern).

andipodean 3y ago

Perhaps the most horrible JavaScript I ever wrote did something like this, and has been very useful for over a decade and still going strong. It's a log file that starts with a header: just a script tag with some JS, followed by a special string (I used a special HTML comment as a boundary indicator). The server then appends its logging to this file in a web hosted directory. The JS periodically does an XHR of it's own location.href, polling itself. It then splits on the special boundary string, thus collecting the latest log data, parses it to generate pretty/coloured/linked HTML, and updates the current page according (and controls scrolling if required). This gives you a log file that's continuously being appended to, but can be visited in the browser using any static file serving and automatically updates as it's populated.

its-summertime 3y ago

Mutation observer is pretty easy once you get used to it, just look for data you care about and ignore the rest. Alternatively, I think slotting raises an event, so you could use js to remove the pre-existing content when new content gets added