@outlit/browser 1.1.0 → 1.2.0

package/dist/vue/index.d.mts

@@ -0,0 +1,198 @@
+import { App, InjectionKey, ShallowRef, Ref } from 'vue';
+import { f as OutlitOptions, O as Outlit, U as UserIdentity, B as BillingOptions } from '../tracker-BTkkFb0f.mjs';
+import { BrowserTrackOptions, BrowserIdentifyOptions } from '@outlit/core';
+
+interface OutlitPluginOptions extends Omit<OutlitOptions, "trackPageviews"> {
+    /**
+     * Whether to automatically track pageviews.
+     * @default true
+     */
+    trackPageviews?: boolean;
+    /**
+     * Whether to start tracking automatically.
+     * Set to false if you need to wait for user consent.
+     * @default true
+     */
+    autoTrack?: boolean;
+}
+interface OutlitInstance {
+    outlit: ShallowRef<Outlit | null>;
+    isInitialized: Readonly<Ref<boolean>>;
+    isTrackingEnabled: Readonly<Ref<boolean>>;
+    enableTracking: () => void;
+    /**
+     * Set the current user. Automatically calls identify when user changes.
+     * Pass null to clear the user (logout).
+     */
+    setUser: (user: UserIdentity | null) => void;
+}
+declare const OutlitKey: InjectionKey<OutlitInstance>;
+/**
+ * Vue plugin to install Outlit.
+ *
+ * @example
+ * ```ts
+ * // main.ts
+ * import { createApp } from 'vue'
+ * import { OutlitPlugin } from '@outlit/browser/vue'
+ *
+ * const app = createApp(App)
+ * app.use(OutlitPlugin, { publicKey: 'pk_xxx' })
+ * app.mount('#app')
+ * ```
+ */
+declare const OutlitPlugin: {
+    install(app: App, options: OutlitPluginOptions): void;
+};
+
+interface UseOutlitReturn {
+    /**
+     * Track a custom event.
+     */
+    track: (eventName: string, properties?: BrowserTrackOptions["properties"]) => void;
+    /**
+     * Identify the current visitor.
+     * Links the anonymous visitor to a known user.
+     */
+    identify: (options: BrowserIdentifyOptions) => void;
+    /**
+     * Get the current visitor ID.
+     * Returns null if tracking is not enabled.
+     */
+    getVisitorId: () => string | null;
+    /**
+     * Set the current user identity.
+     * Use this for persistent identity after login.
+     * Automatically calls identify().
+     */
+    setUser: (identity: UserIdentity) => void;
+    /**
+     * Clear the current user identity (on logout).
+     */
+    clearUser: () => void;
+    /**
+     * User namespace methods for contact journey stages.
+     */
+    user: {
+        identify: (options: BrowserIdentifyOptions) => void;
+        activate: (properties?: Record<string, string | number | boolean | null>) => void;
+        engaged: (properties?: Record<string, string | number | boolean | null>) => void;
+        inactive: (properties?: Record<string, string | number | boolean | null>) => void;
+    };
+    /**
+     * Customer namespace methods for billing status.
+     */
+    customer: {
+        trialing: (options: BillingOptions) => void;
+        paid: (options: BillingOptions) => void;
+        churned: (options: BillingOptions) => void;
+    };
+    /**
+     * Whether Outlit is initialized.
+     */
+    isInitialized: Ref<boolean>;
+    /**
+     * Whether tracking is currently enabled.
+     */
+    isTrackingEnabled: Ref<boolean>;
+    /**
+     * Enable tracking. Call this after obtaining user consent.
+     */
+    enableTracking: () => void;
+}
+/**
+ * Composable to access the Outlit client.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useOutlit } from '@outlit/browser/vue'
+ *
+ * const { track, user } = useOutlit()
+ *
+ * const handleClick = () => {
+ *   user.activate({ milestone: 'onboarding_complete' })
+ * }
+ * </script>
+ * ```
+ */
+declare function useOutlit(): UseOutlitReturn;
+/**
+ * Convenience composable that returns just the track function.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useTrack } from '@outlit/browser/vue'
+ *
+ * const track = useTrack()
+ * </script>
+ *
+ * <template>
+ *   <button @click="track('button_clicked')">Click me</button>
+ * </template>
+ * ```
+ */
+declare function useTrack(): (eventName: string, properties?: BrowserTrackOptions["properties"]) => void;
+/**
+ * Convenience composable that returns just the identify function.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useIdentify } from '@outlit/browser/vue'
+ *
+ * const identify = useIdentify()
+ *
+ * const onLogin = (user) => {
+ *   identify({ email: user.email, traits: { name: user.name } })
+ * }
+ * </script>
+ * ```
+ */
+declare function useIdentify(): (options: BrowserIdentifyOptions) => void;
+/**
+ * Composable that automatically syncs a reactive user ref with Outlit.
+ * When the user ref changes, it automatically calls setUser() or clearUser().
+ *
+ * This is the recommended way to handle auth state in Vue apps.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useOutlitUser } from '@outlit/browser/vue'
+ *
+ * // Your auth state
+ * const currentUser = ref(null)
+ *
+ * // Auto-sync with Outlit
+ * useOutlitUser(currentUser)
+ *
+ * // When user logs in
+ * const onLogin = (user) => {
+ *   currentUser.value = {
+ *     email: user.email,
+ *     userId: user.id,
+ *     traits: { name: user.name, plan: user.plan }
+ *   }
+ * }
+ *
+ * // When user logs out
+ * const onLogout = () => {
+ *   currentUser.value = null
+ * }
+ * </script>
+ * ```
+ */
+declare function useOutlitUser(userRef: Ref<UserIdentity | null | undefined>): void;
+/**
+ * Return type of useTrack composable
+ */
+type UseTrackReturn = ReturnType<typeof useTrack>;
+/**
+ * Return type of useIdentify composable
+ */
+type UseIdentifyReturn = ReturnType<typeof useIdentify>;
+
+export { type OutlitInstance, OutlitKey, OutlitPlugin, type OutlitPluginOptions, type UseIdentifyReturn, type UseOutlitReturn, type UseTrackReturn, useIdentify, useOutlit, useOutlitUser, useTrack };

