Cara Memuat JavaScript Biasa Svelte Astro

mrfdn.com – Jika kita memiliki file javascript yang biasa berjalan tanpa menggunakan framework seperti Svelte yang ingin kita jalankan di proyek Astro, biasanya kita akan menemui error saat menjalankannya:

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  for more information.

Jadi kita perlu memasukkannya ke dalam fungsi untuk menjalankan skrip onMount() yang sudah ada sebagai default untuk 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 skrip yang dijalankan ketika sebuah komponen dipanggil.

Contoh cara menggunakan Svelte onMount di proyek Astro#

  1. Buat contoh elemen langsing MyComponent.svelte (Pastikan nama elemen dimulai dengan huruf kapital) Lalu pastekan kode ini,
<script>
import { onMount } from 'svelte';

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

</script>

<div id="say"></div>
  1. Pada komponen lain baik Astro maupun Svelte, beri nama dengan membuat div dengan id #say. Buat elemen lain dengan nama instance OtherComponent.astroKemudian tambahkan penyangga client:load tag sehingga MyComponent dapat dimuat secara otomatis.
---
import MyComponent from "./MyComponent.svelte";
---

<MyComponet client:load/>
  1. Layar akan menampilkan teks Halo.

selesai

Penjelasan lebih lanjut tentang onMount.

Semoga bermanfaat.

PakarPBN

A Private Blog Network (PBN) is a collection of websites that are controlled by a single individual or organization and used primarily to build backlinks to a “money site” in order to influence its ranking in search engines such as Google. The core idea behind a PBN is based on the importance of backlinks in Google’s ranking algorithm. Since Google views backlinks as signals of authority and trust, some website owners attempt to artificially create these signals through a controlled network of sites.

In a typical PBN setup, the owner acquires expired or aged domains that already have existing authority, backlinks, and history. These domains are rebuilt with new content and hosted separately, often using different IP addresses, hosting providers, themes, and ownership details to make them appear unrelated. Within the content published on these sites, links are strategically placed that point to the main website the owner wants to rank higher. By doing this, the owner attempts to pass link equity (also known as “link juice”) from the PBN sites to the target website.

The purpose of a PBN is to give the impression that the target website is naturally earning links from multiple independent sources. If done effectively, this can temporarily improve keyword rankings, increase organic visibility, and drive more traffic from search results.

Jasa Backlink

Download Anime Batch

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *