---
title: 'Static HTML'
description: "Pelajari cara menggunakan JSONEval-Rs di setup Vanilla JavaScript/HTML biasa melalui impor ES Module standar tanpa bundler apa pun."
navigation:
  icon: 'i-simple-icons-html5'
seo:
  title: 'Static HTML'
  description: "Pelajari cara menggunakan JSONEval-Rs di setup Vanilla JavaScript/HTML biasa melalui impor ES Module standar tanpa bundler apa pun."
---

# Menggunakan JSONEval-Rs di Static HTML (Vanilla JS)

Jika kamu tidak menggunakan bundler seperti Webpack atau Vite, kamu tetap bisa menggunakan WebAssembly dengan lancar. Paket `@json-eval-rs/vanilla` dikompilasi khusus untuk ES Modules dan akan mengambil biner `.wasm` melalui API browser standar.

Cara lainnya, kamu bisa mengambilnya langsung melalui endpoint CDN unpkg.

## Menggunakan CDN (Tidak Perlu Instalasi)

Kamu bisa memuat paket Webcore dan Vanilla JS secara efisien langsung di dalam tag `<script type="module">` menggunakan esm.sh atau unpkg.

```html
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh Vanilla JSONEval-Rs</title>
</head>
<body>
    <h2>Validasi Form</h2>
    <form id="myForm">
        <label>
            Umur:
            <input type="number" id="ageInput" />
        </label>
        <div id="errorBox" style="color: red;"></div>
        <button type="submit">Kirim</button>
    </form>

    <script type="module">
        // Impor secara dinamis dari NPM CDN (misal: esm.sh)
        import { JSONEval } from 'https://esm.sh/@json-eval-rs/webcore';
        import * as wasmModule from 'https://esm.sh/@json-eval-rs/vanilla';

        let evaluator;

        async function init() {
            const schema = {
                type: "object",
                properties: {
                    age: {
                        rules: {
                            minValue: { value: 18, message: "Harus minimal 18 tahun" },
                            required: { value: true, message: "Umur wajib diisi" }
                        }
                    }
                }
            };

            // Inisialisasi evaluator menggunakan modul WASM vanilla
            evaluator = new JSONEval({
                schema: JSON.stringify(schema),
                wasmModule
            });

            console.log("JSONEval-Rs berhasil disiapkan!");
        }

        async function validateForm(event) {
            event.preventDefault();
            
            if (!evaluator) {
                console.error("Evaluator belum siap");
                return;
            }

            const ageValue = document.getElementById("ageInput").value;
            const data = { age: ageValue === '' ? null : Number(ageValue) };

            const result = await evaluator.validate({
                data: JSON.stringify(data)
            });

            const errorBox = document.getElementById("errorBox");
            if (result.has_error) {
                // Tampilkan pesan error ke UI
                errorBox.innerHTML = result.errors.map(err => `<div>${err.message}</div>`).join('');
            } else {
                errorBox.innerHTML = '<div style="color: green;">Berhasil! Logika valid.</div>';
            }
        }

        document.getElementById("myForm").addEventListener("submit", validateForm);

        // Jalankan inisialisasi
        init();

        // Bersihkan memori saat meninggalkan halaman (opsional di lingkup global, tapi praktik yang baik)
        window.addEventListener("beforeunload", () => {
            if (evaluator) evaluator.free();
        });
    </script>
</body>
</html>
```

## Menggunakan NPM/Yarn Lokal Tanpa Bundler

Jika kamu sudah mengunduh paketnya secara lokal tapi ingin menyajikannya lewat web server statis:

```bash
yarn add @json-eval-rs/webcore @json-eval-rs/vanilla
```

Kamu perlu menyajikan folder `node_modules` secara statis atau memindahkan file-filenya, lalu mengimpornya lewat jalur relatif:

```html
<script type="module">
    import { JSONEval } from './node_modules/@json-eval-rs/webcore/dist/index.js';
    import * as wasmModule from './node_modules/@json-eval-rs/vanilla/pkg/index.js';

    async function init() {
        const schema = { /* ... */ };
        const evalInstance = new JSONEval({ schema: JSON.stringify(schema), wasmModule });
        // ...
    }
    
    init();
</script>
```

*(Catatan: Pastikan web servermu sudah terkonfigurasi untuk menyajikan file `.wasm` dengan MIME type `application/wasm`, jika tidak, browser akan menolak menjalankannya).*
