feat: run declared JavaScript without compiling it in the browser

flow-build-tools/src/main/java/com/vaadin/flow/server/frontend/BundleValidationUtil.java

@@ -278,6 +278,17 @@ private static boolean needsBuildInternal(Options options,
         ((ObjectNode) statsJson.get(FRONTEND_HASHES_STATS_KEY)).remove(
                 FrontendUtils.GENERATED + FrontendUtils.COMMERCIAL_BANNER_JS);
 
+        if (jsDefinitionsChanged(options, statsJson)) {
+            UsageStatistics.markAsUsed(
+                    "flow/rebundle-reason-changed-js-definitions", null);
+            return true;
+        }
+        // JavaScript definition file hash has already been checked
+        // removing it from hashes map to prevent other unnecessary checks
+        ((ObjectNode) statsJson.get(FRONTEND_HASHES_STATS_KEY))
+                .remove(FrontendUtils.GENERATED
+                        + FrontendUtils.JS_DEFINITIONS_FILE_NAME);
+
         if (!BundleValidationUtil.frontendImportsFound(statsJson, options)) {
             UsageStatistics.markAsUsed(
                     "flow/rebundle-reason-missing-frontend-import", null);
@@ -993,6 +1004,37 @@ private static boolean isCommercialBannerConditionChanged(Options options,
         return false;
     }
 
+    /**
+     * Checks whether the JavaScript that the {@code @JsDefinition} interfaces
+     * of the application declare differs from what the bundle was built with.
+     * <p>
+     * The functions are generated into the bundle, so a declaration that
+     * changed, a definition that was added and a bundle built before any
+     * definition existed all mean that the bundle no longer contains what a
+     * call would look up, which shows up at runtime as a call that cannot be
+     * run.
+     */
+    private static boolean jsDefinitionsChanged(Options options,
+            JsonNode statsJson) {
+        JsonNode frontendHashes = statsJson.get(FRONTEND_HASHES_STATS_KEY);
+        String jsDefinitionsPath = FrontendUtils.GENERATED
+                + FrontendUtils.JS_DEFINITIONS_FILE_NAME;
+        String content = new TaskGenerateJsDefinitions(options)
+                .getFileContent();
+
+        List<String> faultyContent = new ArrayList<>();
+        compareFrontendHashes(frontendHashes, faultyContent, jsDefinitionsPath,
+                content);
+        if (!faultyContent.isEmpty()) {
+            // Either the declarations changed, or the bundle was built before
+            // they existed and carries none of their JavaScript
+            getLogger().info(
+                    "Detected JavaScript declared by the JavaScript definitions that the bundle does not carry");
+            return true;
+        }
+        return false;
+    }
+
     private static Map<String, String> getRemainingImports(
             List<String> jarImports, List<String> projectImports,
             JsonNode frontendHashes) {

flow-build-tools/src/main/java/com/vaadin/flow/server/frontend/NodeTasks.java

@@ -76,6 +76,7 @@ public class NodeTasks implements FallibleCommand {
             TaskGenerateWebComponentHtml.class,
             TaskGenerateWebComponentBootstrap.class,
             TaskGenerateFeatureFlags.class,
+            TaskGenerateJsDefinitions.class,
             TaskInstallFrontendBuildPlugins.class,
             TaskUpdatePackages.class,
             TaskRunNpmInstall.class,
@@ -262,6 +263,8 @@ public NodeTasks(Options options) {
 
         commands.add(new TaskGenerateFeatureFlags(options));
 
+        commands.add(new TaskGenerateJsDefinitions(options));
+
         if (options.getJarFiles() != null
                 && options.getJarFrontendResourcesFolder() != null) {
             commands.add(new TaskCopyFrontendFiles(options));

flow-build-tools/src/main/java/com/vaadin/flow/server/frontend/TaskGenerateBootstrap.java

@@ -32,6 +32,7 @@
 import static com.vaadin.flow.internal.FrontendUtils.INDEX_JS;
 import static com.vaadin.flow.internal.FrontendUtils.INDEX_TS;
 import static com.vaadin.flow.internal.FrontendUtils.INDEX_TSX;
+import static com.vaadin.flow.internal.FrontendUtils.JS_DEFINITIONS_FILE_NAME;
 
 /**
  * A task for generating the bootstrap file
@@ -83,6 +84,8 @@ protected String getFileContent() {
         for (TypeScriptBootstrapModifier modifier : modifiers) {
             modifier.modify(lines, options);
         }
+        lines.add(0,
+                String.format("import './%s';%n", JS_DEFINITIONS_FILE_NAME));
         lines.add(0,
                 String.format("import './%s';%n", FEATURE_FLAGS_FILE_NAME));
         return String.join(System.lineSeparator(), lines);