fix: Move generated theme files to frontend/generated

.gitignore

@@ -47,3 +47,4 @@ flow-tests/**/types.d.ts
 package.json
 package-lock.json
 /flow-tests/**/*.generated.js
+/flow-tests/**/frontend/generated/

drivers.xml

@@ -2,35 +2,35 @@
 <root>
     <windows>
         <driver id="googlechrome">
-            <version id="89.0.4389.23">
+            <version id="91.0.4472.19">
                 <bitrate thirtytwobit="true" sixtyfourbit="true">
-                    <filelocation>https://chromedriver.storage.googleapis.com/89.0.4389.23/chromedriver_win32.zip</filelocation>
-                    <hash>9ac62a6bcdb49627a2839e5cbb312d8fe7c340e3</hash>
+                    <filelocation>https://chromedriver.storage.googleapis.com/91.0.4472.19/chromedriver_win32.zip</filelocation>
+                    <hash>ff66f571ffc16745badf0de3fd5474a54ba126ad</hash>
                     <hashtype>sha1</hashtype>
                 </bitrate>
             </version>
         </driver>
     </windows>
     <linux>
         <driver id="googlechrome">
-            <version id="89.0.4389.23">
+            <version id="91.0.4472.19">
                 <bitrate sixtyfourbit="true">
-                    <filelocation>https://chromedriver.storage.googleapis.com/89.0.4389.23/chromedriver_linux64.zip</filelocation>
-                    <hash>b6db711b7ceb4655dc61df3ff7bd89b4b1647f81</hash>
+                    <filelocation>https://chromedriver.storage.googleapis.com/91.0.4472.19/chromedriver_linux64.zip</filelocation>
+                    <hash>ef30bc45922ccaefba075cec2b71bd96e61415c7</hash>
                     <hashtype>sha1</hashtype>
                 </bitrate>
             </version>
         </driver>
     </linux>
     <osx>
         <driver id="googlechrome">
-            <version id="89.0.4389.23">
+            <version id="91.0.4472.19">
                 <bitrate sixtyfourbit="true">
-                    <filelocation>https://chromedriver.storage.googleapis.com/89.0.4389.23/chromedriver_mac64.zip</filelocation>
-                    <hash>b0857b123b956317ed5a858bac400a6d9ad01f8c</hash>
+                    <filelocation>https://chromedriver.storage.googleapis.com/91.0.4472.19/chromedriver_mac64.zip</filelocation>
+                    <hash>7cb6549ff48a04bfb4e64a512ffdbf22e59fdc87</hash>
                     <hashtype>sha1</hashtype>
                 </bitrate>
             </version>
         </driver>
     </osx>
-</root>
+</root>

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

@@ -148,7 +148,7 @@ protected Collection<String> getThemeLines() {
                 // If we define a theme name we need to import
                 // theme/theme-generated.js
                 lines.add(
-                        "import {applyTheme} from 'themes/theme-generated.js';");
+                        "import {applyTheme} from 'generated/theme-generated.js';");
                 lines.add("applyTheme(document);");
             }
 

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

@@ -18,6 +18,7 @@
 import java.io.File;
 import java.io.IOException;
 import java.nio.charset.StandardCharsets;
+import java.nio.file.Paths;
 import java.util.Arrays;
 import java.util.List;
 import java.util.stream.Collectors;
@@ -29,12 +30,16 @@
 import com.vaadin.flow.theme.ThemeDefinition;
 
 import static com.vaadin.flow.server.Constants.APPLICATION_THEME_ROOT;
+import static com.vaadin.flow.server.frontend.FrontendUtils.DEFAULT_FRONTEND_DIR;
 import static com.vaadin.flow.server.frontend.FrontendUtils.DEFAULT_GENERATED_DIR;
+import static com.vaadin.flow.server.frontend.FrontendUtils.PARAM_FRONTEND_DIR;
 import static com.vaadin.flow.server.frontend.FrontendUtils.PARAM_GENERATED_DIR;
 
 /**
  * Task for generating the theme-generated.js file for importing application
  * theme.
+ * <p>
+ * Generated file is generated into <code>./frontend/generated</code>
  *
  * @since
  */
