SFC Integration

/**
 * i18n custom block processing in Vue SFCs
 * Supports inline locale definitions and external imports
 */
interface I18nCustomBlock {
  /**
   * Inline locale messages in various formats
   */
  inline: boolean;
  
  /**
   * Block language format
   */
  lang?: SFCLangFormat;
  
  /**
   * Scope for the i18n block
   */
  global?: boolean;
  
  /**
   * Locale identifier for the block
   */
  locale?: string;
  
  /**
   * External resource import
   */
  src?: string;
}

type SFCLangFormat = 'json' | 'json5' | 'yml' | 'yaml';

/**
 * Parse Vue SFC request with query parameters
 * @param id - Request identifier with query string
 * @returns Parsed filename and query object
 */
function parseVueRequest(id: string): {
  filename: string;
  query: VueQuery;
};

interface VueQuery {
  /** Whether this is a Vue file request */
  vue?: boolean;
  
  /** Whether this is a source file request */
  src?: boolean;
  
  /** Whether this block has global scope */
  global?: boolean;
  
  /** Type of SFC block */
  type?: 'script' | 'template' | 'style' | 'custom' | 'i18n';
  
  /** Custom block type name */
  blockType?: string;
  
  /** Block index within the SFC */
  index?: number;
  
  /** Locale identifier for the block */
  locale?: string;
  
  /** Language format of the block */
  lang?: string;
  
  /** Whether to return raw content */
  raw?: boolean;
  
  /** Path of the file that imported this resource */
  issuerPath?: string;
}

/**
 * Create SFC descriptor from source code
 * @param filename - Source file name
 * @param source - Vue SFC source code
 * @param options - Vue plugin options
 * @returns Parsed SFC descriptor and any errors
 */
function createDescriptor(
  filename: string,
  source: string,
  options: VuePluginResolvedOptions
): SFCParseResult;

/**
 * Get SFC descriptor, throwing on parse errors
 * @param filename - Source file name
 * @param code - Vue SFC source code
 * @param options - Vue plugin options
 * @returns Parsed SFC descriptor
 * @throws {Error} If parsing fails
 */
function getDescriptor(
  filename: string,
  code: string,
  options: VuePluginResolvedOptions
): SFCDescriptor;

interface SFCParseResult {
  descriptor: SFCDescriptor;
  errors: (CompilerError | SyntaxError)[];
}

/**
 * Extract Vue compiler from Vue plugin instance
 * @param vuePlugin - Vue plugin instance
 * @returns Vue SFC compiler
 */
function getVueCompiler(vuePlugin: RollupPlugin): typeof import('vue/compiler-sfc');

/**
 * Extract Vue plugin options
 * @param vuePlugin - Vue plugin instance
 * @returns Resolved Vue plugin options
 */
function getVuePluginOptions(vuePlugin: RollupPlugin): VuePluginResolvedOptions;

/**
 * Get SFC descriptor with error handling
 * @param filename - Source file name
 * @param code - Vue SFC source code  
 * @param options - Vue plugin options
 * @returns Parsed SFC descriptor
 * @throws {Error} If parsing fails
 */
function getDescriptor(
  filename: string,
  code: string,
  options: VuePluginResolvedOptions
): SFCDescriptor;

interface VuePluginResolvedOptions {
  isProduction: boolean;
  root: string;
  compiler: typeof import('vue/compiler-sfc');
  template?: Partial<SFCTemplateCompileOptions>;
}

/**
 * Configuration for SFC i18n block language handling
 */
interface SFCLanguageOptions {
  /**
   * Default language format for i18n blocks without lang attribute
   * @default 'json'
   */
  defaultSFCLang?: SFCLangFormat;
}

/**
 * Configuration for SFC i18n block scoping
 */
interface SFCScopingOptions {
  /**
   * Make all i18n blocks global scope by default
   * Overrides individual block scope attributes
   * @default false
   */
  globalSFCScope?: boolean;
}

/**
 * Custom transformation for i18n block content
 */
