vite-plugin-external: Allow externals as function that is called on runtime

[irshadahmad21]

Hello,

Thank you for this wonderful package. It has been so helpful.

We have been using it to externalize some packages we develop in our monorepo and then externalize them. It works pretty well.

The only problem we have been facing is that we have to statically pass a key-value object to externals option and whenever there is a new package or a package gets removed/replaced, we need to update that externals list. We also externalize some third-party packages which belong to a namespace like @org-name and we have to regularly check that list upstream and ensure that we don't unintentionally bundle any newly created package from them.

So, sometimes we forget and it's only when we see bugs in production that we notice that list of external packages is outdated.

Thus, it would be great if we could use externals as a function which would work in the same way as rollupOptions.external and we could decide at runtime whether we want to externalize a package or not using some regex match - ^(@our-namespace|@third-party)\//.match(id)

Or another solution could be to fallback on rollupOptions.external, which we could then use to handle it dynamically.

[fengxinming]

@irshadahmad21 Can you provide a simple demo? I will use this demo to confirm after optimization

[irshadahmad21]

Here is the simplest demo

https://stackblitz.com/edit/vite-external-demo?file=vite.config.ts

Instead of

createExternal({
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
})

We would want it to be something like this

createExternal((id: string) => {

	if (id.startsWith('@wordpress/')) {
		// "@wordpress/block-editor" => "wp.blockEditor"
		// "@wordpress/components" => "wp.components"
		const variable = dashToCamelCase(id.replace('@wordpress/', ''));

		return `wp.${variable}`;
	}
	// Other packages to externalize
	switch (id) {
		case 'react':
			return 'React';
		case 'react-dom':
			return 'ReactDOM';
	}

	// returning undefined means the package should not be externalized
});

function dashToCamelCase(input: string): string {
	return input.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
}

rollup-plugin-external-globals uses the same technique.

[irshadahmad21]

Any update on this?