Conditional File Generation Skill

Purpose

Determine which files, dependencies, and environment variables to include based on the application type (standalone vs micro-frontend).

When to Use

Execute this skill after configuration is loaded and before file generation (Step 6 in AGENT_INSTRUCTIONS.md).

Input Parameters

From configuration:

• application_type - Either "standalone" or "micro-frontend"
• is_standalone - Boolean derived from application_type
• is_microfrontend - Boolean derived from application_type
• enable_single_spa - Boolean flag for single-spa integration

Key Differences: Standalone vs Micro-Frontend

Instructions

Step 1: Auto-Correct Inconsistent Configuration

// Validate and auto-correct enable_single_spa for standalone apps
if (userConfig.is_standalone && userConfig.enable_single_spa) {
  console.warn('⚠️  Warning: Standalone apps typically do not use single-spa.');
  console.warn('   Auto-correcting: enable_single_spa = false\n');
  userConfig.enable_single_spa = false;
}

// Validate and ensure enable_single_spa is true for micro-frontends
if (userConfig.is_microfrontend && !userConfig.enable_single_spa) {
  console.warn('⚠️  Warning: Micro-frontend apps require single-spa.');
  console.warn('   Auto-correcting: enable_single_spa = true\n');
  userConfig.enable_single_spa = true;
}

Step 2: Determine Files to Generate

// Files that should ONLY be created for micro-frontend applications
const conditionalFiles = {
  '.env.standalone': userConfig.is_microfrontend
};

// Create a helper function
function shouldGenerateFile(filename) {
  if (filename in conditionalFiles) {
    return conditionalFiles[filename];
  }
  return true;  // Generate by default
}

Step 3: Determine Dependencies to Include

// Dependencies that should ONLY be included for micro-frontend applications
const conditionalDependencies = {
  'single-spa-vue': userConfig.is_microfrontend
};

// Create a helper function
function shouldIncludeDependency(dependencyName) {
  if (dependencyName in conditionalDependencies) {
    return conditionalDependencies[dependencyName];
  }
  return true;  // Include by default
}

Step 4: Determine Environment Variables to Include

// Environment variables that should ONLY be included for micro-frontend applications
const conditionalEnvVars = {
  'VITE_LAUNCHER_APP_URL': userConfig.is_microfrontend,
  'launcherAppUrl': userConfig.is_microfrontend  // For EnvConsts.ts
};

// Create a helper function
function shouldIncludeEnvVar(varName) {
  if (varName in conditionalEnvVars) {
    return conditionalEnvVars[varName];
  }
  return true;  // Include by default
}

Step 5: Select Appropriate Templates

// Determine which template to use for each file
const templates = {
  'main.ts': userConfig.is_microfrontend 
    ? 'main-microfrontend.ts' 
    : 'main-standalone.ts',
    
  'EnvConsts.ts': userConfig.is_microfrontend
    ? 'EnvConsts-microfrontend.ts'
    : 'EnvConsts-standalone.ts',
    
  'index.html': userConfig.is_microfrontend
    ? 'index-microfrontend.html'
    : 'index-standalone.html'
};

// Helper function
function getTemplate(filename) {
  return templates[filename] || filename;
}

Step 6: Configure Build Settings

// Set vite build format based on application type
userConfig.vite_build_format = userConfig.is_microfrontend ? 'system' : 'es';

// Set default router base based on application type
if (!userConfig.router_base_path) {
  userConfig.router_base_path = userConfig.is_microfrontend 
    ? `/${userConfig.application_name.replace('-web', '')}`
    : '/';
}

Step 7: Display Conditional Generation Summary

console.log('\n' + '─'.repeat(60));
console.log('  CONDITIONAL FILE GENERATION');
console.log('─'.repeat(60));
console.log(`Application Type:  ${userConfig.application_type}`);
console.log(`Build Format:      ${userConfig.vite_build_format}`);
console.log(`Single-SPA:        ${userConfig.enable_single_spa ? 'Enabled' : 'Disabled'}`);

if (userConfig.is_microfrontend) {
  console.log('\nMicro-Frontend Files:');
  console.log('  ✓ .env.standalone');
  console.log('  ✓ main.ts (single-spa lifecycle)');
  console.log('  ✓ EnvConsts.ts (with launcherAppUrl)');
  console.log('  ✓ Dependencies: single-spa-vue');
} else {
  console.log('\nStandalone App Files:');
  console.log('  ✗ .env.standalone (skipped)');
  console.log('  ✓ main.ts (simple mount)');
  console.log('  ✓ EnvConsts.ts (without launcherAppUrl)');
  console.log('  ✗ single-spa-vue (skipped)');
}

console.log('─'.repeat(60) + '\n');

Output

For Micro-Frontend Applications

Files Created:

