@funnelsgrove/runtime 0.1.23 → 0.1.25

package/dist/runtime/funnel-flow.d.ts

@@ -15,8 +15,10 @@ export declare const resolveNextStepFromContext: <StepId extends string>(input:
     resolveRenderableStepId: (stepId: string | null | undefined) => StepId | null;
     getConfiguredNextStepId: (stepId: StepId, context: {
         attributes: FunnelUserAnswers;
+        ignoreExperiment?: boolean;
         resolveExperimentVariantKey: (experiment: FunnelManifestExperiment) => string | null;
     }) => StepId | null;
     getSequentialNextStepId: (stepId: StepId) => StepId | null;
+    ignoreExperiment?: boolean;
     resolveExperimentVariantKey: (experiment: FunnelManifestExperiment) => string | null;
 }) => StepId;

package/dist/runtime/funnel-flow.js

@@ -43,6 +43,7 @@ export const resolveNextStepFromContext = (input) => {
     var _a, _b;
     const configuredStepId = input.getConfiguredNextStepId(input.stepId, {
         attributes: input.attributes,
+        ignoreExperiment: input.ignoreExperiment,
         resolveExperimentVariantKey: input.resolveExperimentVariantKey,
     });
     if (configuredStepId) {

package/dist/runtime/funnel-runtime.d.ts

@@ -1,6 +1,16 @@
 import type { FunnelManifest, FunnelManifestExperiment } from '../config/funnel.manifest.types.js';
 export type FunnelStepId = string;
+export type FunnelStepOrderGraph = {
+    steps: readonly {
+        id: string;
+    }[];
+    entryPointStepIds?: readonly string[];
+    edgesByStepId?: Partial<Record<string, readonly {
+        toStepId: string;
+    }[]>>;
+};
 export declare const getFunnelStepSequence: (manifest: FunnelManifest) => FunnelStepId[];
+export declare const getFunnelStepIdsByEdgeOrder: (graph: FunnelStepOrderGraph) => FunnelStepId[];
 export declare const getFunnelEntryPoints: (manifest: FunnelManifest) => {
     stepId: FunnelStepId;
     id: string;
@@ -29,5 +39,6 @@ export declare const resolveRuntimeInitialStepId: (input: {
 }) => FunnelStepId;
 export declare const resolveConfiguredNextStep: (manifest: FunnelManifest, stepId: FunnelStepId, context: {
     attributes: Record<string, unknown>;
+    ignoreExperiment?: boolean;
     resolveExperimentVariantKey: (experiment: FunnelManifestExperiment) => string | null;
 }) => FunnelStepId | null;

package/dist/runtime/funnel-runtime.js

@@ -1,5 +1,31 @@
 import { getChoiceTargetsFromEdges, isManifestStepId, resolveInitialStepId, resolveNextStepId, } from './route-resolver.js';
 export const getFunnelStepSequence = (manifest) => manifest.steps.map((step) => step.id);
+export const getFunnelStepIdsByEdgeOrder = (graph) => {
+    const stepIds = graph.steps.map((step) => step.id).filter(Boolean);
+    const firstStepId = stepIds[0];
+    if (!firstStepId || !graph.edgesByStepId || Object.keys(graph.edgesByStepId).length === 0) {
+        return stepIds;
+    }
+    const stepIdSet = new Set(stepIds);
+    const orderedStepIds = [];
+    const visitedStepIds = new Set();
+    const visit = (stepId) => {
+        var _a;
+        if (!stepIdSet.has(stepId) || visitedStepIds.has(stepId)) {
+            return;
+        }
+        visitedStepIds.add(stepId);
+        orderedStepIds.push(stepId);
+        for (const edge of ((_a = graph.edgesByStepId) === null || _a === void 0 ? void 0 : _a[stepId]) || []) {
+            visit(edge.toStepId);
+        }
+    };
+    visit(firstStepId);
+    for (const entryPointStepId of graph.entryPointStepIds || []) {
+        visit(entryPointStepId);
+    }
+    return orderedStepIds.length > 0 ? orderedStepIds : stepIds;
+};
 export const getFunnelEntryPoints = (manifest) => (manifest.entryPoints || []).map((entryPoint) => (Object.assign(Object.assign({}, entryPoint), { stepId: entryPoint.stepId })));
 export const getFunnelExperiments = (manifest) => manifest.experiments.map((experiment) => (Object.assign(Object.assign({}, experiment), { stepId: experiment.stepId, variants: experiment.variants.map((variant) => (Object.assign(Object.assign({}, variant), { routeToStepId: variant.routeToStepId }))) })));
 export const getDefaultFunnelStepId = (manifest) => getFunnelStepSequence(manifest)[0];
@@ -60,6 +86,7 @@ export const resolveConfiguredNextStep = (manifest, stepId, context) => {
         manifest,
         currentStepId: stepId,
         attributes: context.attributes,
+        ignoreExperiment: context.ignoreExperiment,
         resolveExperimentVariantKey: context.resolveExperimentVariantKey,
     });
     return nextStepId && isManifestStepId(manifest, nextStepId) && getIsFunnelStepId(manifest, nextStepId)

package/dist/runtime/route-resolver.d.ts

@@ -13,5 +13,6 @@ export declare const resolveNextStepId: (input: {
     manifest: FunnelManifest;
     currentStepId: string;
     attributes: Record<string, unknown>;
+    ignoreExperiment?: boolean;
     resolveExperimentVariantKey: (experiment: FunnelManifestExperiment) => string | null;
 }) => string | null;

package/dist/runtime/route-resolver.js

@@ -65,7 +65,7 @@ export const resolveInitialStepId = (input) => {
 export const resolveNextStepId = (input) => {
     var _a;
     const experiment = getExperimentForStep(input.manifest, input.currentStepId);
-    if (experiment) {
+    if (experiment && !input.ignoreExperiment) {
         const variantKey = input.resolveExperimentVariantKey(experiment);
         const matchedVariant = variantKey
             ? experiment.variants.find((variant) => variant.variantKey === variantKey)

package/dist/runtime/use-funnel-flow-controller.d.ts

@@ -36,6 +36,7 @@ type UseFunnelFlowControllerInput<StepId extends string> = {
     isFunnelStepId: (value: string) => value is StepId;
     resolveConfiguredNextStep: (stepId: StepId, context: {
         attributes: Record<string, unknown>;
+        ignoreExperiment?: boolean;
         resolveExperimentVariantKey: (experiment: FunnelManifestExperiment) => string | null;
     }) => StepId | null;
     resolveRuntimeInitialStepId: (input: {

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

@@ -130,14 +130,14 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
         }
         return (_a = resolveExperimentVariant(experiment.experimentId)) !== null && _a !== void 0 ? _a : null;
     }, [editorVariantOverrides, postHogReady]);
+    const activeExperimentForStep = useMemo(() => funnelExperiments.find((candidate) => candidate.stepId === safeActiveStepId) || null, [funnelExperiments, safeActiveStepId]);
     const renderedStepId = useMemo(() => {
-        const experiment = funnelExperiments.find((candidate) => candidate.stepId === safeActiveStepId);
-        if (!experiment) {
+        if (!activeExperimentForStep) {
             return safeActiveStepId;
         }
-        const override = editorVariantOverrides[experiment.experimentId];
+        const override = editorVariantOverrides[activeExperimentForStep.experimentId];
         if (override) {
-            const matchedVariant = experiment.variants.find((variant) => variant.variantKey === override);
+            const matchedVariant = activeExperimentForStep.variants.find((variant) => variant.variantKey === override);
             const variantStepId = resolveRenderableStepId((matchedVariant === null || matchedVariant === void 0 ? void 0 : matchedVariant.routeToStepId) || null);
             return variantStepId !== null && variantStepId !== void 0 ? variantStepId : safeActiveStepId;
         }
@@ -145,15 +145,15 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
             return safeActiveStepId;
         }
         const assignment = resolveExperimentAssignment({
-            experimentId: experiment.experimentId,
-            variants: experiment.variants,
+            experimentId: activeExperimentForStep.experimentId,
+            variants: activeExperimentForStep.variants,
         });
         if (!assignment) {
             return safeActiveStepId;
         }
         const variantStepId = resolveRenderableStepId(assignment.routeToStepId);
         return variantStepId !== null && variantStepId !== void 0 ? variantStepId : safeActiveStepId;
-    }, [editorVariantOverrides, funnelExperiments, postHogReady, resolveRenderableStepId, safeActiveStepId]);
+    }, [activeExperimentForStep, editorVariantOverrides, postHogReady, resolveRenderableStepId, safeActiveStepId]);
     const renderedStepMeta = stepById[renderedStepId];
     const activeStepComponent = stepComponentById[renderedStepId];
     const postHogFeatureFlags = useMemo(() => {
@@ -188,6 +188,22 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
         }
         setActiveStepId(safeStepId);
     }, [getPathForStep, resolveRenderableStepId, safeInitialStepId, shouldLockToInitialStep]);
+    useEffect(() => {
+        if (!activeExperimentForStep ||
+            renderSuspended ||
+            shouldLockToInitialStep ||
+            renderedStepId === safeActiveStepId) {
+            return;
+        }
+        goToStep(renderedStepId);
+    }, [
+        activeExperimentForStep,
+        goToStep,
+        renderSuspended,
+        renderedStepId,
+        safeActiveStepId,
+        shouldLockToInitialStep,
+    ]);
     const setAnswer = useCallback((key, value) => {
         setAttributes((prev) => (Object.assign(Object.assign({}, prev), { [key]: value })));
     }, []);
@@ -222,7 +238,7 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
         }, 100);
         return () => window.clearInterval(intervalId);
     }, [postHogReady]);
