fix: improve survey bundle size

Author: lucasheriques

src/__tests__/surveys.test.ts

@@ -1,28 +1,27 @@
 /// <reference lib="dom" />
 
-import { PostHogSurveys } from '../posthog-surveys'
-import {
-    SurveyType,
-    SurveyQuestionType,
-    Survey,
-    MultipleSurveyQuestion,
-    SurveyQuestionBranchingType,
-    SurveyQuestion,
-    RatingSurveyQuestion,
-} from '../posthog-surveys-types'
+import { generateSurveys, getNextSurveyStep } from '../extensions/surveys'
 import {
     canActivateRepeatedly,
     getDisplayOrderChoices,
     getDisplayOrderQuestions,
 } from '../extensions/surveys/surveys-utils'
-import { PostHogPersistence } from '../posthog-persistence'
 import { PostHog } from '../posthog-core'
+import { PostHogPersistence } from '../posthog-persistence'
+import { PostHogSurveys } from '../posthog-surveys'
+import {
+    MultipleSurveyQuestion,
+    RatingSurveyQuestion,
+    Survey,
+    SurveyQuestion,
+    SurveyQuestionBranchingType,
+    SurveyQuestionType,
+    SurveyType,
+} from '../posthog-surveys-types'
 import { DecideResponse, PostHogConfig, Properties } from '../types'
-import { window } from '../utils/globals'
-import { RequestRouter } from '../utils/request-router'
-import { assignableWindow } from '../utils/globals'
-import { generateSurveys } from '../extensions/surveys'
 import * as globals from '../utils/globals'
+import { assignableWindow, window } from '../utils/globals'
+import { RequestRouter } from '../utils/request-router'
 
 describe('surveys', () => {
     let config: PostHogConfig
@@ -914,8 +913,8 @@ describe('surveys', () => {
                 { type: SurveyQuestionType.Open, question: 'Question A' },
                 { type: SurveyQuestionType.Open, question: 'Question B' },
             ] as SurveyQuestion[]
-            expect(surveys.getNextSurveyStep(survey, 0, 'Some response')).toEqual(1)
-            expect(surveys.getNextSurveyStep(survey, 1, 'Some response')).toEqual(SurveyQuestionBranchingType.End)
+            expect(getNextSurveyStep(survey, 0, 'Some response')).toEqual(1)
+            expect(getNextSurveyStep(survey, 1, 'Some response')).toEqual(SurveyQuestionBranchingType.End)
         })
 
         it('should branch out to `end`', () => {
@@ -927,7 +926,7 @@ describe('surveys', () => {
                 },
                 { type: SurveyQuestionType.Open, question: 'Question B' },
             ] as SurveyQuestion[]
-            expect(surveys.getNextSurveyStep(survey, 0, 'Some response')).toEqual(SurveyQuestionBranchingType.End)
+            expect(getNextSurveyStep(survey, 0, 'Some response')).toEqual(SurveyQuestionBranchingType.End)
         })
 
         it('should branch out to a specific question', () => {
@@ -940,7 +939,7 @@ describe('surveys', () => {
                 { type: SurveyQuestionType.Open, question: 'Question B' },
                 { type: SurveyQuestionType.Open, question: 'Question C' },
             ] as SurveyQuestion[]
-            expect(surveys.getNextSurveyStep(survey, 0, 'Some response')).toEqual(2)
+            expect(getNextSurveyStep(survey, 0, 'Some response')).toEqual(2)
         })
 
         // Single-choice
@@ -960,9 +959,9 @@ describe('surveys', () => {
                 { type: SurveyQuestionType.Open, question: 'Why no?' },
                 { type: SurveyQuestionType.Open, question: 'Why maybe?' },
             ] as unknown[] as SurveyQuestion[]
-            expect(surveys.getNextSurveyStep(survey, 0, 'Yes')).toEqual(1)
-            expect(surveys.getNextSurveyStep(survey, 0, 'No')).toEqual(2)
-            expect(surveys.getNextSurveyStep(survey, 0, 'Maybe')).toEqual(3)
+            expect(getNextSurveyStep(survey, 0, 'Yes')).toEqual(1)
+            expect(getNextSurveyStep(survey, 0, 'No')).toEqual(2)
+            expect(getNextSurveyStep(survey, 0, 'Maybe')).toEqual(3)
         })
 
         // Response-based branching, scale 1-3
@@ -982,9 +981,9 @@ describe('surveys', () => {
                 { type: SurveyQuestionType.Open, question: 'Glad to hear that. Tell us more!' },
             ] as unknown[] as SurveyQuestion[]
 
-            expect(surveys.getNextSurveyStep(survey, 0, 1)).toEqual(1)
-            expect(surveys.getNextSurveyStep(survey, 0, 2)).toEqual(2)
-            expect(surveys.getNextSurveyStep(survey, 0, 3)).toEqual(3)
+            expect(getNextSurveyStep(survey, 0, 1)).toEqual(1)
+            expect(getNextSurveyStep(survey, 0, 2)).toEqual(2)
+            expect(getNextSurveyStep(survey, 0, 3)).toEqual(3)
         })
 
         // Response-based branching, scale 1-5