• .env.standalone ✅
• main.ts (with single-spa lifecycle) ✅
• EnvConsts.ts (with launcherAppUrl) ✅
• index.html (with #single-spa-application:...) ✅

Dependencies Added:

• single-spa-vue ✅

Environment Variables:

• VITE_LAUNCHER_APP_URL ✅

Build Configuration:

• vite_build_format: "system"

For Standalone Applications

Files Created:

• .env.standalone ❌ (skipped)
• main.ts (simple mount) ✅
• EnvConsts.ts (without launcherAppUrl) ✅
• index.html (with #app) ✅

Dependencies Added:

• single-spa-vue ❌ (skipped)

Environment Variables:

• VITE_LAUNCHER_APP_URL ❌ (skipped)

Build Configuration:

• vite_build_format: "es"

Decision Flow Diagram

User sets application_type
    │
    ├─── "micro-frontend" ────┐
    │                         │
    │                         ▼
    │                   Create .env.standalone
    │                   Include single-spa-vue
    │                   Add VITE_LAUNCHER_APP_URL
    │                   Use main-microfrontend.ts
    │                   Export launcherAppUrl
    │                   Set enable_single_spa = true
    │                   Use #single-spa-application:... mount
    │                   Build format = "system"
    │
    └─── "standalone" ────────┐
                              │
                              ▼
                        Skip .env.standalone
                        Skip single-spa-vue
                        Skip VITE_LAUNCHER_APP_URL
                        Use main-standalone.ts
                        Skip launcherAppUrl
                        Set enable_single_spa = false
                        Use #app mount
                        Build format = "es"

Validation Rules

Auto-Correction Rules

1. Standalone + enable_single_spa = true

   • Auto-correct to enable_single_spa = false
   • Show warning to user

2. Micro-frontend + enable_single_spa = false

   • Auto-correct to enable_single_spa = true
   • Show warning to user

Consistency Checks

// Validate configuration consistency
function validateConditionalGeneration(config) {
  const issues = [];
  
  // Check 1: Standalone should not have single-spa
  if (config.is_standalone && config.enable_single_spa) {
    issues.push('Standalone apps should not use single-spa');
    config.enable_single_spa = false;  // Auto-fix
  }
  
  // Check 2: Micro-frontend requires single-spa
  if (config.is_microfrontend && !config.enable_single_spa) {
    issues.push('Micro-frontend apps require single-spa');
    config.enable_single_spa = true;  // Auto-fix
  }
  
  // Check 3: Build format matches app type
  if (config.is_microfrontend && config.vite_build_format !== 'system') {
    issues.push('Micro-frontend should use "system" build format');
    config.vite_build_format = 'system';  // Auto-fix
  }
  
  if (config.is_standalone && config.vite_build_format !== 'es') {
    issues.push('Standalone should use "es" build format');
    config.vite_build_format = 'es';  // Auto-fix
  }
  
  // Display issues and fixes
  if (issues.length > 0) {
    console.warn('\n⚠️  Configuration Auto-Corrections:');
    issues.forEach(issue => console.warn(`   - ${issue}`));
    console.warn('');
  }
  
  return config;
}

Integration with Skills

Affects env-standalone Skill

• Micro-frontend: Generate file
• Standalone: Skip file

Affects main-entry Skill

• Micro-frontend: Use template with single-spa lifecycle
• Standalone: Use template with simple mount

Affects env-constants Skill

• Micro-frontend: Include launcherAppUrl export
• Standalone: Exclude launcherAppUrl export

Affects index-html Skill

• Micro-frontend: Use #single-spa-application:{app-name} mount point
• Standalone: Use #app mount point

Affects package-json Skill

• Micro-frontend: Include single-spa-vue dependency
• Standalone: Exclude single-spa-vue dependency
• Micro-frontend: serve script = "npm-run-all --parallel build:watch dev lint:init:watch"
• Standalone: serve script = "vite serve --port {{default_port}} --mode standalone"

Affects vite-config Skill

• Micro-frontend: Set build.lib.formats = ['system']
• Standalone: Set build.lib.formats = ['es']

Related Skills

• configuration: Provides application_type and derived flags
• env-standalone: Conditionally generated file
• main-entry: Uses different templates
• env-constants: Uses different templates
• index-html: Uses different mount points
• package-json: Includes different dependencies
• vite-config: Uses different build formats

Testing Checklist

• Generate micro-frontend → Verify .env.standalone exists
• Generate standalone → Verify .env.standalone does NOT exist
• Check micro-frontend main.ts → Has single-spa lifecycle
• Check standalone main.ts → Simple createApp and mount
• Check micro-frontend EnvConsts.ts → Has launcherAppUrl
• Check standalone EnvConsts.ts → NO launcherAppUrl
• Check micro-frontend package.json → Has single-spa-vue
• Check standalone package.json → NO single-spa-vue
• Verify auto-correction when enable_single_spa conflicts with standalone
• Verify auto-correction when enable_single_spa missing for micro-frontend
• Check micro-frontend vite.config.ts → format: 'system'
• Check standalone vite.config.ts → format: 'es'