@gravityforms/gulp-tasks/src/scripts/components-dist.js

Configurable Gulp tasks for use in Gravity Forms projects.

#!/usr/bin/env node

import fs from 'node:fs';
import path from 'node:path';
import { createRequire } from 'node:module';
import { fileURLToPath } from 'node:url';

import registerComponentDefaultExport from '../utils/component-map.js';
import { trailingSlashIt } from '../utils/tools.js';
import { deleteDirectory, execShellCommand } from './util.js';

const cjsRequire = createRequire( import.meta.url );
const __dirname = path.dirname( fileURLToPath( import.meta.url ) );
const packagesDir = path.resolve( __dirname, '../../../' );
const componentsPath = path.join( packagesDir, 'components' );
const gulpTasksPath = path.join( packagesDir, 'gulp-tasks' );

const getEntryPointContent = ( imports, context, componentMap ) => {
	return `if ( window.gformComponentDistPath ) {
    __webpack_public_path__ = window.gformComponentDistPath;
}
	
${ imports.join( '\n' ) }

const getGlobalContainer = ( rootNamespace ) => {
	if ( ! window[ rootNamespace ] ) window[ rootNamespace ] = {};
	if ( ! window[ rootNamespace ].components ) window[ rootNamespace ].components = {};
	if ( ! window[ rootNamespace ].components.${ context } ) window[ rootNamespace ].components.${ context } = {};
	return window[ rootNamespace ].components.${ context };
};

const initModules = (container) => {
	container.html = container.html || { elements: {}, modules: {} };
	container.react = container.react || { elements: {}, modules: {} };
};

const init = () => {
	const rootNamespace = window.gformComponentNamespace || 'gform';
	const container = getGlobalContainer( rootNamespace );
	initModules( container );

${ Object.entries( componentMap ).map( ( [ key, value ] ) => {
		return `    window[ rootNamespace ].${ key } = ${ value };`;
	} ).join( '\n' ) }
};

init();
`;
};

const generateEntryPoint = ( context ) => {
	const imports = [];
	const componentMap = {};

	const mappingFile = path.join( componentsPath, 'dist', 'mappings', `${ context }.js` );
	if ( fs.existsSync( mappingFile ) ) {
		const components = cjsRequire( mappingFile );
		const sortedComponents = components.sort( ( a, b ) => {
			if ( ! a.defaultExport && ! b.defaultExport ) {
				return 0;
			}
			if ( ! a.defaultExport ) {
				return 1;
			}
			if ( ! b.defaultExport ) {
				return -1;
			}
			return a.defaultExport.localeCompare( b.defaultExport );
		} );
		sortedComponents.forEach( ( component ) => {
			const { defaultExport = '', namedExports = [], externalPath = '', importPath = '' } = component;
			if ( importPath.includes( `react/${ context }/elements/Svgs/` ) ) {
				return;
			}
			const defaultExportName = importPath.includes( `react/${ context }` ) ? `React${ defaultExport }` : defaultExport;
			const parsedImportPath = `../../../${ trailingSlashIt( importPath ) }${ defaultExport || namedExports[ 0 ] }`;

			if ( ! defaultExport && ! namedExports.length ) {
				return;
			}
			imports.push( `import ${ defaultExportName ? defaultExportName : '' }${ defaultExportName && namedExports.length ? ', ' : '' }${ namedExports.length ? `{ ${ namedExports.join( ', ' ) } }` : '' } from '${ parsedImportPath }';` );

			if ( defaultExport ) {
				registerComponentDefaultExport( {
					componentMap,
					context,
					defaultExport,
					defaultExportName,
					externalPath,
					importPath,
				} );
			}
			namedExports.forEach( ( namedExport ) => {
				componentMap[ `${ externalPath }.${ defaultExport }.${ namedExport }` ] = namedExport;
			} );
		} );
	}

	const outputDir = path.join( componentsPath, 'dist', 'js', 'entry' );
	if ( ! fs.existsSync( outputDir ) ) {
		fs.mkdirSync( outputDir, { recursive: true } );
	}
	if ( imports.length ) {
		fs.writeFileSync( path.join( outputDir, `${ context }.js` ), getEntryPointContent( imports, context, componentMap ) );
	}
};

function generateEntryPoints() {
	[ 'admin', 'theme' ].forEach( ( context ) => {
		generateEntryPoint( context );
	} );
}

async function init() {
	await deleteDirectory( path.join( componentsPath, 'dist' ) );
	await execShellCommand( `cd "${ gulpTasksPath }" && npm run export:components`, true );
	await execShellCommand( `cd "${ gulpTasksPath }" && gulp postcss:componentsAdminDistCss && gulp postcss:componentsCommonDistCss && gulp postcss:componentsThemeDistCss`, true );
	generateEntryPoints();
	await execShellCommand( `cd "${ gulpTasksPath }" && cross-env NODE_ENV=admincomponentsdev npx webpack && cross-env NODE_ENV=admincomponentsprod npx webpack --mode production`, true );
}

( async () => {
	try {
		if ( ! fs.existsSync( componentsPath ) ) {
			console.log( 'components package not found. Skipping dist generation for that package.' );
			return;
		}
		await init();
	} catch ( err ) {
		console.error( 'An error occurred during generating component dist files: ', err );
	}
} )();