feat: Support top-level await (#18772)

flow-server/src/main/resources/vite.generated.ts

@@ -719,6 +719,7 @@ export const vaadinConfig: UserConfigFn = (env) => {
       outDir: buildOutputFolder,
       emptyOutDir: devBundle,
       assetsDir: 'VAADIN/build',
+      target: ["esnext", "safari15"],
       rollupOptions: {
         input: {
           indexhtml: projectIndexHtml,

flow-tests/test-frontend/vite-basics/src/main/java/com/vaadin/viteapp/views/empty/MainView.java

@@ -20,6 +20,7 @@
 @JsModule("./importdir.js")
 @JsModule("./bad.ts")
 @JsModule("./testfile.css.js")
+@JsModule("./toplevelawait-main.js")
 @CssImport(value = "./cssimport-textfield.css", themeFor = "vaadin-text-field")
 @CssImport(value = "./cssimport.css")
 public class MainView extends Div {

flow-tests/test-frontend/vite-basics/src/test/java/com/vaadin/viteapp/BasicsIT.java

@@ -72,4 +72,10 @@ public void importFromDirectoryWorks() {
     public void bootstrapTsCanBeModified() {
         Assert.assertEquals(1L, executeScript("return window.bootstrapMod"));
     }
+
+    @Test
+    public void toplevelAwaitWorks() {
+        Assert.assertEquals("This is the value set in other.js",
+                executeScript("return window.topLevelAwaitValue"));
+    }
 }

flow-tests/test-frontend/vite-production/src/main/java/com/vaadin/viteapp/views/empty/MainView.java

@@ -15,6 +15,7 @@
 @JsModule("@testscope/map")
 @JsModule("package-outside-npm/index.js")
 @JsModule("package2-outside-npm/index.js")
+@JsModule("./toplevelawait-main.js")
 @CssImport("./image.css")
 public class MainView extends Div {
 

flow-tests/test-frontend/vite-production/src/test/java/com/vaadin/viteapp/ProductionBasicsIT.java

@@ -57,4 +57,15 @@ public void applicationHasThemeAndAssets() {
         Assert.assertEquals(200, size.getWidth());
         Assert.assertEquals(200, size.getHeight());
     }
+
+    @Test
+    public void toplevelAwaitWorks() {
+        getDriver().get(getRootURL());
+        waitForDevServer();
+        String value = waitUntil(driver -> (String) executeScript(
+                "return window.topLevelAwaitValue"));
+
+        Assert.assertEquals("This is the value set in other.js", value);
+    }
+
 }

flow-tests/test-frontend/vite-test-assets/src/main/resources/META-INF/frontend/toplevelawait-main.js

@@ -0,0 +1,4 @@
+import './toplevelawait-other.js';
+
+window.topLevelAwaitValue = window.othervalue;
+console.log('The value set in other is: ' + window.topLevelAwaitValue);

flow-tests/test-frontend/vite-test-assets/src/main/resources/META-INF/frontend/toplevelawait-other.js

@@ -0,0 +1,13 @@
+
+let res;
+const promise = new Promise((resolve, reject) => {
+    res = resolve;
+});
+
+setTimeout(() => {
+    window.othervalue = "This is the value set in other.js";
+    res();
+}, 500);
+
+
+await promise;