Avoid global variables leak by making the entire code IIFE (#3543)
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>pull/3534/head
parent
587526186f
commit
47468798fd
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue