Package com.vaadin.flow.component.dependency

Annotation Interface JsModule

@Retention(RUNTIME) @Target(TYPE) @Documented @Repeatable(Container.class) @Inherited public @interface JsModule
Annotation for defining JavaScript Module dependencies on a Component class. For adding multiple JavaScript Module files for a single component, you can use this annotation multiple times.

The JavaScript module files should be located:

  • inside frontend directory in your root project folder in case of WAR project
  • inside META-INF/resources/frontend directory (inside a project resources folder) in case of JAR project (if you are using Maven this is src/main/resources/META-INF/resources/frontend directory).

It is guaranteed that dependencies will be loaded only once. The files loaded will be in the same order as the annotations were on the class. However, loading order is only guaranteed on a class level; Annotations from different classes may appear in different order, grouped by the annotated class. Also, files identified by @JsModule will be loaded before JavaScript and CssImport.

NOTE: Currently all frontend resources are bundled together into one big bundle. This means, that JavaScript files loaded by one class will be present on a view constructed by another class. For example, if there are two classes RootRoute annotated with @Route(""), and another class RouteA annotated with @Route("route-a") and @JsModule("./src/jsmodule.js"), the jsmodule.js will be run on the root route as well.

Since:
2.0
Author:
Vaadin Ltd
See Also:

  • Nested Class Summary

    Nested Classes
    Modifier and Type
    Class
    Description
    static @interface 
    JsModule.Container
    Internal annotation to enable use of multiple JsModule annotations.

  • Required Element Summary

    Required Elements
    Modifier and Type
    Required Element
    Description
    String
    value
    JavaScript module to load before using the annotated Component in the browser.

  • Optional Element Summary

    Optional Elements
    Modifier and Type
    Optional Element
    Description
    boolean
    developmentOnly
    Defines if the JavaScript should be loaded only when running in development mode (for development tooling etc.) or if it should always be loaded.

  • Element Details

    • value

      String value
      JavaScript module to load before using the annotated Component in the browser.

      NOTE: In the case of using JsModule with LitTemplate, the value needs to point to a real file as it will be copied to the templates folder under target folder. An exported alias from the package will not work.

      Returns:
      a JavaScript module identifier

    • developmentOnly

      boolean developmentOnly
      Defines if the JavaScript should be loaded only when running in development mode (for development tooling etc.) or if it should always be loaded.

      By default, scripts are always loaded.

      Default:
      false