Create a WebComponent html generator

[caalador]

Generator should be able to create the WebComponent html that is served to the client by WebComponentElementProvider.

• needs to support on the fly generation and to file for bundling
• properties are generated from @WebComponentProperty annotated Fields and Methods
• attribute data on the element should be synced to the server.
• Element ID needs to be stored on the client side UI element so that Flow finds it

[caalador]

For this iteration of support for the sample JavaComponent:

@WebComponent("my-fancy-component")
public class MyFancyComponent extends
    HorizontalLayout {

    private Button button;

    private WCProperty<String> response=  new WCProperty<>("hello");
    private WCProperty<Integer> integeros =  new WCProperty<>(Integer.class);

    public MyFancyComponent() {
        button = new Button("Hello", e -> {
            Notification.show(response.get());
        });
        add(button, new Span("Some info text"), new PasswordField("PWD"));
    }

    @WebComponentMethod("message")
    public void setMessage(String message) {
        this.button.setText(message.toString());
    }

}

the generated html that is served should look something like:

<link rel="import" href="../frontend/bower_components/polymer/polymer-element.html">
<link rel="import" href="sswcui.html">

<dom-module id="my-fancy-component">
    <template>

        <style>
            :host {
                display: inline-block;
            }
        </style>
        <slot></slot>
    </template>
    <script>
        class MyFancyComponent extends Polymer.Element {
            static get is() {
                return 'my-fancy-component';
            }
            static get properties() {
                return {
                    "message": {
                        "type": "String",
                        "value": "",
                        "observer": "_sync_message",
                        "notify": true,
                        "reflectToAttribute": false
                    },
                    "response": {
                        "type": "String",
                        "value": "hello",
                        "observer": "_sync_response",
                        "notify": true,
                        "reflectToAttribute": false
                    },
                    "integeros": {
                        "type": "Integer",
                        "observer": "_sync_integeros",
                        "notify": true,
                        "reflectToAttribute": false
                    }
                }

            }
            _sync_message(newValue, oldValue) {
                this._sync('message', newValue);
            }
            _sync_response(newValue, oldValue) {
                this._sync('response', newValue);
            }
            _sync_integeros(newValue, oldValue) {
                this._sync('integeros', newValue);
            }


            _sync(property, newValue) {
                if (this.$server) {
                    this.$server.sync(property, newValue);
                }
            }
            connectedCallback() {
                super.connectedCallback();

                // Hack needed to make Flow do lookup correctly
                const id = "MyFancyComponent-" + MyFancyComponent.id++;


                // document.body.$ = document.body.$ || {};
                // document.body.$[id] = this;

                const poller = () => {
                    let flowRoot = document.body;
                    if (flowRoot && flowRoot.$server) {
                        flowRoot.$ = flowRoot.$ || {};
                        flowRoot.$[id] = this;
                        flowRoot.$server.mapSsWc('my-fancy-component', id);
                    } else {
                        setTimeout(poller, 10);
                    }
                };

                poller();

                console.log('connected', this);
            }
            disconnectedCallback() {
                console.log('disconnected', this);
            }
            serverConnected() {
                Object.keys(MyFancyComponent.properties).forEach(prop => {
                    this._sync(prop, this[prop]);
                });
            }
        }
        MyFancyComponent.id = 0;
        customElements.define(MyFancyComponent.is, MyFancyComponent);
    </script>
</dom-module>

[Legioth]

At what point would that HTML be generated? I just realized that the HTML needs to be transpiled for it to work with IE11 since it uses ES6 classes.

[caalador]

At before transpilation in the maven plugin.

[Legioth]

So it would be generated by the server in development mode and by the maven plugin in production mode?

[caalador]

Yes that was the idea.
The generator used should be the same for both.