https://dojotoolkit.org provides some UI components (not web components) and helpers and uses RequireJS to load its modules. We should make sure that integrating these kind of solutions is trivial

The script is currently published through rpc and eval:ed, which means there is no easy way to find the script or set breakpoints

Example directory structure:
bower_components
----\iron-icons\
---------\iron-icons.html
---------\social-icons.html

@bower({"iron-icons"}) loads iron-icons.html fine, but any of the following don't work:

@bower({"social-icons"})
@bower({"iron-icons\social-icons"})
@bower({"iron-icons\social-icons.html"})

You can use
@html("/VAADIN/bower_components/iron-icons/social-icons.html")
to get around the problem so it's not a big issue.

Similarly to beforeClientResponse

Grid needs to know whether to send all data or only pending updates

Currently loops through the whole template. Should store ids while parsing the template to be able to provide them instantly.

Java 8 has a new Date and Time API which should be used in all components instead of the old Date/Calendar

Currently it is only possible to render text. not even HTML

If a com.vaadin.ui.Template.Model subtype maps directly a datasource's com.vaadin.data.Item, there should be a simple built-in way of mapping one to the other. This would reduce the amount of needed boilerplate code.

Would be handy, Polymer does not support. Angular 2 does, I think

There are many cases where client side events are fired very often but you only want to send some of the events to the server, either with a delay or every Nth event or similar. The <trix-editor> demo is one example, where the editor itself sends change events for every keypress and you would want to delay them a bit before sending them to the server. The required feature is the same as TextField needs to implemented TextChangeListener

Currently, methods with the @TemplateEventHandler annotation will not return any value to the UI. Returning values should be possible asynchronically, using for example the following syntax:

Java:

@TemplateEventHandler
String getValue() {
  return "value";
}

Template html:

<button (click)="var promise = server.getValue(); promise.success(function(data) { console.log("ok response: " +data); } ).error(function(data, status) { console.log("error happened: " + status) }).finally(function(){ console.log("this always prints to the log")});"></button>

There could also be a different annotation for methods that return a promise.

Currently BoundElementTemplate.insertChild() just throws an empty IllegalStateException() if the element has child elements; it could say something like "Can't add content to a non-empty element".

We should move away from Elemental JSON because

• It's GWT and we don't want to profile ourselves as GWT dependent
• The API is primarily made for client side usage which sometimes shine through
• The server side classes are not serializable

Select/Tree/ComboBox should not be containers, many methods should be removed etc

To create grid like structures, it would be useful to be able to use e.g.

int[][] data

in the model and something like

<span *ng-for="#rowdata of data" class="row"> 
    <span *ng-for="#cell of rowdata" class="cell"> 
        // render something for the cell
    </span>
</span>

in the template

ClientEngineLinker / ClientEngine.gwt.xml is disabled because SelectionScriptLinker uses com/google/gwt/core/ext/linker/impl/computeScriptBaseOld.js, which in turn does document.write. This is not compatible with loading the script using defer

Fix hummingbird-client/pom.xml when resolved

When using a template html file with more than one root element, everything after the first is ignored. There should be a warning or an exception thrown if such a template is used (excluding comment blocks maybe).

<button #myId>
is automatically converted into
<button #myid>
and component binding must be done using "myid" and not "myId". This is because JSoup "normalizes" all attributes into lower case: jhy/jsoup#272

There should be a way to call a javascript function when a template has finished loading the imported HTML content (from @bower or @html annotations). HTMLImports.whenReady() executes too early.

Recently I seem to be getting this Jetty error in stdout (regardless of which demo project I run):
lokakuuta 20, 2015 11:36:29 AP. com.vaadin.server.DefaultErrorHandler doDefault
SEVERE:
org.eclipse.jetty.io.EofException

Everything seems to be working ok regardless.

Full stack trace in attachment
jetty-error.txt