package/dist/vue/index.d.ts

@@ -0,0 +1,198 @@
+import { App, InjectionKey, ShallowRef, Ref } from 'vue';
+import { f as OutlitOptions, O as Outlit, U as UserIdentity, B as BillingOptions } from '../tracker-BTkkFb0f.js';
+import { BrowserTrackOptions, BrowserIdentifyOptions } from '@outlit/core';
+
+interface OutlitPluginOptions extends Omit<OutlitOptions, "trackPageviews"> {
+    /**
+     * Whether to automatically track pageviews.
+     * @default true
+     */
+    trackPageviews?: boolean;
+    /**
+     * Whether to start tracking automatically.
+     * Set to false if you need to wait for user consent.
+     * @default true
+     */
+    autoTrack?: boolean;
+}
+interface OutlitInstance {
+    outlit: ShallowRef<Outlit | null>;
+    isInitialized: Readonly<Ref<boolean>>;
+    isTrackingEnabled: Readonly<Ref<boolean>>;
+    enableTracking: () => void;
+    /**
+     * Set the current user. Automatically calls identify when user changes.
+     * Pass null to clear the user (logout).
+     */
+    setUser: (user: UserIdentity | null) => void;
+}
+declare const OutlitKey: InjectionKey<OutlitInstance>;
+/**
+ * Vue plugin to install Outlit.
+ *
+ * @example
+ * ```ts
+ * // main.ts
+ * import { createApp } from 'vue'
+ * import { OutlitPlugin } from '@outlit/browser/vue'
+ *
+ * const app = createApp(App)
+ * app.use(OutlitPlugin, { publicKey: 'pk_xxx' })
+ * app.mount('#app')
+ * ```
+ */
+declare const OutlitPlugin: {
+    install(app: App, options: OutlitPluginOptions): void;
+};
+
+interface UseOutlitReturn {
+    /**
+     * Track a custom event.
+     */
+    track: (eventName: string, properties?: BrowserTrackOptions["properties"]) => void;
+    /**
+     * Identify the current visitor.
+     * Links the anonymous visitor to a known user.
+     */
+    identify: (options: BrowserIdentifyOptions) => void;
+    /**
+     * Get the current visitor ID.
+     * Returns null if tracking is not enabled.
+     */
+    getVisitorId: () => string | null;
+    /**
+     * Set the current user identity.
+     * Use this for persistent identity after login.
+     * Automatically calls identify().
+     */
+    setUser: (identity: UserIdentity) => void;
+    /**
+     * Clear the current user identity (on logout).
+     */
+    clearUser: () => void;
+    /**
+     * User namespace methods for contact journey stages.
+     */
+    user: {
+        identify: (options: BrowserIdentifyOptions) => void;
+        activate: (properties?: Record<string, string | number | boolean | null>) => void;
+        engaged: (properties?: Record<string, string | number | boolean | null>) => void;
+        inactive: (properties?: Record<string, string | number | boolean | null>) => void;
+    };
+    /**
+     * Customer namespace methods for billing status.
+     */
+    customer: {
+        trialing: (options: BillingOptions) => void;
+        paid: (options: BillingOptions) => void;
+        churned: (options: BillingOptions) => void;
+    };
+    /**
+     * Whether Outlit is initialized.
+     */
+    isInitialized: Ref<boolean>;
+    /**
+     * Whether tracking is currently enabled.
+     */
+    isTrackingEnabled: Ref<boolean>;
+    /**
+     * Enable tracking. Call this after obtaining user consent.
+     */
+    enableTracking: () => void;
+}
+/**
+ * Composable to access the Outlit client.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useOutlit } from '@outlit/browser/vue'
+ *
+ * const { track, user } = useOutlit()
+ *
+ * const handleClick = () => {
+ *   user.activate({ milestone: 'onboarding_complete' })
+ * }
+ * </script>
+ * ```
+ */
+declare function useOutlit(): UseOutlitReturn;
+/**
+ * Convenience composable that returns just the track function.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useTrack } from '@outlit/browser/vue'
+ *
+ * const track = useTrack()
+ * </script>
+ *
+ * <template>
+ *   <button @click="track('button_clicked')">Click me</button>
+ * </template>
+ * ```
+ */
+declare function useTrack(): (eventName: string, properties?: BrowserTrackOptions["properties"]) => void;
+/**
+ * Convenience composable that returns just the identify function.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useIdentify } from '@outlit/browser/vue'
+ *
+ * const identify = useIdentify()
+ *
+ * const onLogin = (user) => {
+ *   identify({ email: user.email, traits: { name: user.name } })
+ * }
+ * </script>
+ * ```
+ */
+declare function useIdentify(): (options: BrowserIdentifyOptions) => void;
+/**
+ * Composable that automatically syncs a reactive user ref with Outlit.
+ * When the user ref changes, it automatically calls setUser() or clearUser().
+ *
+ * This is the recommended way to handle auth state in Vue apps.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useOutlitUser } from '@outlit/browser/vue'
+ *
+ * // Your auth state
+ * const currentUser = ref(null)
+ *
+ * // Auto-sync with Outlit
+ * useOutlitUser(currentUser)
+ *
+ * // When user logs in
+ * const onLogin = (user) => {
+ *   currentUser.value = {
+ *     email: user.email,
+ *     userId: user.id,
+ *     traits: { name: user.name, plan: user.plan }
+ *   }
+ * }
+ *
+ * // When user logs out
+ * const onLogout = () => {
+ *   currentUser.value = null
+ * }
+ * </script>
+ * ```
+ */
+declare function useOutlitUser(userRef: Ref<UserIdentity | null | undefined>): void;
+/**
+ * Return type of useTrack composable
+ */
+type UseTrackReturn = ReturnType<typeof useTrack>;
+/**
+ * Return type of useIdentify composable
+ */
+type UseIdentifyReturn = ReturnType<typeof useIdentify>;
+
+export { type OutlitInstance, OutlitKey, OutlitPlugin, type OutlitPluginOptions, type UseIdentifyReturn, type UseOutlitReturn, type UseTrackReturn, useIdentify, useOutlit, useOutlitUser, useTrack };