@supatype/vue 0.1.0-alpha.9

package/dist/useSubscription.js

@@ -0,0 +1,74 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { useSupatype } from "./context.js";
+/**
+ * Real-time subscription composable.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useSubscription } from '@supatype/vue'
+ *
+ * const { data: messages, status } = useSubscription('messages', {
+ *   event: '*',
+ *   filter: 'room_id=eq.123',
+ * })
+ * </script>
+ * ```
+ */
+export function useSubscription(table, options) {
+    const client = useSupatype();
+    const data = ref(null);
+    const error = ref(null);
+    const status = ref("connecting");
+    let unsubscribe = null;
+    onMounted(() => {
+        const event = options?.event ?? "*";
+        const channelOpts = {
+            event,
+            schema: "public",
+            table,
+        };
+        if (options?.filter) {
+            channelOpts.filter = options.filter;
+        }
+        const channel = client.realtime.channel(`public:${table}`);
+        channel.on("postgres_changes", channelOpts, (payload) => {
+            if (!data.value)
+                data.value = [];
+            if (payload.eventType === "INSERT") {
+                data.value = [...data.value, payload.new];
+            }
+            else if (payload.eventType === "UPDATE") {
+                data.value = data.value.map((row) => {
+                    const r = row;
+                    const n = payload.new;
+                    return r["id"] === n["id"] ? payload.new : row;
+                });
+            }
+            else if (payload.eventType === "DELETE") {
+                const old = payload.old;
+                data.value = data.value.filter((row) => row["id"] !== old["id"]);
+            }
+        });
+        channel.subscribe((newStatus) => {
+            if (newStatus === "SUBSCRIBED") {
+                status.value = "connected";
+            }
+            else if (newStatus === "CHANNEL_ERROR") {
+                status.value = "error";
+                error.value = { message: "Subscription error" };
+            }
+            else if (newStatus === "CLOSED") {
+                status.value = "disconnected";
+            }
+        });
+        unsubscribe = () => {
+            channel.unsubscribe();
+        };
+    });
+    onUnmounted(() => {
+        unsubscribe?.();
+    });
+    return { data, error, status };
+}
+//# sourceMappingURL=useSubscription.js.map

package/dist/useSubscription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubscription.js","sourceRoot":"","sources":["../src/useSubscription.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@supatype/vue",
+  "version": "0.1.0-alpha.9",
+  "description": "Vue composables for Supatype — useQuery, useMutation, useAuth, useSubscription",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0",
+    "@supatype/client": "0.1.0-alpha.9"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "vue": "^3.5.0",
+    "@supatype/client": "0.1.0-alpha.9"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.json",
+    "typecheck": "tsc --project tsconfig.json --noEmit",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  }
+}

package/src/context.ts

