Memulai

Pasang @uikode/tide dan render data real-time dalam tiga langkah.

Pasang

bash

npm install @uikode/tide solid-js

Tide punya satu peer dependency: solid-js. Total ukuran 2.8KB gzipped (core + skeleton).

1. Bungkus aplikasimu

Bungkus root dengan TideProvider. WebSocket opsional — hilangkan ws untuk stale-while-revalidate berbasis HTTP saja.

tsx

import { TideProvider } from '@uikode/tide'

function Root() {
  return (
    <TideProvider ws={{ url: 'wss://your-server/ws' }}>
      <App />
    </TideProvider>
  )
}

2. Ambil data di komponen

createTide menerima objek opsi. Gunakan shorthand url (v1.1) atau beri fetcher kustom. Tambahkan ws atau wsPath untuk push real-time.

tsx

import { createTide } from '@uikode/tide'

// v1.1 — url shorthand (recommended)
const todos = createTide({
  key: 'todos',
  url: '/api/todos',
  wsPath: 'data.todos',  // auto-extract from WS message
})

// v1.0 — custom fetcher (still supported)
const todos = createTide({
  key: 'todos',
  fetcher: ({ signal }) =>
    fetch('/api/todos', { signal }).then((r) => r.json()),
  ws: (msg) => (msg.type === 'todos' ? msg.data : null),
})

3. Render secara reaktif

data adalah accessor SolidJS — panggil di JSX. Saat kunjungan ulang, render instan dari sessionStorage (0ms), lalu refresh di belakang.

tsx

<Show when={!todos.loading()} fallback={<Skeleton />}>
  <For each={todos.data()}>{(t) => <Todo item={t} />}</For>
</Show>

Selesai. Transport WebSocket, caching, reconnect, dan skeleton semua ditangani otomatis.

Memulai Referensi API GitHub ↗