TSRX, Bahasa Ekstensi TypeScript Baru untuk Membangun UI Deklaratif di Era Agentic AI

Dunia pengembangan front-end kedatangan pemain baru bernama TSRX (TypeScript Render Extensions), sebuah ekstensi bahasa untuk TypeScript yang dirancang khusus untuk membangun antarmuka pengguna secara deklaratif di tengah berkembangnya era agentic AI dan AI-assisted coding. Proyek ini berada pada tahap alpha, namun sudah menawarkan ide yang cukup radikal: menyatukan struktur, logika kontrol, dan styling dalam satu berkas sumber tanpa meninggalkan TypeScript.

Berbeda dengan JSX yang selama ini menjadi standar de facto di ekosistem React, TSRX mencoba menjadi “penerus spiritual” yang lebih sadar konteks. Di dalam satu component, pengembang dapat menuliskan markup, if/for, mendeklarasikan variabel lokal di tengah template, hingga menyisipkan <style> yang otomatis di-scope ke komponen tersebut. Semua tetap dikompilasi kembali menjadi TypeScript/JavaScript biasa yang bisa dijalankan di framework populer.

Secara teknis, TSRX bersifat framework-agnostic. Compiler TSRX akan mengubah satu AST (Abstract Syntax Tree) komponen menjadi keluaran yang sesuai dengan target runtime melalui plugin seperti @tsrx/react, @tsrx/preact, @tsrx/ripple, @tsrx/solid, dan @tsrx/vue. Pendekatan ini membuka peluang bahwa framework baru di masa depan bisa ikut mendapatkan dukungan tanpa perlu mengubah bahasa TSRX itu sendiri, cukup dengan menulis plugin baru.

Dari sisi ergonomi, TSRX mencoba menyelesaikan sejumlah “rasa sakit” khas framework saat ini. Misalnya, di React, penggunaan Hooks tidak boleh bersifat kondisional. Di TSRX, pengembang boleh menulis if yang berisi pemanggilan Hook; compiler akan secara otomatis mengangkat cabang logika tersebut ke komponen baru sehingga aturan Hooks tetap aman di level output. Di ekosistem Solid, destrukturisasi props yang biasanya berpotensi memutus reaktivitas diakomodasi lewat sintaks &{ ... } yang akan dikompilasi menjadi lazy getters, sehingga kode tetap reaktif tanpa mengorbankan kenyamanan penulisan.

TSRX juga menghadirkan language server, plugin Prettier dan ESLint, serta integrasi dengan editor populer seperti VS Code, Zed, Neovim, IntelliJ, dan Sublime. Hal ini menjadikan TSRX bukan sekadar eksperimen compiler, tetapi mencoba diposisikan sebagai bagian serius dari alur kerja pengembangan harian.

Menariknya, desain TSRX secara eksplisit mempertimbangkan cara kerja model bahasa besar (LLM). Dengan mengutamakan co-location—struktur UI, logika, dan styling berada berdekatan dalam satu berkas—kode menjadi lebih mudah dibaca tidak hanya oleh manusia, tetapi juga oleh AI yang melakukan code generation, refactoring, atau review. Pendekatan ini sejalan dengan temuan riset bahwa LLM cenderung bekerja lebih baik ketika informasi relevan berada dekat satu sama lain ketimbang tersebar di berbagai tempat.

Kemunculan TSRX mencerminkan pergeseran penting di dunia pengembangan front-end: bahasa dan tooling tidak lagi hanya dirancang untuk manusia, tetapi juga untuk AI sebagai “rekan kerja”. Jika JSX diciptakan di era ketika antarmuka masih sepenuhnya ditulis dan dirawat manusia, TSRX lahir di masa ketika banyak kode mulai dirancang, di-refactor, dan dikelola oleh sistem berbasis LLM.

Pendekatan co-location yang diusung TSRX terasa sangat relevan bagi tim yang mulai mengandalkan AI untuk membaca dan memodifikasi basis kode besar. Ketika logika, markup, dan style terpisah di banyak file, AI (dan bahkan manusia baru di tim) perlu melakukan lebih banyak context switching sehingga risiko salah paham terhadap alur data dan struktur UI meningkat. Dengan menaruh semuanya secara terstruktur di satu tempat, TSRX berpotensi mengurangi friksi tersebut.

Dari sudut pandang ekosistem, langkah TSRX yang memilih untuk kompatibel dengan framework populer alih-alih menciptakan runtime baru adalah keputusan strategis. Ini memungkinkan adopsi bertahap: tim bisa menguji TSRX di sebagian kecil komponen yang kompleks tanpa harus mengganti tumpukan teknologi. Jika konsistensi tooling (linting, formatting, editor support) benar-benar matang, TSRX punya peluang untuk diadopsi di proyek skala produksi dalam beberapa tahun ke depan.

Namun, sebagai teknologi alpha, masih ada sejumlah tanda tanya. Pertama, bagaimana debuggability ketika terjadi bug di output React/Solid/Vue yang berasal dari transformasi TSRX yang kompleks? Kedua, seberapa besar learning curve bagi pengembang yang sudah terbiasa dengan pola konvensional seperti pemisahan CSS-in-JS, hooks yang eksplisit, atau utilitas helper terpisah? Ketiga, apakah komunitas akan cukup besar untuk menjaga ekosistem plugin dan tooling tetap hidup?

Meski demikian, dari perspektif tren, TSRX adalah contoh menarik dari arah baru pengembangan UI: bahasa yang sadar AI dan lintas-framework, bukan lagi sekadar sintaks templating di dalam satu ekosistem saja. Jika berhasil menyeimbangkan ergonomi penulisan, kejelasan struktur, dan transparansi output, TSRX berpotensi menjadi salah satu fondasi penting bagi cara kita membangun antarmuka di era agentic AI.