-    const resolveNextStepId = useCallback((stepId) => {
+    const resolveNextStepId = useCallback((stepId, options) => {
         return resolveNextStepFromContext({
             stepId,
             attributes: attributesRef.current,
@@ -230,6 +246,7 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
             resolveRenderableStepId,
             getConfiguredNextStepId: (currentStepId, context) => resolveConfiguredNextStep(currentStepId, context),
             getSequentialNextStepId,
+            ignoreExperiment: options === null || options === void 0 ? void 0 : options.ignoreExperiment,
             resolveExperimentVariantKey,
         });
     }, [
@@ -240,8 +257,10 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
         safeInitialStepId,
     ]);
     const goNext = useCallback(() => {
-        goToStep(resolveNextStepId(safeActiveStepId));
-    }, [goToStep, resolveNextStepId, safeActiveStepId]);
+        goToStep(resolveNextStepId(renderedStepId, {
+            ignoreExperiment: Boolean(activeExperimentForStep && renderedStepId === safeActiveStepId),
+        }));
+    }, [activeExperimentForStep, goToStep, renderedStepId, resolveNextStepId, safeActiveStepId]);
     useEffect(() => {
         const localUserId = apiService.getOrCreateClientUserId();
         const urlUserAttributes = resolveUrlUserAttributes();
@@ -383,6 +402,9 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
             return;
         }
         const prevId = prevStepIdRef.current;
+        if (prevId === renderedStepId) {
+            return;
+        }
         if (prevId && prevId !== renderedStepId) {
             recordStepCompletion(prevId);
         }
@@ -476,19 +498,22 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
         return () => window.removeEventListener('popstate', syncStepWithPath);
     }, [getStepIdFromPath, resolveRenderableStepId, safeInitialStepId, shouldLockToInitialStep]);
     const nextStepId = useMemo(() => resolveNextStepFromContext({
-        stepId: safeActiveStepId,
+        stepId: renderedStepId,
         attributes,
         safeInitialStepId,
         resolveRenderableStepId,
         getConfiguredNextStepId: (currentStepId, context) => resolveConfiguredNextStep(currentStepId, context),
         getSequentialNextStepId,
+        ignoreExperiment: Boolean(activeExperimentForStep && renderedStepId === safeActiveStepId),
         resolveExperimentVariantKey,
     }), [
+        activeExperimentForStep,
         attributes,
         getSequentialNextStepId,
         resolveConfiguredNextStep,
         resolveExperimentVariantKey,
         resolveRenderableStepId,
+        renderedStepId,
         safeActiveStepId,
         safeInitialStepId,
     ]);
