Avoid global variables leak by making the entire code IIFE (#3543)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/embeds/embed-core/vite.config.js

@@ -2,8 +2,8 @@ import viteBaseConfig from "../vite.config";
 
 const path = require("path");
 const { defineConfig } = require("vite");
-
 module.exports = defineConfig((configEnv) => {
+  /** @type {import('vite').UserConfig} */
   const config = {
     ...viteBaseConfig,
     base: "/embed/",
@@ -19,6 +19,17 @@ module.exports = defineConfig((configEnv) => {
           preview: path.resolve(__dirname, "preview.html"),
           embed: path.resolve(__dirname, "src/embed.ts"),
         },
+        plugins: [
+          {
+            generateBundle: (code, bundle) => {
+              // Note: banner/footer doesn't work because it doesn't enclose the entire library code, some variables are still left out.
+              // Ideally IIFE mode should be used to solve this problem but it has 2 known problems
+              // 1. It doesn't work with rollupOptions.input.preview(as it is an app and app doesn't support it, only libraries)
+              // 2. Having IIFE mode somehow adds the CSS imported in embed, directly to the parent page. It is supposed to be used as a string and then that string is used as CSS in shadow dom
+              bundle["embed.js"].code = `!function(){${bundle["embed.js"].code}}()`;
+            },
+          },
+        ],
         output: {
           entryFileNames: "[name].js",
           //FIXME: Can't specify UMD as import because preview is an app which doesn't support `format` and this setting apply to both input