Is there a way to use this library without new Function?

[lilouartz]

It fails to run on my website because of CSP policy, and I do not want to allow unsafe-inline. Is there a way to somehow use it without eval even if it means that not all functions will be supported?

[nichtsam]

I was experimenting this today, and I've come up with a workaround to make it work with 'strict-dynamic' instead of 'unsafe-eval. It's super hacky and not really a solution because it's async and creates a gap between server render and client render.

Anyway, just for your reference, this is the snippet:

const trickEval = (x: string, scope = {}) => {
	// @ts-ignore
	globalThis['trickEval'] = scope
	const code = `
      const scope = globalThis['trickEval'];
      ${Object.keys(scope)
				.map((key) => `const ${key} = scope['${key}'];`)
				.join('\n')}
      const result = (() => {${x}})();
      delete globalThis['trickEval'];
      export default result;
    `

	return import(`data:text/javascript,${encodeURIComponent(code)}`)
}

async function getMDXComponent(code: string, globals = {}) {
	const mdxExport = await getMDXExport(code, globals)
	return mdxExport.default
}

async function getMDXExport(
	code: string,
	globals = {},
): Promise<MDXExport<any>> {
	const jsxGlobals = { React, ReactDOM, _jsx_runtime }
	const scope = { ...jsxGlobals, ...globals }
	const fn = await trickEval(
		`return function(${Object.keys(scope)}) {${code}}`,
	).then((m) => m.default)
	return fn(...Object.values(scope))
}