feat: Revamp @formbricks/js package

[ShubhamPalriwala]

What does this PR do?

1. Renames current @formbricks/js to @formbricks/browser
2. Builds a super lightweight @formbricks/js now that
   • fetches the latest JS SDK snippet from /api/js endpoint.
   • uses a Proxy to pass all formbricks.<commands> to window.formbricks.<command> to support future compatibility
   • Uses a Set to make sure multiple commands are not executed at the very same instance that might result in infinite recursive calls

Fixes #2104

How should this be tested?

Run the stack locally, give the demo app or any other js package using app a try, Monitor the console logs & network tab.

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)	Visit Preview		Mar 28, 2024 10:27am
formbricks-com	⬜️ Ignored (Inspect)	Visit Preview		Mar 28, 2024 10:27am

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[mattinannt]

@ShubhamPalriwala thanks for this :-) Looks good!
I already talked with @pandeymangg about it: To reduce complexity I would love to remove the question side-loading from the js (now js-core) package. Can you please discuss with @pandeymangg how to make this possible in this PR? :-)

[mattinannt]

can we name it js-core and also use js-core instead of browser? :-)

[jonas-hoebenreich]

Or please something like js_core. Because building it as a iife does not support - in the module name

[mattinannt]

@jonas-hoebenreich 👍 What was the reason again why you prefer the iife format?

[jonas-hoebenreich]

We initially had issues with umd leaking properties to the window object (which crashed our react shop). I just checked and it seems like this is no longer the case except the surveys package adding formbricks-surveys, formbricksSurveys & DOMPurify (below my code for reference).
We know that iife works for us, so before a switch to umd we would have to evaluate it again.

var initialWindowProperties = Object.keys(window);
var j = document.createElement('script');
j.async = true;
j.defer = true;
j.src = 'https://unpkg.com/@formbricks/surveys@1.99.0/dist/index.umd.js';
document.body.appendChild(j);
function logNewWindowProperties() {
    console.log("New Window Properties:");
    var currentWindowProperties = Object.keys(window);
    currentWindowProperties.forEach(function(prop) {
        if (!initialWindowProperties.includes(prop)) {
            console.log(prop);
        }
    });
}
j.onload = logNewWindowProperties;

[ShubhamPalriwala]

hey @jonas-hoebenreich, I just tested the package with iife with the same name and it worked locally! Anything else that I can test with?

[mattinannt]

Can you please recheck what packages we need; I think we don't need the babel packages. I think we only need vite, terser & vite-plugn-dts

[mattinannt]

Can you please recheck what packages we need; I think we don't need the babel packages & cross-env.

[mattinannt]

Also the surveys package is currently still loaded from unpkg. This should also be loaded from the formbricks api endpoint :-)

[jonas-hoebenreich]

Or please something like js_core. Because building it as a iife does not support - in the module name

[jonas-hoebenreich]

The api/js endpoint currently still has the following problem:
Nextjs automatically adds the header Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Url (https://github.com/vercel/next.js/blob/65d699e7d7b259af948990aa8052ffecc33812f5/packages/next/src/server/base-server.ts#L1717) which causes Proxies like Cloudflare or Cloundfront to exclude the endpoint from caching :/ So I think we need to find a way to remove this header because otherwise this will quickly overload the server (and add unnecessary egress fees when using Vercel).