Light Build Variants

/**
 * Light syntax highlighter component using highlight.js core
 */
const Light: SyntaxHighlighterComponent & {
  /** Register a language definition for highlighting */
  registerLanguage: (name: string, language: any) => void;
};

type SyntaxHighlighterComponent = React.ComponentType<SyntaxHighlighterProps>;

import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python';
import docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';

// Register languages before use
SyntaxHighlighter.registerLanguage('javascript', js);
SyntaxHighlighter.registerLanguage('python', python);

const LightExample = () => {
  const code = `function calculateSum(a, b) {
  return a + b;
}

console.log(calculateSum(5, 3));`;

  return (
    <SyntaxHighlighter language="javascript" style={docco}>
      {code}
    </SyntaxHighlighter>
  );
};

/**
 * Light syntax highlighter component using Prism.js core
 */
const PrismLight: SyntaxHighlighterComponent & {
  /** Register a language definition for highlighting */
  registerLanguage: (name: string, language: any) => void;
  /** Create language aliases for existing registered languages */
  alias: (name: string, aliases: string | string[]) => void;
};

import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';

// Register languages
SyntaxHighlighter.registerLanguage('jsx', jsx);
SyntaxHighlighter.registerLanguage('typescript', typescript);

const PrismLightExample = () => {
  const code = `interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "Alice",
  age: 30
};`;

  return (
    <SyntaxHighlighter language="typescript" style={prism}>
      {code}
    </SyntaxHighlighter>
  );
};

/**
 * Register a language definition for syntax highlighting
 * @param name - Language identifier (e.g., 'javascript', 'python')
 * @param language - Language definition module
 */
registerLanguage(name: string, language: any): void;

// Single language registration
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import javascript from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';

SyntaxHighlighter.registerLanguage('javascript', javascript);

// Multiple language registration
import cpp from 'react-syntax-highlighter/dist/esm/languages/hljs/cpp';
import java from 'react-syntax-highlighter/dist/esm/languages/hljs/java';
import rust from 'react-syntax-highlighter/dist/esm/languages/hljs/rust';

const languages = [
  ['cpp', cpp],
  ['java', java], 
  ['rust', rust]
];

languages.forEach(([name, lang]) => {
  SyntaxHighlighter.registerLanguage(name, lang);
});

// Dynamic registration
const registerLanguageIfNeeded = async (languageName) => {
  try {
    const language = await import(`react-syntax-highlighter/dist/esm/languages/hljs/${languageName}`);
    SyntaxHighlighter.registerLanguage(languageName, language.default);
  } catch (error) {
    console.warn(`Language ${languageName} not found`);
  }
};

// Compare bundle sizes:
// Full build: ~500KB (all languages included)
// Light build: ~50KB (core only, languages added as needed)

// Optimal pattern for known languages
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import javascript from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
import css from 'react-syntax-highlighter/dist/esm/languages/hljs/css';
import html from 'react-syntax-highlighter/dist/esm/languages/hljs/xml'; // xml is used for HTML

// Register only the languages you need
const SUPPORTED_LANGUAGES = {
  javascript,
  css,
  html
};

Object.entries(SUPPORTED_LANGUAGES).forEach(([name, lang]) => {
  SyntaxHighlighter.registerLanguage(name, lang);
});

// Usage remains the same
<SyntaxHighlighter language="javascript" style={docco}>
  {code}
</SyntaxHighlighter>

// Example: Adding cURL support with highlight.js plugin
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import curl from 'highlightjs-curl'; // External plugin

SyntaxHighlighter.registerLanguage('curl', curl);

const CurlExample = () => {
  const curlCode = `curl -X POST https://api.example.com/users \\
  -H "Content-Type: application/json" \\
  -d '{"name": "John", "email": "john@example.com"}'`;

  return (
    <SyntaxHighlighter language="curl" style={docco}>
      {curlCode}
    </SyntaxHighlighter>
  );
};

// Before (Full build - larger bundle)
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

// After (Light build - smaller bundle)
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import javascript from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
import docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';

// Register required languages
SyntaxHighlighter.registerLanguage('javascript', javascript);

// Component usage remains identical
const CodeBlock = ({ code, language }) => (
  <SyntaxHighlighter language={language} style={docco}>
    {code}
  </SyntaxHighlighter>
);

// Create a centralized language registry
const LanguageRegistry = {
  registered: new Set(),
  
  async register(languageName) {
    if (this.registered.has(languageName)) return;
    
    try {
      const language = await import(
        `react-syntax-highlighter/dist/esm/languages/hljs/${languageName}`
      );
      SyntaxHighlighter.registerLanguage(languageName, language.default);
      this.registered.add(languageName);
    } catch (error) {
      console.warn(`Failed to load language: ${languageName}`);
    }
  },
  
  isRegistered(languageName) {
    return this.registered.has(languageName);
  }
};

// Usage in components
const CodeBlock = async ({ language, children }) => {
  await LanguageRegistry.register(language);
  
  return (
    <SyntaxHighlighter language={language} style={docco}>
      {children}
    </SyntaxHighlighter>
  );
};

// Preload common languages at app startup
const COMMON_LANGUAGES = ['javascript', 'typescript', 'python', 'json'];

const preloadLanguages = async () => {
  const imports = COMMON_LANGUAGES.map(async (lang) => {
    const module = await import(`react-syntax-highlighter/dist/esm/languages/hljs/${lang}`);
    return [lang, module.default];
  });
  
  const languages = await Promise.all(imports);
  languages.forEach(([name, lang]) => {
    SyntaxHighlighter.registerLanguage(name, lang);
  });
};

// Call during app initialization
preloadLanguages();