From ee5a519120cad5bc2e561cf42a42ba3d04b35918 Mon Sep 17 00:00:00 2001
From: Anshuman Pandey <54475686+pandeymangg@users.noreply.github.com>
Date: Thu, 25 Jan 2024 20:35:46 +0530
Subject: [PATCH] feat: lazy loading for @formbricks/surveys (#1940)

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
Co-authored-by: ShubhamPalriwala <spalriwalau@gmail.com>
---
 .github/workflows/build-web.yml               |  2 +-
 .github/workflows/e2e.yml                     | 71 +++++++++++++++++++
 .github/workflows/playwright.yml              | 40 -----------
 .github/workflows/pr.yml                      |  2 +-
 apps/web/package.json                         |  2 +
 apps/web/playwright/utils/helper.ts           |  9 ++-
 package.json                                  |  2 +
 packages/api/package.json                     |  1 +
 packages/js/index.html                        |  6 +-
 packages/js/package.json                      |  5 +-
 packages/js/src/index.ts                      | 10 +++
 packages/js/src/lib/actions.ts                |  6 +-
 packages/js/src/lib/widget.ts                 | 27 ++++++-
 packages/js/src/vite-env.d.ts                 |  1 +
 packages/js/vite.config.js                    | 44 ++++++++----
 packages/lib/actionClass/cache.ts             |  2 +-
 packages/surveys/package.json                 |  6 +-
 .../surveys/src/components/general/Survey.tsx |  2 +-
 .../src/components/general/SurveyInline.tsx   |  2 +-
 .../src/components/general/SurveyModal.tsx    |  3 +-
 packages/surveys/src/index.ts                 | 19 ++++-
 .../props.ts => types/formbricksSurveys.ts}   |  6 +-
 playwright.config.ts                          |  2 +
 pnpm-lock.yaml                                |  3 +
 turbo.json                                    | 12 ++++
 25 files changed, 204 insertions(+), 81 deletions(-)
 create mode 100644 .github/workflows/e2e.yml
 delete mode 100644 .github/workflows/playwright.yml
 create mode 100644 packages/js/src/vite-env.d.ts
 rename packages/{surveys/src/types/props.ts => types/formbricksSurveys.ts} (82%)

diff --git a/.github/workflows/build-web.yml b/.github/workflows/build-web.yml
index f8b7d23c3d..2a5bdbd01f 100644
--- a/.github/workflows/build-web.yml
+++ b/.github/workflows/build-web.yml
@@ -25,7 +25,7 @@ jobs:
       - name: create .env
         run: cp .env.example .env
 
-      - name: Generate Random NEXTAUTH_SECRET
+      - name: Generate Random ENCRYPTION_KEY
         run: |
           SECRET=$(openssl rand -hex 32)
           echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