@@ -1004,9 +1003,9 @@ describe('surveys', () => {
                 { type: SurveyQuestionType.Open, question: 'Glad to hear that. Tell us more!' },
             ] as unknown as SurveyQuestion[]
 
-            expect(surveys.getNextSurveyStep(survey, 0, 1)).toEqual(1)
-            expect(surveys.getNextSurveyStep(survey, 0, 3)).toEqual(2)
-            expect(surveys.getNextSurveyStep(survey, 0, 5)).toEqual(3)
+            expect(getNextSurveyStep(survey, 0, 1)).toEqual(1)
+            expect(getNextSurveyStep(survey, 0, 3)).toEqual(2)
+            expect(getNextSurveyStep(survey, 0, 5)).toEqual(3)
         })
 
         // Response-based branching, scale 1-7
@@ -1026,13 +1025,13 @@ describe('surveys', () => {
                 { type: SurveyQuestionType.Open, question: 'Great! What did you enjoy the most?' },
             ] as unknown as SurveyQuestion[]
 
-            expect(surveys.getNextSurveyStep(survey, 0, 1)).toEqual(1)
-            expect(surveys.getNextSurveyStep(survey, 0, 2)).toEqual(1)
-            expect(surveys.getNextSurveyStep(survey, 0, 3)).toEqual(1)
-            expect(surveys.getNextSurveyStep(survey, 0, 4)).toEqual(2)
-            expect(surveys.getNextSurveyStep(survey, 0, 5)).toEqual(3)
-            expect(surveys.getNextSurveyStep(survey, 0, 6)).toEqual(3)
-            expect(surveys.getNextSurveyStep(survey, 0, 7)).toEqual(3)
+            expect(getNextSurveyStep(survey, 0, 1)).toEqual(1)
+            expect(getNextSurveyStep(survey, 0, 2)).toEqual(1)
+            expect(getNextSurveyStep(survey, 0, 3)).toEqual(1)
+            expect(getNextSurveyStep(survey, 0, 4)).toEqual(2)
+            expect(getNextSurveyStep(survey, 0, 5)).toEqual(3)
+            expect(getNextSurveyStep(survey, 0, 6)).toEqual(3)
+            expect(getNextSurveyStep(survey, 0, 7)).toEqual(3)
         })
 
         // Response-based branching, scale 0-10 (NPS)
