Native TSX Component Support

[JosunLP]

🚀 Feature Request: Native TSX Component Support

Summary

Implementierung einer vollständigen, nativen Unterstützung für TSX-Komponenten im BrowserExtensionTemplate, um React-basierte UI-Komponenten zu ermöglichen.

Current Situation

Das BrowserExtensionTemplate bietet derzeit:

• ✅ TypeScript-Unterstützung
• ✅ SASS/SCSS-Styling
• ✅ Vite-basiertes Build-System
• ✅ Component-System mit TypeScript-Klassen

Fehlt: Native Unterstützung für TSX/JSX und React-Komponenten

Proposed Feature

Integration einer vollständigen TSX-Unterstützung mit folgenden Komponenten:

1. React Integration

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "@vitejs/plugin-react": "^4.0.0"
  }
}

2. TypeScript Configuration Update

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    // ... existing config
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"  // TSX-Dateien einschließen
  ]
}

3. Vite Configuration Enhancement

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react(), // React Plugin hinzufügen
    // ... existing plugins
  ],
  // ... existing config
});

4. Component Structure Update

src/
├── components/
│   ├── Button.tsx          // React TSX Komponenten
│   ├── Modal.tsx
│   └── legacy/
│       └── button.ts       // Bestehende TS-Klassen (Backwards Compatibility)
├── pages/
│   ├── popup/
│   │   ├── App.tsx        // React App-Komponente
│   │   └── index.tsx      // React Entry Point
│   └── options/
│       ├── App.tsx
│       └── index.tsx

5. Example TSX Components

// src/components/Button.tsx
import React from 'react';

interface ButtonProps {
  variant: 'primary' | 'secondary';
  children: React.ReactNode;
  onClick?: () => void;
  className?: string;
}

export const Button: React.FC<ButtonProps> = ({ 
  variant, 
  children, 
  onClick, 
  className 
}) => {
  return (
    <button 
      className={`btn btn-${variant} ${className || ''}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

Benefits

1. Modern React Development: Ermöglicht die Nutzung von React Hooks, JSX-Syntax und modernen React-Patterns
2. Bessere Developer Experience: Hot Module Replacement für React-Komponenten
3. Größere Community: Zugang zum React-Ökosystem und dessen Libraries
4. Backwards Compatibility: Bestehende TypeScript-Klassen bleiben funktionsfähig
5. Performance: React's optimierte Rendering-Engine für komplexere UIs

Implementation Details

• React und React-DOM Dependencies hinzufügen
• Vite React Plugin konfigurieren
• TypeScript für JSX konfigurieren
• Example TSX-Komponenten erstellen
• Documentation für TSX-Entwicklung
• Migration Guide von bestehenden TS-Klassen zu TSX
• ESLint Rules für React/TSX

Breaking Changes

Keine - Das Feature soll als additive Erweiterung implementiert werden:

• Bestehende TypeScript-Klassen-Komponenten bleiben funktionsfähig
• Neue Projekte können zwischen TS-Klassen oder TSX-Komponenten wählen
• Graduelle Migration möglich

Use Cases

1. Popup Interface: React-basierte Popup-UIs mit State-Management
2. Options Page: Komplexe Einstellungsseiten mit Forms und Validierung
3. Content Scripts: React-Komponenten die in Webseiten injiziert werden
4. Background Script Integration: React DevTools für besseres Debugging

Alternative Solutions Considered

1. Nur JSX ohne React: Würde TypeScript-JSX nutzen, aber ohne React-Ökosystem
2. Vue.js Integration: Alternative Framework-Option
3. Svelte Integration: Leichtgewichtige Alternative

Warum React: Größte Community, beste TypeScript-Integration, umfangreiches Ökosystem

Additional Context

Dieses Feature würde das BrowserExtensionTemplate auf das Level anderer populärer Extension-Templates bringen (siehe vite-web-extension, template-react-browser-extension) und dabei die bestehenden Stärken beibehalten.

---

Priority: Medium-High
Effort: Medium (geschätzt 2-3 Tage Entwicklungszeit)
Impact: High (signifikante Verbesserung der Developer Experience)