Project Generation

/**
 * Generator function for adding TypeScript support to Vue projects
 * Manages dependencies, renders templates, and integrates with other Vue CLI plugins
 * @param api - Generator API instance providing project modification methods
 * @param options - TypeScript configuration options from user prompts
 * @param rootOptions - Root project options including Vue version
 * @param invoking - Whether plugin is being invoked late (after initial project creation)
 */
function generator(
  api, 
  options: GeneratorOptions, 
  rootOptions?: RootOptions, 
  invoking?: boolean
): void;

interface GeneratorOptions {
  classComponent?: boolean;    // Use class-style component syntax
  useTsWithBabel?: boolean;    // Use Babel alongside TypeScript (affects target compilation)
  skipLibCheck?: boolean;      // Skip type checking of declaration files (default: true)
  convertJsToTs?: boolean;     // Convert all .js files to .ts
  allowJs?: boolean;           // Allow .js files to be compiled
}

interface RootOptions {
  vueVersion?: string;         // Vue major version ('2' or '3')
  [key: string]: any;          // Additional project options
}

// Applied automatically by Vue CLI during project setup
// Manual usage in a Vue CLI generator context:
const generator = require('@vue/cli-plugin-typescript/generator');

// Called by Vue CLI with user-selected options
generator(api, {
  classComponent: true,
  useTsWithBabel: false,
  skipLibCheck: true,
  convertJsToTs: true,
  allowJs: false
}, { vueVersion: '3' });

/**
 * Package dependency configuration automatically applied by generator
 * Adds TypeScript and related dependencies to package.json
 */

// Always added:
const baseDependencies = {
  devDependencies: {
    typescript: string // Version from plugin's package.json
  }
};

// Added when classComponent is true (Vue 2):
const vue2ClassDependencies = {
  dependencies: {
    'vue-class-component': string,     // From plugin's devDependencies
    'vue-property-decorator': string   // From plugin's devDependencies
  }
};

// Added when classComponent is true (Vue 3):
const vue3ClassDependencies = {
  dependencies: {
    'vue-class-component': '^8.0.0-0'
  }
};

/**
 * Template rendering configuration
 * Renders TypeScript project templates to the target directory
 */
const templateOptions = {
  skipLibCheck: boolean,        // From options.skipLibCheck
  hasMocha: boolean,           // api.hasPlugin('unit-mocha')
  hasJest: boolean,            // api.hasPlugin('unit-jest')  
  hasWebDriverIO: boolean      // api.hasPlugin('e2e-webdriverio')
};

// Vue 3 specific template rendering
if (rootOptions.vueVersion === '3') {
  // Renders additional Vue 3 templates
  // Removes unnecessary shims-tsx.d.ts for Vue 3
}

/**
 * Plugin integration when TypeScript is added to existing projects
 * Automatically configures TypeScript support for installed plugins
 */

// Unit testing integration
if (api.hasPlugin('unit-mocha')) {
  require('@vue/cli-plugin-unit-mocha/generator').applyTS(api);
}

if (api.hasPlugin('unit-jest')) {
  require('@vue/cli-plugin-unit-jest/generator').applyTS(api);
}

// Linting integration  
if (api.hasPlugin('eslint')) {
  require('@vue/cli-plugin-eslint/generator').applyTS(api);
}

// E2E testing integration
if (api.hasPlugin('e2e-webdriverio')) {
  require('@vue/cli-plugin-e2e-webdriverio/generator').applyTS(api);
}

/**
 * Template files rendered during project generation
 * Located in generator/template/ and generator/template-vue3/
 */

// TypeScript declaration files
const templateFiles = {
  'src/shims-vue.d.ts': 'Vue module declarations for TypeScript',
  'src/shims-tsx.d.ts': 'JSX/TSX support declarations (Vue 2 only)',
  'tsconfig.json': 'TypeScript compiler configuration'
};

// Vue 3 specific templates
const vue3Templates = {
  'src/shims-vue.d.ts': 'Vue 3 specific module declarations'
  // Note: shims-tsx.d.ts not needed in Vue 3
};

/**
 * Generator execution order configuration
 * Ensures TypeScript plugin runs after router plugin
 */
generator.after = '@vue/cli-plugin-router';

/**
 * Generated tsconfig.json template with conditional compilation options
 * Options are rendered based on generator configuration
 */
const tsconfigTemplate = {
  "compilerOptions": {
    "target": string,                    // "esnext" when useTsWithBabel: true, "es5" when false
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": boolean,            // true when useTsWithBabel: false
    "moduleResolution": "node",
    "experimentalDecorators": boolean,   // true when classComponent enabled
    "allowJs": boolean,                  // from allowJs option
    "skipLibCheck": boolean,             // from skipLibCheck option (default: true)
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      // Conditional test framework types:
      "mocha", "chai",                   // When unit-mocha plugin present
      "jest",                           // When unit-jest plugin present  
      "@wdio/mocha-framework",          // When e2e-webdriverio plugin present
      "expect-webdriverio",
      "webdriverio/sync"
    ],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": [
      "esnext",
      "dom", 
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx", 
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
};

// src/shims-vue.d.ts (Vue 2)
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

// src/shims-vue.d.ts (Vue 3)  
/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

// src/shims-tsx.d.ts (Vue 2 only)
import Vue, { VNode } from 'vue'

declare global {
  namespace JSX {
    interface Element extends VNode {}
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

/**
 * Vue version detection for template selection
 * @param rootOptions - Root project options
 * @returns boolean indicating if Vue 3 is being used
 */
const isVue3 = rootOptions && rootOptions.vueVersion === '3';