@@ -1052,9 +1051,9 @@ describe('surveys', () => {
                 { type: SurveyQuestionType.Open, question: 'Glad to hear that. Tell us more!' },
             ] as unknown as SurveyQuestion[]
 
-            expect(surveys.getNextSurveyStep(survey, 0, 1)).toEqual(1)
-            expect(surveys.getNextSurveyStep(survey, 0, 8)).toEqual(2)
-            expect(surveys.getNextSurveyStep(survey, 0, 10)).toEqual(3)
+            expect(getNextSurveyStep(survey, 0, 1)).toEqual(1)
+            expect(getNextSurveyStep(survey, 0, 8)).toEqual(2)
+            expect(getNextSurveyStep(survey, 0, 10)).toEqual(3)
         })
 
         it('should display questions in the order AGCEHDFB', () => {
@@ -1108,7 +1107,7 @@ describe('surveys', () => {
             for (let i = 0; i < survey.questions.length; i++) {
                 const currentQuestion = survey.questions[currentStep]
                 actualOrder.push(currentQuestion.question)
-                currentStep = surveys.getNextSurveyStep(survey, currentStep, 'Some response')
+                currentStep = getNextSurveyStep(survey, currentStep, 'Some response')
             }
 
             expect(desiredOrder).toEqual(actualOrder)
@@ -1167,7 +1166,7 @@ describe('surveys', () => {
             for (const answer of answers) {
                 const currentQuestion = survey.questions[currentStep]
                 actualOrder.push(currentQuestion.question)
-                currentStep = surveys.getNextSurveyStep(survey, currentStep, answer)
+                currentStep = getNextSurveyStep(survey, currentStep, answer)
             }
             expect(desiredOrder).toEqual(actualOrder)
             expect(currentStep).toEqual(SurveyQuestionBranchingType.End)
@@ -1180,7 +1179,7 @@ describe('surveys', () => {
             for (const answer of answers) {
                 const currentQuestion = survey.questions[currentStep]
                 actualOrder.push(currentQuestion.question)
-                currentStep = surveys.getNextSurveyStep(survey, currentStep, answer)
+                currentStep = getNextSurveyStep(survey, currentStep, answer)
             }
             expect(desiredOrder).toEqual(actualOrder)
             expect(currentStep).toEqual(SurveyQuestionBranchingType.End)
@@ -1193,7 +1192,7 @@ describe('surveys', () => {
             for (const answer of answers) {
                 const currentQuestion = survey.questions[currentStep]
                 actualOrder.push(currentQuestion.question)
-                currentStep = surveys.getNextSurveyStep(survey, currentStep, answer)
+                currentStep = getNextSurveyStep(survey, currentStep, answer)
             }
             expect(desiredOrder).toEqual(actualOrder)
             expect(currentStep).toEqual(SurveyQuestionBranchingType.End)
@@ -1210,7 +1209,7 @@ describe('surveys', () => {
             for (const answer of answers) {
                 const currentQuestion = survey.questions[currentStep]
                 actualOrder.push(currentQuestion.question)
-                currentStep = surveys.getNextSurveyStep(survey, currentStep, answer)
+                currentStep = getNextSurveyStep(survey, currentStep, answer)
             }
             expect(desiredOrder).toEqual(actualOrder)
             expect(currentStep).toEqual(SurveyQuestionBranchingType.End)
@@ -1231,7 +1230,7 @@ describe('surveys', () => {
                 { type: SurveyQuestionType.Open, question: 'Seems you are not completely happy. Tell us more!' },
                 { type: SurveyQuestionType.Open, question: 'Glad to hear that. Tell us more!' },
             ] as unknown as SurveyQuestion[]
-            expect(() => surveys.getNextSurveyStep(survey, 0, 1)).toThrow('The scale must be one of: 3, 5, 7, 10')
+            expect(() => getNextSurveyStep(survey, 0, 1)).toThrow('The scale must be one of: 3, 5, 7, 10')
         })
 
         it('should throw an error for a response value out of the valid range', () => {
@@ -1249,13 +1248,13 @@ describe('surveys', () => {
                 { type: SurveyQuestionType.Open, question: 'Seems you are not completely happy. Tell us more!' },
                 { type: SurveyQuestionType.Open, question: 'Glad to hear that. Tell us more!' },
             ] as unknown as SurveyQuestion[]
-            expect(() => surveys.getNextSurveyStep(survey, 0, 20)).toThrow('The response must be in range 1-3')
+            expect(() => getNextSurveyStep(survey, 0, 20)).toThrow('The response must be in range 1-3')
             ;(survey.questions[0] as RatingSurveyQuestion).scale = 5
-            expect(() => surveys.getNextSurveyStep(survey, 0, 20)).toThrow('The response must be in range 1-5')
+            expect(() => getNextSurveyStep(survey, 0, 20)).toThrow('The response must be in range 1-5')
             ;(survey.questions[0] as RatingSurveyQuestion).scale = 7
-            expect(() => surveys.getNextSurveyStep(survey, 0, 20)).toThrow('The response must be in range 1-7')
+            expect(() => getNextSurveyStep(survey, 0, 20)).toThrow('The response must be in range 1-7')
             ;(survey.questions[0] as RatingSurveyQuestion).scale = 10
-            expect(() => surveys.getNextSurveyStep(survey, 0, 20)).toThrow('The response must be in range 0-10')
+            expect(() => getNextSurveyStep(survey, 0, 20)).toThrow('The response must be in range 0-10')
         })
 
         it('should throw an error for if a response value in a rating question is not an integer', () => {
@@ -1273,10 +1272,8 @@ describe('surveys', () => {
                 { type: SurveyQuestionType.Open, question: 'Seems you are not completely happy. Tell us more!' },
                 { type: SurveyQuestionType.Open, question: 'Glad to hear that. Tell us more!' },
             ] as unknown as SurveyQuestion[]
-            expect(() => surveys.getNextSurveyStep(survey, 0, '2')).toThrow('The response type must be an integer')
-            expect(() => surveys.getNextSurveyStep(survey, 0, 'some_string')).toThrow(
-                'The response type must be an integer'
-            )
+            expect(() => getNextSurveyStep(survey, 0, '2')).toThrow('The response type must be an integer')
+            expect(() => getNextSurveyStep(survey, 0, 'some_string')).toThrow('The response type must be an integer')
         })
     })
 

src/entrypoints/surveys-preview.es.ts

@@ -1,2 +1 @@
-export { renderFeedbackWidgetPreview, renderSurveysPreview } from '../extensions/surveys'
-export { getNextSurveyStep } from '../posthog-surveys'
+export { getNextSurveyStep, renderFeedbackWidgetPreview, renderSurveysPreview } from '../extensions/surveys'

src/extensions/surveys.tsx

@@ -44,6 +44,109 @@ const logger = createLogger('[Surveys]')
 const window = _window as Window & typeof globalThis
 const document = _document as Document
 
+function getRatingBucketForResponseValue(responseValue: number, scale: number) {
+    if (scale === 3) {
+        if (responseValue < 1 || responseValue > 3) {
+            throw new Error('The response must be in range 1-3')
+        }
+
+        return responseValue === 1 ? 'negative' : responseValue === 2 ? 'neutral' : 'positive'
+    } else if (scale === 5) {
+        if (responseValue < 1 || responseValue > 5) {
+            throw new Error('The response must be in range 1-5')
+        }
+
+        return responseValue <= 2 ? 'negative' : responseValue === 3 ? 'neutral' : 'positive'
+    } else if (scale === 7) {
+        if (responseValue < 1 || responseValue > 7) {
+            throw new Error('The response must be in range 1-7')
+        }
+
+        return responseValue <= 3 ? 'negative' : responseValue === 4 ? 'neutral' : 'positive'
+    } else if (scale === 10) {
+        if (responseValue < 0 || responseValue > 10) {
+            throw new Error('The response must be in range 0-10')
+        }
+
+        return responseValue <= 6 ? 'detractors' : responseValue <= 8 ? 'passives' : 'promoters'
+    }
+
+    throw new Error('The scale must be one of: 3, 5, 7, 10')
+}
+
+export function getNextSurveyStep(
+    survey: Survey,
+    currentQuestionIndex: number,
+    response: string | string[] | number | null
+) {
+    const question = survey.questions[currentQuestionIndex]
+    const nextQuestionIndex = currentQuestionIndex + 1
+
+    if (!question.branching?.type) {
+        if (currentQuestionIndex === survey.questions.length - 1) {
+            return SurveyQuestionBranchingType.End
+        }
+
+        return nextQuestionIndex
+    }
+
+    if (question.branching.type === SurveyQuestionBranchingType.End) {
+        return SurveyQuestionBranchingType.End
+    } else if (question.branching.type === SurveyQuestionBranchingType.SpecificQuestion) {
+        if (Number.isInteger(question.branching.index)) {
+            return question.branching.index
+        }
+    } else if (question.branching.type === SurveyQuestionBranchingType.ResponseBased) {
+        // Single choice
+        if (question.type === SurveyQuestionType.SingleChoice) {
+            // :KLUDGE: for now, look up the choiceIndex based on the response
+            // TODO: once QuestionTypes.MultipleChoiceQuestion is refactored, pass the selected choiceIndex into this method
+            const selectedChoiceIndex = question.choices.indexOf(`${response}`)
+
+            if (question.branching?.responseValues?.hasOwnProperty(selectedChoiceIndex)) {
+                const nextStep = question.branching.responseValues[selectedChoiceIndex]
+
+                // Specific question
+                if (Number.isInteger(nextStep)) {
+                    return nextStep
+                }
+
+                if (nextStep === SurveyQuestionBranchingType.End) {
+                    return SurveyQuestionBranchingType.End
+                }
+
+                return nextQuestionIndex
+            }
+        } else if (question.type === SurveyQuestionType.Rating) {
+            if (typeof response !== 'number' || !Number.isInteger(response)) {
+                throw new Error('The response type must be an integer')
+            }
+
+            const ratingBucket = getRatingBucketForResponseValue(response, question.scale)
+
+            if (question.branching?.responseValues?.hasOwnProperty(ratingBucket)) {
+                const nextStep = question.branching.responseValues[ratingBucket]
+
+                // Specific question
+                if (Number.isInteger(nextStep)) {
+                    return nextStep
+                }
+
+                if (nextStep === SurveyQuestionBranchingType.End) {
+                    return SurveyQuestionBranchingType.End
+                }
+
+                return nextQuestionIndex
+            }
+        }
+
+        return nextQuestionIndex
+    }
+
+    logger.warn('Falling back to next question index due to unexpected branching type')
+    return nextQuestionIndex
+}
+
 export class SurveyManager {
     private posthog: PostHog
     private surveyInFocus: string | null
@@ -663,18 +766,7 @@ export function Questions({
 
         setQuestionsResponses({ ...questionsResponses, [responseKey]: res })
 
-        // Old SDK, no branching
-        if (!posthog.getNextSurveyStep) {
-            const isLastDisplayedQuestion = displayQuestionIndex === survey.questions.length - 1
-            if (isLastDisplayedQuestion) {
-                sendSurveyEvent({ ...questionsResponses, [responseKey]: res }, survey, posthog)
-            } else {
-                setCurrentQuestionIndex(displayQuestionIndex + 1)
-            }
-            return
-        }
-
-        const nextStep = posthog.getNextSurveyStep(survey, displayQuestionIndex, res)
+        const nextStep = getNextSurveyStep(survey, displayQuestionIndex, res)
         if (nextStep === SurveyQuestionBranchingType.End) {
             sendSurveyEvent({ ...questionsResponses, [responseKey]: res }, survey, posthog)
         } else {

src/posthog-core.ts

@@ -52,7 +52,7 @@ import { PageViewManager } from './page-view'
 import { PostHogSurveys } from './posthog-surveys'
 import { RateLimiter } from './rate-limiter'
 import { uuidv7 } from './uuidv7'
-import { Survey, SurveyCallback, SurveyQuestionBranchingType } from './posthog-surveys-types'
+import { SurveyCallback } from './posthog-surveys-types'
 import {
     isArray,
     isEmptyObject,
@@ -1341,15 +1341,6 @@ export class PostHog {
         this.surveys.canRenderSurvey(surveyId)
     }
 
-    /** Get the next step of the survey: a question index or `end` */
-    getNextSurveyStep(
-        survey: Survey,
-        currentQuestionIndex: number,
-        response: string | string[] | number | null
-    ): number | SurveyQuestionBranchingType.End {
-        return this.surveys.getNextSurveyStep(survey, currentQuestionIndex, response)
-    }
-
     /**
      * Identify a user with a unique ID instead of a PostHog
      * randomly generated distinct_id. If the method is never called,