Add-on starter for a web component integration from NPM

This is an example project for creating a Java wrapper for an existing Lit component that is available in npm. The example code integrates @axa-ch/input-text.

Add-on architecture

Alternative add-on templates

If you wish to build and publish an add-on or extension in Vaadin Directory, Vaadin provides the following three template projects:

1. vaadin/addon-template: Create a composite component. This Java-only template is the easiest when extending Vaadin Java components.
2. vaadin/client-server-addon-template: Build a standalone, client-server TypeScript-Java component. This template provides you with a Lit-based example to start with.
3. (this repo) vaadin/npm-addon-template: Wrap a web component from npmjs.com as a Vaadin Java component.

Development instructions

JavaScript modules can either be published as an NPM package or be kept as local files in your project. The local JavaScript modules should be put in src/main/resources/META-INF/frontend so that they are automatically found and used in the using application.

If the modules are published then the package should be noted in the component using the @NpmPackage annotation in addition to using @JsModule annotation.

Starting the test/demo server:

1. Run mvn jetty:run.
2. Open http://localhost:8080 in the browser.

Publishing to Vaadin Directory

You can create the zip package needed for Vaadin Directory using

mvn versions:set -DnewVersion=1.0.0 # You cannot publish snapshot versions 
mvn install -Pdirectory

The package is created as target/axa-input-text-1.0.0.zip

For more information or to upload the package, visit https://vaadin.com/directory/my-components?uploadNewComponent