com.vaadin.flow.component.dependency

Annotation Type JavaScript

@Retention(value=RUNTIME)
 @Target(value=TYPE)
 @Inherited
 @Documented
 @Repeatable(value=JavaScript.Container.class)
public @interface JavaScript

Defines JavaScript dependencies on a Component class. For adding multiple JavaScript files for a single component, you can use this annotation multiple times.

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 @JavaScript will be loaded after JsModule and before 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 @JavaScript("./src/javascript.js"), the javascript.js will be run on the root route as well.

External JavaScript dependencies (e.g. "http://example.com/some.js") are added in the same way as Page.addJavaScript(String) and the result is just adding a classic javscript element to the page. Other paths used in the value() method are considered as relative to frontend directory and they are added to the page as a JavaScript module (a javscript element with type="module"). In this case a JavaScript annotation behaves exactly as a JsModule annotation.

It's not possible to execute a function defined in JavaScript module via

  
 
 UI.getCurrent().getPage().executeJs("some_function_definied_in_module()");
 
 

because the function is private there (unless it's explicitly exposed). The JavaScript where the function is defined should be either external or it should be added using Page.addJavaScript(String): in this case all declared functions become available in the global scope.

Since:

1.0

Author:

Vaadin Ltd

See Also:

Page.addJavaScript(String), JsModule

Required Element Summary

Required Elements

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

Optional Element Summary

Optional Elements

Modifier and Type	Optional Element and Description
LoadMode	loadMode Determines the dependency load mode.

Element Detail

value

public abstract String value

JavaScript file URL to load before using the annotated Component in the browser.

Relative URLs are interpreted as relative to the configured frontend directory location.

In NPM mode this URL identifies a file which will be bundled, so the file should be available to be able to bundle it. External URLs (e.g. absolute URL which has a schema like "http://") are not bundled but included into the page as standalone scripts (the same way as in compatibility mode, see below). It's applicable also for "context://" and "base://" schemas.

In compatibility mode the URL represents a standalone script which will be added to the page. You can prefix the URL with context:// to make it relative to the context path or use an absolute URL to refer to files outside the frontend directory.

Returns:

a JavaScript file URL

loadMode

public abstract LoadMode loadMode

Determines the dependency load mode. Refer to LoadMode for the details.

Returns:

load mode for the dependency

Default:

com.vaadin.flow.shared.ui.LoadMode.EAGER