Publish the @vaadin/form module to npm

[vlukashov]

As a developer I want to install the @vaadin/form package from npm with npm i @vaadin/form so that I can use it in my projects without having the full Vaadin Fusion project setup.

Related discussions:

• https://twitter.com/vberchet/status/1323651226228043778
• https://polymer.slack.com/archives/C03PF4L4L/p1602844343473100

Implementation notes: Publishing the Vaadin Fusion JS packages like @vaadin/form and @vaadin/connect to npm is complicated because we still want to keep the ability to create SNAPSHOT builds of Vaadin that use the locally-modified version of e.g. the @vaadin/form package (from this same repo, not from npm).

• npm publishing could as well happen as a side step of the Vaadin release pipeline, without changing how the dependency to @vaadin/form is included into a Fusion project (which is not via the npm registry). That would keep the SNAPSHOT builds working as before, but would lead to a situation where there would be different ways to install the @vaadin/form package, and that's a possible source of confusion and hard-to-debug issues.

[vicb]

Thanks @vlukashov !

because we still want to keep the ability to create SNAPSHOT

I do not exactly understand why the form package needs to be handled differently from other packages (i.e. the form web components) but may git subtrees could help here ?

One thing that would also be nice is to make sure that the package works server side so that node backend could validate the forms. The only limitation I have found so far is that some properties are patched on window. This is easily fixed by creating separate entry points for the browser or node in package.json - or by checking if windows is defined.

[vlukashov]

I do not exactly understand why the form package needs to be handled differently from other packages (i.e. the form web components) but may git subtrees could help here ?

The intent behind the current setup is to make it easier to develop both the form package and the TS generator at the same time, as they are quite related. Currently, both the @vaadin/form package and vaadin-maven-plugin are in the same repo (as they are quite closely related). As long as that's the case I would expect Vaadin SNAPSHOT builds to take both the form package and the TS generator from the same git commit in the repo, and not the form package from npm and the TS generator from git.

Arguably, we could break this coupling and separate the form package into a separate repo (like it's done with @vaadin/router). In that case it becomes more difficult to make coordinated changes to the form and the TS generator, but it also makes it easier to use the form package stand alone.

[vicb]

The intent behind the current setup is to make it easier to develop both the form package and the TS generator at the same time, as they are quite related.

Thanks for the explanation. It makes perfect sense.

git subtree or npm link would be 2 different ways to solve this issue but they are arguably a less simple than the current setup.

Thanks for looking into making the form package standalone.

[vicb]

@vlukashov Some feedback from using the form framework in a TS project (both frontend and backend):

• It is great !
• It would be nice that flow/form is actually split into 2 packages as Field.ts would not compile on the server side,
• The binder has a dependency on ValidationErrorData - it is not a hard dependency has any is used but it would be great to explicit that dependency.

I'll add more as I progress with my integration.

Edit (dec 1, 2020):

It would be really nice to allow validation of the data on the server side - when the backend is Javascript.

The current implementation has a few problems with that:

• the Binder imports from @vaadin/form/Field which does not compiler server side,
• the Binder constructor takes an Element as the first parameter which do not compile server side.