@tthr/vue 0.0.71 → 0.0.75

package/nuxt/runtime/composables.ts

@@ -0,0 +1,506 @@
+/**
+ * Nuxt composables for Tether
+ *
+ * These are auto-imported when using the Tether Nuxt module.
+ * Queries and mutations are executed server-side to keep API keys secure.
+ * WebSocket subscriptions run client-side for realtime updates - automatically!
+ */
+
+import { ref, onMounted, onUnmounted, computed, type Ref, type ComputedRef } from 'vue';
+import { useAsyncData } from '#imports';
+
+// ============================================================================
+// Shared WebSocket Connection Manager
+// ============================================================================
+
+interface SubscriptionCallback {
+  onData: (data: unknown) => void;
+  onInvalidate: () => void;
+}
+
+interface ConnectionManager {
+  ws: WebSocket | null;
+  subscriptions: Map<string, SubscriptionCallback>;
+  isConnecting: boolean;
+  reconnectTimeout: ReturnType<typeof setTimeout> | null;
+  heartbeatInterval: ReturnType<typeof setInterval> | null;
+  heartbeatTimeout: ReturnType<typeof setTimeout> | null;
+  awaitingPong: boolean;
+  refCount: number;
+}
+
+// Singleton connection manager (client-side only)
+let connectionManager: ConnectionManager | null = null;
+
+function getConnectionManager(): ConnectionManager {
+  if (!connectionManager) {
+    connectionManager = {
+      ws: null,
+      subscriptions: new Map(),
+      isConnecting: false,
+      reconnectTimeout: null,
+      heartbeatInterval: null,
+      heartbeatTimeout: null,
+      awaitingPong: false,
+      refCount: 0,
+    };
+  }
+  return connectionManager;
+}
+
+const HEARTBEAT_INTERVAL = 25000;
+const HEARTBEAT_TIMEOUT = 15000;
+
+function startHeartbeat(cm: ConnectionManager) {
+  stopHeartbeat(cm);
+  cm.heartbeatInterval = setInterval(() => {
+    if (cm.ws?.readyState === WebSocket.OPEN) {
+      cm.awaitingPong = true;
+      cm.ws.send(JSON.stringify({ type: 'ping' }));
+      cm.heartbeatTimeout = setTimeout(() => {
+        if (cm.awaitingPong) {
+          console.warn('[Tether] Heartbeat timeout - forcing reconnect');
+          cm.ws?.close();
+        }
+      }, HEARTBEAT_TIMEOUT);
+    }
+  }, HEARTBEAT_INTERVAL);
+}
+
+function stopHeartbeat(cm: ConnectionManager) {
+  if (cm.heartbeatInterval) {
+    clearInterval(cm.heartbeatInterval);
+    cm.heartbeatInterval = null;
+  }
+  if (cm.heartbeatTimeout) {
+    clearTimeout(cm.heartbeatTimeout);
+    cm.heartbeatTimeout = null;
+  }
+  cm.awaitingPong = false;
+}
+
+function connectWebSocket(cm: ConnectionManager) {
+  if (cm.isConnecting) return;
+  if (cm.ws && (cm.ws.readyState === WebSocket.OPEN || cm.ws.readyState === WebSocket.CONNECTING)) {
+    return;
+  }
+
+  const config = (window as any).__TETHER_CONFIG__;
+  if (!config?.wsUrl || !config?.projectId) {
+    console.warn('[Tether] WebSocket config not available');
+    return;
+  }
+
+  cm.isConnecting = true;
+  const wsUrl = `${config.wsUrl}/ws/${config.projectId}`;
+  cm.ws = new WebSocket(wsUrl);
+
+  cm.ws.onopen = () => {
+    cm.isConnecting = false;
+  };
+
+  cm.ws.onmessage = (event) => {
+    try {
+      const message = JSON.parse(event.data);
+
+      if (message.type === 'connected') {
+        startHeartbeat(cm);
+        // Re-subscribe all active subscriptions
+        for (const [subscriptionId, _callback] of cm.subscriptions) {
+          const [queryName, argsJson] = subscriptionId.split('::');
+          const args = argsJson ? JSON.parse(argsJson) : undefined;
+          cm.ws?.send(JSON.stringify({
+            type: 'subscribe',
+            id: subscriptionId,
+            query: queryName,
+            args,
+          }));
+        }
+      } else if (message.type === 'data') {
+        const callback = cm.subscriptions.get(message.id);
+        if (callback) {
+          callback.onData(message.data);
+        }
+      } else if (message.type === 'invalidate') {
+        const callback = cm.subscriptions.get(message.id);
+        if (callback) {
+          callback.onInvalidate();
+        }
+      } else if (message.type === 'pong') {
+        cm.awaitingPong = false;
+        if (cm.heartbeatTimeout) {
+          clearTimeout(cm.heartbeatTimeout);
+          cm.heartbeatTimeout = null;
+        }
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  };
+
+  cm.ws.onclose = () => {
+    cm.isConnecting = false;
+    stopHeartbeat(cm);
+    // Reconnect if there are still active subscriptions
+    if (cm.subscriptions.size > 0) {
+      cm.reconnectTimeout = setTimeout(() => connectWebSocket(cm), 3000);
+    }
+  };
+
+  cm.ws.onerror = () => {
+    cm.isConnecting = false;
+    cm.ws?.close();
+  };
+}
+
+function subscribe(
+  queryName: string,
+  args: Record<string, unknown> | undefined,
+  callbacks: SubscriptionCallback
+): () => void {
+  const cm = getConnectionManager();
+  const subscriptionId = `${queryName}::${JSON.stringify(args ?? {})}`;
+
+  cm.subscriptions.set(subscriptionId, callbacks);
+  cm.refCount++;
+
+  // Connect if not already connected
+  if (!cm.ws || cm.ws.readyState === WebSocket.CLOSED) {
+    connectWebSocket(cm);
+  } else if (cm.ws.readyState === WebSocket.OPEN) {
+    // Already connected - subscribe immediately
+    cm.ws.send(JSON.stringify({
+      type: 'subscribe',
+      id: subscriptionId,
+      query: queryName,
+      args,
+    }));
+  }
+
+  // Return cleanup function
+  return () => {
+    cm.subscriptions.delete(subscriptionId);
+    cm.refCount--;
+
+    // Unsubscribe from server
+    if (cm.ws?.readyState === WebSocket.OPEN) {
+      cm.ws.send(JSON.stringify({
+        type: 'unsubscribe',
+        id: subscriptionId,
+      }));
+    }
+
+    // Close connection if no more subscriptions
+    if (cm.refCount === 0) {
+      if (cm.reconnectTimeout) {
+        clearTimeout(cm.reconnectTimeout);
+        cm.reconnectTimeout = null;
+      }
+      stopHeartbeat(cm);
+      cm.ws?.close();
+      cm.ws = null;
+    }
+  };
+}
+
+// Handle visibility changes globally
+if (typeof window !== 'undefined') {
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      const cm = connectionManager;
+      if (cm && cm.subscriptions.size > 0) {
+        if (!cm.ws || cm.ws.readyState === WebSocket.CLOSED) {
+          if (cm.reconnectTimeout) {
+            clearTimeout(cm.reconnectTimeout);
+            cm.reconnectTimeout = null;
+          }
+          connectWebSocket(cm);
+        }
+      }
+    }
+  });
+}
+
+// ============================================================================
+// Query Composable
+// ============================================================================
+
+/**
+ * Query state returned by useQuery
+ */
+export interface QueryState<T> {
+  data: Ref<T | undefined>;
+  error: Ref<Error | null>;
+  isLoading: ComputedRef<boolean>;
+  isConnected: Ref<boolean>;
+  refetch: () => Promise<void>;
+}
+
+/**
+ * Query function reference
+ */
+export interface QueryFunction<TArgs = void, TResult = unknown> {
+  _name: string;
+  _args?: TArgs;
+  _result?: TResult;
+}
+
+/**
+ * Reactive query composable with automatic realtime updates
+ *
+ * Uses Nuxt's useAsyncData internally for proper SSR support.
+ * Data is fetched on the server and hydrated on the client.
+ * Automatically subscribes to WebSocket updates for realtime sync.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * // That's it! Data automatically updates when it changes anywhere
+ * const { data: posts, isLoading, isConnected } = useQuery(api.posts.list);
+ * </script>
+ * ```
+ */
+export function useQuery<TArgs, TResult>(
+  query: QueryFunction<TArgs, TResult> | string,
+  args?: TArgs
+): QueryState<TResult> {
+  const queryName = typeof query === 'string' ? query : query._name;
+  const queryArgs = args as Record<string, unknown> | undefined;
+
+  // Create a unique key for this query based on name and args
+  const queryKey = `tether-${queryName}-${JSON.stringify(args ?? {})}`;
+
+  // Track WebSocket connection state
+  const isConnected = ref(false);
+
+  // Use Nuxt's useAsyncData for proper SSR support
+  const { data, error: asyncError, status, refresh } = useAsyncData<TResult>(
+    queryKey,
+    async () => {
+      const response = await $fetch<{ data: TResult }>('/api/_tether/query', {
+        method: 'POST',
+        body: {
+          function: queryName,
+          args,
+        },
+      });
+      return response.data;
+    },
+    {
+      dedupe: 'cancel',
+    }
+  );
+
+  // Wrap the error as a computed ref
+  const error = computed(() => {
+    if (asyncError.value) {
+      return asyncError.value instanceof Error
+        ? asyncError.value
+        : new Error(String(asyncError.value));
+    }
+    return null;
+  });
+
+  // Compute isLoading from status
+  const isLoading = computed(() => status.value === 'pending');
+
+  // Refetch function
+  const refetch = async () => {
+    await refresh();
+  };
+
+  // Auto-subscribe on client side
+  if (import.meta.client) {
+    let unsubscribe: (() => void) | null = null;
+
+    onMounted(() => {
+      unsubscribe = subscribe(queryName, queryArgs, {
+        onData: (newData) => {
+          data.value = newData as TResult;
+        },
+        onInvalidate: () => {
+          refresh();
+        },
+      });
+
+      // Track connection state
+      const checkConnection = () => {
+        const cm = connectionManager;
+        isConnected.value = cm?.ws?.readyState === WebSocket.OPEN ?? false;
+      };
+      checkConnection();
+      const interval = setInterval(checkConnection, 1000);
+      onUnmounted(() => clearInterval(interval));
+    });
+
+    onUnmounted(() => {
+      unsubscribe?.();
+    });
+  }
+
+  return {
+    data: data as Ref<TResult | undefined>,
+    error: error as unknown as Ref<Error | null>,
+    isLoading,
+    isConnected,
+    refetch,
+  };
+}
+
+// ============================================================================
+// Mutation Composable
+// ============================================================================
+
+/**
+ * Mutation state returned by useMutation
+ */
+export interface MutationState<TArgs, TResult> {
+  data: Ref<TResult | undefined>;
+  error: Ref<Error | null>;
+  isPending: Ref<boolean>;
+  mutate: (args: TArgs) => Promise<TResult>;
+  reset: () => void;
+}
+
+/**
+ * Mutation function reference
+ */
+export interface MutationFunction<TArgs = void, TResult = unknown> {
+  _name: string;
+  _args?: TArgs;
+  _result?: TResult;
+}
+
+/**
+ * Mutation composable
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const { mutate: createPost, isPending } = useMutation(api.posts.create);
+ *
+ * async function handleSubmit() {
+ *   await createPost({ title: 'Hello', content: '...' });
+ *   // All useQuery subscribers automatically update!
+ * }
+ * </script>
+ * ```
+ */
+export function useMutation<TArgs, TResult>(
+  mutation: MutationFunction<TArgs, TResult> | string
+): MutationState<TArgs, TResult> {
+  const mutationName = typeof mutation === 'string' ? mutation : mutation._name;
+  const data = ref<TResult>();
+  const error = ref<Error | null>(null);
+  const isPending = ref(false);
+
+  const mutate = async (args: TArgs): Promise<TResult> => {
+    try {
+      isPending.value = true;
+      error.value = null;
+
+      const response = await $fetch<{ data: TResult }>('/api/_tether/mutation', {
+        method: 'POST',
+        body: {
+          function: mutationName,
+          args,
+        },
+      });
+
+      data.value = response.data;
+      return response.data;
+    } catch (e) {
+      error.value = e instanceof Error ? e : new Error(String(e));
+      throw e;
+    } finally {
+      isPending.value = false;
+    }
+  };
+
+  const reset = () => {
+    data.value = undefined;
+    error.value = null;
+    isPending.value = false;
+  };
+
+  return {
+    data: data as Ref<TResult | undefined>,
+    error,
+    isPending,
+    mutate,
+    reset,
+  };
+}
+
+// ============================================================================
+// Manual Subscription (for advanced use cases)
+// ============================================================================
+
+/**
+ * Subscription handler options
+ */
+export interface SubscriptionHandlers {
+  /** Called when fresh data is received from the server */
+  onData?: (data: unknown) => void;
+  /** Called when server invalidates the subscription (signals to refetch) */
+  onInvalidate?: () => void;
+}
+
+/**
+ * Manual WebSocket subscription composable
+ *
+ * NOTE: You typically don't need this! useQuery automatically subscribes to updates.
+ * This is only for advanced use cases where you need custom subscription handling.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * // For custom subscription handling (rare)
+ * const { isConnected } = useTetherSubscription('custom.query', {}, {
+ *   onData: (data) => console.log('Got data:', data),
+ *   onInvalidate: () => console.log('Data invalidated'),
+ * });
+ * </script>
+ * ```
+ */
+export function useTetherSubscription(
+  queryName: string,
+  args: Record<string, unknown> | undefined,
+  handlers: SubscriptionHandlers | ((data?: unknown) => void)
+): { isConnected: Ref<boolean> } {
+  const isConnected = ref(false);
+
+  // Normalize handlers
+  const onData = typeof handlers === 'function'
+    ? handlers
+    : handlers.onData ?? (() => {});
+  const onInvalidate = typeof handlers === 'function'
+    ? () => handlers(undefined)
+    : handlers.onInvalidate ?? (() => {});
+
+  if (import.meta.client) {
+    let unsubscribe: (() => void) | null = null;
+
+    onMounted(() => {
+      unsubscribe = subscribe(queryName, args, {
+        onData,
+        onInvalidate,
+      });
+
+      // Track connection state
+      const checkConnection = () => {
+        const cm = connectionManager;
+        isConnected.value = cm?.ws?.readyState === WebSocket.OPEN ?? false;
+      };
+      checkConnection();
+      const interval = setInterval(checkConnection, 1000);
+      onUnmounted(() => clearInterval(interval));
+    });
+
+    onUnmounted(() => {
+      unsubscribe?.();
+    });
+  }
+
+  return { isConnected };
+}

