Menu
Hacker Room
Informasi
Lifestyle
WebDev
svelte

Raw Curly Bracket in Svelte

Misalnya aja kita iseng-iseng ingin menjalankan Alpine JS di SvelteKit. Kita buat dah kodenya seperti ini:

<div class="" x-data='{nama: "Zen"}'>
	<div class="" x-text='"Hello " + nama'></div>
</div>

Harusnya kan muncul Hello Zen. Tapi, kok hasilnya malah seperti ini:

Error di browser:

500
Failed to fetch dynamically imported module: http://localhost:3000/src/routes/index.svelte

TypeError: Failed to fetch dynamically imported module: http://localhost:3000/src/routes/index.svelte

Error di Terminal:

08.53.07 [vite] Internal server error: Expected }
  Plugin: vite-plugin-svelte
  File: /home/zen/aplikasi-android/tes/app/src/main/assets/src/routes/index.svelte
  1: <div class="" x-data='{nama: "Zen"}'>
                                ^
  2:   <div class="" x-text='"Hello " + nama'></div>
  3: </div>

Ternyata, kalau di Svelte itu, curly bracket merupakan cara menjalankan kode JS maupun kode Svelte di dalam markup. Misalnya aja seperti {#if condition}{/if} dan {each data as x}{/each}.

Maka, kita harus raw atau mematikan kodenya supaya nggak dianggap seperti sintaks JS maupun sintaks Svelte. Maka, di dalam curly bracket, kita buat seperti ini:

<div class="" x-data={``}></div>

Nah, secara otomatis, semua di dalam tanda petik itu dianggap sebagai string dan nggak dirender dengan Svelte.

Hasil HTMLnya:

<div class="" x-data=""></div>

Maka, sekarang, kita ubah lagi kode yang sebelumnya error menjadi seperti ini:

<div class="" x-data={`{nama: "Zen"}`}>
	<div class="" x-text='"Hello " + nama'></div>
</div>

Hasilnya:

<div class="" x-data="{nama: &quot;Zen&quot;}"><div class="" x-text="&quot;Hello &quot; + nama"></div></div>

Kode Alpine JSnya dirender oleh browser sehingga menjadi:

Hello Zen

Random Articles

Kaya Itu Hukumnya Wajib!

Lua: Import from Parent Directory (Relative PATH)

Yang Perlu Dilakukan Setelah Install Svelte Kit

Cari

let dan const pada JavaScript

Cari