express-app.html

<script>
    class ExpressApp extends HTMLElement {
        constructor() {
            super();

            this._port = null;
            this.path = null;
            this.hostname = null;
            this.backlog = null;
        }

        static get observedAttributes() {
            return [
                'port',
                'path',
                'hostname',
                'backlog'
            ];
        }

        attributeChangedCallback(name, oldValue, newValue) {
            switch (name) {
                case 'port': {
                    this.port = newValue;
                    break;
                }
                case 'path': {
                    this.path = newValue;
                    break;
                }
                case 'hostname': {
                    this.hostname = newValue;
                    break;
                }
                case 'backlog': {
                    this.backlog = newValue;
                    break;
                }
            }
        }

        set port(val) {
            this._port = val;
            this.listen();
        }

        get port() {
            return this._port;
        }

        connectedCallback() {
            this.prepareApp();
        }

        prepareApp() {
            if (!this.express && !this.app) {
                this.express = require('express');
                this.app = this.express();
            }
        }

        listen() {
            this.prepareApp();
            setTimeout(() => { //TODO this probably is not necessary. This timeout was thought to allow all properties to be set in the host element
                const defaultCallback = () => {
                    console.log(`express app listening on port: ${this._port}`);
                };
                const theCallback = this._callback || defaultCallback;

                this.app.listen(this._port, this.hostname, this.backlog, theCallback);

                this.initChildren();
            });
        }

        //TODO I am not sure why this method is here...if it has no useful purpose then remove it
        expressReadyCallback(app, express, router, route) {
            if (this.path) {
                app.use(this.path, this.app);
            }
            else {
                app.use(this.app);
            }

            this.initChildren();
        }

        initChildren() {
            const _expressInitChildren = (element, app, express, router, route) => {
                const children = Array.from(element.shadowRoot ? element.shadowRoot.children : element.children);
                children.forEach((child) => {
                    if (child.expressReadyCallback) {
                        child.expressReadyCallback(app, express, router, route);
                    }

                    child._expressInitChildren = _expressInitChildren;
                    child._expressInitChildren(child, app, express, router ? router : child.router, route ? route : child.route);
                });
            };
            _expressInitChildren(this, this.app, this.express, null, null);
        }
    }

    window.customElements.define('express-app', ExpressApp);
</script>