Based on https://github.com/vaadin/gwt-api-generator it should be possible to create a server side API generator for paper elements. Maybe also more broadly for any Polymer element. The generator would not have to be 100% perfect but provide a good starting point.

If there's a non-empty < script> tag in a template, TemplateParser will fail. The createTemplate method throws a RuntimeException; node type for scripts is org.jsoup.nodes.DataNode.

To help debugging, we should log an error if a template uses a binding to foo.bar but foo is not defined.

We can't do the same for bindings to just foo, since that's a valid case evaluating to false in a boolean context (e.g. <div [class.something]="foo">).

RequireJS is ugly with the define wrapper, though it enables loading the script using a script tag instead of bundling it into a UIDL response

CommonJS is not suitable for lazy loading, but has a chance of working if we inject from the response

ES6 modules probably optimal, but requires transpiling

The framework right now tries to guess whether an "attribute" (as it's called on the server) can be applied as an attribute or a property. Some names are hard coded and may or may not be correct.

There should be explicit support for

• setAttributeOrProperty (default, can be used as attribute in pre-rendering and property later on)
• setAttribute (always set/read as an attribute)
• setProperty (always set/read as a property, not included in pre-rendering)

Sending can be done e.g. as

• setAttribute("foo","bar") sent as
  • put "-foo","bar" (no property name can start with -)
• setProperty("foo","bar") can be sent as
  • put " foo","bar" (no attribute name can start with +)
• setPropertyOrAttribute("foo","bar") can be sent as
  • put "foo","bar" (like today)

When a server.foo() function is called in JS and a @TemplateEventHandler foo() method doesn't exist in the Template class, no error is recorded on server. Only "server.foo is not a function" in UI.

If a put("foo","bar") and remove("foo") during the same transaction, there is no way for the optimizer to know whether it can delete the remove("foo") change or not, as it does not know what the value of the property was before the put, or even if the property existed.

The following TransactionLogBuilderTest test should pass when this is implemented

    @Test
    public void addRemoveAddList() {
        List<Object> l = node.getMultiValued(LIST_KEY);
        l.add("bar");
        l.remove("bar");
        node.remove(LIST_KEY);
        l = node.getMultiValued(LIST_KEY);
        l.add("foo");
        commit();
        assertOptimizedChanges(new ListInsertChange(0,LIST_KEY,"foo"));
    }

Reconnect dialog is a communication related feature which can demonstrate what you get for free with Hummingbird and not with a client side framework such as Angular. Currently the text displayed on top of the app in one corner is not very convincing

You cannot use <vaadin-grid> or <vaadin-xyz-chart> together with a light DOM in a template. Both components will read and take into account the light DOM only when the element is upgraded, i.e. immediately when doing document.createElement("vaadin-grid"); (provided the HTML has been imported). As long as Template does createElement and then creates inner elements for it, the light DOM will be ignored. The only way I can think of to make this work would be to set the whole template contents as inner HTML to the root and then configure possibly remaining parts through JS

Currently it's not possible for a Template subclass to have a (private) member Component that does not have a corresponding element in the DOM during bindComponents. Having one causes the exception IllegalStateException("No component found to bind to field " + memberField.getName());. Sometimes it would be useful to have, for example, a member subtemplate that is initialized later after something happens in the UI. Automatic initialization is still a handy feature to have, but maybe it could only happen for non-private members or members with an @id annotation.

If there is a Date object in a Model, JsonConverter.toJson() will fail because it can't encode an object of that type.

As a workaround for the missing array support, it would be useful to be able to use nested Lists in the model:

public List<List<Boolean>> getData();
public void setData(List<List<Boolean>> data);

RPC handling fails if an array parameter is passed to enqueueRpc.

@PreserveOnRefresh was removed. Portlet support is likely 100% broken because of this

The element should be configured before it is attached to the DOM and always configured using attributes. The component only reads the attributes once when it is displayed. Requires #5

Something like

 if ('registerElement' in document
    && 'createShadowRoot' in HTMLElement.prototype
    && 'import' in document.createElement('link')
    && 'content' in document.createElement('template')) {

can be used to check whether the browser implements all needed standards. Snippet from https://customelements.io/geelen/x-gif/

The framework has no good way of notifying the user if the server-side implementation of a component is not compatible with the client-side version that the user has defined (or got transiently) through bower.

http://www.ag-grid.com/best-web-component-grid/index.php

Event listeners don't work in Grid. For example, with
grid..addItemClickListener( event -> { System.out.println("Clicked");});
should print "Clicked" to the console when an item is clicked.

This message appears in standard out frequently:
com.vaadin.server.BootstrapHandler getClientEngineUrl
SEVERE: No compile.properties file found for ClientEngine

Public API should use Component and/or Element, not ever AbstractComponent

Checkbox is currently broken because the main element has been changed to a but the value change listener tries to include "element.checked" in the event. It really wants to include the input elements "checked" state, no matter if you click on the label or the input

Adding 10 buttons with click listeners on a page will send the following kind of update to the client side, for each button separately

{
                   "id": 6,
                   "type": "listInsert",
                   "key": "click",
                   "index": 0,
                   "value": "event.button"
               },
               {
                   "id": 6,
                   "type": "listInsert",
                   "key": "click",
                   "index": 1,
                   "value": "event.clientX"
               },
               {
                   "id": 6,
                   "type": "listInsert",
                   "key": "click",
                   "index": 2,
                   "value": "event.clientY"
               },
               {
                   "id": 6,
                   "type": "listInsert",
                   "key": "click",
                   "index": 3,
                   "value": "event.type"
               },
               {
                   "id": 6,
                   "type": "listInsert",
                   "key": "click",
                   "index": 4,
                   "value": "event.altKey"
               },
               {
                   "id": 6,
                   "type": "listInsert",
                   "key": "click",
                   "index": 5,
                   "value": "event.metaKey"
               },
               {
                   "id": 6,
                   "type": "listInsert",
                   "key": "click",
                   "index": 6,
                   "value": "event.ctrlKey"
               },
               {
                   "id": 6,
                   "type": "listInsert",
                   "key": "click",
                   "index": 7,
                   "value": "event.shiftKey"
               },
               {
                   "id": 6,
                   "type": "listInsert",
                   "key": "click",
                   "index": 8,
                   "value": "event.relativeX"
               },
               {
                   "id": 6,
                   "type": "listInsert",
                   "key": "click",
                   "index": 9,
                   "value": "event.relativeY"
               },

We could evaluate the module script on the server the first time it is accessed and see what it exports to the module variable. This requires that the script doesn't do any static initialization that isn't compatible with Nashorn. The exported methods would still not be run on the server, so they could still contain anything as longs as it's syntactically correct.

It should be possible to have a template with

<vaadin-grid id="myGrid" />

and in the Java file for the template do

private Grid myGrid;
...
myGrid.setContainerDataSource(...);

Binding should be done based on id matching with fieldName or with an @Id("myGrid") annotation if present.

Rows are pushed to the client only when the data source is set. If you do

g = new Grid();
g.addColumn("foo");
g.addRow("bar");

you get an empty grid. The client side does even try to fetch any rows either.

https://mediamath.github.io/strand/article_grid_config.html

The script is currently published through rpc and eval:ed, which means the browser has no way to cache the JS used e.g. to implement Grid

HTML imports by design blocks rendering (paint) of the page. For apps which can be fully pre-rendered, e.g. TodoMVC, this delays showing of the UI to the user until all HTML imports have completed (not scripts inside HTML imports, these are considered deferred). Today this is a problem only in Chrome which has native support for HTML imports. Other browsers need the webcomponentsjs polyfill before starting imports, and the polyfill is loaded deferred so there is no way that HTML imports can block rendering