new file mode 100644
index 0000000000..486e176930
--- /dev/null
+++ b/.github/workflows/e2e.yml
@@ -0,0 +1,71 @@
+name: E2E Tests
+on:
+  workflow_call:
+  workflow_dispatch:
+jobs:
+  build:
+    name: Run E2E Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install Docker Compose
+        run: sudo apt-get update && sudo apt-get install -y docker-compose
+
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+
+      - name: create .env
+        run: cp .env.example .env
+
+      - name: Generate ENCRYPTION_KEY
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
+      - name: Start PostgreSQL
+        run: |
+          pnpm db:start
+
+      - name: Build App in dev mode without external dependencies
+        run: |
+          pnpm build:dev --filter=web...
+
+      - name: Serve packages for lazy loading
+        run: |
+          cd packages/surveys && pnpm serve &
+
+      - name: Run App
+        run: |
+          NODE_ENV=test pnpm start --filter=web &
+          for attempt in {1..20}; do
+            if [ $(curl -o /dev/null -s -w "%{http_code}" http://localhost:3000/health) -eq 200 ]; then
+              echo "Ready"
+              break
+            fi
+            echo "Waiting..."
+            sleep 10
+          done
+
+      - name: Test Serve endpoints
+        run: |
+          curl -s http://localhost:3003
+
+      - name: Run E2E Tests
+        run: |
+          pnpm test:e2e
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
deleted file mode 100644
index caa270d414..0000000000
--- a/.github/workflows/playwright.yml
+++ /dev/null
@@ -1,40 +0,0 @@
-name: E2E Tests
-on:
-  workflow_call:
-jobs:
-  build:
-    name: Run E2E Tests
-    runs-on: ubuntu-latest
-    timeout-minutes: 60
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 20
-
-      - name: Install Docker Compose
-        run: sudo apt-get update && sudo apt-get install -y docker-compose
-
-      - name: Install dependencies
-        run: npm install -g pnpm && pnpm install
-
-      - name: Build Formricks JS package
-        run: pnpm build --filter=js
-
-      - name: Build Formbricks Image & Run
-        run: docker-compose up -d
-
-      - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
-
-      - name: Run Playwright tests
-        run: pnpm test:e2e
-
-      - uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index 7ef24b7473..d66c769c81 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -29,7 +29,7 @@ jobs:
 
   e2e-test:
     name: Run E2E Tests
-    uses: ./.github/workflows/playwright.yml
+    uses: ./.github/workflows/e2e.yml
     secrets: inherit
 
   required:
diff --git a/apps/web/package.json b/apps/web/package.json
index 2275227183..00c5d960bb 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -7,6 +7,7 @@
     "dev": "next dev -p 3000",
     "go": "next dev -p 3000",
     "build": "next build",
+    "build:dev": "next build",
     "start": "next start",
     "lint": "next lint"
   },
@@ -52,6 +53,7 @@
     "react-hook-form": "^7.49.3",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.0.1",
+    "sharp": "^0.33.1",
     "ua-parser-js": "^1.0.37",
     "webpack": "^5.89.0",
     "xlsx": "^0.18.5"
diff --git a/apps/web/playwright/utils/helper.ts b/apps/web/playwright/utils/helper.ts
index 8c73065f7e..c12078156c 100644
--- a/apps/web/playwright/utils/helper.ts
+++ b/apps/web/playwright/utils/helper.ts
@@ -13,10 +13,12 @@ export const signUpAndLogin = async (
   await page.getByRole("button", { name: "Continue with Email" }).click();
   await page.getByPlaceholder("Full Name").fill(name);
   await page.getByPlaceholder("Full Name").press("Tab");
+  await page.getByPlaceholder("work@email.com").click();
   await page.getByPlaceholder("work@email.com").fill(email);
   await page.getByPlaceholder("work@email.com").press("Tab");
+  await page.getByPlaceholder("*******").click();
   await page.getByPlaceholder("*******").fill(password);
-  await page.press('input[name="password"]', "Enter");
+  await page.getByRole("button", { name: "Continue with Email" }).click();
   await page.getByText("Login").click();
   await page.getByRole("button", { name: "Login with Email" }).click();
   await page.getByPlaceholder("work@email.com").fill(email);
@@ -60,10 +62,11 @@ export const signupUsingInviteToken = async (page: Page, name: string, email: st
   // the email is already filled in the input field
   const inputValue = await page.getByPlaceholder("work@email.com").inputValue();
   expect(inputValue).toEqual(email);
-
   await page.getByPlaceholder("work@email.com").press("Tab");
+  await page.getByPlaceholder("*******").click();
   await page.getByPlaceholder("*******").fill(password);
-  await page.press('input[name="password"]', "Enter");
+  await page.waitForTimeout(500);
+  await page.getByText("Continue with Email").click();
   await page.getByText("Login").click();
   await page.getByRole("button", { name: "Login with Email" }).click();
   await page.getByPlaceholder("work@email.com").fill(email);
diff --git a/package.json b/package.json
index ac3d60835d..1de6b845c2 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,12 @@
   "scripts": {
     "clean": "turbo run clean && rimraf node_modules .turbo coverage out",
     "build": "turbo run build",
+    "build:dev": "turbo run build:dev",
     "post-install": "turbo run post-install",
     "db:migrate:dev": "turbo run db:migrate:dev",
     "db:migrate:deploy": "turbo run db:migrate:deploy",
     "db:migrate:vercel": "turbo run db:migrate:vercel",
+    "db:start": "turbo run db:start",
     "db:push": "turbo run db:push",
     "go": "turbo run go --concurrency 20",
     "dev": "turbo run dev --parallel",
diff --git a/packages/api/package.json b/packages/api/package.json
index 65f74bb45b..ed411c1e4a 100644
--- a/packages/api/package.json
+++ b/packages/api/package.json
@@ -26,6 +26,7 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build",
+    "build:dev": "pnpm build",
     "go": "vite build --watch",
     "lint": "eslint ./src --fix",
     "clean": "rimraf .turbo node_modules dist"
diff --git a/packages/js/index.html b/packages/js/index.html
index ebc735a7a4..5c67a3884b 100644
--- a/packages/js/index.html
+++ b/packages/js/index.html
@@ -2,14 +2,12 @@
   <script type="text/javascript">
     !(function () {
       var t = document.createElement("script");
-      (t.type = "text/javascript"),
-        (t.async = !0),
-        (t.src = "./dist/index.umd.js");
+      (t.type = "text/javascript"), (t.async = !0), (t.src = "./dist/index.umd.js");
       var e = document.getElementsByTagName("script")[0];
       e.parentNode.insertBefore(t, e),
         setTimeout(function () {
           window.formbricks.init({
-            environmentId: "clqb88h3k000a5xyb5zifl824",
+            environmentId: "clrtawhu7002n7qagsf6t4rxj",
             apiHost: "http://localhost:3000",
             debug: true,
           });
diff --git a/packages/js/package.json b/packages/js/package.json
index 5acb5c65fd..b3f708ce69 100644
--- a/packages/js/package.json
+++ b/packages/js/package.json
@@ -30,9 +30,10 @@
     }
   },
   "scripts": {
-    "dev": "vite build --watch",
+    "dev": "vite build --watch --mode dev",
     "build": "tsc && vite build",
-    "go": "vite build --watch",
+    "build:dev": "tsc && vite build --mode dev",
+    "go": "vite build --watch --mode dev",
     "lint": "eslint ./src --fix",
     "test": "jest --coverage --no-cache",
     "clean": "rimraf .turbo node_modules dist coverage"
diff --git a/packages/js/src/index.ts b/packages/js/src/index.ts
index 203db56df9..3cfba83b76 100644
--- a/packages/js/src/index.ts
+++ b/packages/js/src/index.ts
@@ -1,3 +1,4 @@
+import { SurveyInlineProps, SurveyModalProps } from "@formbricks/types/formbricksSurveys";
 import { TJsConfigInput } from "@formbricks/types/js";
 
 import { trackAction } from "./lib/actions";
@@ -9,6 +10,15 @@ import { Logger } from "./lib/logger";
 import { checkPageUrl } from "./lib/noCodeActions";
 import { logoutPerson, resetPerson, setPersonAttribute, setPersonUserId } from "./lib/person";
 
+declare global {
+  interface Window {
+    formbricksSurveys: {
+      renderSurveyInline: (props: SurveyInlineProps & { brandColor: string }) => void;
+      renderSurveyModal: (props: SurveyModalProps & { brandColor: string }) => void;
+    };
+  }
+}
+
 const logger = Logger.getInstance();
 
 logger.debug("Create command queue");
diff --git a/packages/js/src/lib/actions.ts b/packages/js/src/lib/actions.ts
index 4983822854..d5a0d83a4c 100644
--- a/packages/js/src/lib/actions.ts
+++ b/packages/js/src/lib/actions.ts
@@ -54,7 +54,7 @@ export const trackAction = async (
   const activeSurveys = config.get().state?.surveys;
 
   if (!!activeSurveys && activeSurveys.length > 0) {
-    triggerSurvey(name, activeSurveys);
+    await triggerSurvey(name, activeSurveys);
   } else {
     logger.debug("No active surveys to display");
   }
@@ -62,12 +62,12 @@ export const trackAction = async (
   return okVoid();
 };
 
-export const triggerSurvey = (actionName: string, activeSurveys: TSurvey[]): void => {
+export const triggerSurvey = async (actionName: string, activeSurveys: TSurvey[]): Promise<void> => {
   for (const survey of activeSurveys) {
     for (const trigger of survey.triggers) {
       if (trigger === actionName) {
         logger.debug(`Formbricks: survey ${survey.id} triggered by action "${actionName}"`);
-        renderWidget(survey);
+        await renderWidget(survey);
         return;
       }
     }
diff --git a/packages/js/src/lib/widget.ts b/packages/js/src/lib/widget.ts
index 54a08b4a56..1e9f98a3bd 100644
--- a/packages/js/src/lib/widget.ts
+++ b/packages/js/src/lib/widget.ts
@@ -1,7 +1,6 @@
 import { FormbricksAPI } from "@formbricks/api";
 import { ResponseQueue } from "@formbricks/lib/responseQueue";
 import SurveyState from "@formbricks/lib/surveyState";
-import { renderSurveyModal } from "@formbricks/surveys";
 import { TJSStateDisplay } from "@formbricks/types/js";
 import { TResponseUpdate } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys";
@@ -18,7 +17,7 @@ const errorHandler = ErrorHandler.getInstance();
 let surveyRunning = false;
 let setIsError = (_: boolean) => {};
 
-export const renderWidget = (survey: TSurvey) => {
+export const renderWidget = async (survey: TSurvey) => {
   if (surveyRunning) {
     logger.debug("A survey is already running. Skipping.");
     return;
@@ -53,8 +52,10 @@ export const renderWidget = (survey: TSurvey) => {
   const placement = productOverwrites.placement ?? product.placement;
   const isBrandingEnabled = product.inAppSurveyBranding;
 
+  const formbricksSurveys = await loadFormbricksSurveysExternally();
+
   setTimeout(() => {
-    renderSurveyModal({
+    formbricksSurveys.renderSurveyModal({
       survey: survey,
       brandColor,
       isBrandingEnabled: isBrandingEnabled,
@@ -189,3 +190,23 @@ export const addWidgetContainer = (): void => {
   containerElement.id = containerId;
   document.body.appendChild(containerElement);
 };
+
+const loadFormbricksSurveysExternally = (): Promise<typeof window.formbricksSurveys> => {
+  const formbricksSurveysScriptSrc = import.meta.env.FORMBRICKS_SURVEYS_SCRIPT_SRC;
+
+  return new Promise((resolve, reject) => {
+    if (window.formbricksSurveys) {
+      resolve(window.formbricksSurveys);
+    } else {
+      const script = document.createElement("script");
+      script.src = formbricksSurveysScriptSrc;
+      script.async = true;
+      script.onload = () => resolve(window.formbricksSurveys);
+      script.onerror = (error) => {
+        console.error("Failed to load Formbricks Surveys library:", error);
+        reject(error);
+      };
+      document.head.appendChild(script);
+    }
+  });
+};
diff --git a/packages/js/src/vite-env.d.ts b/packages/js/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/packages/js/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/js/vite.config.js b/packages/js/vite.config.js
index eb50a788da..3c228df7bd 100644
--- a/packages/js/vite.config.js
+++ b/packages/js/vite.config.js
@@ -2,19 +2,33 @@ import { resolve } from "path";
 import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
 
-export default defineConfig({
-  build: {
-    emptyOutDir: false, // keep the dist folder to avoid errors with pnpm go when folder is empty during build
-    minify: "terser",
-    sourcemap: true,
-    lib: {
-      // Could also be a dictionary or array of multiple entry points
-      entry: resolve(__dirname, "src/index.ts"),
-      name: "formbricks",
-      formats: ["cjs", "es", "umd", "iife"],
-      // the proper extensions will be added
-      fileName: "index",
+import surveysPackageJson from "../surveys/package.json";
+
+const config = ({ mode }) => {
+  const isDevelopment = mode === "dev";
+  const formbricksSurveysScriptSrc = isDevelopment
+    ? "http://localhost:3003/index.umd.js"
+    : `https://unpkg.com/@formbricks/surveys@^${surveysPackageJson.version}/dist/index.umd.js`;
+
+  return defineConfig({
+    define: {
+      "import.meta.env.FORMBRICKS_SURVEYS_SCRIPT_SRC": JSON.stringify(formbricksSurveysScriptSrc),
     },
-  },
-  plugins: [dts({ rollupTypes: true })],
-});
+    build: {
+      emptyOutDir: false, // keep the dist folder to avoid errors with pnpm go when folder is empty during build
+      minify: "terser",
+      sourcemap: true,
+      lib: {
+        // Could also be a dictionary or array of multiple entry points
+        entry: resolve(__dirname, "src/index.ts"),
+        name: "formbricks",
+        formats: ["cjs", "es", "umd", "iife"],
+        // the proper extensions will be added
+        fileName: "index",
+      },
+    },
+    plugins: [dts({ rollupTypes: true })],
+  });
+};
+
+export default config;
diff --git a/packages/lib/actionClass/cache.ts b/packages/lib/actionClass/cache.ts
index 1fc678353c..2191800144 100644
--- a/packages/lib/actionClass/cache.ts
+++ b/packages/lib/actionClass/cache.ts
@@ -8,7 +8,7 @@ interface RevalidateProps {
 
 export const actionClassCache = {
   tag: {
-    byNameAndEnvironmentId(environmentId: string, name: string): string {
+    byNameAndEnvironmentId(name: string, environmentId: string): string {
       return `environments-${environmentId}-actionClass-${name}`;
     },
     byEnvironmentId(environmentId: string): string {
diff --git a/packages/surveys/package.json b/packages/surveys/package.json
index 434c6c0ae8..cbb373ca93 100644
--- a/packages/surveys/package.json
+++ b/packages/surveys/package.json
@@ -24,10 +24,14 @@
   },
   "scripts": {
     "dev": "vite build --watch --mode dev",
+    "serve": "serve dist -p 3003",
     "build": "pnpm run build:surveys && pnpm run build:question-date",
+    "build:dev": "pnpm run build:surveys:dev && pnpm run build:question-date:dev",
     "build:surveys": "tsc && SURVEYS_PACKAGE_BUILD=surveys vite build",
+    "build:surveys:dev": "tsc && SURVEYS_PACKAGE_BUILD=surveys vite build --mode dev",
     "build:question-date": "tsc && SURVEYS_PACKAGE_BUILD=question-date vite build",
-    "go": "concurrently \"pnpm dev\" \"serve dist -p 3003\"",
+    "build:question-date:dev": "tsc && SURVEYS_PACKAGE_BUILD=question-date vite build --mode dev",
+    "go": "concurrently \"pnpm dev\" \"pnpm serve\"",
     "lint": "eslint . --ext .ts,.js,.tsx,.jsx",
     "preview": "vite preview",
     "clean": "rimraf .turbo node_modules dist"
diff --git a/packages/surveys/src/components/general/Survey.tsx b/packages/surveys/src/components/general/Survey.tsx
index a7a4d41abe..3f1c4a7472 100644
--- a/packages/surveys/src/components/general/Survey.tsx
+++ b/packages/surveys/src/components/general/Survey.tsx
@@ -4,11 +4,11 @@ import { ResponseErrorComponent } from "@/components/general/ResponseErrorCompon
 import { AutoCloseWrapper } from "@/components/wrappers/AutoCloseWrapper";
 import { evaluateCondition } from "@/lib/logicEvaluator";
 import { cn } from "@/lib/utils";
-import { SurveyBaseProps } from "@/types/props";
 import { useEffect, useRef, useState } from "preact/hooks";
 
 import { formatDateWithOrdinal, isValidDateString } from "@formbricks/lib/utils/datetime";
 import { extractFallbackValue, extractId, extractRecallInfo } from "@formbricks/lib/utils/recall";
+import { SurveyBaseProps } from "@formbricks/types/formbricksSurveys";
 import type { TResponseData, TResponseTtc } from "@formbricks/types/responses";
 import { TSurveyQuestion } from "@formbricks/types/surveys";
 
diff --git a/packages/surveys/src/components/general/SurveyInline.tsx b/packages/surveys/src/components/general/SurveyInline.tsx
index 07cf61998c..eff1845b98 100644
--- a/packages/surveys/src/components/general/SurveyInline.tsx
+++ b/packages/surveys/src/components/general/SurveyInline.tsx
@@ -1,4 +1,4 @@
-import { SurveyInlineProps } from "@/types/props";
+import { SurveyInlineProps } from "@formbricks/types/formbricksSurveys";
 
 import { Survey } from "./Survey";
 
diff --git a/packages/surveys/src/components/general/SurveyModal.tsx b/packages/surveys/src/components/general/SurveyModal.tsx
index 96dc83f2cf..fdf3d042b5 100644
--- a/packages/surveys/src/components/general/SurveyModal.tsx
+++ b/packages/surveys/src/components/general/SurveyModal.tsx
@@ -1,7 +1,8 @@
 import Modal from "@/components/wrappers/Modal";
-import { SurveyModalProps } from "@/types/props";
 import { useState } from "preact/hooks";
 
+import { SurveyModalProps } from "@formbricks/types/formbricksSurveys";
+
 import { Survey } from "./Survey";
 
 export function SurveyModal({
diff --git a/packages/surveys/src/index.ts b/packages/surveys/src/index.ts
index 48b4e31dd3..aefa41c23e 100644
--- a/packages/surveys/src/index.ts
+++ b/packages/surveys/src/index.ts
@@ -1,9 +1,19 @@
 import { SurveyInline } from "@/components/general/SurveyInline";
 import { SurveyModal } from "@/components/general/SurveyModal";
 import { addCustomThemeToDom, addStylesToDom } from "@/lib/styles";
-import { SurveyInlineProps, SurveyModalProps } from "@/types/props";
 import { h, render } from "preact";
 
+import { SurveyInlineProps, SurveyModalProps } from "@formbricks/types/formbricksSurveys";
+
+declare global {
+  interface Window {
+    formbricksSurveys: {
+      renderSurveyInline: (props: SurveyInlineProps & { brandColor: string }) => void;
+      renderSurveyModal: (props: SurveyModalProps & { brandColor: string }) => void;
+    };
+  }
+}
+
 export const renderSurveyInline = (props: SurveyInlineProps & { brandColor: string }) => {
   addStylesToDom();
   addCustomThemeToDom({ brandColor: props.brandColor });
@@ -25,3 +35,10 @@ export const renderSurveyModal = (props: SurveyModalProps & { brandColor: string
   document.body.appendChild(element);
   render(h(SurveyModal, props), element);
 };
+
+if (typeof window !== "undefined") {
+  window.formbricksSurveys = {
+    renderSurveyInline,
+    renderSurveyModal,
+  };
+}
diff --git a/packages/surveys/src/types/props.ts b/packages/types/formbricksSurveys.ts
similarity index 82%
rename from packages/surveys/src/types/props.ts
rename to packages/types/formbricksSurveys.ts
index 3614ca8b5d..8d4f554a26 100644
--- a/packages/surveys/src/types/props.ts
+++ b/packages/types/formbricksSurveys.ts
@@ -1,6 +1,6 @@
-import { TResponseData, TResponseUpdate } from "@formbricks/types/responses";
-import { TUploadFileConfig } from "@formbricks/types/storage";
-import { TSurvey } from "@formbricks/types/surveys";
+import { TResponseData, TResponseUpdate } from "./responses";
+import { TUploadFileConfig } from "./storage";
+import { TSurvey } from "./surveys";
 
 export interface SurveyBaseProps {
   survey: TSurvey;
diff --git a/playwright.config.ts b/playwright.config.ts
index 28a7994b17..7b77f28431 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -15,6 +15,8 @@ export default defineConfig({
   fullyParallel: true,
   /* Retry on CI only */
   retries: 0,
+  /* Timeout for each test */
+  timeout: 60000,
   /* Opt out of parallel tests on CI. */
   workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b95be56288..ae73d92210 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -411,6 +411,9 @@ importers:
       react-icons:
         specifier: ^5.0.1
         version: 5.0.1(react@18.2.0)
+      sharp:
+        specifier: ^0.33.1
+        version: 0.33.1
       ua-parser-js:
         specifier: ^1.0.37
         version: 1.0.37
diff --git a/turbo.json b/turbo.json
index 3034f075c4..552332af2c 100644
--- a/turbo.json
+++ b/turbo.json
@@ -23,10 +23,18 @@
       "outputs": ["dist/**"],
       "dependsOn": ["^build"]
     },
+    "@formbricks/js#build:dev": {
+      "outputs": ["dist/**"],
+      "dependsOn": ["^build:dev"]
+    },
     "@formbricks/surveys#build": {
       "outputs": ["dist/**"],
       "dependsOn": ["^build"]
     },
+    "@formbricks/surveys#build:dev": {
+      "outputs": ["dist/**"],
+      "dependsOn": ["^build:dev"]
+    },
     "@formbricks/surveys#go": {
       "cache": false,
       "persistent": true,
@@ -125,6 +133,10 @@
         "WEBAPP_URL"
       ]
     },
+    "build:dev": {
+      "dependsOn": ["^build:dev"],
+      "outputs": ["dist/**", ".next/**"]
+    },
     "post-install": {
       "cache": false,
       "dependsOn": [],