api/web/nuxt.config.ts

import path from 'path';

import removeConsole from 'vite-plugin-remove-console';

import type { UserConfig, PluginOption } from 'vite';

/**
 * Used to avoid redeclaring variables in the webgui codebase.
 * @see alt solution https://github.com/terser/terser/issues/1001, https://github.com/terser/terser/pull/1038
 */
function terserReservations(inputStr: string) {
  const combinations = ['ace'];

  // Add 1-character combinations
  for (let i = 0; i < inputStr.length; i++) {
    combinations.push(inputStr[i]);
  }

  // Add 2-character combinations
  for (let i = 0; i < inputStr.length; i++) {
    for (let j = 0; j < inputStr.length; j++) {
      combinations.push(inputStr[i] + inputStr[j]);
    }
  }

  return combinations;
}

const charsToReserve = '_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

const dropConsole = process.env.VITE_ALLOW_CONSOLE_LOGS !== 'true';
console.log(dropConsole ? 'WARN: Console logs are disabled' : 'INFO: Console logs are enabled');

const assetsDir = path.join(__dirname, '../api/dev/webGui/');

/**
 * Shared terser options for consistent minification
 */
const sharedTerserOptions = {
  mangle: {
    reserved: terserReservations(charsToReserve),
    toplevel: true,
  },
};

/**
 * Shared plugins configuration
 */
const getSharedPlugins = (includeJQueryIsolation = false) => {
  const plugins: PluginOption[] = [];
  
  // Remove console logs in production
  if (dropConsole) {
    plugins.push(
      removeConsole({
        includes: ['log', 'info', 'debug'],
      })
    );
  }
  
  // Add jQuery isolation plugin for custom elements
  if (includeJQueryIsolation) {
    plugins.push({
      name: 'jquery-isolation',
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      generateBundle(options: any, bundle: any) {
        // Find the main JS file
        const jsFile = Object.keys(bundle).find(key => key.endsWith('.js'));
        if (jsFile && bundle[jsFile] && 'code' in bundle[jsFile]) {
          const originalCode = bundle[jsFile].code;
          // Wrap the entire bundle to preserve and restore jQuery
          bundle[jsFile].code = `
(function() {
  // Preserve the original jQuery $ if it exists
  var originalJQuery = (typeof window !== 'undefined' && typeof window.$ !== 'undefined') ? window.$ : undefined;
  
  // Temporarily clear $ to avoid conflicts
  if (typeof window !== 'undefined' && typeof window.$ !== 'undefined') {
    window.$ = undefined;
  }
  
  // Execute the web component code
  ${originalCode}
  
  // Restore jQuery $ if it was originally defined
  if (originalJQuery !== undefined && typeof window !== 'undefined') {
    window.$ = originalJQuery;
  }
})();
`;
        }
      }
    });
  }

  return plugins.filter(Boolean);
};

/**
 * Shared define configuration
 */
const sharedDefine = {
  'globalThis.__DEV__': process.env.NODE_ENV === 'development',
  __VUE_PROD_DEVTOOLS__: false,
};

/**
 * Apply shared Vite configuration to a config object
 */
const applySharedViteConfig = (config: UserConfig, includeJQueryIsolation = false) => {
  if (!config.plugins) config.plugins = [];
  if (!config.define) config.define = {};
  if (!config.build) config.build = {};
  
  // Add shared plugins
  config.plugins.push(...getSharedPlugins(includeJQueryIsolation));
  
  // Merge define values
  Object.assign(config.define, sharedDefine);
  
  // Apply build configuration
  config.build.minify = 'terser';
  config.build.terserOptions = sharedTerserOptions;
  
  return config;
};

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  nitro: {
    publicAssets: [
      {
        baseURL: '/webGui/',
        dir: assetsDir,
      },
    ],
  },
  devServer: {
    port: 4321,
  },

  devtools: {
    enabled: process.env.NODE_ENV === 'development',
  },

  modules: [
    '@vueuse/nuxt',
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss',
    'nuxt-custom-elements',
    '@nuxt/eslint',
  ],

  // Disable auto-imports
  imports: {
    autoImport: false,
  },

  // Properly handle ES modules in testing and build environments
  build: {
    transpile: [/node_modules\/.*\.mjs$/],
  },

  ignore: ['/webGui/images'],

  // Disable component auto-imports
  components: false,

  vite: {
    plugins: getSharedPlugins(),
    define: sharedDefine,
    build: {
      minify: 'terser',
      terserOptions: sharedTerserOptions,
    },
  },
  
  customElements: {
    analyzer: process.env.NODE_ENV !== 'test',
    entries: [
      // @ts-expect-error The nuxt-custom-elements module types don't perfectly match our configuration object structure.
      // The custom elements configuration requires specific properties and methods that may not align with the 
      // module's TypeScript definitions, particularly around the viteExtend function and tag configuration format.
      {
        name: 'UnraidComponents',
        viteExtend(config: UserConfig) {
          return applySharedViteConfig(config, true);
        },
        tags: [

          {
            async: false,
            name: 'UnraidAuth',
            path: '@/components/Auth.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidConnectSettings',
            path: '@/components/ConnectSettings/ConnectSettings.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidDownloadApiLogs',
            path: '@/components/DownloadApiLogs.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidHeaderOsVersion',
            path: '@/components/HeaderOsVersion.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidModals',
            path: '@/components/Modals.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidUserProfile',
            path: '@/components/UserProfile.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidUpdateOs',
            path: '@/components/UpdateOs.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidDowngradeOs',
            path: '@/components/DowngradeOs.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidRegistration',
            path: '@/components/Registration.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidWanIpCheck',
            path: '@/components/WanIpCheck.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidWelcomeModal',
            path: '@/components/Activation/WelcomeModal.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidSsoButton',
            path: '@/components/SsoButton.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidLogViewer',
            path: '@/components/Logs/LogViewer.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidThemeSwitcher',
            path: '@/components/ThemeSwitcher.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
          {
            async: false,
            name: 'UnraidApiKeyManager',
            path: '@/components/ApiKeyPage.ce',
            appContext: '@/components/Wrapper/web-component-plugins',
          },
        ],
      },
    ],
  },

  compatibilityDate: '2024-12-05',

  ssr: false,
});