Master's Thesis

Generating Blazor Wrappers from TypeScript Definitions for JavaScript Library Integration

Final Thesis 797.76 kB

Author of thesis: Ing. Oliver Moncz

Acad. year: 2025/2026

Supervisor: Ing. Jan Pluskal, Ph.D.

Reviewer: Ing. Libor Polčák, Ph.D.

Abstract:

This thesis investigates automated generation of strongly-typed C# wrappers for JavaScript libraries in the Blazor framework, using the Leaflet mapping library as the main case study. The proposed solution uses TypeScript declaration files as the primary source of type information and employs a source generator to produce type-safe, idiomatic C# APIs.

Keywords:

Blazor, generation, source code, Leaflet, TypeScript, TS, C#, wrapper, JavaScript, JS

Date of defence

23.06.2026

Result of the defence

Defended (thesis was successfully defended)

znamkaDznamka

Grading

D

Process of defence

Student nejprve prezentoval výsledky, kterých dosáhl v rámci své práce. Komise se poté seznámila s hodnocením vedoucího a posudkem oponenta práce. Student následně odpověděl na otázky oponenta a na další otázky přítomných. Komise se na základě posudku oponenta, hodnocení vedoucího, přednesené prezentace a odpovědí studenta na položené otázky rozhodla práci hodnotit stupněm D.

Topics for thesis defence

  1. Je vám známo, zda váš nástroj někdo skutečně používá, nebo se jej chystá využít?
  2. Uveďte vhodné příklady vstupního a výstupního kódu.
  3. Charakterizujte sadu praktických příkladů poptávanou v bodě 4 zadání a využitou v bodě 5 zadání.
  4. Můžete se vyjádřit k posudku vedoucího a oponenta z hlediska použití nástrojů umělé inteligence? Jak jste tyto nástroje použil?
  5. Je nástroj zveřejněn?

Language of thesis

English

Faculty

Department

Study programme

Information Technology and Artificial Intelligence (MITAI)

Specialization

Application Development (NADE)

Composition of Committee

prof. RNDr. Alexandr Meduna, CSc. (předseda)
doc. RNDr. Jitka Kreslíková, CSc. (místopředseda)
Ing. Vladimír Bartík, Ph.D. (člen)
Ing. Jiří Hynek, Ph.D. (člen)
Ing. Jan Pluskal, Ph.D. (člen)
Ing. Marta Jaroš, Ph.D. (člen)

Supervisor’s report
Ing. Jan Pluskal, Ph.D.

Student předložil rozsáhlou implementaci, která po obsahové stránce pokrývá všechny body zadání: třístupňovou generátorovou pipeline (ANTLR4, sémantická normalizace, Roslyn IIncrementalGenerator), runtime vrstvu nad Blazor JS interopem s pětikrokovým disposal protokolem, dva pluginové balíčky (Leaflet.markercluster, Leaflet.heat), dvě demonstrační aplikace (Blazor Server a WebAssembly) a vrstvenou testovací sadu o 229 testech doplněnou o BenchmarkDotNet a Playwright. Naměřené pokrytí (84 ze 103 deklarací automaticky, cca 320 řádků manuální vrstvy proti 3 160 řádkům vstupního .d.ts) i lokalita inkrementální cache (102 ze 103 deklarací bez přepočítání při úpravě jednoho členu) potvrzují, že implementační jádro funguje.


Naproti tomu kvalita procesu, ve kterém práce vznikala, je hluboko pod standardem diplomové práce. Aktivita v zimním semestru byla vlažná, v letním semestru nebyla zaznamenána, finální podoba práce nebyla konzultována, výkonnostní cíl pro inkrementální překlad zůstal nesplněn s pětinásobným překročením. Typografická a stylistická úroveň textu, zejména rozšířeného abstraktu, je poznamenána anglicismy ponechanými v českém textu („wrapper", „skip list", „caching", „pipeline" a podobně), nekonzistentním sázením a celkově silně formulačním rejstříkem indikujícím rozsáhlé použití generativních jazykových nástrojů nad rámec deklarované korektury pravopisu.


S ohledem na to, že implementační výstup existuje a v rámci svých omezení plní deklarované funkce, ale proces řešení i kvalita doprovodného textu zaostávají za nároky kladenými na diplomovou práci, navrhuji práci hodnotit stupněm D jako uspokojivou.

Evaluation criteria Verbal classification
Informace k zadání

