HTML Engine

/**
 * HTML generation engine for documentation websites
 * Uses singleton pattern - access via HtmlEngine.getInstance() or default export
 */
class HtmlEngine {
  // Private instance properties
  private cache: { page: string };
  private compiledPage: any;
  private precompiledMenu: any;
  
  /**
   * Get singleton instance of HtmlEngine
   * @returns HtmlEngine instance
   */
  static getInstance(): HtmlEngine;
  
  /**
   * Initialize HTML engine with templates
   * @param templatePath - Path to templates directory
   * @returns Promise resolving when initialization is complete
   */
  init(templatePath: string): Promise<void>;
  
  /**
   * Render a page to HTML using the configured templates
   * @param mainData - Main configuration data
   * @param page - Page data to render
   * @returns Rendered HTML string
   */
  render(mainData: any, page: any): string;
}

import HtmlEngine from "@compodoc/compodoc";
// or
// import { HtmlEngine } from "@compodoc/compodoc";
// const engine = HtmlEngine.getInstance();

// Using the default export (already an instance)
// Initialize with templates
await HtmlEngine.init("./templates");

// Render a page
const pageData = {
  name: "overview",
  context: "overview",
  data: { /* page content */ }
};

const html = HtmlEngine.render(Configuration.mainData, pageData);

interface TemplateContext {
  /**
   * Main configuration data
   */
  mainData: MainDataInterface;
  
  /**
   * Current page being rendered
   */
  page: PageInterface;
  
  /**
   * Navigation data
   */
  nav?: any;
  
  /**
   * Additional template variables
   */
  [key: string]: any;
}

type Theme = 
  | "gitbook"     // Default GitHub-like theme
  | "laravel"     // Laravel documentation style
  | "original"    // Original Compodoc style
  | "material"    // Material Design inspired
  | "postmark"    // Clean, minimal style
  | "readthedocs" // Read the Docs style
  | "stripe"      // Stripe-inspired design
  | "vagrant";    // Vagrant documentation style

// Note: Coverage badge generation is handled by the Application class, not HtmlEngine

interface CoverageBadgeData {
  /**
   * Coverage percentage (0-100)
   */
  count: number;
  
  /**
   * Coverage status based on percentage
   */
  status: "low" | "medium" | "good" | "very-good" | "uncovered";
}

interface TemplateHelpers {
  // String manipulation
  "break-comma": (input: string) => string;
  "short-url": (url: string) => string;
  "relative-url": (url: string, base: string) => string;
  "escape-simple-quote": (input: string) => string;
  "capitalize": (input: string) => string;
  "clean-paragraph": (input: string) => string;
  "break-lines": (input: string) => string;
  
  // Object utilities
  "object": (obj: any) => any;
  "object-length": (obj: any) => number;
  "has-own": (obj: any, prop: string) => boolean;
  
  // Logic helpers
  "or": (...args: any[]) => boolean;
  "or-length": (...args: any[]) => boolean;
  "if-string": (value: any, options: any) => string;
  "if-equal-string": (a: string, b: string, options: any) => string;
  "compare": (a: any, operator: string, b: any, options: any) => string;
  
  // Angular-specific
  "modif-kind-helper": (kind: string) => string;
  "modif-icon": (kind: string) => string;
  "link-type": (type: string) => string;
  "function-signature": (fn: any) => string;
  "indexable-signature": (signature: any) => string;
  
  // JSDoc helpers
  "jsdoc-returns-comment": (returns: any) => string;
  "jsdoc-params": (params: any[]) => string;
  "jsdoc-params-valid": (params: any[]) => boolean;
  "jsdoc-example": (example: any) => string;
  "jsdoc-default": (defaultValue: any) => string;
  
  // UI state helpers
  "is-tab-enabled": (tab: string, config: any) => boolean;
  "is-initial-tab": (tab: string, config: any) => boolean;
  "is-not-toggle": (item: string, config: any) => boolean;
  
  // Utility helpers
  "one-parameter-has": (params: any[], prop: string) => boolean;
  "filter-angular2-modules": (modules: any[]) => any[];
  "element-alone": (element: any) => boolean;
  "parse-property": (prop: any) => any;
  
  // Internationalization
  "i18n": (key: string) => string;
  
  // Debug
  "debug": (value: any) => void;
}

interface CustomTemplateStructure {
  // Main page templates
  "index.hbs": string;           // Home/overview page
  "modules.hbs": string;         // Modules listing
  "module.hbs": string;          // Individual module
  "components.hbs": string;      // Components listing
  "component.hbs": string;       // Individual component
  "directives.hbs": string;      // Directives listing
  "directive.hbs": string;       // Individual directive
  "injectables.hbs": string;     // Services listing
  "injectable.hbs": string;      // Individual service
  "guards.hbs": string;          // Guards listing
  "guard.hbs": string;           // Individual guard
  "pipes.hbs": string;           // Pipes listing
  "pipe.hbs": string;            // Individual pipe
  "classes.hbs": string;         // Classes listing
  "class.hbs": string;           // Individual class
  "interfaces.hbs": string;      // Interfaces listing
  "interface.hbs": string;       // Individual interface
  
  // Special pages
  "coverage.hbs": string;        // Coverage report
  "routes.hbs": string;          // Routes visualization
  "miscellaneous.hbs": string;   // Miscellaneous items
  
  // Partials
  "partials/": {
    "header.hbs": string;        // Page header
    "navigation.hbs": string;    // Side navigation
    "footer.hbs": string;        // Page footer
    "breadcrumb.hbs": string;    // Breadcrumb navigation
    "search.hbs": string;        // Search component
  };
}

// Using custom templates
await HtmlEngine.init("./my-custom-templates");

// Template context structure
const context = {
  mainData: Configuration.mainData,
  page: {
    name: "AppComponent",
    context: "component",
    component: {
      name: "AppComponent",
      selector: "app-root",
      templateUrl: "./app.component.html",
      // ... component data
    }
  }
};

const html = HtmlEngine.render(context.mainData, context.page);