fix: Make js assets cachable (#3337)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>
Co-authored-by: Anshuman Pandey <54475686+pandeymangg@users.noreply.github.com>

packages/copyCompiledAssetsPlugin/vite.config.ts

@@ -0,0 +1,40 @@
+import fs from "fs-extra";
+import path from "path";
+import { Plugin, ResolvedConfig } from "vite";
+
+interface CopyCompiledAssetsPluginOptions {
+  filename: string;
+  distDir: string;
+}
+
+export function copyCompiledAssetsPlugin(options: CopyCompiledAssetsPluginOptions): Plugin {
+  let config: ResolvedConfig;
+
+  return {
+    name: "copy-compiled-assets",
+    apply: "build",
+
+    configResolved(_config) {
+      config = _config;
+    },
+
+    async writeBundle() {
+      const outputDir = path.resolve(config.root, "../../apps/web/public/js");
+      const distDir = path.resolve(config.root, options.distDir);
+
+      // Create the output directory if it doesn't exist
+      fs.ensureDirSync(outputDir);
+      console.log(`Ensured directory exists: ${outputDir}`);
+
+      // Copy files from distDir to outputDir
+      const filesToCopy = fs.readdirSync(distDir);
+      filesToCopy.forEach((file) => {
+        const srcFile = path.resolve(distDir, file);
+        const destFile = path.resolve(outputDir, file.replace("index", options.filename));
+        fs.copyFileSync(srcFile, destFile);
+      });
+
+      console.log(`Copied ${filesToCopy.length} files to ${outputDir} (${options.filename})`);
+    },
+  };
+}

packages/js-core/src/lib/personState.ts

@@ -61,8 +61,6 @@ export const fetchPersonState = async (
   const data = await response.json();
   const { data: state } = data;
 
-  console.log("Person state fetched", state);
-
   const defaultPersonState: TJsPersonState = {
     expiresAt: new Date(new Date().getTime() + 1000 * 60 * 30), // 30 minutes
     data: {

packages/js-core/src/lib/widget.ts

@@ -268,7 +268,7 @@ const loadFormbricksSurveysExternally = (): Promise<typeof window.formbricksSurv
       resolve(window.formbricksSurveys);
     } else {
       const script = document.createElement("script");
-      script.src = `${config.get().apiHost}/api/packages/surveys`;
+      script.src = `${config.get().apiHost}/js/surveys.umd.cjs`;
       script.async = true;
       script.onload = () => resolve(window.formbricksSurveys);
       script.onerror = (error) => {

packages/js-core/vite.config.ts

@@ -2,6 +2,7 @@ import { resolve } from "path";
 import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
 import webPackageJson from "../../apps/web/package.json";
+import { copyCompiledAssetsPlugin } from "../copyCompiledAssetsPlugin/vite.config";
 
 const config = () => {
   return defineConfig({
@@ -27,6 +28,7 @@ const config = () => {
         rollupTypes: true,
         bundledPackages: ["@formbricks/api", "@formbricks/types"],
       }),
+      copyCompiledAssetsPlugin({ filename: "formbricks", distDir: resolve(__dirname, "dist") }),
     ],
   });
 };

packages/js/index.html

@@ -2,7 +2,7 @@
   <script type="text/javascript">
     !(function () {
       var t = document.createElement("script");
-      (t.type = "text/javascript"), (t.async = !0), (t.src = "http://localhost:3000/api/packages/js");
+      (t.type = "text/javascript"), (t.async = !0), (t.src = "http://localhost:3000/js/formbricks.umd.cjs");
       var e = document.getElementsByTagName("script")[0];
       e.parentNode.insertBefore(t, e),
         setTimeout(function () {

packages/js/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formbricks/js",
   "license": "MIT",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Formbricks-js allows you to connect your index to Formbricks, display surveys and trigger events.",
   "homepage": "https://formbricks.com",
   "repository": {

packages/js/src/lib/load-formbricks.ts

@@ -10,7 +10,7 @@ let isInitialized = false;
 // Load the SDK, return the result
 const loadFormbricksSDK = async (apiHostParam: string): Promise<Result<void>> => {
   if (!window.formbricks) {
-    const res = await fetch(`${apiHostParam}/api/packages/js`);
+    const res = await fetch(`${apiHostParam}/js/formbricks.umd.cjs`);
 
     // Failed to fetch the app package
     if (!res.ok) {
@@ -56,7 +56,6 @@ const loadFormbricksSDK = async (apiHostParam: string): Promise<Result<void>> =>
 const functionsToProcess: { prop: string; args: unknown[] }[] = [];
 
 export const loadFormbricksToProxy = async (prop: string, ...args: unknown[]): Promise<void> => {
-  console.log(args);
   // all of this should happen when not initialized:
   if (!isInitialized) {
     if (prop === "init") {

packages/react-native/src/survey-web-view.tsx

@@ -373,7 +373,7 @@ const renderHtml = (options: Partial<SurveyInlineProps> & { apiHost?: string }):
       }
 
       const script = document.createElement("script");
-      script.src = "${options.apiHost ?? "http://localhost:3000"}/api/packages/surveys";
+      script.src = "${options.apiHost ?? "http://localhost:3000"}/js/surveys.umd.cjs";
       script.async = true;
       script.onload = () => loadSurvey();
       script.onerror = (error) => {

packages/surveys/vite.config.ts

@@ -3,6 +3,7 @@ import { resolve } from "path";
 import { defineConfig, loadEnv } from "vite";
 import dts from "vite-plugin-dts";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { copyCompiledAssetsPlugin } from "../copyCompiledAssetsPlugin/vite.config";
 
 const config = ({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
@@ -26,7 +27,12 @@ const config = ({ mode }) => {
         fileName: "index",
       },
     },
-    plugins: [preact(), dts({ rollupTypes: true }), tsconfigPaths()],
+    plugins: [
+      preact(),
+      dts({ rollupTypes: true }),
+      tsconfigPaths(),
+      copyCompiledAssetsPlugin({ filename: "surveys", distDir: resolve(__dirname, "dist") }),
+    ],
   });
 };
 

packages/ui/components/Survey/index.tsx

@@ -21,7 +21,7 @@ export const SurveyInline = (props: Omit<SurveyInlineProps, "containerId">) => {
 
   const loadSurveyScript: () => Promise<void> = async () => {
     try {
-      const response = await fetch("/api/packages/surveys");
+      const response = await fetch("/js/surveys.umd.cjs");
 
       if (!response.ok) {
         throw new Error("Failed to load the surveys package");