Cílem práce bylo navrhnout a implementovat framework pro automatizované generování typově bezpečných C# adaptérů (wrapperů) pro JavaScriptové knihovny ve frameworku Blazor s využitím TypeScript deklaračních souborů (.d.ts) jako zdroje pravdy. Jako reprezentativní případová studie byla zvolena mapová knihovna Leaflet. Zadání vychází z aktuální praxe v ekosystému .NET, kde téma stojí na pomezí kompilátorových technik (Roslyn Source Generators, ANTLR4), návrhu knihovny a webového vývoje v Blazoru.

Zadání hodnotím jako průměrně obtížné. Vyžadovalo nastudování několika technologických vrstev (Blazor hosting modely, JS interop, inkrementální generátory v Roslynu, syntaktická analýza TypeScriptu) a jejich propojení do jednoho funkčního celku. Implementační záběr je široký, ale jednotlivé technologie jsou dobře dokumentované a v komunitě existuje řada referenčních řešení, ze kterých bylo možné vycházet.

Aktivita při dokončování

Finální podoba práce nebyla se mnou jako vedoucím konzultována. Odevzdání textu i implementace v termínu bylo, vzhledem k absenci aktivity v letním semestru, spíše překvapivé. Neměl jsem prostor předem zkontrolovat ani rozsah implementace, ani kvalitu doprovodného textu, ani provést smysluplné srovnání s průběžně dohodnutými cíli. Drobné nedostatky, na které bych v běžném režimu konzultací upozornil před odevzdáním (anglicismy v rozšířeném abstraktu, nesplněný kontraktový výkonnostní cíl, nedeklarovaná vrstva typografických detailů), se tak v odevzdané verzi nepodařilo odstranit.

Práce v deklaraci uvádí použití nástroje ChatGPT pro opravu pravopisu a jazyka. Charakter odevzdaného textu, zejména rozšířený abstrakt a reflektivní pasáže typu sekce 4.1, vykazuje natolik výrazné rysy automaticky generovaného akademického stylu (silně formulační hedging, nadužívání obratů typu „first-class“, „deliberately“, „load-bearing“, „is the difference between“, sklon k retrospektivní racionalizaci návrhových rozhodnutí), že rozsah skutečného použití generativních nástrojů pravděpodobně přesahuje deklarované korektury pravopisu. Tuto skutečnost jsem nemohl ověřit konzultacemi nad rozpracovaným textem, protože ke konzultacím v této fázi nedošlo.

Publikační činnost, ocenění

Není.

Práce s literaturou

Práce obsahuje 40 bibliografických položek. Z hlediska skladby zdrojů je rozložení nevyvážené, prameny tvoří převážně online dokumentace (Microsoft Learn, GitHub, blogové příspěvky andrewlock.net, roxeem.com, codyanhorn.tech). Klasické knižní publikace jsou zastoupeny jen okrajově (Aponte, Himschoot, Litvinavicius, Parr). Vzhledem k povaze práce zaměřené na aktuální verze frameworků (Blazor, .NET 11 Preview) je převaha online zdrojů částečně pochopitelná, ale i tak bych očekával hlubší zázemí v odborné literatuře k tématům jako compiler construction, parser theory nebo principy návrhu DSL. Citační etika je dodržena, převzaté myšlenky jsou označeny, nicméně řada citací odkazuje na sekundární zdroje (blogposty) tam, kde existují primární (specifikace, Microsoft RFC, dokumentace API).

Aktivita během řešení, konzultace, komunikace

Aktivita studenta v průběhu řešení byla nedostatečná a tvoří hlavní výhradu k procesu vypracování. V zimním semestru, ve kterém měla proběhnout analýza zadání, návrh architektury a obhajoba semestrálního projektu, byla aktivita pouze vlažná a sestávala z nepravidelných krátkých konzultací bez kontinuální vazby na rozpracovaný stav. V letním semestru, do něhož mělo být soustředěno těžiště implementace, měření a sepsání textu, jsem ze strany studenta nezaznamenal žádnou konzultaci ani průběžnou zprávu o stavu prací. Po většinu závěrečné fáze řešení jsem neměl k dispozici žádný vhled do skutečné rozpracovanosti práce.

Points proposed by supervisor: 60

Grade proposed by supervisor: D

Reviewer’s report
Ing. Libor Polčák, Ph.D.

