Flask-Socket.IO-lit-html

Webcomponents with Flask and SocketIO

Quick Start on documentation

Todo App example

Proof of concept project to use Webcomponents in Python Flask

• Generate a restful API (inspired from Flask-Restful)
• Update html on data changes through socketio (Inspired from Angular properties reflection)
• Based on the powerful lit-element library
• Progressive Web App compatibility: Component data cached in sessionStorage

Usage philosophy

Create user webcomponent from sqlalchemy design. GET and POST API on /user.

class User(db.Model):
    username = db.Column(db.String(80), nullable=False)

blueprint = User.configure_blueprint("/user", "user-item", "User.html")
app.register_blueprint(blueprint)

Define the webcomponent view in a jinja template

{% block render %}
<strong>${ this.username }</strong>
{% endblock %}

Display the second user of your database with live update:

<script type="module" src="{{url_for('user-item.webcomponent')}}"></script>
<div> user 2: <user-item index=2 ></user-item></div>

This code represent the idea behind the module, look at app.py for a working example. Project may be modeled on wtforms-alchemy

Contribute : Pull requests are welcome !

Updating autodoc

cd docs && sphinx-apidoc -o source/ ../flask_socketio_lit_html

Build and test package

poetry build && pip3 install dist/flask_socketio_lit_html* --force-reinstall

Running browser tests

cd tests ; yarn ; yarn test

Webcomponent's shadow root are disabled when running testcafe (for selecting components)

Build lit-element with rollup.js

cd dependencies/ && yarn && yarn build ; cd ..

Any questions ?

External resources

Learn webcomponents and lit-element on dev.to