From 47468798fd9b366deb41455fa91e35c86277fdcc Mon Sep 17 00:00:00 2001 From: Hariom Balhara Date: Wed, 27 Jul 2022 21:28:51 +0530 Subject: [PATCH] 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 | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/embeds/embed-core/vite.config.js b/packages/embeds/embed-core/vite.config.js index 0f94775561..f4abd311b7 100644 --- a/packages/embeds/embed-core/vite.config.js +++ b/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