@@ -50,11 +55,10 @@ public class TaskUpdateThemeImport implements FallibleCommand {
 
     TaskUpdateThemeImport(File npmFolder, ThemeDefinition theme,
             File frontendDirectory) {
-        File generatedDir = new File(npmFolder,
-                System.getProperty(PARAM_GENERATED_DIR, DEFAULT_GENERATED_DIR));
-        this.themeImportFile = new File(
-                new File(generatedDir, APPLICATION_THEME_ROOT),
-                "theme-generated.js");
+        File generatedDir = new File(new File(npmFolder.getAbsolutePath(),
+                System.getProperty(PARAM_FRONTEND_DIR, DEFAULT_FRONTEND_DIR)),
+                "generated");
+        this.themeImportFile = new File(generatedDir, "theme-generated.js");
         this.theme = theme;
         this.frontendDirectory = frontendDirectory;
         this.npmFolder = npmFolder;
@@ -80,9 +84,9 @@ public void execute() throws ExecutionFailedException {
 
         try {
             FileUtils.write(themeImportFile, String.format(
-                    "import {applyTheme as _applyTheme} from 'themes/%s/%s.generated.js';%n"
+                    "import {applyTheme as _applyTheme} from 'generated/%s.generated.js';%n"
                             + "export const applyTheme = _applyTheme;%n",
-                    theme.getName(), theme.getName()), StandardCharsets.UTF_8);
+                    theme.getName()), StandardCharsets.UTF_8);
         } catch (IOException e) {
             throw new ExecutionFailedException(
                     "Unable to write theme import file", e);

flow-server/src/main/java/com/vaadin/flow/server/webcomponent/WebComponentGenerator.java

@@ -161,7 +161,7 @@ static Map<String, String> getReplacementsMap(String tag,
 
         if (themeName != null && !themeName.isEmpty()) {
             replacements.put("ThemeImport",
-                "import {applyTheme} from 'themes/theme-generated.js';\n\n");
+                "import {applyTheme} from 'generated/theme-generated.js';\n\n");
             replacements.put("ApplyTheme", "applyTheme(shadow);\n    ");
         } else {
             replacements.put("ThemeImport", "");

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

@@ -40,6 +40,9 @@ class ApplicationThemePlugin {
     if (!this.options.themeProjectFolders) {
       throw new Error("Missing themeProjectFolders path array");
     }
+    if (!this.options.frontendGeneratedFolder) {
+      throw new Error("Missing frontendGeneratedFolder path");
+    }
   }
 
   apply(compiler) {

flow-server/src/main/resources/plugins/application-theme-plugin/package.json

@@ -6,7 +6,7 @@
   ],
   "repository": "vaadin/flow",
   "name": "@vaadin/application-theme-plugin",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "main": "application-theme-plugin.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",

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

@@ -134,7 +134,7 @@ function generateThemeFile(themeFolder, themeName, themeProperties, productionMo
   }
 
   if (themeProperties.parent) {
-    themeFile += `import {applyTheme as applyBaseTheme} from 'themes/${themeProperties.parent}/${themeProperties.parent}.generated.js';`;
+    themeFile += `import {applyTheme as applyBaseTheme} from 'generated/${themeProperties.parent}.generated.js';`;
   }
 
   themeFile += createLinkReferences;
@@ -164,7 +164,7 @@ function generateThemeFile(themeFolder, themeName, themeProperties, productionMo
   // styles.css will always be available as we write one if it doesn't exist.
   let filename = path.basename(styles);
   let variable = camelCase(filename);
-  imports.push(`import ${variable} from './${filename}';\n`);
+  imports.push(`import ${variable} from 'themes/${themeName}/${filename}';\n`);
 
   /* Lumo must be first so that custom styles override Lumo styles */
   const lumoImports = themeProperties.lumoImports || ["color", "typography"];
@@ -193,7 +193,7 @@ function generateThemeFile(themeFolder, themeName, themeProperties, productionMo
   if (fs.existsSync(document)) {
     filename = path.basename(document);
     variable = camelCase(filename);
-    imports.push(`import ${variable} from './${filename}';\n`);
+    imports.push(`import ${variable} from 'themes/${themeName}/${filename}';\n`);
     globalCssCode.push(`injectGlobalCss(${variable}.toString(), document);\n    `);
   }
 
@@ -237,7 +237,7 @@ function generateThemeFile(themeFolder, themeName, themeProperties, productionMo
     const tag = filename.replace('.css', '');
     const variable = camelCase(filename);
     imports.push(
-      `import ${variable} from './${themeComponentsFolder}/${filename}';\n`
+      `import ${variable} from 'themes/${themeName}/${themeComponentsFolder}/${filename}';\n`
     );
 // Don't format as the generated file formatting will get wonky!
     const componentString = `registerStyles(

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

@@ -24,7 +24,7 @@ const generateThemeFile = require('./theme-generator');
 const {copyStaticAssets, copyThemeResources} = require('./theme-copy');
 
 // matches theme folder name in 'themes/my-theme/my-theme.generated.js'
-const nameRegex = /themes\/(.*)\/\1.generated.js/;
+const nameRegex = /generated\/(.*).generated.js/;
 
 let prevThemeName = undefined;
 let firstThemeName = undefined;
@@ -40,7 +40,7 @@ let firstThemeName = undefined;
  * @param logger application theme plugin logger
  */
 function processThemeResources(options, logger) {
-  const themeName = extractThemeName(options.themeResourceFolder);
+  const themeName = extractThemeName(options.frontendGeneratedFolder);
   if (themeName) {
     if (!prevThemeName && !firstThemeName) {
       firstThemeName = themeName;
@@ -152,7 +152,7 @@ function handleThemes(themeName, themesFolder, options, logger) {
     copyThemeResources(themeFolder, options.projectStaticAssetsOutputFolder, logger);
     const themeFile = generateThemeFile(themeFolder, themeName, themeProperties, !options.devMode);
 
-    fs.writeFileSync(path.resolve(themeFolder, themeName + '.generated.js'), themeFile);
+    fs.writeFileSync(path.resolve(options.frontendGeneratedFolder, themeName + '.generated.js'), themeFile);
     return true;
   }
   return false;
@@ -173,18 +173,18 @@ function getThemeProperties(themeFolder) {
 /**
  * Extracts current theme name from 'theme-generated.js' file located on a
  * given folder.
- * @param themeFolder theme folder where flow generates 'theme-generated.js'
+ * @param frontendGeneratedFolder theme folder where flow generates 'theme-generated.js'
  * file and copies local and jar resource frontend files
  * @returns {string} current theme name
  */
-function extractThemeName(themeFolder) {
-  if (!themeFolder) {
+function extractThemeName(frontendGeneratedFolder) {
+  if (!frontendGeneratedFolder) {
     throw new Error("Couldn't extract theme name from 'theme-generated.js'," +
       " because the path to folder containing this file is empty. Please set" +
       " the a correct folder path in ApplicationThemePlugin constructor" +
       " parameters.");
   }
-  const generatedThemeFile = path.resolve(themeFolder, "theme-generated.js");
+  const generatedThemeFile = path.resolve(frontendGeneratedFolder, "theme-generated.js");
   if (fs.existsSync(generatedThemeFile)) {
     // read theme name from the theme-generated.js as there we always mark the used theme for webpack to handle.
     const themeName = nameRegex.exec(fs.readFileSync(generatedThemeFile, {encoding: 'utf8'}))[1];

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

@@ -97,11 +97,12 @@ if (watchDogPort) {
 const flowFrontendThemesFolder = path.resolve(flowFrontendFolder, 'themes');
 const themeOptions = {
   devMode: devMode,
-  // The following matches target/frontend/themes/theme-generated.js
+  // The following matches ./frontend/generated/theme-generated.js
   // and for theme in JAR that is copied to target/frontend/themes/
   themeResourceFolder: flowFrontendThemesFolder,
   themeProjectFolders: themeProjectFolders,
   projectStaticAssetsOutputFolder: projectStaticAssetsOutputFolder,
+  frontendGeneratedFolder: path.resolve(frontendFolder, "generated"),
 };
 let themeName = undefined;
 let themeWatchFolders = undefined;

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

@@ -63,10 +63,8 @@ public void setUp() throws IOException {
         npmFolder = temporaryFolder.getRoot();
         frontendDirectory = new File(projectRoot, DEFAULT_FRONTEND_DIR);
 
-        File generated = new File(npmFolder, DEFAULT_GENERATED_DIR);
-        themeImportFile = new File(
-                new File(generated, APPLICATION_THEME_ROOT),
-                "theme-generated.js");
+        File generated = new File(frontendDirectory, "generated");
+        themeImportFile = new File(generated, "theme-generated.js");
 
         dummyThemeClass = Mockito.mock(AbstractTheme.class).getClass();
         customTheme = new ThemeDefinition(dummyThemeClass, CUSTOM_VARIANT_NAME,

flow-server/src/test/java/com/vaadin/flow/server/webcomponent/WebComponentGeneratorTest.java

@@ -181,7 +181,7 @@ public void providedJSModuleContainsCorrectThemeReplacements() {
         // make sure that the test works on windows machines:
         module = module.replace("\r", "");
         MatcherAssert.assertThat(module,
-                startsWith("import {applyTheme} from 'themes/theme-generated.js';\n\nclass Tag extends HTMLElement {"));
+                startsWith("import {applyTheme} from 'generated/theme-generated.js';\n\nclass Tag extends HTMLElement {"));
         MatcherAssert
             .assertThat(module, containsString("style.innerHTML = `\n" //
                 + "      :host {\n" //