Subscriptions

// Always:
const off = client.car.onStatusChange(handler);
// Always (somewhere — useEffect cleanup, onUnmount, etc.):
off();

┌──────────────────────────────────────────────────────────────┐
│ FIRST onStatusChange call                                    │
│   ├─ adds your callback to the listener set                  │
│   ├─ lazily opens ONE subscription with the host bridge      │
│   └─ installs document.visibilitychange listener (lazy)      │
│                                                               │
│ Nth onStatusChange call (same client.car)                    │
│   └─ just adds to the listener set; reuses the bridge sub    │
│                                                               │
│ Each off() call                                              │
│   ├─ removes that callback from the listener set             │
│   └─ if it was the last one, closes the bridge subscription  │
│                                                               │
│ off() called twice on the same handle                        │
│   └─ second call is a safe no-op                             │
└──────────────────────────────────────────────────────────────┘

import { useEffect, useState } from 'react';
import type { CarStatus } from '@i99dash/sdk';

export function CarStatusWidget({ client }) {
  const [status, setStatus] = useState<CarStatus | null>(null);
  useEffect(() => {
    const off = client.car.onStatusChange(setStatus);
    return off;        // ← critical: cleanup returns the unsubscribe fn
  }, [client]);
  if (!status) return null;
  return <span>{status.doorsLocked ? '🔒' : '🔓'}</span>;
}

<script setup lang="ts">
import { onUnmounted, ref } from 'vue';
import type { CarStatus } from '@i99dash/sdk';

const props = defineProps<{ client: MiniAppClient }>();
const status = ref<CarStatus | null>(null);

const off = props.client.car.onStatusChange((s) => { status.value = s; });
onUnmounted(off);
</script>

<script lang="ts">
  import { onMount } from 'svelte';
  let status = $state<CarStatus | null>(null);

  onMount(() => client.car.onStatusChange((s) => { status = s; }));
  // onMount returns the cleanup, Svelte calls it on destroy
</script>

const off = client.car.onStatusChange(render);
window.addEventListener('beforeunload', off);
// And anywhere you tear down your widget mid-page-life:
//   off();

// ❌ Wrong — resubscribes on every keystroke; leaks 1 sub per render
function Search({ client }) {
  const [q, setQ] = useState('');
  client.car.onStatusChange(handler); // ← bug: leaks
  return <input value={q} onChange={e => setQ(e.target.value)} />;
}

// ✓ Right — useEffect-cleanup teardown; one sub per mount
function Search({ client }) {
  const [q, setQ] = useState('');
  useEffect(() => client.car.onStatusChange(handler), [client]);
  return <input value={q} onChange={e => setQ(e.target.value)} />;
}