TIDE • Instalasi

Tide Framework Quickstart

Quickstart guide for Tide micro-data framework: reactive signals, solid islands, and zero-revisit caching.

Getting Started with Tide

Tide is an ultra-lightweight (2.8KB) reactive data framework engineered for SolidJS micro-islands and Astro 5 shells. It provides instant 0ms revisits backed by sessionStorage, background stale-while-revalidate (SWR), and native WebSocket push streaming without the overhead of heavy query clients.

Installation

Install @uikode/tide and its peer dependency solid-js:

Bash

bun add @uikode/tide solid-js
# or via npm / pnpm
npm install @uikode/tide solid-js

Total footprint is 2.8KB gzipped (core primitives + skeleton loader). Zero runtime dependencies outside SolidJS.

1. Wrap Your Application Root

Wrap your root island or shell with TideProvider. WebSocket transport is optional; omit the ws property for HTTP-only SWR polling and caching.

tsx

import { TideProvider } from '@uikode/tide';
import type { ParentComponent } from 'solid-js';

export const AppShell: ParentComponent = (props) => {
  return (
    <TideProvider
      ws={{ url: 'wss://api.uikode.com/ws' }}
      defaults={{
        staleTime: 30_000,
        cacheTime: 300_000,
        persist: true,
      }}
    >
      {props.children}
    </TideProvider>
  );
};

2. Fetch Data in a Component

createTide accepts either a clean URL shorthand or a custom fetcher. You can specify wsPath to automatically extract real-time push payloads matching server-sent WebSocket events.

tsx

import { createTide } from '@uikode/tide';

interface UserProfile {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'member' | 'buyer';
}

export function ProfileCard() {
  const { data, loading, refreshing, error, refetch } = createTide<UserProfile>({
    key: 'user-profile',
    url: '/api/user/profile',
    wsPath: 'data.user',
    staleTime: 30_000,
  });

  return (
    <div class="p-6 rounded-2xl bg-bg-secondary border border-border-primary">
      {loading() && <p class="text-sm text-text-muted animate-pulse">Loading profile...</p>}
      {error() && <p class="text-sm text-rose-500">Error: {error()}</p>}
      {data() && (
        <div class="space-y-2">
          <div class="flex items-center justify-between">
            <h1 class="text-xl font-bold text-text-primary">{data()?.name}</h1>
            <span class="text-xs px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400">
              {data()?.role}
            </span>
          </div>
          <p class="text-sm text-text-secondary">{data()?.email}</p>
        </div>
      )}
    </div>
  );
}

3. Render Reactively with Instant 0ms Revisit

The data returned by createTide is a SolidJS reactive accessor. On revisit, Tide renders cached data from storage immediately (0ms latency), while refreshing silently in the background.

tsx

import { Show, For } from 'solid-js';
import { createTide } from '@uikode/tide';

export function OrderList() {
  const orders = createTide<Array<{ id: string; total: number; status: string }>>({
    key: 'orders',
    url: '/api/orders',
    wsPath: 'data.orders',
  });

  return (
    <Show when={!orders.loading()} fallback={<div class="skeleton h-24" />}>
      <ul class="divide-y divide-border-primary">
        <For each={orders.data() ?? []}>
          {(order) => (
            <li class="py-3 flex justify-between">
              <span>Order #{order.id}</span>
              <span class="font-mono font-bold">${order.total}</span>
            </li>
          )}
        </For>
      </ul>
    </Show>
  );
}