feat!: Make react-router default (#18387)

* feat!: Make react-router default Enable react router as default with property to switch back to vaadin router. * No react for test modules with explicit vaadin-router import * Add react state also for dev-server init * add optional param to not get can not navigate * Handle hash anchor update * Handle popstate without router navigation * pick first popstate * fix test excpectation * Add react router flag as input in gradle * fix typo * Fix outside navigation * Fix server webcomponent init --------- Co-authored-by: Peter Czuczor <61667986+czp13@users.noreply.github.com>
vaadin · Feb 7, 2024 · 12a4aba · 12a4aba
1 parent 45d788f
commit 12a4aba
Show file tree

Hide file tree

Showing 38 changed files with 276 additions and 48 deletions.
diff --git a/.gitignore b/.gitignore
@@ -96,3 +96,6 @@ flow-tests/test-themes/src/main/bundles/
 # Exclude generated vaadin dev tools frontend
 vaadin-dev-server/src/main/resources/META-INF/frontend
 vaadin-dev-server/src/main/resources/META-INF/metadata
+
+/flow-tests/**/frontend/App.tsx
+/flow-tests/**/frontend/routes.tsx
diff --git a/...flow-dev-bundle-plugin/src/main/java/com/vaadin/flow/plugin/maven/BuildDevBundleMojo.java b/...flow-dev-bundle-plugin/src/main/java/com/vaadin/flow/plugin/maven/BuildDevBundleMojo.java
@@ -161,6 +161,9 @@ public class BuildDevBundleMojo extends AbstractMojo
     @Parameter(property = "npm.postinstallPackages", defaultValue = "")
     private List<String> postinstallPackages;
 
+    @Parameter(property = InitParameters.REACT_ROUTER_ENABLED, defaultValue = "true")
+    private boolean reactRouterEnabled;
+
     @Override
     public void execute() throws MojoFailureException {
         long start = System.nanoTime();
@@ -431,4 +434,9 @@ public boolean isPrepareFrontendCacheDisabled() {
         return false;
     }
 
+    @Override
+    public boolean isReactRouterEnabled() {
+        return reactRouterEnabled;
+    }
+
 }
diff --git a/flow-plugins/flow-gradle-plugin/src/main/kotlin/com/vaadin/gradle/GradlePluginAdapter.kt b/flow-plugins/flow-gradle-plugin/src/main/kotlin/com/vaadin/gradle/GradlePluginAdapter.kt
@@ -198,4 +198,5 @@ internal class GradlePluginAdapter(
 
     override fun isPrepareFrontendCacheDisabled(): Boolean = config.alwaysExecutePrepareFrontend.get()
 
+    override fun isReactRouterEnabled(): Boolean = config.reactRouterEnabled.get()
 }
diff --git a/...ns/flow-gradle-plugin/src/main/kotlin/com/vaadin/gradle/PrepareFrontendInputProperties.kt b/...ns/flow-gradle-plugin/src/main/kotlin/com/vaadin/gradle/PrepareFrontendInputProperties.kt
@@ -136,6 +136,9 @@ internal class PrepareFrontendInputProperties(private val config: PluginEffectiv
     @Input
     public fun getForceProductionBuild(): Provider<Boolean> = config.forceProductionBuild
 
+    @Input
+    public fun getReactRouterEnabled(): Provider<Boolean> = config.reactRouterEnabled
+
     @Input
     @Optional
     public fun getNodeExecutablePath(): Provider<String> = tools
@@ -151,15 +154,15 @@ internal class PrepareFrontendInputProperties(private val config: PluginEffectiv
 
     @Input
     @Optional
-    public fun getPnpmExecutablePath(): Provider<String> = config.pnpmEnable.map { pnpmEnable ->
+    public fun getPnpmExecutablePath(): Provider<String> = config.pnpmEnable.map { pnpmEnable: Boolean ->
         if (!pnpmEnable) {
             return@map ""
         }
         val pnpmExecutable = tools.get().pnpmExecutable ?: listOf()
         pnpmExecutable.joinToString(" ")
     }
 
-    private fun initialiseFrontendToolsSettings(): Provider<FrontendTools> = config.npmFolder.map { npmFolder ->
+    private fun initialiseFrontendToolsSettings(): Provider<FrontendTools> = config.npmFolder.map { npmFolder: File ->
         val settings = FrontendToolsSettings(npmFolder.absolutePath) {
             FrontendUtils.getVaadinHomeDirectory()
                 .absolutePath

diff --git a/...plugins/flow-gradle-plugin/src/main/kotlin/com/vaadin/gradle/VaadinFlowPluginExtension.kt b/...plugins/flow-gradle-plugin/src/main/kotlin/com/vaadin/gradle/VaadinFlowPluginExtension.kt
@@ -271,6 +271,8 @@ public abstract class VaadinFlowPluginExtension {
      */
     public abstract val alwaysExecutePrepareFrontend: Property<Boolean>
 
+    public abstract val reactRouterEnabled: Property<Boolean>
+
     public fun filterClasspath(@DelegatesTo(value = ClasspathFilter::class, strategy = Closure.DELEGATE_FIRST) block: Closure<*>) {
         block.delegate = classpathFilter
         block.resolveStrategy = Closure.DELEGATE_FIRST
@@ -411,6 +413,10 @@ internal class PluginEffectiveConfiguration(
     val alwaysExecutePrepareFrontend: Property<Boolean> = extension.alwaysExecutePrepareFrontend
         .convention(false)
 
+    val reactRouterEnabled: Provider<Boolean> = extension.reactRouterEnabled
+        .convention(true)
+        .overrideWithSystemProperty(InitParameters.REACT_ROUTER_ENABLED)
+
     /**
      * Finds the value of a boolean property. It searches in gradle and system properties.
      *
@@ -457,7 +463,8 @@ internal class PluginEffectiveConfiguration(
             "processResourcesTaskName=${processResourcesTaskName.get()}, " +
             "skipDevBundleBuild=${skipDevBundleBuild.get()}, " +
             "alwaysExecutePrepareFrontend=${alwaysExecutePrepareFrontend.get()}, " +
-            "frontendHotdeploy=${frontendHotdeploy.get()}" +
+            "frontendHotdeploy=${frontendHotdeploy.get()}," +
+            "reactRouterEnabled=${reactRouterEnabled.get()}" +
             ")"
     companion object {
         internal fun get(project: Project): PluginEffectiveConfiguration =

diff --git a/...ns/flow-maven-plugin/src/main/java/com/vaadin/flow/plugin/maven/FlowModeAbstractMojo.java b/...ns/flow-maven-plugin/src/main/java/com/vaadin/flow/plugin/maven/FlowModeAbstractMojo.java
@@ -226,6 +226,9 @@ public abstract class FlowModeAbstractMojo extends AbstractMojo
     @Parameter(property = InitParameters.SKIP_DEV_BUNDLE_REBUILD, defaultValue = "false")
     private boolean skipDevBundleRebuild;
 
+    @Parameter(property = InitParameters.REACT_ROUTER_ENABLED, defaultValue = "true")
+    private boolean reactRouterEnabled;
+
     /**
      * Generates a List of ClasspathElements (Run and CompileTime) from a
      * MavenProject.
@@ -456,4 +459,8 @@ public boolean isPrepareFrontendCacheDisabled() {
         return false;
     }
 
+    @Override
+    public boolean isReactRouterEnabled() {
+        return reactRouterEnabled;
+    }
 }
diff --git a/...plugins/flow-plugin-base/src/main/java/com/vaadin/flow/plugin/base/BuildFrontendUtil.java b/...plugins/flow-plugin-base/src/main/java/com/vaadin/flow/plugin/base/BuildFrontendUtil.java
@@ -27,6 +27,7 @@
 import static com.vaadin.flow.server.InitParameters.FRONTEND_HOTDEPLOY;
 import static com.vaadin.flow.server.InitParameters.NODE_DOWNLOAD_ROOT;
 import static com.vaadin.flow.server.InitParameters.NODE_VERSION;
+import static com.vaadin.flow.server.InitParameters.REACT_ROUTER_ENABLED;
 import static com.vaadin.flow.server.InitParameters.SERVLET_PARAMETER_INITIAL_UIDL;
 import static com.vaadin.flow.server.InitParameters.SERVLET_PARAMETER_PRODUCTION_MODE;
 import static com.vaadin.flow.server.frontend.FrontendUtils.NODE_MODULES;
@@ -255,6 +256,8 @@ public static File propagateBuildInfo(PluginAdapterBase adapter) {
             buildInfo.put(DISABLE_PREPARE_FRONTEND_CACHE, true);
         }
 
+        buildInfo.put(REACT_ROUTER_ENABLED, adapter.isReactRouterEnabled());
+
         try {
             FileUtils.forceMkdir(token.getParentFile());
             FileUtils.write(token, JsonUtil.stringify(buildInfo, 2) + "\n",
@@ -328,7 +331,8 @@ public static void runNodeUpdater(PluginAdapterBuild adapter)
                     .setJavaResourceFolder(adapter.javaResourceFolder())
                     .withPostinstallPackages(adapter.postinstallPackages())
                     .withCiBuild(adapter.ciBuild())
-                    .withForceProductionBuild(adapter.forceProductionBuild());
+                    .withForceProductionBuild(adapter.forceProductionBuild())
+                    .withReactRouter(adapter.isReactRouterEnabled());
             new NodeTasks(options).execute();
         } catch (ExecutionFailedException exception) {
             throw exception;
@@ -392,7 +396,8 @@ public static void runDevBuildNodeUpdater(PluginAdapterBuild adapter)
                     .withPostinstallPackages(adapter.postinstallPackages())
                     .withBundleBuild(true)
                     .skipDevBundleBuild(adapter.skipDevBundleBuild())
-                    .withCompressBundle(adapter.compressBundle());
+                    .withCompressBundle(adapter.compressBundle())
+                    .withReactRouter(adapter.isReactRouterEnabled());
             new NodeTasks(options).execute();
         } catch (ExecutionFailedException exception) {
             throw exception;

diff --git a/...plugins/flow-plugin-base/src/main/java/com/vaadin/flow/plugin/base/PluginAdapterBase.java b/...plugins/flow-plugin-base/src/main/java/com/vaadin/flow/plugin/base/PluginAdapterBase.java
@@ -302,4 +302,10 @@ default Lookup createLookup(ClassFinder classFinder) {
      */
     boolean isPrepareFrontendCacheDisabled();
 
+    /**
+     * Set react router as enabled or disabled.
+     *
+     * @return {@code true} for react router and {@code false} for vaadin-router
+     */
+    boolean isReactRouterEnabled();
 }
diff --git a/flow-server/src/main/java/com/vaadin/experimental/FeatureFlags.java b/flow-server/src/main/java/com/vaadin/experimental/FeatureFlags.java
@@ -69,10 +69,6 @@ public class FeatureFlags implements Serializable {
             "https://github.com/vaadin/form-filler-addon", true,
             "com.vaadin.flow.ai.formfiller.FormFiller");
 
-    public static final Feature REACT_ROUTER = new Feature(
-            "React router support", "reactRouter",
-            "https://vaadin.com/docs/latest/integrations/hilla", true, null);
-
     private List<Feature> features = new ArrayList<>();
 
     File propertiesFolder = null;
@@ -93,7 +89,6 @@ public FeatureFlags(Lookup lookup) {
         features.add(new Feature(COLLABORATION_ENGINE_BACKEND));
         features.add(new Feature(WEB_PUSH));
         features.add(new Feature(FORM_FILLER_ADDON));
-        features.add(new Feature(REACT_ROUTER));
         loadProperties();
     }
 

diff --git a/flow-server/src/main/java/com/vaadin/flow/function/DeploymentConfiguration.java b/flow-server/src/main/java/com/vaadin/flow/function/DeploymentConfiguration.java
@@ -334,9 +334,9 @@ default SessionLockCheckStrategy getSessionLockCheckStrategy() {
      * Check if the React Router is enabled for the project instead of Vaadin
      * router.
      *
-     * @return {@code true} if React Router is used
+     * @return {@code true} if React Router is used, on by default
      */
     default boolean isReactRouterEnabled() {
-        return getBooleanProperty(InitParameters.REACT_ROUTER_ENABLED, false);
+        return getBooleanProperty(InitParameters.REACT_ROUTER_ENABLED, true);
     }
 }
diff --git a/flow-server/src/main/java/com/vaadin/flow/server/DeploymentConfigurationFactory.java b/flow-server/src/main/java/com/vaadin/flow/server/DeploymentConfigurationFactory.java
@@ -122,17 +122,6 @@ private void readBuildInfo(Properties initParameters,
             }
         }
 
-        if (!initParameters.containsKey(REACT_ROUTER_ENABLED)) {
-            // TODO: When not a feature flag remember to synchronize with
-            // NodeTasks!!
-            // This is set immediately, but a marking in the token file may
-            // override this.
-            // But mainly this is now dictated by the feature flag setting.
-            initParameters.put(REACT_ROUTER_ENABLED,
-                    String.valueOf(
-                            new FeatureFlags(context.getAttribute(Lookup.class))
-                                    .isEnabled(FeatureFlags.REACT_ROUTER)));
-        }
     }
 
     private static void readUiFromEnclosingClass(

diff --git a/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeTasks.java b/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeTasks.java
@@ -284,8 +284,7 @@ private void addBootstrapTasks(Options options) {
         if (options.isProductionMode() || options.isFrontendHotdeploy()
                 || options.isBundleBuild()) {
             commands.add(new TaskGenerateIndexTs(options));
-            if (options.getFeatureFlags()
-                    .isEnabled(FeatureFlags.REACT_ROUTER)) {
+            if (options.isReactRouterEnabled()) {
                 commands.add(new TaskGenerateReactFiles(options));
             }
             if (!options.isProductionMode()) {

diff --git a/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java b/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java
@@ -295,7 +295,7 @@ private static <T extends JsonValue> T computeIfAbsent(
     Map<String, String> getDefaultDependencies() {
         Map<String, String> dependencies = readDependencies("default",
                 "dependencies");
-        if (options.getFeatureFlags().isEnabled(FeatureFlags.REACT_ROUTER)) {
+        if (options.isReactRouterEnabled()) {
             dependencies
                     .putAll(readDependencies("react-router", "dependencies"));
         } else {

diff --git a/flow-server/src/main/java/com/vaadin/flow/server/frontend/Options.java b/flow-server/src/main/java/com/vaadin/flow/server/frontend/Options.java
@@ -121,6 +121,8 @@ public class Options implements Serializable {
 
     private boolean frontendHotdeploy = false;
 
+    private boolean reactRouterEnabled = true;
+
     /**
      * Creates a new instance.
      *
@@ -859,4 +861,13 @@ public Options withCompressBundle(boolean compressBundle) {
     public boolean isCompressBundle() {
         return compressBundle;
     }
+
+    public boolean isReactRouterEnabled() {
+        return reactRouterEnabled;
+    }
+
+    public Options withReactRouter(boolean reactRouterEnabled) {
+        this.reactRouterEnabled = reactRouterEnabled;
+        return this;
+    }
 }
diff --git a/flow-server/src/main/java/com/vaadin/flow/server/frontend/TaskGenerateIndexTs.java b/flow-server/src/main/java/com/vaadin/flow/server/frontend/TaskGenerateIndexTs.java
@@ -74,7 +74,7 @@ protected boolean shouldGenerate() {
     protected String getFileContent() throws IOException {
         String indexTemplate;
         String indexFile = INDEX_TS;
-        if (options.getFeatureFlags().isEnabled(FeatureFlags.REACT_ROUTER)) {
+        if (options.isReactRouterEnabled()) {
             indexFile = "index-react.ts";
         }
         try (InputStream indexTsStream = getClass()

diff --git a/flow-server/src/main/resources/com/vaadin/flow/server/BootstrapHandler.js b/flow-server/src/main/resources/com/vaadin/flow/server/BootstrapHandler.js
@@ -59,7 +59,14 @@ Please submit an issue to https://github.com/vaadin/flow-components/issues/new/c
     }
   };
 
-  if (!window.Vaadin.Flow.clients) {
+  let flowInitialised = false;
+
+  if (window.Vaadin.Flow.clients) {
+    flowInitialised = Object.keys(window.Vaadin.Flow.clients)
+        .find((key) => key !== 'TypeScript');
+  }
+
+  if (!flowInitialised) {
     window.Vaadin.Flow.clients = {};
 
     window.Vaadin.Flow.pendingStartup = {};