feat: Look up for the theme assets in the default dev bundle (#15566)

Looks up for the theme files in the default dev bundle if the theme files are not found in the project's frontend theme directory. Also improves the message thrown if the file is not found anywhere.

Author: mshabarov

flow-plugins/flow-maven-plugin/src/test/java/com/vaadin/flow/plugin/maven/PrepareFrontendMojoTest.java

@@ -207,14 +207,15 @@ public void writeTokenFile_devModePropertiesAreWritten()
     }
 
     @Test
-    public void mavenGoal_when_packageJsonMissing() throws Exception {
+    public void mavenGoal_when_packageJsonMissing_shouldNotGenerateDefault()
+            throws Exception {
         Assert.assertFalse(FileUtils.fileExists(packageJson));
         mojo.execute();
-        assertPackageJsonContent();
+        Assert.assertFalse(FileUtils.fileExists(packageJson));
     }
 
     @Test
-    public void should_keepDependencies_when_packageJsonExists()
+    public void should_updateAndkeepDependencies_when_packageJsonExists()
             throws Exception {
         JsonObject json = TestUtils.getInitialPackageJson();
         json.put("dependencies", Json.createObject());

flow-plugins/flow-plugin-base/src/main/java/com/vaadin/flow/plugin/base/BuildFrontendUtil.java

@@ -22,6 +22,7 @@
 import static com.vaadin.flow.server.Constants.GENERATED_TOKEN;
 import static com.vaadin.flow.server.Constants.JAVA_RESOURCE_FOLDER_TOKEN;
 import static com.vaadin.flow.server.Constants.NPM_TOKEN;
+import static com.vaadin.flow.server.Constants.PACKAGE_JSON;
 import static com.vaadin.flow.server.Constants.PROJECT_FRONTEND_GENERATED_DIR_TOKEN;
 import static com.vaadin.flow.server.InitParameters.NODE_DOWNLOAD_ROOT;
 import static com.vaadin.flow.server.InitParameters.NODE_VERSION;
@@ -156,8 +157,10 @@ public static void prepareFrontend(PluginAdapterBase adapter)
                 .withBuildDirectory(adapter.buildFolder())
                 .withJarFrontendResourcesFolder(
                         getJarFrontendResourcesFolder(adapter))
-                .createMissingPackageJson(true).enableImportsUpdate(false)
-                .enablePackagesUpdate(false).runNpmInstall(false)
+                .createMissingPackageJson(
+                        new File(adapter.npmFolder(), PACKAGE_JSON).exists())
+                .enableImportsUpdate(false).enablePackagesUpdate(false)
+                .runNpmInstall(false)
                 .withFrontendGeneratedFolder(adapter.generatedTsFolder())
                 .withNodeVersion(adapter.nodeVersion())
                 .withNodeDownloadRoot(nodeDownloadRootURI)

flow-server/src/main/java/com/vaadin/flow/server/Constants.java

@@ -441,10 +441,20 @@ public final class Constants implements Serializable {
     // Non-default port currently not supported (#7970)
     public static final int SPRING_BOOT_DEFAULT_LIVE_RELOAD_PORT = 35729;
 
+    /**
+     * The name of the default dev bundle for the Express Build mode.
+     */
+    public static final String DEV_BUNDLE_NAME = "vaadin-dev-bundle";
+
     /**
      * The path part where dev-bundle is located inside the jar.
      */
-    public static final String DEV_BUNDLE_JAR_PATH = "vaadin-dev-bundle/";
+    public static final String DEV_BUNDLE_JAR_PATH = DEV_BUNDLE_NAME + "/";
+
+    /**
+     * The directory name inside dev bundle for the frontend assets.
+     */
+    public static final String ASSETS = "assets";
 
     private Constants() {
         // prevent instantiation constants class only

flow-server/src/main/java/com/vaadin/flow/server/StaticFileServer.java

@@ -35,6 +35,7 @@
 import java.util.Collections;
 import java.util.HashMap;
 import java.util.Map;
+import java.util.regex.Matcher;
 import java.util.regex.Pattern;
 
 import org.slf4j.Logger;
@@ -76,7 +77,7 @@ public class StaticFileServer implements StaticFileHandler {
 
     // Matcher to match string starting with '/themes/[theme-name]/'
     public static final Pattern APP_THEME_PATTERN = Pattern
-            .compile("^\\/themes\\/[\\s\\S]+?\\/");
+            .compile("^\\/themes\\/([\\s\\S]+?)\\/");
 
     // Mapped uri is for the jar file
     static final Map<URI, Integer> openFileSystems = new HashMap<>();
@@ -263,6 +264,7 @@ public boolean serveStaticResource(HttpServletRequest request,
         } else if (APP_THEME_PATTERN.matcher(filenameWithPath).find()) {
             if (!deploymentConfiguration.enableDevServer()) {
                 resourceUrl = findAssetInFrontendThemesOrDevBundle(
+                        vaadinService,
                         deploymentConfiguration.getProjectFolder(),
                         filenameWithPath);
             } else {
@@ -317,26 +319,52 @@ && isIncorrectWebjarPath(filenameWithPath)) {
         return true;
     }
 
-    private static URL findAssetInFrontendThemesOrDevBundle(File projectFolder,
-            String assetPath) throws IOException {
+    private static URL findAssetInFrontendThemesOrDevBundle(
+            VaadinService vaadinService, File projectFolder, String assetPath)
+            throws IOException {
         // First, look for the theme assets in the {project.root}/frontend/
         // themes/my-theme folder
         File frontendFolder = new File(projectFolder, FrontendUtils.FRONTEND);
         File assetInFrontendThemes = new File(frontendFolder, assetPath);
         if (assetInFrontendThemes.exists()) {
             return assetInFrontendThemes.toURI().toURL();
         }
-        // Or search in the dev-bundle (if the assets come from node_modules)
-        String assetInDevBundle = "/assets/" + assetPath;
-        URL assetInDevBundleUrl = FrontendUtils.findBundleFile(projectFolder,
-                assetInDevBundle);
+
+        // Second, look into default dev bundle
+        Matcher matcher = APP_THEME_PATTERN.matcher(assetPath);
+        if (!matcher.find()) {
+            throw new IllegalStateException(
+                    "Asset path should match the theme pattern");
+        }
+
+        final String themeName = matcher.group(1);
+        String defaultBundleAssetPath = assetPath.replaceFirst(themeName,
+                Constants.DEV_BUNDLE_NAME);
+        URL assetInDevBundleUrl = vaadinService.getClassLoader()
+                .getResource(Constants.DEV_BUNDLE_JAR_PATH + Constants.ASSETS
+                        + defaultBundleAssetPath);
+
+        // Or search in the application dev-bundle (if the assets come from
+        // node_modules)
+        if (assetInDevBundleUrl == null) {
+            String assetInDevBundle = "/" + Constants.ASSETS + "/" + assetPath;
+            assetInDevBundleUrl = FrontendUtils.findBundleFile(projectFolder,
+                    assetInDevBundle);
+        }
+
         if (assetInDevBundleUrl == null) {
+            String assetName = assetPath.substring(
+                    assetPath.indexOf(themeName) + themeName.length());
             throw new IllegalStateException(String.format(
-                    "Asset '%s' is not found neither in frontend/themes/theme-name/ "
-                            + "nor in dev-bundle/assets/. Verify that either the asset "
-                            + "is available in frontend/themes/theme-name/ folder or it is added "
-                            + "in the 'assets' block in 'theme.json'.",
-                    assetPath));
+                    "Asset '%1$s' is not found in project frontend directory"
+                            + ", default Express Build bundle or in the application "
+                            + "bundle './dev-bundle/assets/'. \n"
+                            + "Verify that the asset is available in "
+                            + "'frontend/themes/%2$s/' directory and is added into the "
+                            + "'assets' block of the 'theme.json' file. \n"
+                            + "Else verify that the dependency 'com.vaadin:vaadin-dev-bundle' "
+                            + "is added to your project.",
+                    assetName, themeName));
         }
         return assetInDevBundleUrl;
     }

flow-tests/test-express-build/pom.xml

@@ -28,6 +28,7 @@
             <modules>
                 <module>test-dev-bundle-no-plugin</module>
                 <module>test-theme-dev-bundle</module>
+                <module>test-theme-default-dev-bundle</module>
             </modules>
         </profile>
     </profiles>

flow-tests/test-express-build/test-dev-bundle/frontend/themes/vaadin-dev-bundle/styles.css

@@ -0,0 +1,8 @@
+{
+  "assets": {
+    "line-awesome": {
+      "dist/line-awesome/css/**": "line-awesome/dist/line-awesome/css",
+      "dist/line-awesome/fonts/**": "line-awesome/dist/line-awesome/fonts"
+    }
+  }
+}

flow-tests/test-express-build/test-dev-bundle/frontend/themes/vaadin-dev-bundle/theme.json

@@ -34,6 +34,11 @@
             <version>${project.version}</version>
             <optional>true</optional>
         </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-test-lumo</artifactId>
+            <version>${project.version}</version>
+        </dependency>
         <dependency>
             <groupId>org.slf4j</groupId>
             <artifactId>slf4j-simple</artifactId>
@@ -49,9 +54,20 @@
     </dependencies>
     <build>
         <plugins>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-jar-plugin</artifactId>
+                <version>3.3.0</version>
+                <configuration>
+                    <excludes>
+                        <exclude>**/*Fake*</exclude>
+                    </excludes>
+                </configuration>
+            </plugin>
             <plugin>
                 <groupId>com.vaadin</groupId>
                 <artifactId>flow-dev-bundle-plugin</artifactId>
+                <version>${project.version}</version>
                 <executions>
                     <execution>
                         <goals>
@@ -92,6 +108,31 @@
                     </filesets>
                 </configuration>
             </plugin>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-antrun-plugin</artifactId>
+                <executions>
+                    <execution>
+                        <id>delete-fake-app-conf</id>
+                        <phase>pre-integration-test</phase>
+                        <goals>
+                            <goal>run</goal>
+                        </goals>
+                        <configuration>
+                            <tasks>
+                                <delete>
+                                    <!-- Delete FakeAppConf from target/classes to
+                                    avoid conflicts between default dev
+                                    bundle theme and custom theme in the test
+                                    modules, when running
+                                    test-express-build with maven -->
+                                    <fileset file="${project.build.directory}/classes/com/vaadin/devbundle/FakeAppConf.class"/>
+                                </delete>
+                            </tasks>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
 
         </plugins>
     </build>

flow-tests/test-express-build/test-dev-bundle/pom.xml

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2000-2023 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.devbundle;
+
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
+import com.vaadin.flow.component.page.AppShellConfigurator;
+import com.vaadin.flow.theme.Theme;
+
+@Theme("vaadin-dev-bundle")
+@JsModule("@polymer/paper-input/paper-input.js")
+@JsModule("@polymer/paper-checkbox/paper-checkbox.js")
+@NpmPackage(value = "@polymer/paper-input", version = "3.0.2")
+@NpmPackage(value = "@polymer/paper-checkbox", version = "3.0.1")
+@NpmPackage(value = "line-awesome", version = "1.3.0")
+public class FakeAppConf implements AppShellConfigurator {
+
+}