vite.config.remote.js

/**
 * WordPress dependencies
 */
import { defaultRequestToExternal } from '@wordpress/dependency-extraction-webpack-plugin/lib/util';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

/**
 * External dependencies
 */
import { resolve } from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import MagicString from 'magic-string';

export default defineConfig( {
	base: '',
	build: {
		outDir: '../dist',
		rollupOptions: {
			input: resolve( __dirname, 'src/remote.html' ),
			external: externalize,
			output: {
				manualChunks: {
					// Chunk to avoid circular dependency
					bridge: [ 'src/utils/bridge.js' ],
				},
			},
		},
		target: 'esnext',
	},
	plugins: [ nodePolyfills(), react(), wordPressExternals() ],
	root: 'src',
	css: {
		preprocessorOptions: {
			scss: {
				quietDeps: true,
			},
		},
	},
} );

function externalize( id ) {
	const externalDefinition = defaultRequestToExternal( id );
	return (
		!! externalDefinition &&
		! id.match( /\.css(?:\?inline)?$/ ) &&
		! [ 'apiFetch', 'i18n', 'url', 'hooks' ].includes(
			externalDefinition[ externalDefinition.length - 1 ]
		)
	);
}

/**
 * Transform code by replacing WordPress imports with global definitions.
 *
 * @return {Object} The transformed code and map.
 */
function wordPressExternals() {
	return {
		name: 'wordpress-externals-plugin',
		transform( code, id ) {
			const magicString = new MagicString( code );
			let hasReplacements = false;

			// Match WordPress and React JSX runtime import statements
			const regex =
				/import\s*(?:{([^}]+)}\s*from)?\s*['"](@wordpress\/([^'"]+)|react\/jsx-runtime)['"];/g;
			let match;

			while ( ( match = regex.exec( code ) ) !== null ) {
				const [ fullMatch, imports, module ] = match;
				const externalDefinition = defaultRequestToExternal( module );

				if (
					! externalDefinition ||
					/@wordpress\/(api-fetch|i18n|url)/.test( id )
				) {
					continue; // Exclude the module from externalization
				}

				hasReplacements = true;

				if ( ! imports ) {
					// Remove the side effect import entirely
					magicString.remove(
						match.index,
						match.index + fullMatch.length
					);
					continue;
				}

				const importList = imports.split( ',' ).map( ( i ) => {
					const parts = i.trim().split( /\s+as\s+/ );
					if ( parts.length === 2 ) {
						// Convert import "as" syntax to destructuring assignment
						return `${ parts[ 0 ] }: ${ parts[ 1 ] }`;
					}
					return i.trim();
				} );

				const definitionArray = Array.isArray( externalDefinition )
					? externalDefinition
					: [ externalDefinition ];

				const replacement = `const { ${ importList.join(
					', '
				) } } = window.${ definitionArray.join( '.' ) };`;
				magicString.overwrite(
					match.index,
					match.index + fullMatch.length,
					replacement
				);
			}

			if ( ! hasReplacements ) {
				return null;
			}

			return {
				code: magicString.toString(),
				map: magicString.generateMap( { hires: true } ),
			};
		},
	};
}