@@ -503,12 +528,23 @@ export function useFunnelFlowController({ analytics, initialStepId, lockToInitia
         if (!shouldRunAutoAdvanceTimer({ autoAdvanceMs, isPreviewRuntime, shouldLockToInitialStep })) {
             return;
         }
-        const autoAdvanceTarget = resolveNextStepId(safeActiveStepId);
+        const autoAdvanceTarget = resolveNextStepId(renderedStepId, {
+            ignoreExperiment: Boolean(activeExperimentForStep && renderedStepId === safeActiveStepId),
+        });
         const timer = window.setTimeout(() => {
             goToStep(autoAdvanceTarget);
         }, autoAdvanceMs);
         return () => window.clearTimeout(timer);
-    }, [autoAdvanceMs, goToStep, isPreviewRuntime, resolveNextStepId, safeActiveStepId, shouldLockToInitialStep]);
+    }, [
+        activeExperimentForStep,
+        autoAdvanceMs,
+        goToStep,
+        isPreviewRuntime,
+        renderedStepId,
+        resolveNextStepId,
+        safeActiveStepId,
+        shouldLockToInitialStep,
+    ]);
     const handleContinue = useCallback(() => {
         goToStep(nextStepId);
     }, [goToStep, nextStepId]);

package/package.json

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