====== FPC PAS2JS Studio ======

pas2js Compiler-Integration, Web Form Designer und VSCode Extension-Entwicklung in Pascal.

**Package-ID:** ''wvds.wvds-fpc-pas2js-studio''

<note>Setzt [[.:solution-manager|FPC Solution Manager]] voraus (wird automatisch mitinstalliert).</note>

===== Übersicht =====

PAS2JS Studio erweitert den Solution Manager um Werkzeuge für die Entwicklung mit dem **pas2js** Compiler (Pascal to JavaScript):

  * **VSCode Extension Entwicklung** — Pascal-basierte Extensions bauen, testen, paketieren
  * **Web-Anwendungen** — Browser-Apps mit pas2js kompilieren und live testen
  * **Web Form Designer** — Visueller WFM-Editor für Web-Formulare
  * **Live Server** — Automatischer Rebuild und Browser-Vorschau

===== Projekttypen =====

==== VSCode Extension ====

Wird automatisch erkannt wenn ''package.json'' ein VSCode Extension Manifest ist (''engines.vscode'' vorhanden).

Das Projekt erscheint als **virtuelles Projekt** im Solution Manager Tree View — mit allen Pascal-Units, npm Dependencies und InnoSetup-Skripten.

==== Web-Anwendung ====

pas2js Web-Apps werden über ''.wfm'' oder ''.wfmproj'' Dateien erkannt.

===== Extension Build =====

==== Kommandos ====

| Kommando | Beschreibung |
^ Build Extension (Debug) | Kompiliert mit Debug-Infos und Source Maps |
^ Build Extension (Release) | Optimierter Build (''-O2'') + esbuild Minification |
^ Rebuild Extension | Vollständiger Neubau |
^ Clean Extension | Build-Artefakte löschen |
^ Watch & Build Extension | Automatischer Rebuild bei Datei-Änderung |
^ Run Extension Tests | Unit-Tests ausführen |
^ Minify Extension | esbuild-Minification separat ausführen |

==== Deploy ====

| Kommando | Beschreibung |
^ Package VSIX | Extension als ''.vsix'' paketieren |
^ Install Extension | VSIX in VSCode installieren |
^ Publish Extension | Extension im Marketplace veröffentlichen |

==== Build-Pipeline ====

<code>
Pascal (.pas) → pas2js → extension.pas2js.js → esbuild → extension.js
</code>

  - **pas2js** kompiliert Pascal zu JavaScript
  - **esbuild** bundelt npm-Dependencies und minimiert (Release)
  - Ergebnis: einzelne ''extension.js'' in ''dist/''

==== Kontextmenü (Tree View) ====

Rechtsklick auf ein VSCode Extension-Projekt zeigt das **Extension Build** Submenü:

  * Build (Debug) / Build (Release) / Rebuild / Clean
  * Watch / Run Tests
  * Package VSIX / Install / Publish
  * Minify

==== Inline Buttons ====

Am Extension-Projekt im Tree View:
  * **Build** (Play-Icon) — Debug-Build
  * **Watch** (Eye-Icon) — Watch-Modus starten

===== Web-Anwendungen =====

==== Kommandos ====

| Kommando | Beschreibung |
^ Build Web App (Debug) | Web-App kompilieren (Debug) |
^ Build Web App (Release) | Web-App kompilieren (Release) |
^ Watch & Preview Web App | Live-Rebuild mit Browser-Vorschau |
^ Stop Watch Mode | Watch-Modus beenden |
^ Launch Browser Preview | Browser mit Preview-URL öffnen |

==== Live Server ====

Im Watch-Modus startet ein lokaler HTTP-Server:

  * **Port**: konfigurierbar über ''fpc-pas2js.webApp.liveServerPort'' (Standard: 8080)
  * **Auto-Open**: Browser öffnet automatisch (''fpc-pas2js.webApp.autoOpenBrowser'')
  * **Auto-Reload**: Seite wird bei Datei-Änderungen automatisch neu geladen

===== Web Form Designer =====

Der WFM Designer öffnet sich automatisch für ''.wfm'' Dateien.

==== Kommandos ====

| Kommando | Beschreibung |
^ New Web Form | Neues Web-Formular erstellen |
^ New Frame | Neuen Frame erstellen |
^ Toggle Web Form / Code | Zwischen Designer und Code wechseln |
^ Preview Web Form | Formular im Browser anzeigen |
^ Toggle Designer View | Designer-Ansicht umschalten |

==== Dateien ====

Ein Web-Formular besteht aus:

  * ''.pas'' — Pascal-Unit mit Formular-Logik
  * ''.wfm'' — Formular-Layout (ähnlich ''.lfm'' für LCL)

===== Debugging =====

==== Browser Debug ====

pas2js Web-Apps können im Browser debuggt werden:

  * **Debugger-Typ**: ''pas2js-browser''
  * **Debug-Port**: konfigurierbar über ''fpc-pas2js.debug.browserDebugPort'' (Standard: 9222)

==== Source Maps ====

| Modus | Beschreibung |
^ ''external'' | Separate ''.map'' Datei (Standard) |
^ ''inline'' | Source Map eingebettet in JS |
^ ''none'' | Keine Source Maps |

Konfiguration: ''fpc-pas2js.debug.sourceMapMode''

**Validate Source Maps**: Prüft ob Source Maps korrekt generiert wurden.

