@funnelsgrove/runtime 0.1.29 → 0.1.31

package/dist/components/RuntimeDevInfoBox.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { clearPaywallStateValue } from '../services/funnel-state.service.js';
 import { RUNTIME_PUBLIC_ENV_KEYS, runtimePublicConfig, } from '../services/public-env.js';
+import { isPreviewFrameRuntimeSearch } from '../services/preview-frame.service.js';
 const normalizeDisplayValue = (value) => {
     if (value === null || typeof value === 'undefined' || value === '') {
         return '(empty)';
@@ -19,6 +20,19 @@ const runtimePublicConfigEntries = () => {
 const canUseDom = () => {
     return typeof window !== 'undefined';
 };
+const isRuntimeDevInfoHidden = () => {
+    if (!canUseDom()) {
+        return false;
+    }
+    try {
+        const search = window.location.search;
+        return (new URLSearchParams(search).get('hideRuntimeDevTools') === '1' ||
+            isPreviewFrameRuntimeSearch(search));
+    }
+    catch (_a) {
+        return false;
+    }
+};
 export const copyRuntimeDevInfoValue = async (value) => {
     var _a, _b;
     if (!value || value === '(empty)') {
@@ -65,7 +79,7 @@ export function RuntimeDevInfoBox({ runtimeMode, user, onSwitchToLiveMode, confi
     const [copiedKey, setCopiedKey] = useState(null);
     const [resetDone, setResetDone] = useState(false);
     const configItems = useMemo(() => [...configValues, ...runtimePublicConfigEntries()], [configValues]);
-    if (runtimeMode !== 'test') {
+    if (runtimeMode !== 'test' || isRuntimeDevInfoHidden()) {
         return null;
     }
     const markCopied = (key) => {

package/dist/runtime/posthog-flags.d.ts

@@ -4,6 +4,8 @@ type BootstrapConfig = {
     apiKey: string;
     apiHost: string;
     distinctId: string;
+    projectId?: string;
+    funnelId?: string;
 };
 export declare const bootstrapPostHog: (config: BootstrapConfig) => Promise<void>;
 export declare const isPostHogReady: () => boolean;

package/dist/runtime/posthog-flags.js

@@ -2,6 +2,19 @@ import posthog from 'posthog-js';
 let initialized = false;
 let readyPromise = null;
 export const POSTHOG_FEATURE_FLAG_READY_TIMEOUT_MS = 2500;
+const buildFlagScopeProperties = (config) => {
+    var _a, _b;
+    const properties = {};
+    const projectId = (_a = config.projectId) === null || _a === void 0 ? void 0 : _a.trim();
+    const funnelId = (_b = config.funnelId) === null || _b === void 0 ? void 0 : _b.trim();
+    if (projectId) {
+        properties.project_id = projectId;
+    }
+    if (funnelId) {
+        properties.funnel_id = funnelId;
+    }
+    return properties;
+};
 export const bootstrapPostHog = (config) => {
     if (readyPromise) {
         return readyPromise;
@@ -27,13 +40,19 @@ export const bootstrapPostHog = (config) => {
             api_host: config.apiHost,
             persistence: 'localStorage+cookie',
             person_profiles: 'identified_only',
+            advanced_disable_feature_flags_on_first_load: true,
             bootstrap: { distinctID: config.distinctId },
             loaded: () => {
+                const scopeProperties = buildFlagScopeProperties(config);
+                if (Object.keys(scopeProperties).length > 0) {
+                    posthog.setPersonPropertiesForFlags(scopeProperties, false);
+                }
                 let unsubscribe = null;
                 unsubscribe = posthog.onFeatureFlags(() => {
                     unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
                     markReady();
                 });
+                posthog.reloadFeatureFlags();
             },
         });
     });

package/dist/runtime/use-funnel-flow-controller.js

@@ -275,6 +275,8 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
             apiKey: POSTHOG_PROJECT_API_KEY,
             apiHost: POSTHOG_API_HOST,
             distinctId: localUserId,
+            projectId: PROJECT_ID,
+            funnelId: FUNNEL_ID,
         })
             .then(() => setPostHogReady(true))
             .catch((error) => {
@@ -352,6 +354,7 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
             completedAt: new Date().toISOString(),
             choices,
         };
+        const stepType = meta.type;
         const startedAt = stepStartedAtByIdRef.current[meta.id] || record.completedAt;
         const durationMs = Math.max(0, new Date(record.completedAt).getTime() - new Date(startedAt).getTime());
         dispatchWindowCustomEvent('funnel:step-completed', record);
@@ -360,11 +363,12 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
                 userId: currentUserIdRef.current,
                 stepId: record.stepId,
                 stepName: record.stepName,
+                stepType,
                 startedAt,
                 endedAt: record.completedAt,
                 selected: record.choices,
             });
-            capturePostHogStepEvent('step_completed', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, environment: runtimeMode, step_id: record.stepId, step_name: record.stepName, started_at: startedAt, ended_at: record.completedAt, duration_ms: Number.isFinite(durationMs) ? durationMs : undefined, selected: record.choices }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
+            capturePostHogStepEvent('step_completed', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, environment: runtimeMode, step_id: record.stepId, step_name: record.stepName, step_type: stepType, started_at: startedAt, ended_at: record.completedAt, duration_ms: Number.isFinite(durationMs) ? durationMs : undefined, selected: record.choices }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
         }
         setUser((prev) => {
             var _a, _b;
@@ -410,15 +414,17 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
         }
         const startedAt = new Date().toISOString();
         const stepName = (renderedStepMeta === null || renderedStepMeta === void 0 ? void 0 : renderedStepMeta.name) || (renderedStepMeta === null || renderedStepMeta === void 0 ? void 0 : renderedStepMeta.title) || renderedStepId;
+        const stepType = renderedStepMeta === null || renderedStepMeta === void 0 ? void 0 : renderedStepMeta.type;
         stepStartedAtByIdRef.current[renderedStepId] = startedAt;
         if (!isPreviewRuntime) {
             apiService.trackStepStarted({
                 userId: currentUserIdRef.current,
                 stepId: renderedStepId,
                 stepName,
+                stepType,
                 startedAt,
             });
-            capturePostHogStepEvent('step_started', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, environment: runtimeMode, step_id: renderedStepId, step_name: stepName, started_at: startedAt }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
+            capturePostHogStepEvent('step_started', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, environment: runtimeMode, step_id: renderedStepId, step_name: stepName, step_type: stepType, started_at: startedAt }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
             if (!firstStepViewedTrackedRef.current && safeActiveStepId === defaultStepId) {
                 firstStepViewedTrackedRef.current = true;
                 (_a = analytics === null || analytics === void 0 ? void 0 : analytics.trackFirstStepViewed) === null || _a === void 0 ? void 0 : _a.call(analytics, {
@@ -439,6 +445,7 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
         const engagedStepId = renderedStepId;
         const engagedStartedAt = startedAt;
         const engagedStepName = stepName;
+        const engagedStepType = stepType;
         const timer = window.setTimeout(() => {
             if (prevStepIdRef.current !== engagedStepId || engagedStepIdsRef.current.has(engagedStepId)) {
                 return;
@@ -450,6 +457,7 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
                 eventType: 'step_engaged',
                 stepId: engagedStepId,
                 stepName: engagedStepName,
+                stepType: engagedStepType,
                 startedAt: engagedStartedAt,
                 endedAt: engagedAt,
                 metadata: {
@@ -457,7 +465,7 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
                     engagementThresholdMs: FIRST_STEP_ENGAGEMENT_THRESHOLD_MS,
                 },
             });
-            capturePostHogStepEvent('step_engaged', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, environment: runtimeMode, step_id: engagedStepId, step_name: engagedStepName, started_at: engagedStartedAt, ended_at: engagedAt, duration_ms: FIRST_STEP_ENGAGEMENT_THRESHOLD_MS, engagement_threshold_ms: FIRST_STEP_ENGAGEMENT_THRESHOLD_MS }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
+            capturePostHogStepEvent('step_engaged', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, environment: runtimeMode, step_id: engagedStepId, step_name: engagedStepName, step_type: engagedStepType, started_at: engagedStartedAt, ended_at: engagedAt, duration_ms: FIRST_STEP_ENGAGEMENT_THRESHOLD_MS, engagement_threshold_ms: FIRST_STEP_ENGAGEMENT_THRESHOLD_MS }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
         }, FIRST_STEP_ENGAGEMENT_THRESHOLD_MS);
         return () => window.clearTimeout(timer);
     }, [

package/dist/services/api.service.d.ts

@@ -16,6 +16,7 @@ export type FunnelEvent = {
     eventType: string;
     stepId?: string;
     stepName?: string;
+    stepType?: string;
     startedAt?: string;
     endedAt?: string;
     selected?: Record<string, unknown>;
@@ -25,6 +26,7 @@ export type StepCompletionEvent = {
     userId: string;
     stepId: string;
     stepName: string;
+    stepType?: string;
     startedAt: string;
     endedAt: string;
     selected: Record<string, unknown>;
@@ -104,6 +106,7 @@ declare class ApiService {
         userId: string;
         stepId: string;
         stepName: string;
+        stepType?: string;
         startedAt: string;
     }): void;
     trackStepCompleted(event: StepCompletionEvent): void;

package/dist/services/api.service.js

@@ -493,6 +493,7 @@ class ApiService {
             eventType: 'step_start',
             stepId: input.stepId,
             stepName: input.stepName,
+            stepType: input.stepType,
             startedAt: input.startedAt,
         });
     }
@@ -502,6 +503,7 @@ class ApiService {
             eventType: 'step_end',
             stepId: event.stepId,
             stepName: event.stepName,
+            stepType: event.stepType,
             startedAt: event.startedAt,
             endedAt: event.endedAt,
             selected: event.selected,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/runtime",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",