Svelte (Soon)

// lib/ciph.ts
import { createClient } from '@ciph/svelte'

export const ciph = createClient({
  baseURL: import.meta.env.VITE_API_URL,
  secret: import.meta.env.VITE_CIPH_SECRET,
})

<script>
import { onMount } from 'svelte'
import { ciph } from '$lib/ciph'

let users = []
let loading = true

onMount(async () => {
  const res = await ciph.get('/api/users')
  users = res.data
  loading = false
})
</script>

{#if loading}
  <p>Loading...</p>
{:else}
  <ul>
    {#each users as user (user.id)}
      <li>{user.name}</li>
    {/each}
  </ul>
{/if}

<script>
  import { createClient } from '@ciph/client';
  import { onMount } from 'svelte';

  let data = null;
  let loading = false;

  const ciph = createClient({
    baseURL: 'http://localhost:4008',
    serverPublicKey: import.meta.env.VITE_CIPH_SERVER_PUBLIC_KEY,
  });

  onMount(async () => {
    loading = true;
    try {
      const res = await ciph.get('/api/employees');
      data = res.data;
    } catch (err) {
      console.error(err);
    } finally {
      loading = false;
    }
  });
</script>

<div>
  {#if loading}
    Loading...
  {:else if data}
    {JSON.stringify(data)}
  {/if}
</div>

// src/routes/+page.server.ts
import { createClient } from '@ciph/client';

export async function load() {
  const ciph = createClient({
    baseURL: 'http://localhost:4008',
    serverPublicKey: process.env.VITE_CIPH_SERVER_PUBLIC_KEY!,
  });

  const res = await ciph.get('/api/employees');
  return {
    employees: res.data,
  };
}

# Start the development environment
pnpm install
pnpm dev

# Create a changeset for your work
pnpm changeset