===== Code Formatter =====

PAS2JS Studio bringt eine eigene Formatter-Konfiguration mit:

| Setting | Beschreibung | Standard |
^ ''formatter.engine'' | ''ptop'', ''jcf'', oder ''none'' | ''ptop'' |
^ ''formatter.ptopPath'' | Pfad zu ''ptop'' | Auto-Erkennung |
^ ''formatter.jcfPath'' | Pfad zu ''jcf'' | Auto-Erkennung |
^ ''formatter.configPath'' | Konfigurationsdatei | — |
^ ''formatter.formatOnSave'' | Bei Speichern formatieren | ''false'' |

===== Test Explorer =====

Der Test Explorer integriert sich in die VSCode Testing-API und erkennt FPCUnit-Tests automatisch.

==== Konfiguration ====

| Setting | Beschreibung | Standard |
^ ''test.enabled'' | Test Explorer aktivieren | ''true'' |
^ ''test.testDir'' | Test-Verzeichnis (relativ zum Workspace) | ''tests'' |
^ ''test.testPattern'' | Glob-Pattern für Test-Dateien | ''*.test.pas'' |
^ ''test.timeout'' | Timeout in Millisekunden | ''30000'' |

==== Test-Struktur ====

Tests folgen dem FPCUnit-Muster:

<code pascal>
unit MyFeature.test;

interface

uses
  fpcunit, testregistry;

type
  TMyFeatureTest = class(TTestCase)
  published
    procedure Test_Add_ReturnsSum;
    procedure Test_Divide_ByZero_Raises;
  end;

implementation

procedure TMyFeatureTest.Test_Add_ReturnsSum;
begin
  AssertEquals(4, Add(2, 2));
end;

procedure TMyFeatureTest.Test_Divide_ByZero_Raises;
begin
  AssertException(EDivByZero, @DoDivideByZero);
end;

initialization
  RegisterTest(TMyFeatureTest);
end.
</code>

==== Discovery ====

  * Test-Dateien werden im konfigurierten ''test.testDir'' nach ''test.testPattern'' gesucht
  * Klassen die von ''TTestCase'' erben werden als Test-Suites erkannt
  * ''published'' Methoden die mit ''Test'' beginnen werden als einzelne Tests erkannt

==== Kommandos ====

  * **Run Tests** — Alle Tests kompilieren und ausführen
  * **Debug Tests** — Tests im Debugger ausführen (Breakpoints in Test-Code möglich)

==== Test-Ergebnisse ====

  * Ergebnisse erscheinen im VSCode **Testing** Panel (Seitenleiste)
  * Fehlerhafte Tests zeigen die Fehlermeldung und Zeilennummer
  * Grün = bestanden, Rot = fehlgeschlagen, Gelb = übersprungen

===== Language Server =====

Eigene pasls-Konfiguration:

  * ''fpc-pas2js.pasls.enabled'' — Language Server aktivieren
  * ''fpc-pas2js.paslsPath'' — Pfad zu ''pasls''
  * ''fpc-pas2js.lazarusSourcePath'' — Lazarus-Quellen für Referenzen

===== Einstellungen =====

Alle Einstellungen beginnen mit ''fpc-pas2js.'':

==== Compiler ====

^ Setting ^ Beschreibung ^ Standard ^
| ''pas2jsPath'' | Pfad zu ''pas2js'' Compiler | Auto-Erkennung |
| ''pas2jsRtlPath'' | Pfad zu pas2js RTL Packages | Auto-Erkennung |
| ''defaultUnitSearchPaths'' | Zusätzliche Unit-Suchpfade | ''[]'' |
| ''defaultCompilerFlags'' | Extra Compiler-Flags (z.B. ''-dMYDEFINE'') | — |

==== Extension Build ====

^ Setting ^ Beschreibung ^ Standard ^
| ''extBuild.autoOnSave'' | Automatisch bei Speichern kompilieren | ''false'' |
| ''extBuild.minify'' | Release-Builds minifizieren | ''true'' |
| ''extBuild.logToFile'' | Build-Log in Datei schreiben | ''false'' |
| ''extBuild.installAfterBuild'' | Nach Build automatisch installieren | ''false'' |
| ''defaultVsixOutputPath'' | Standard-Ausgabepfad für VSIX | — |

==== Web App ====

^ Setting ^ Beschreibung ^ Standard ^
| ''webApp.liveServerPort'' | Port für Live-Server | ''8080'' |
| ''webApp.autoOpenBrowser'' | Browser automatisch öffnen | ''true'' |

==== Debug ====

^ Setting ^ Beschreibung ^ Standard ^
| ''debug.sourceMapMode'' | Source Map Modus | ''external'' |
| ''debug.browserDebugPort'' | Browser Debug-Port | ''9222'' |

===== Syntax Highlighting =====

PAS2JS Studio registriert Pascal und WFM Sprachen:

  * **Pascal** (''.pas'', ''.pp'', ''.inc'') — TextMate Grammar
  * **WFM** (''.wfm'') — Web Form Markup

===== Siehe auch =====

  * [[.:start|WvdS FPC Tools Übersicht]]
  * [[.:installation|Installation und Konfiguration]]
  * [[.:solution-manager|FPC Solution Manager]]
  * [[.:iss-designer|FPC ISS Designer]]
  * [[.:faq|Häufige Fragen (FAQ)]]