fix: Watch theme folders from Jar dependency (#11196) (#11264) (#11276)

Adds a reusable themes folders (both current or parent) 
coming from JAR dependencies to the webpack watch list.

Fixes #11152

Co-authored-by: Mikhail Shabarov <61410877+mshabarov@users.noreply.github.com>

Co-authored-by: caalador <mikael.grankvist@vaadin.com>
Co-authored-by: Mikhail Shabarov <61410877+mshabarov@users.noreply.github.com>

flow-server/src/main/resources/plugins/application-theme-plugin/theme-handle.js

@@ -198,16 +198,17 @@ function extractThemeName(themeFolder) {
 }
 
 /**
- * Finds all the parent themes located in the project themes folders with
- * respect to the given custom theme with {@code themeName}.
+ * Finds all the parent themes located in the project themes folders and in
+ * the JAR dependencies with respect to the given custom theme with
+ * {@code themeName}.
  * @param {string} themeName given custom theme name to look parents for
  * @param {object} options application theme plugin mandatory options,
  * @see {@link ApplicationThemePlugin}
  * @returns {string[]} array of paths to found parent themes with respect to the
  * given custom theme
  */
 function findParentThemes(themeName, options) {
-  const existingThemeFolders = options.themeProjectFolders.filter(
+  const existingThemeFolders = [options.themeResourceFolder, ...options.themeProjectFolders].filter(
     (folder) => fs.existsSync(folder));
   return collectParentThemes(themeName, existingThemeFolders, false);
 }

flow-server/src/main/resources/webpack.generated.js

@@ -47,7 +47,7 @@ const projectStaticAssetsFolders = [
   frontendFolder
 ];
 
-const projectStaticAssetsOutputFolder = [to-be-generated-by-flow];
+const projectStaticAssetsOutputFolder = '[to-be-generated-by-flow]';
 
 // Folders in the project which can contain application themes
 const themeProjectFolders = projectStaticAssetsFolders.map((folder) =>
@@ -110,8 +110,9 @@ if (devMode) {
   // target/frontend/themes folder
   themeName = extractThemeName(flowFrontendThemesFolder);
   const parentThemePaths = findParentThemes(themeName, themeOptions);
-  const currentThemeFolders = projectStaticAssetsFolders
-    .map((folder) => path.resolve(folder, "themes", themeName));
+  const currentThemeFolders = [...projectStaticAssetsFolders
+    .map((folder) => path.resolve(folder, "themes", themeName)),
+    path.resolve(flowFrontendThemesFolder, themeName)];
   // Watch the components folders for component styles update in both
   // current theme and parent themes. Other folders or CSS files except
   // 'styles.css' should be referenced from `styles.css` anyway, so no need
@@ -279,7 +280,7 @@ module.exports = {
 
     ...(devMode && themeName ? [new ExtraWatchWebpackPlugin({
       files: [],
-      dirs: [...themeWatchFolders]
+      dirs: themeWatchFolders
     }), new ThemeLiveReloadPlugin(processThemeResourcesCallback)] : []),
 
     new StatsPlugin({