fix: ensure to add feature-flags import at the start of bundle (#22329) (#22340)

The feature flags import in dev mode with the hot reload disabled ends
up after the custom elements definition. This is problematic for cases,
like the `layoutComponentsImprovements`, where the feature flag value is
checked at the definition time to decide whether some CSS styles should
be added or not.

This change moves the appending of the feature flags import to the end
of the method, and adds it at the start of the file.

Fixes #vaadin/web-component#9571

Co-authored-by: Diego Cardoso <diego@vaadin.com>

Author: vaadin-bot

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

@@ -74,7 +74,6 @@ public class TaskGenerateBootstrap extends AbstractTaskClientGenerator {
     @Override
     protected String getFileContent() {
         List<String> lines = new ArrayList<>();
-        lines.add(String.format("import './%s';%n", FEATURE_FLAGS_FILE_NAME));
         lines.add(String.format("import '%s';%n", getIndexTsEntryPath()));
         if (options.isReactEnabled()) {
             lines.add("import './vaadin-react.js';");
@@ -87,6 +86,8 @@ protected String getFileContent() {
         for (TypeScriptBootstrapModifier modifier : modifiers) {
             modifier.modify(lines, options, frontDeps);
         }
+        lines.add(0,
+                String.format("import './%s';%n", FEATURE_FLAGS_FILE_NAME));
         return String.join(System.lineSeparator(), lines);
     }
 

flow-server/src/test/java/com/vaadin/flow/server/frontend/TaskGenerateBootstrapTest.java

@@ -22,6 +22,7 @@
 import java.util.Collections;
 import java.util.List;
 import java.util.Map;
+import java.util.Set;
 
 import org.junit.Assert;
 import org.junit.Before;
@@ -49,6 +50,7 @@ public class TaskGenerateBootstrapTest {
     private static final String DEV_TOOLS_IMPORT = "import '"
             + FrontendUtils.JAR_RESOURCES_IMPORT
             + "vaadin-dev-tools/vaadin-dev-tools.js';";
+    private static final String CUSTOM_MODIFIER_CONTENT = "// custom modifier";
 
     @Rule
     public TemporaryFolder temporaryFolder = new TemporaryFolder();
@@ -59,10 +61,18 @@ public class TaskGenerateBootstrapTest {
 
     private Options options;
 
+    public static class CustomModifier implements TypeScriptBootstrapModifier {
+        @Override
+        public void modify(List<String> lines, Options options,
+                FrontendDependenciesScanner scanner) {
+            lines.add(0, CUSTOM_MODIFIER_CONTENT);
+        }
+    }
+
     @Before
     public void setUp() throws Exception {
         ClassFinder.DefaultClassFinder finder = new ClassFinder.DefaultClassFinder(
-                Collections.singleton(this.getClass()));
+                Set.of(this.getClass(), CustomModifier.class));
         frontDeps = new FrontendDependenciesScanner.FrontendDependenciesScannerFactory()
                 .createScanner(false, finder, false, null, true);
 
@@ -125,6 +135,18 @@ public void should_importFeatureFlagTS() throws ExecutionFailedException {
                 String.format("import './%s';", FEATURE_FLAGS_FILE_NAME)));
     }
 
+    @Test
+    public void should_importFeatureFlagTSBeforeModifiers()
+            throws ExecutionFailedException {
+        taskGenerateBootstrap.execute();
+        String content = taskGenerateBootstrap.getFileContent();
+        int featureFlagIndex = content.indexOf(
+                String.format("import './%s';", FEATURE_FLAGS_FILE_NAME));
+        int modifierIndex = content.indexOf(CUSTOM_MODIFIER_CONTENT);
+        Assert.assertTrue("Feature flag import should be before any modifier",
+                featureFlagIndex < modifierIndex);
+    }
+
     @Test
     public void should_load_AppTheme()
             throws MalformedURLException, ExecutionFailedException {