fix(frontend): rename env utils and expose frontend_dev_ settings via env plugin

eslint.config.cjs

@@ -14,13 +14,9 @@ const grafanaConfig = require('@grafana/eslint-config/flat');
 const grafanaPlugin = require('@grafana/eslint-plugin');
 
 const bettererConfig = require('./.betterer.eslint.config.cjs');
-const getEnvConfig = require('./scripts/webpack/env-util.cjs');
+const { getEnvConfig } = require('./scripts/webpack/env-util');
 
-/**
- * @type {Record<string, unknown>}
- */
-const envConfig = getEnvConfig();
-const enableBettererRules = envConfig.frontend_dev_betterer_eslint_rules;
+const { frontend_dev_betterer_eslint_rules: enableBettererRules } = getEnvConfig();
 
 /**
  * @type {Array<import('eslint').Linter.Config>}

public/test/setupTests.ts

@@ -7,11 +7,11 @@ import i18next from 'i18next';
 import failOnConsole from 'jest-fail-on-console';
 import { initReactI18next } from 'react-i18next';
 
-import getEnvConfig from '../../scripts/webpack/env-util.cjs';
+import { getEnvConfig } from '../../scripts/webpack/env-util.js';
 
 import { matchers } from './matchers';
 
-const config = getEnvConfig() as Record<string, string | boolean>;
+const config = getEnvConfig();
 
 if (config.frontend_dev_fail_tests_on_console || process.env.CI) {
   failOnConsole({

scripts/webpack/env-util.ts

@@ -1,9 +1,8 @@
-// @ts-check
-const { parse } = require('ini');
-const { readFileSync, existsSync } = require('node:fs');
-const path = require('path');
+import { parse } from 'ini';
+import { readFileSync, existsSync } from 'node:fs';
+import path from 'path';
 
-const getEnvConfig = () => {
+export const getEnvConfig = () => {
   const grafanaRoot = path.join(__dirname, '../..');
   const defaultSettings = readFileSync(`${grafanaRoot}/conf/defaults.ini`, {
     encoding: 'utf-8',
@@ -22,8 +21,7 @@ const getEnvConfig = () => {
 
   // Take all frontend keys from the ini file and prefix with `frontend_dev_`,
   // so they can be added to `process.env` elsewhere
-  /** @type {Record<string, unknown>} */
-  const env = {};
+  const env: Record<string, unknown> = {};
 
   for (const [key, value] of Object.entries(merged)) {
     env[`frontend_dev_${key}`] = value;
@@ -31,5 +29,3 @@ const getEnvConfig = () => {
 
   return env;
 };
-
-module.exports = getEnvConfig;

vite.config.ts

@@ -8,11 +8,15 @@ import { visualizer } from 'rollup-plugin-visualizer';
 import { defineConfig, splitVendorChunkPlugin, createLogger } from 'vite';
 import EnvironmentPlugin from 'vite-plugin-environment';
 
+import { getEnvConfig } from './scripts/webpack/env-util.js';
+
 const require = createRequire(import.meta.url);
 const shouldMinify = process.env.NO_MINIFY === '1' ? false : 'esbuild';
 
 const allWorkspaceDependencies = getAllWorkspaceDependencies();
 
+const frontendDevEnvSettings = getEnvConfig();
+
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => ({
   json: {
@@ -50,6 +54,8 @@ export default defineConfig(({ command }) => ({
     EnvironmentPlugin({
       // these are default values in case NODE_ENV is not set in the environment
       NODE_ENV: command === 'build' ? 'production' : 'development',
+      // Expose frontend_dev_* settings from ini files
+      ...frontendDevEnvSettings,
     }),
     { ...moveAssets(), apply: 'build' },
     { ...visualizer(), apply: 'build' },