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

Integracija pas2js prevajalnika, Web Form Designer in razvoj VSCode razširitev v Pascalu.

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

<note>Zahteva [[.:solution-manager|FPC Solution Manager]] (se samodejno namesti).</note>

===== Pregled =====

PAS2JS Studio razširi Solution Manager z orodji za razvoj s **pas2js** prevajalnikom (Pascal to JavaScript):

  * **Razvoj VSCode razširitev** — Na Pascalu temelječe razširitve prevajajte, testirajte, pakirajte
  * **Spletne aplikacije** — Brskalniške aplikacije s pas2js prevedite in živo testirajte
  * **Web Form Designer** — Vizualni WFM-urejevalnik za spletne obrazce
  * **Live Server** — Samodejni rebuild in predogled v brskalniku

===== Vrste projektov =====

==== VSCode Extension ====

Se samodejno prepozna, ko ''package.json'' vsebuje VSCode Extension Manifest (''engines.vscode'').

Projekt se v Solution Manager Tree View prikaže kot **virtualni projekt** — z vsemi Pascal-enotami, npm odvisnostmi in InnoSetup-skriptami.

==== Spletna aplikacija ====

pas2js spletne aplikacije se odkrijejo prek ''.wfm'' ali ''.wfmproj'' datotek.

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

==== Ukazi ====

| Ukaz | Opis |
^ Build Extension (Debug) | Prevedi z informacijami za razhroščevanje in Source Maps |
^ Build Extension (Release) | Optimiziran build (''-O2'') + esbuild minifikacija |
^ Rebuild Extension | Celotna ponovna gradnja |
^ Clean Extension | Brisanje build-artefaktov |
^ Watch & Build Extension | Samodejni rebuild ob spremembi datoteke |
^ Run Extension Tests | Zagon testov enot |
^ Minify Extension | Ločena esbuild-minifikacija |

==== Postavitev ====

| Ukaz | Opis |
^ Package VSIX | Pakiraj razširitev kot ''.vsix'' |
^ Install Extension | Namesti VSIX v VSCode |
^ Publish Extension | Objavi razširitev v Marketplace |

==== Build-Pipeline ====

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

  - **pas2js** prevede Pascal v JavaScript
  - **esbuild** združi npm-odvisnosti in minimizira (Release)
  - Rezultat: ena sama ''extension.js'' v ''dist/''

===== Spletne aplikacije =====

==== Ukazi ====

| Ukaz | Opis |
^ Build Web App (Debug) | Prevedi spletno aplikacijo (Debug) |
^ Build Web App (Release) | Prevedi spletno aplikacijo (Release) |
^ Watch & Preview Web App | Živ rebuild s predogledom v brskalniku |
^ Stop Watch Mode | Prekini watch-način |
^ Launch Browser Preview | Odpri brskalnik s predogledom URL |

==== Live Server ====

V watch-načinu se zažene lokalni HTTP-strežnik:

  * **Vrata**: nastavljiva prek ''fpc-pas2js.webApp.liveServerPort'' (privzeto: 8080)
  * **Samodejno odpiranje**: Brskalnik se samodejno odpre (''fpc-pas2js.webApp.autoOpenBrowser'')
  * **Samodejno nalaganje**: Stran se ob spremembah datotek samodejno osveži

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

WFM Designer se samodejno odpre za ''.wfm'' datoteke.

==== Ukazi ====

| Ukaz | Opis |
^ New Web Form | Ustvari nov spletni obrazec |
^ New Frame | Ustvari nov okvir |
^ Toggle Web Form / Code | Preklopi med designerjem in kodo |
^ Preview Web Form | Prikaži obrazec v brskalniku |
^ Toggle Designer View | Preklopi pogled designerja |

===== Debugging =====

==== Browser Debug ====

pas2js spletne aplikacije se lahko razhroščujejo v brskalniku:

  * **Vrsta razhroščevalnika**: ''pas2js-browser''
  * **Debug-vrata**: nastavljiva prek ''fpc-pas2js.debug.browserDebugPort'' (privzeto: 9222)

==== Source Maps ====

| Način | Opis |
^ ''external'' | Ločena ''.map'' datoteka (privzeto) |
^ ''inline'' | Source Map vgrajena v JS |
^ ''none'' | Brez Source Maps |

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

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

Test Explorer se integrira v VSCode Testing API in samodejno odkrije FPCUnit-teste.

==== Nastavitve ====

| Nastavitev | Opis | Privzeto |
^ ''test.enabled'' | Test Explorer aktiviran | ''true'' |
^ ''test.testDir'' | Imenik s testi (relativno glede na Workspace) | ''tests'' |
^ ''test.testPattern'' | Glob-vzorec za testne datoteke | ''*.test.pas'' |
^ ''test.timeout'' | Časovna omejitev v milisekundah | ''30000'' |

==== Struktura testov ====

Testi sledijo vzorcu FPCUnit:

<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>

==== Odkrivanje ====

  * Testne datoteke se iščejo v nastavljenem ''test.testDir'' po vzorcu ''test.testPattern''
  * Razredi, ki dedujejo od ''TTestCase'', se prepoznajo kot testne zbirke
  * ''published'' metode, ki se začnejo s ''Test'', se prepoznajo kot posamezni testi

==== Ukazi ====

  * **Run Tests** — Prevedi in zaženi vse teste
  * **Debug Tests** — Zaženi teste v razhroščevalniku (točke prekinitve v testni kodi so mogoče)

==== Rezultati testov ====

  * Rezultati se prikažejo v VSCode panelu **Testing** (stranska vrstica)
  * Neuspeli testi prikazujejo sporočilo o napaki in številko vrstice
  * Zelena = uspešno, rdeča = neuspešno, rumena = preskočeno

===== Nastavitve =====

Vse nastavitve se začnejo z ''fpc-pas2js.'':

==== Prevajalnik ====

^ Nastavitev ^ Opis ^ Privzeto ^
| ''pas2jsPath'' | Pot do ''pas2js'' prevajalnika | Samodejna zaznava |
| ''pas2jsRtlPath'' | Pot do pas2js RTL paketov | Samodejna zaznava |
| ''defaultUnitSearchPaths'' | Dodatne poti za iskanje enot | ''[]'' |
| ''defaultCompilerFlags'' | Dodatne zastavice prevajalnika (npr. ''-dMYDEFINE'') | — |

==== Extension Build ====

^ Nastavitev ^ Opis ^ Privzeto ^
| ''extBuild.autoOnSave'' | Samodejno prevedi ob shranjevanju | ''false'' |
| ''extBuild.minify'' | Minifikacija release-buildov | ''true'' |
| ''extBuild.logToFile'' | Zapiši build-dnevnik v datoteko | ''false'' |
| ''extBuild.installAfterBuild'' | Samodejna namestitev po buildu | ''false'' |
| ''defaultVsixOutputPath'' | Privzeta izhodna pot za VSIX | — |

==== Spletna aplikacija ====

^ Nastavitev ^ Opis ^ Privzeto ^
| ''webApp.liveServerPort'' | Vrata za Live-Server | ''8080'' |
| ''webApp.autoOpenBrowser'' | Samodejno odpri brskalnik | ''true'' |

===== Glej tudi =====

  * [[.:start|WvdS FPC Tools pregled]]
  * [[.:installation|Namestitev in nastavitev]]
  * [[.:solution-manager|FPC Solution Manager]]
  * [[.:iss-designer|FPC ISS Designer]]
  * [[.:faq|Pogosta vprašanja (FAQ)]]