feat: Support top-level await

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;