WSElement --------- A demo for a `WebSocket` based `WebComponent` custom `Element`. Motivation ---------- As I've embraced WebComponent increasingly I find myself writing less and less JavaScript. One place it doesn't seems to have decreased is around WebSockets, so why not try to pass some of this complexity off to an extensible WebComponent? In a prior project I had experimented with this and it look feasible, but my one off code didn't feel generic enough for general use. This code represents a cleaner more trimmed down version I feel accomplishes this goal better. Code and Usage -------------- This codebase provides a trimmed down base Element, `WSElement`, who's default behavior is simply to update it's own `innerText`. This could be simply used on it's own, embedded in other HTML or extended to provide more complex behavior with in a custom WebComponent. In addition two subclass Elements are provided to examples of extending the base class. `WSTime` provides a slightly more complex example, adding several child elements and perform a partial update. `WSTable` increases the complexity by parsing incoming `JSON` data and dynamically building a `Table`. It also demonstrates using attributes to control behavior. ### Demo Server To see this in action a demo server has been provided based on `Flask`. To run it.... ``` python -m venv . . bin/activate pip install -r requirements.txt flask run --debug #optional ``` (Lack of) Licensing ------------------- This isn't really meant to be a consumable module but more of a how-to, feel free to use as you wish under no formal license, with no guarantees. If/As I developer this further, this may change, please feel free to make suggestions, though again, with no guarantees. Future ------ I do hope to develop this further, specifically I'm mulling how this would look when also sending data over the socket, something I haven't needed as much yet. Donate ------ Thought this was helpful? Make a donation so I can kept pushing the hacks out. [![liberapay](https://fcpwv.oit.cloud/static/images/liberapay.svg)](https://liberapay.com/mra/donate)