@gravityforms/dependency-extraction-webpack-plugin/assets/get-packages.js

Dependency extraction webpack plugin for use in Gravity Forms development. Extends the WordPress plugin.

const fs = require( 'fs' );
const path = require( 'path' );
const { trailingSlashIt, untrailingSlashIt } = require( './utils' );

const GF_NAMESPACE = '@gravityforms';
const COMPONENTS_NAMESPACE = `${ GF_NAMESPACE }/components`;

/**
 * Load mappings from a file if it exists.
 * @param {string} mappingsPath - Path to the mappings file.
 * @param {string} defaultPath - Path to the default mappings file.
 * @returns {Array} - Array of component mappings.
 */
const loadMappings = ( mappingsPath, defaultPath ) => {
	try {
		if ( fs.existsSync( mappingsPath ) ) {
			return require( mappingsPath );
		} else if ( fs.existsSync( defaultPath ) ) {
			return require( defaultPath );
		}
		return [];
	} catch ( error ) {
		console.error( `Error loading mappings from ${ mappingsPath }:`, error );
		return [];
	}
};

/**
 * Create package entry for a component.
 * @param {string} rootNamespace - Root namespace for the component.
 * @param {Object} component - Component mapping object.
 * @param {Object} packages - Packages object to store the results.
 */
const createComponentPackageEntry = ( rootNamespace, component, packages ) => {
	const { defaultExport = '', namedExports = [], externalPath = '', importPath = '' } = component;

	// There's a problem with the map source for this component
	if ( ! defaultExport && ! namedExports.length ) {
		return;
	}
	// We don't bundle svgs currently, may create new package down the road
	if ( importPath.includes( 'elements/Svgs' ) ) {
		return;
	}

	const importPathParts = untrailingSlashIt( importPath ).split( '/' );
	const externalParts = externalPath.split( '.' );

	if ( importPathParts.length === 4 ) {
		externalParts.push( importPathParts[ 3 ] );
	}
	externalParts.push( defaultExport );

	packages[ `${ COMPONENTS_NAMESPACE }/${ trailingSlashIt( importPath ) }${ defaultExport }` ] = {
		external: [ rootNamespace, ...externalParts ],
		handle: `${ rootNamespace }_gravityforms_${ importPathParts[ 1 ] }_components`,
	};
};

/**
 * Get packages based on the component mappings.
 * @param {string} rootNamespace - Root namespace for the packages.
 * @returns {Object} - Packages object.
 */
const getPackages = ( rootNamespace ) => {
	// add new basic external packages here
	const packages = {
		[ `${ GF_NAMESPACE }/libraries` ]: { external: [ rootNamespace, 'libraries' ], handle: `${ rootNamespace }_gravityforms_libraries` },
		[ `${ GF_NAMESPACE }/react-utils` ]: { external: [ rootNamespace, 'utils', 'react' ], handle: `${ rootNamespace }_gravityforms_react_utils` },
		[ `${ GF_NAMESPACE }/utils` ]: { external: [ rootNamespace, 'utils' ], handle: `${ rootNamespace }_gravityforms_utils` },
	};

	const adminComponentMappings = loadMappings(
		path.resolve( __dirname, '../../components/dist/mappings/admin.js' ),
		path.resolve( __dirname, '../mappings/components/admin.js' )
	);
	const themeComponentMappings = loadMappings(
		path.resolve( __dirname, '../../components/dist/mappings/theme.js' ),
		path.resolve( __dirname, '../mappings/components/theme.js' )
	);

	const componentMappings = [ ...adminComponentMappings, ...themeComponentMappings ];
	componentMappings.forEach( ( component ) => createComponentPackageEntry( rootNamespace, component, packages ) );

	return packages;
};

module.exports = getPackages;