SvelteKit Integration

<meta name="userplane:workspace" content="YOUR_WORKSPACE_ID" />
<script type="module" src="https://cdn.userplane.io/embed/script.js"></script>

<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte';
  import { PUBLIC_USERPLANE_WORKSPACE_ID } from '$env/static/public';

  onMount(async () => {
    const { initialize } = await import('@userplane/sdk');
    initialize({ workspaceId: PUBLIC_USERPLANE_WORKSPACE_ID });
  });
</script>

<slot />

PUBLIC_USERPLANE_WORKSPACE_ID=ws_abc123

// src/hooks.server.ts
import { redirect } from '@sveltejs/kit';
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
  if (requiresAuth(event) && !isAuthenticated(event)) {
    const url = event.url;
    const loginUrl = new URL('/login', url.origin);

    for (const [key, value] of url.searchParams) {
      if (key.startsWith('userplane-')) {
        loginUrl.searchParams.set(key, value);
      }
    }

    redirect(302, loginUrl.toString());
  }

  return resolve(event);
};

<script>
  import { onMount } from 'svelte';
  import { PUBLIC_USERPLANE_WORKSPACE_ID } from '$env/static/public';

  onMount(async () => {
    const { initialize, set } = await import('@userplane/sdk');
    initialize({ workspaceId: PUBLIC_USERPLANE_WORKSPACE_ID });
    set('environment', 'production');
  });
</script>

<slot />

cd examples/sveltekit && npm install && npm run dev