chore: use .env config to define path to local web components (#7035)

.env.example

@@ -0,0 +1,5 @@
+# To run integration tests with a local version of web components:
+# 1. Clone and install web-components repository
+# 2. Uncomment LOCAL_WEB_COMPONENTS_PATH below
+# 3. Set path to your local repo (e.g. ../web-components or /Users/dev/vaadin/web-components)
+# LOCAL_WEB_COMPONENTS_PATH=../web-components

.gitignore

@@ -2,6 +2,7 @@ bin
 target
 integration-tests
 pom.xml.bak
+.env
 
 # Eclipse
 .project

shared/shared-vite-config.ts

@@ -1,17 +1,20 @@
-import { UserConfigFn, mergeConfig } from 'vite';
+import path from 'path';
+import { UserConfigFn, mergeConfig, loadEnv } from 'vite';
 import { useLocalWebComponents } from './web-components-vite-plugin';
 
 export const mergeConfigs = (...configs: UserConfigFn[]) => {
   return configs.reduce((acc, config) => mergeConfig(acc, config));
 };
 
-export const sharedConfig: UserConfigFn = (env) => ({
-  plugins: [
-    // Use local version of web-components, disabled by default.
-    // To use this, uncomment the lines below and change the path
-    // to your local web-components folder if needed (absolute or
-    // relative to this shared config).
-    // DO NOT COMMIT THESE CHANGES!
-    // useLocalWebComponents('../../web-components')
-  ]
-});
+export const sharedConfig: UserConfigFn = ({ mode }) => {
+  const env = loadEnv(mode, path.resolve(__dirname, '../'), '');
+
+  return {
+    plugins: [
+      // Use local web components:
+      // 1. Copy .env.example to .env
+      // 2. Set LOCAL_WEB_COMPONENTS_PATH to your repo
+      env.LOCAL_WEB_COMPONENTS_PATH && useLocalWebComponents(env.LOCAL_WEB_COMPONENTS_PATH)
+    ]
+  };
+};

shared/web-components-vite-plugin.ts

@@ -8,7 +8,7 @@ import { PluginOption } from 'vite';
  * @param webComponentsRepoPath
  */
 export function useLocalWebComponents(webComponentsRepoPath: string): PluginOption {
-  const nodeModulesPath = path.resolve(__dirname, `${webComponentsRepoPath}/node_modules`);
+  const nodeModulesPath = path.resolve(__dirname, '../', `${webComponentsRepoPath}/node_modules`);
 
   return {
     name: 'use-local-web-components',

vaadin-grid-flow-parent/vaadin-grid-flow-integration-tests/vite.config.ts

@@ -1,25 +1,12 @@
-// @ts-ignore Can not be resolved until project is run and NPM packages are installed
 // @ts-ignore can not be resolved until NPM packages are installed
-import { UserConfigFn } from 'vite';
-// @ts-ignore
+import { defineConfig, UserConfigFn } from 'vite';
 // @ts-ignore can not be resolved until Flow generates base Vite config
-import { overrideVaadinConfig } from './vite.generated';
-// import { useLocalWebComponents } from '../../shared/web-components-vite-plugin';
+import { vaadinConfig } from './vite.generated';
+import { sharedConfig, mergeConfigs } from '../../shared/shared-vite-config';
 
 const customConfig: UserConfigFn = (env) => ({
   // Here you can add custom Vite parameters
   // https://vitejs.dev/config/
-
-  // Use local version of web-components, disabled by default
-  // To use this un-comment the lines below and change the path to
-  // the absolute path of your web-components repo's node_modules
-  // folder
-  // DO NOT COMMIT THESE CHANGES!
-  /*
-  plugins: [
-    useLocalWebComponents('/path/to/web-components/node_modules')
-  ]
-   */
 });
 
-export default overrideVaadinConfig(customConfig);
+export default defineConfig((env) => mergeConfigs(vaadinConfig(env), sharedConfig(env), customConfig(env)));