package/nuxt/runtime/plugin.client.ts

@@ -0,0 +1,34 @@
+/**
+ * Client-side Tether plugin
+ *
+ * Sets up the WebSocket configuration for realtime subscriptions.
+ * This only exposes the project ID and WebSocket URL - no secrets.
+ */
+
+import { defineNuxtPlugin, useRuntimeConfig } from '#imports';
+
+declare global {
+  interface Window {
+    __TETHER_CONFIG__?: {
+      projectId: string;
+      wsUrl: string;
+    };
+  }
+}
+
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig();
+
+  // Make config available for WebSocket connections
+  // This is safe - no secrets are exposed
+  const tetherConfig = {
+    projectId: config.public.tether?.projectId || '',
+    wsUrl: config.public.tether?.wsUrl || '',
+  };
+
+  window.__TETHER_CONFIG__ = tetherConfig;
+
+  if (!tetherConfig.wsUrl || !tetherConfig.projectId) {
+    console.warn('[Tether] Config incomplete - WebSocket subscriptions will not work');
+  }
+});

package/nuxt/runtime/server/plugins/cron.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cron.d.ts","sourceRoot":"","sources":["cron.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAiC7B;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,GAC3C,IAAI,CAGN;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAEhE;AAED;;GAEG;AACH,wBAAgB,eAAe,IAAI,MAAM,EAAE,CAE1C;;AA6SD,wBAkCG"}
+{"version":3,"file":"cron.d.ts","sourceRoot":"","sources":["cron.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAqC7B;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,EACpB,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,GAC3C,IAAI,CAGN;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAEhE;AAED;;GAEG;AACH,wBAAgB,eAAe,IAAI,MAAM,EAAE,CAE1C;;AAslBD,wBAmCG"}

package/nuxt/runtime/server/plugins/cron.js

@@ -372,7 +372,8 @@ async function executeViaApi(config, functionName, functionType, args) {
                 try {
                     const error = JSON.parse(responseText);
                     errorMsg = error.error || error.message || `Function '${functionName}' failed with status ${response.status}`;
-                } catch {
+                }
+                catch {
                     errorMsg = responseText || `Function '${functionName}' failed with status ${response.status}`;
                 }
                 log.debug(`/${type} endpoint returned ${response.status}: ${errorMsg}`);
@@ -427,10 +428,11 @@ async function handleCronTrigger(config, trigger) {
                 };
                 // Create tether context with env vars from process.env
                 // Note: For cron execution, env vars should be set in the Nuxt app's environment
+                const processEnv = globalThis.process?.env ?? {};
                 const tether = {
                     env: new Proxy({}, {
                         get(_target, key) {
-                            return process.env[key];
+                            return processEnv[key];
                         },
                     }),
                 };
@@ -469,7 +471,8 @@ async function handleCronTrigger(config, trigger) {
 function startHeartbeat() {
     stopHeartbeat();
     heartbeatTimer = setInterval(() => {
-        if (ws?.readyState === WebSocket.OPEN) {
+        // WebSocket.OPEN = 1
+        if (ws?.readyState === 1) {
             awaitingPong = true;
             log.debug('Sending heartbeat ping');
             ws.send(JSON.stringify({ type: 'ping' }));
@@ -496,16 +499,29 @@ function stopHeartbeat() {
     }
     awaitingPong = false;
 }
-function connect(config) {
-    if (ws?.readyState === WebSocket.OPEN || ws?.readyState === WebSocket.CONNECTING) {
+// WebSocket implementation - loaded dynamically for Node.js
+let WebSocketImpl = null;
+async function getWebSocketImpl() {
+    if (WebSocketImpl)
+        return WebSocketImpl;
+    if (typeof WebSocket !== 'undefined') {
+        WebSocketImpl = WebSocket;
+    }
+    else {
+        // Dynamic import for Node.js ESM compatibility
+        const wsModule = await import('ws');
+        WebSocketImpl = wsModule.default;
+    }
+    return WebSocketImpl;
+}
+async function connect(config) {
+    const WS = await getWebSocketImpl();
+    if (ws?.readyState === WS.OPEN || ws?.readyState === WS.CONNECTING) {
         return;
     }
     try {
         const url = getWsUrl(config);
-        // Use ws package for Node.js
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const WebSocketImpl = typeof WebSocket !== 'undefined' ? WebSocket : require('ws');
-        ws = new WebSocketImpl(url);
+        ws = new WS(url);
         ws.onopen = () => {
             reconnectAttempts = 0;
             log.debug('WebSocket connected');
@@ -568,7 +584,7 @@ function handleReconnect(config) {
     const delay = Math.min(RECONNECT_DELAY * Math.pow(2, reconnectAttempts - 1), 30000);
     log.debug(`Reconnecting in ${delay}ms (attempt ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})`);
     setTimeout(() => {
-        connect(config);
+        connect(config).catch((err) => log.error('Reconnect failed:', err));
     }, delay);
 }
 export default defineNitroPlugin((nitro) => {
@@ -589,7 +605,7 @@ export default defineNitroPlugin((nitro) => {
     const config = { url, projectId, apiKey, environment };
     // Connect on next tick to allow the server to fully initialise
     process.nextTick(() => {
-        connect(config);
+        connect(config).catch((err) => log.error('Initial connect failed:', err));
     });
     // Clean up on shutdown
     nitro.hooks.hook('close', () => {
@@ -602,4 +618,4 @@ export default defineNitroPlugin((nitro) => {
         log.debug('Connection closed');
     });
 });
-//# sourceMappingURL=cron.js.map
+//# sourceMappingURL=cron.js.map