@@ -0,0 +1,40 @@
+/**
+ * Supatype Vue plugin and injection key.
+ *
+ * @example
+ * ```ts
+ * import { createApp } from 'vue'
+ * import { createClient } from '@supatype/client'
+ * import { supatypePlugin } from '@supatype/vue'
+ *
+ * const supatype = createClient({ url: '...', anonKey: '...' })
+ * const app = createApp(App)
+ * app.use(supatypePlugin, supatype)
+ * ```
+ */
+
+import { inject, type InjectionKey, type Plugin } from "vue"
+import type { SupatypeClient, AnyDatabase } from "@supatype/client"
+
+export const SUPATYPE_KEY: InjectionKey<SupatypeClient> = Symbol("supatype")
+
+/**
+ * Vue plugin that provides the Supatype client to all components.
+ */
+export const supatypePlugin: Plugin = {
+  install(app, client: SupatypeClient) {
+    app.provide(SUPATYPE_KEY, client)
+  },
+}
+
+/**
+ * Get the Supatype client from the injection context.
+ * Must be called inside setup() of a component that has the supatypePlugin installed.
+ */
+export function useSupatype<TDatabase extends AnyDatabase = AnyDatabase>(): SupatypeClient<TDatabase> {
+  const client = inject(SUPATYPE_KEY)
+  if (!client) {
+    throw new Error("useSupatype() requires the supatypePlugin to be installed on the Vue app.")
+  }
+  return client as SupatypeClient<TDatabase>
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+// @supatype/vue — Vue composables for Supatype
+
+export { supatypePlugin, useSupatype, SUPATYPE_KEY } from "./context.js"
+
+export { useQuery } from "./useQuery.js"
+export type { UseQueryOptions, UseQueryReturn } from "./useQuery.js"
+
+export { useMutation } from "./useMutation.js"
+export type { UseMutationReturn, MutationOperation, MutationOptions } from "./useMutation.js"
+
+export { useAuth } from "./useAuth.js"
+export type { UseAuthReturn } from "./useAuth.js"
+
+export { useSubscription } from "./useSubscription.js"
+export type { UseSubscriptionOptions, UseSubscriptionReturn, SubscriptionEvent } from "./useSubscription.js"
+
+export { useFunction } from "./useFunction.js"
+export type { UseFunctionReturn } from "./useFunction.js"

package/src/useAuth.ts

@@ -0,0 +1,96 @@
+import { ref, onMounted, onUnmounted, type Ref } from "vue"
+import type { AnyDatabase, SupatypeError, User, Session, AuthChangeEvent } from "@supatype/client"
+import { useSupatype } from "./context.js"
+
+export interface UseAuthReturn {
+  user: Ref<User | null>
+  session: Ref<Session | null>
+  loading: Ref<boolean>
+  signIn: (email: string, password: string) => Promise<{ error: SupatypeError | null }>
+  signUp: (email: string, password: string) => Promise<{ error: SupatypeError | null }>
+  signOut: () => Promise<{ error: SupatypeError | null }>
+  signInWithOAuth: (provider: string) => Promise<{ error: SupatypeError | null }>
+  resetPassword: (email: string) => Promise<{ error: SupatypeError | null }>
+}
+
+/**
+ * Authentication composable for Supatype.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useAuth } from '@supatype/vue'
+ *
+ * const { user, loading, signIn, signOut } = useAuth()
+ * </script>
+ *
+ * <template>
+ *   <div v-if="loading">Loading...</div>
+ *   <div v-else-if="user">
+ *     <p>Signed in as {{ user.email }}</p>
+ *     <button @click="signOut">Sign out</button>
+ *   </div>
+ *   <form v-else @submit.prevent="signIn(email, password)">...</form>
+ * </template>
+ * ```
+ */
+export function useAuth<TDatabase extends AnyDatabase = AnyDatabase>(): UseAuthReturn {
+  const client = useSupatype<TDatabase>()
+  const user = ref<User | null>(null) as Ref<User | null>
+  const session = ref<Session | null>(null) as Ref<Session | null>
+  const loading = ref(true)
+
+  let unsubscribe: (() => void) | null = null
+
+  onMounted(async () => {
+    // Get initial session
+    try {
+      const { data } = await client.auth.getSession()
+      if (data.session) {
+        session.value = data.session
+        user.value = data.session.user
+      }
+    } catch {
+      // Ignore — user is not authenticated
+    }
+    loading.value = false
+
+    // Subscribe to auth changes
+    const { data: { subscription } } = client.auth.onAuthStateChange((event: AuthChangeEvent, newSession: Session | null) => {
+      session.value = newSession
+      user.value = newSession?.user ?? null
+    })
+    unsubscribe = () => subscription.unsubscribe()
+  })
+
+  onUnmounted(() => {
+    unsubscribe?.()
+  })
+
+  const signIn = async (email: string, password: string) => {
+    const { error } = await client.auth.signInWithPassword({ email, password })
+    return { error }
+  }
+
+  const signUp = async (email: string, password: string) => {
+    const { error } = await client.auth.signUp({ email, password })
+    return { error }
+  }
+
+  const signOut = async () => {
+    const { error } = await client.auth.signOut()
+    return { error }
+  }
+
+  const signInWithOAuth = async (provider: string) => {
+    const { error } = await client.auth.signInWithOAuth({ provider })
+    return { error }
+  }
+
+  const resetPassword = async (email: string) => {
+    const { error } = await client.auth.resetPasswordForEmail(email)
+    return { error }
+  }
+
+  return { user, session, loading, signIn, signUp, signOut, signInWithOAuth, resetPassword }
+}

package/src/useFunction.ts

@@ -0,0 +1,54 @@
+import { ref, type Ref } from "vue"
+import type { AnyDatabase, SupatypeError } from "@supatype/client"
+import { useSupatype } from "./context.js"
+
+export interface UseFunctionReturn<TResponse> {
+  invoke: (body?: unknown) => Promise<{ data: TResponse | null; error: SupatypeError | null }>
+  data: Ref<TResponse | null>
+  error: Ref<SupatypeError | null>
+  loading: Ref<boolean>
+}
+
+/**
+ * Edge function invocation composable.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useFunction } from '@supatype/vue'
+ *
+ * const { invoke, data, loading } = useFunction<{ orderId: string }>('process-order')
+ *
+ * async function handleSubmit() {
+ *   await invoke({ items: cart.value, address: address.value })
+ * }
+ * </script>
+ * ```
+ */
+export function useFunction<
+  TResponse = unknown,
+  TDatabase extends AnyDatabase = AnyDatabase,
+>(
+  functionName: string,
+): UseFunctionReturn<TResponse> {
+  const client = useSupatype<TDatabase>()
+  const data = ref<TResponse | null>(null) as Ref<TResponse | null>
+  const error = ref<SupatypeError | null>(null)
+  const loading = ref(false)
+
+  const invoke = async (body?: unknown) => {
+    loading.value = true
+    error.value = null
+
+    const result = await client.functions.invoke(functionName, {
+      ...(body !== undefined ? { body } : {}),
+    })
+
+    loading.value = false
+    data.value = result.data as TResponse | null
+    if (result.error) error.value = result.error
+    return result as { data: TResponse | null; error: SupatypeError | null }
+  }
+
+  return { invoke, data, error, loading }
+}

package/src/useMutation.ts

@@ -0,0 +1,94 @@
+import { ref, type Ref } from "vue"
+import type { AnyDatabase, SupatypeError } from "@supatype/client"
+import { useSupatype } from "./context.js"
+
+export type MutationOperation = "insert" | "update" | "delete" | "upsert"
+
+export interface MutationOptions {
+  filter?: Record<string, unknown> | undefined
+}
+
+export interface UseMutationReturn<TRow> {
+  mutate: (
+    data?: Record<string, unknown> | Record<string, unknown>[] | undefined,
+    options?: MutationOptions | undefined,
+  ) => Promise<{ data: TRow[] | null; error: SupatypeError | null }>
+  loading: Ref<boolean>
+  error: Ref<SupatypeError | null>
+}
+
+/**
+ * Mutation composable for insert, update, delete, and upsert operations.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useMutation } from '@supatype/vue'
+ *
+ * const { mutate: createPost, loading } = useMutation('posts', 'insert')
+ *
+ * async function handleSubmit() {
+ *   const { data, error } = await createPost({ title: 'Hello', status: 'draft' })
+ * }
+ * </script>
+ * ```
+ */
+export function useMutation<
+  TDatabase extends AnyDatabase = AnyDatabase,
+  TTable extends keyof TDatabase["public"]["Tables"] & string = keyof TDatabase["public"]["Tables"] & string,
+  TRow = TDatabase["public"]["Tables"][TTable]["Row"],
+>(
+  table: TTable,
+  operation: MutationOperation,
+): UseMutationReturn<TRow> {
+  const client = useSupatype<TDatabase>()
+  const loading = ref(false)
+  const error = ref<SupatypeError | null>(null)
+
+  const mutate = async (
+    data?: Record<string, unknown> | Record<string, unknown>[] | undefined,
+    options?: MutationOptions | undefined,
+  ) => {
+    loading.value = true
+    error.value = null
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const tableClient = client.from(table) as any
+      let result: { data: TRow[] | null; error: SupatypeError | null }
+
+      if (operation === "insert") {
+        result = await tableClient.insert(data)
+      } else if (operation === "upsert") {
+        result = await tableClient.upsert(data)
+      } else if (operation === "update") {
+        let q = tableClient.update(data)
+        if (options?.filter) {
+          for (const [col, val] of Object.entries(options.filter)) {
+            q = q.eq(col, val)
+          }
+        }
+        result = await q
+      } else {
+        let q = tableClient.delete()
+        if (options?.filter) {
+          for (const [col, val] of Object.entries(options.filter)) {
+            q = q.eq(col, val)
+          }
+        }
+        result = await q
+      }
+
+      if (result.error) error.value = result.error
+      return result
+    } catch (e) {
+      const err = { message: e instanceof Error ? e.message : "Unknown error" }
+      error.value = err
+      return { data: null, error: err }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { mutate, loading, error }
+}

package/src/useQuery.ts

@@ -0,0 +1,106 @@
+import { ref, onMounted, watch, type Ref } from "vue"
+import type { AnyDatabase, SupatypeError } from "@supatype/client"
+import { useSupatype } from "./context.js"
+
+export interface UseQueryOptions {
+  columns?: string | undefined
+  filter?: Record<string, unknown> | undefined
+  order?: { column: string; ascending?: boolean } | undefined
+  limit?: number | undefined
+  offset?: number | undefined
+  enabled?: Ref<boolean> | boolean | undefined
+}
+
+export interface UseQueryReturn<TRow> {
+  data: Ref<TRow[] | null>
+  error: Ref<SupatypeError | null>
+  loading: Ref<boolean>
+  refetch: () => Promise<void>
+}
+
+/**
+ * Reactive data fetching composable for Supatype tables.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useQuery } from '@supatype/vue'
+ *
+ * const { data: posts, loading, error, refetch } = useQuery('posts', {
+ *   order: { column: 'created_at', ascending: false },
+ *   limit: 10,
+ * })
+ * </script>
+ * ```
+ */
+export function useQuery<
+  TDatabase extends AnyDatabase = AnyDatabase,
+  TTable extends keyof TDatabase["public"]["Tables"] & string = keyof TDatabase["public"]["Tables"] & string,
+  TRow = TDatabase["public"]["Tables"][TTable]["Row"],
+>(
+  table: TTable,
+  options?: UseQueryOptions | undefined,
+): UseQueryReturn<TRow> {
+  const client = useSupatype<TDatabase>()
+  const data = ref<TRow[] | null>(null) as Ref<TRow[] | null>
+  const error = ref<SupatypeError | null>(null)
+  const loading = ref(false)
+
+  const fetchData = async () => {
+    // Check enabled
+    const enabled = options?.enabled
+    if (enabled !== undefined) {
+      const isEnabled = typeof enabled === "boolean" ? enabled : enabled.value
+      if (!isEnabled) return
+    }
+
+    loading.value = true
+    error.value = null
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let query = (client.from(table) as any).select(options?.columns)
+
+      if (options?.filter) {
+        for (const [col, val] of Object.entries(options.filter)) {
+          query = query.eq(col, val)
+        }
+      }
+
+      if (options?.order) {
+        query = query.order(options.order.column, {
+          ascending: options.order.ascending ?? true,
+        })
+      }
+
+      if (options?.limit !== undefined) {
+        query = query.limit(options.limit)
+      }
+
+      if (options?.offset !== undefined) {
+        query = query.range(options.offset, options.offset + (options.limit ?? 100) - 1)
+      }
+
+      const result = await query
+      data.value = result.data as TRow[] | null
+      if (result.error) {
+        error.value = result.error
+      }
+    } catch (e) {
+      error.value = { message: e instanceof Error ? e.message : "Unknown error" }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(fetchData)
+
+  // Re-fetch when enabled changes
+  if (options?.enabled && typeof options.enabled !== "boolean") {
+    watch(options.enabled, (newVal) => {
+      if (newVal) fetchData()
+    })
+  }
+
+  return { data, error, loading, refetch: fetchData }
+}

package/src/useSubscription.ts

@@ -0,0 +1,104 @@
+import { ref, onMounted, onUnmounted, type Ref } from "vue"
+import type { AnyDatabase, SupatypeError, RealtimePayload, RealtimeEvent, ChannelStatus } from "@supatype/client"
+import { useSupatype } from "./context.js"
+
+export type SubscriptionEvent = RealtimeEvent
+
+export interface UseSubscriptionOptions {
+  event?: SubscriptionEvent | undefined
+  filter?: string | undefined
+}
+
+export interface UseSubscriptionReturn<TRow> {
+  data: Ref<TRow[] | null>
+  error: Ref<SupatypeError | null>
+  status: Ref<"connecting" | "connected" | "disconnected" | "error">
+}
+
+/**
+ * Real-time subscription composable.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useSubscription } from '@supatype/vue'
+ *
+ * const { data: messages, status } = useSubscription('messages', {
+ *   event: '*',
+ *   filter: 'room_id=eq.123',
+ * })
+ * </script>
+ * ```
+ */
+export function useSubscription<
+  TDatabase extends AnyDatabase = AnyDatabase,
+  TTable extends keyof TDatabase["public"]["Tables"] & string = keyof TDatabase["public"]["Tables"] & string,
+  TRow = TDatabase["public"]["Tables"][TTable]["Row"],
+>(
+  table: TTable,
+  options?: UseSubscriptionOptions | undefined,
+): UseSubscriptionReturn<TRow> {
+  const client = useSupatype<TDatabase>()
+  const data = ref<TRow[] | null>(null) as Ref<TRow[] | null>
+  const error = ref<SupatypeError | null>(null)
+  const status = ref<"connecting" | "connected" | "disconnected" | "error">("connecting")
+
+  let unsubscribe: (() => void) | null = null
+
+  onMounted(() => {
+    const event: RealtimeEvent = (options?.event as RealtimeEvent) ?? "*"
+    const channelOpts: {
+      event: RealtimeEvent
+      schema: string
+      table: string
+      filter?: string | undefined
+    } = {
+      event,
+      schema: "public",
+      table,
+    }
+    if (options?.filter) {
+      channelOpts.filter = options.filter
+    }
+
+    const channel = client.realtime.channel<TRow>(`public:${table}`)
+
+    channel.on("postgres_changes", channelOpts, (payload: RealtimePayload<TRow>) => {
+      if (!data.value) data.value = []
+
+      if (payload.eventType === "INSERT") {
+        data.value = [...data.value, payload.new as TRow]
+      } else if (payload.eventType === "UPDATE") {
+        data.value = data.value.map((row) => {
+          const r = row as Record<string, unknown>
+          const n = payload.new as Record<string, unknown>
+          return r["id"] === n["id"] ? (payload.new as TRow) : row
+        })
+      } else if (payload.eventType === "DELETE") {
+        const old = payload.old as Record<string, unknown>
+        data.value = data.value.filter((row) => (row as Record<string, unknown>)["id"] !== old["id"])
+      }
+    })
+
+    channel.subscribe((newStatus: ChannelStatus) => {
+      if (newStatus === "SUBSCRIBED") {
+        status.value = "connected"
+      } else if (newStatus === "CHANNEL_ERROR") {
+        status.value = "error"
+        error.value = { message: "Subscription error" }
+      } else if (newStatus === "CLOSED") {
+        status.value = "disconnected"
+      }
+    })
+
+    unsubscribe = () => {
+      channel.unsubscribe()
+    }
+  })
+
+  onUnmounted(() => {
+    unsubscribe?.()
+  })
+
+  return { data, error, status }
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "composite": true,
+    "lib": ["ES2022", "DOM"]
+  },
+  "include": ["src"],
+  "references": [
+    { "path": "../client" }
+  ]
+}