interface SFCTransformOptions {
  /**
   * Transform function for i18n block source
   * Called before block processing
   * @param src - Original i18n block source
   * @returns Transformed source string
   */
  transformI18nBlock?: (src: string | Buffer) => string;
}

<template>
  <div>
    <h1>{{ t('title') }}</h1>
    <p>{{ t('description') }}</p>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';

const { t } = useI18n({
  useScope: 'local'
});
</script>

<i18n>
{
  "en": {
    "title": "Welcome",
    "description": "This is a local component message"
  },
  "fr": {
    "title": "Bienvenue", 
    "description": "Ceci est un message de composant local"
  }
}
</i18n>

<template>
  <div>{{ t('message') }}</div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n({ useScope: 'local' });
</script>

<i18n lang="yaml">
en:
  message: Hello from YAML
  nested:
    key: Nested value
fr:
  message: Bonjour depuis YAML
  nested:
    key: Valeur imbriquée
</i18n>

<template>
  <div>{{ $t('global.message') }}</div>
</template>

<i18n global>
{
  "en": {
    "global": {
      "message": "This message is available globally"
    }
  },
  "fr": {
    "global": {
      "message": "Ce message est disponible globalement"
    }
  }
}
</i18n>

<template>
  <div>{{ t('imported.message') }}</div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n({ useScope: 'local' });
</script>

<!-- Import external i18n resource -->
<i18n src="./component-messages.json"></i18n>

<template>
  <div>
    <h1>{{ t('title') }}</h1>
    <nav>
      <a href="/">{{ $t('nav.home') }}</a>
      <a href="/about">{{ $t('nav.about') }}</a>
    </nav>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n({ useScope: 'local' });
</script>

<!-- Local messages for this component -->
<i18n>
{
  "en": { "title": "Component Title" },
  "fr": { "title": "Titre du Composant" }
}
</i18n>

<!-- Global navigation messages -->
<i18n global>
{
  "en": {
    "nav": {
      "home": "Home",
      "about": "About"
    }
  },
  "fr": {
    "nav": {
      "home": "Accueil", 
      "about": "À propos"
    }
  }
}
</i18n>

<template>
  <div>{{ t('message') }}</div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n({ useScope: 'local' });
</script>

<!-- English-only block -->
<i18n locale="en">
{
  "message": "English-specific message",
  "feature": "This feature is English-only"
}
</i18n>

<!-- French-only block -->
<i18n locale="fr" lang="yaml">
message: Message spécifique au français
feature: Cette fonctionnalité est réservée au français
</i18n>

// Plugin configuration with custom transformation
VueI18nPlugin({
  transformI18nBlock: (source) => {
    // Transform array of message keys to full message objects
    if (source.trim().startsWith('[')) {
      const keys = JSON.parse(source);
      const messages = {};
      
      keys.forEach(key => {
        messages.en = messages.en || {};
        messages.fr = messages.fr || {};
        messages.en[key] = `English: ${key}`;
        messages.fr[key] = `Français: ${key}`;
      });
      
      return JSON.stringify(messages);
    }
    return source;
  }
});

<!-- Before transformation -->
<i18n>
[
  "welcome",
  "goodbye",
  "thank-you"
]
</i18n>

<!-- After transformation (automatic) -->
<i18n>
{
  "en": {
    "welcome": "English: welcome",
    "goodbye": "English: goodbye", 
    "thank-you": "English: thank-you"
  },
  "fr": {
    "welcome": "Français: welcome",
    "goodbye": "Français: goodbye",
    "thank-you": "Français: thank-you"
  }
}
</i18n>

VueI18nPlugin({
  defaultSFCLang: 'yaml',
  globalSFCScope: false
});

VueI18nPlugin({
  defaultSFCLang: 'json5',
  globalSFCScope: true,
  transformI18nBlock: (src) => {
    // Custom preprocessing logic
    return preprocessI18nBlock(src);
  }
});

const isDev = process.env.NODE_ENV === 'development';

VueI18nPlugin({
  defaultSFCLang: isDev ? 'yaml' : 'json',
  globalSFCScope: false,
  strictMessage: !isDev,
  escapeHtml: !isDev
});