Cara Load Plain Javascript Svelte Astro

JagoTekno.com - Jika kita punya file javascript yang berjalan normal tanpa menggunakan framework seperti Svelte, yang ingin dijalankan pada projekan Astro, secara normal untuk bisa menjalankannya kita akan menemui error:

document is not defined

Browser APIs are not available on the server.

If the code is in a framework component, try to access these objects after rendering using lifecycle methods or use a client:only directive to make the component exclusively run on the client.

See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information.

Jadi untuk menjalankan script tersebut kita harus menempatkannya di dalam fungsi onMount() yang sudah ada sebagai bawaan Svelte.

Kode dasarnya seperti ini:

import { onMount } from 'svelte';

onMount(() => {
  // Paste plain javascript di sini.
  // Code to run when the component is mounted
});

Fungsi onMount adalah untuk menjalankan script yang ada di dalamnya ketika sebuah component dipanggil.

Contoh cara menggunakan Svelte onMount pada projekan Astro

1. Buat sebuah komponen svelte contoh MyComponent.svelte (pastikan penamaan komponen diawali dengan huruf kapital) lalu paste kode ini di dalamnya,

<script>
import { onMount } from 'svelte';

onMount(() => {
function say() {
  const main = document.querySelector("#say");
  main.innerHTML = "<p>Halo</p>";
  };
  say();
});

</script>

<div id="say"></div>

2. Pada komponen lain baik itu Astro maupun Svelte panggil dengan membuat div dengan id #say. Contoh buat komponen lain dengan nama OtherComponent.astro, lalu tambahkan prop client:load di dalam tagnya supaya MyComponent bisa otomatis load.

---
import MyComponent from "./MyComponent.svelte";
---

<MyComponet client:load/>

3. Pada layar akan mengeluarkan tulisan Halo.

Selesai.

Penjelasan lebih lanjut tentang onMount.

Semoga bermanfaat.