Pan Moncz odevzdal řešení, které je podle mého názoru do značné míry vytvořené pomocí nástrojů AI/LLM aniž by takové použití student deklaroval. To by mohlo být považováno za plagiát. Pokud o plagiát nejde, pak se zdá, že zadání bylo principiálně splněno. V práci mně však chybí vysvětlení, jak konkrétně generátor vytváří kód pro konkrétní vstupy a do jaké míry podporuje možnosti jazyka TypeScript.

Evaluation criteria Verbal classification Points
Rozsah splnění požadavků zadání

Evaluation level: zadání splněno s drobnými výhradami

Fakticky je zadání splněno, ale v bodě 4 je vyžadováno vytvoření sady praktických příkladů, která se pak v bodě 5 využívá. Vzniklo jich jen několik, čekal jsem větší počet.

Rozsah technické zprávy

Evaluation level: je v obvyklém rozmezí

Prezentační úroveň technické zprávy

Technická zpráva má dobrou logickou strukturu a jednotlivé části na sebe navazují. Uvedené texty, pokud mohu posoudit, jsou fakticky správně. Nicméně v průběhu čtení celé práce jsem měl pocit, že je text plytký a že byl ve skutečnosti vygenerován strojem.

Nástrojem www.pangram.com jsem zkoumal, namátkově klíčové části práce, které by měly být hlavním přínosem studenta. Z části návrh jsem vybral strany 37-39 a nástroj tento text celý vyhodnotil jako vytvořený pomocí AI s vysokým stupněm spolehlivosti. Kapitolu 7 (Results and Evaluation) pak vyhodnotil z 87% jako vytvořenou pomocí AI s vysokým stupněm spolehlivosti, zbytek byl napsán člověkem. Student však deklaroval využití AI pouze pro opravu gramatiky.

Očekával jsem, že v textové části práce naleznu ukázky vstupů a vygenerovaných výstupů. To jsem nenašel. Je tedy těžké zjistit, do jaké míry práce pokrývá možnosti jazyka TypeScript a co chybí. K tomu nepřispívá ani organizace testovací části: z tab. 7.1 a okolního textu vyplývá, že 19 datových typů student popsal ručně (320 řádků), ale není jasné, zda to bylo nutné (generátor si s danými typy neporadí), nebo šlo o demonstrační účely. 

Sekce 7.5 a 8.2 jsou v zásadě obsahově stejné, jen je sekce 8.2 daleko přehlednější. Abstrakty jsou velmi strohé.

65
Formální úprava technické zprávy

Zásadní prohřešky v práci nejsou. Prohřešky menšího rázu jsou značně pod obvyklým počtem.

95
Práce s literaturou

Práce je spíše implementačního charakteru a výběr pramenů tomu odpovídá.

85
Realizační výstup

V souborech zdrojového kódu se hůře orientuje, částečně i proto, že souborům chybí hlavičky a tak není snadné odlišit kód studenta od přejatého. Při osobní ukázce mně student vysvětlil, jak jsou označené převzaté soubory. Některé z převzatých souborů student upravil, ale není přehledně vyznačeno, že tak učinil a jak.

Projekt má pěknou dokumentaci. Nicméně je nutné podotknout, že student sám při konzultacích přiznal, že komentáře v kódu generoval pomocí AI/LLM. což není uvedeno v deklaraci v technické zprávě.

Líbí se mně, že student popisuje limity řešení, ale do jaké míry pokrývá jazyk TypeScript a do jaké míry je řešení přenositelné na jiné knihovny než je Leaflet není jasně řečené. Naopak se mně nelíbí, že referenční hodnoty v tabulce 7.3 nejsou ničím podložené a působí tak, že je někdo vymyslel bez jakýchkoliv podkladů.

70
Využitelnost výsledků

Tab. 7.2 vyznívá pro projekt příznivě, výsledné dílo by mělo být lepší, než podobné projekty. Ale zdá se, že je nutné rozsáhlé části rozhraní knihovny popisovat ručně.

Náročnost zadání

Evaluation level: průměrně obtížné zadání

Topics for thesis defence:
  1. Je vám známo, zda váš nástroj někdo skutečně používá, nebo se jej chystá využít?
  2. Uveďte vhodné příklady vstupního a výstupního kódu.
  3. Charakterizujte sadu praktických příkladů poptávanou v bodě 4 zadání a využitou v bodě 5 zadání.
Points proposed by reviewer: 65

Grade proposed by reviewer: D

Responsibility: Mgr. et Mgr. Hana Odstrčilová