@enonic/react4xp/src/globals/generateTempES6SourceAndGetFilename.ts

Build tools for React4xp

import {writeFileSync} from 'fs';

import {isObject} from '../util/isObject';
import {isString} from '../util/isString';
//import {toStr} from '../util/toStr';


// First autogenerates an globals temporary sourcefile,
// and then lets webpack have its filename in order to transpile it. Returns null if somethings off.
export function generateTempES6SourceAndGetFilename(
	globals: string | object,
	outputFileName: string
) {
	//console.debug('generateTempES6SourceAndGetFilename() globals', toStr(globals));
	//console.debug('generateTempES6SourceAndGetFilename() outputFileName', toStr(outputFileName));
	if (
		typeof outputFileName !== "string" ||
		(outputFileName || "").trim() === ""
	) {
		console.warn(`${__filename} - Skipping generation of the globals chunk:
			\tThe outputFileName parameter must be a non-empty string: ${JSON.stringify(
			outputFileName,
			null,
			2
		)}`);
		return null;
	}

	let globalsObj: object;

	if (isString(globals)) {
		globalsObj = JSON.parse(globals);
	} else if (isObject(globals)) {
		globalsObj = JSON.parse(JSON.stringify(globals)); // deref
	}

	//console.debug('generateTempES6SourceAndGetFilename() globalsObj', toStr(globalsObj));
	if (
		!globalsObj ||
		!isObject(globalsObj) ||
		//Array.isArray(globalsObj) ||
		Object.keys(globalsObj).length < 1
	) {
		console.warn(`${__filename} - Skipping generation of the globals chunk:
			\tThe globals parameter must be an object (or JSON-string object) with at least one entry: ${JSON.stringify(
			globalsObj,
			null,
			2
		)}`);
		return null;
	}

	let globalsImports = "";
	let globalsExports = "";

	Object.keys(globalsObj).forEach((key) => {
		globalsImports += `import ${globalsObj[key]} from '${key}';\n`;
	});

	// React 19: Import client-side functions from react-dom/client
	// and merge them with ReactDOM to maintain backward compatibility
	if (globalsObj['react-dom']) {
		globalsImports += `import * as ReactDOMClient from 'react-dom/client';\n`;
	}

	globalsImports += `import {getPublicPath} from './index.js';\n`;

	Object.keys(globalsObj).forEach((key) => {
		const globalName = globalsObj[key];
		// Special handling for ReactDOM to merge react-dom/client exports
		if (key === 'react-dom' && globalName === 'ReactDOM') {
			globalsExports += `\tglobalThis.${globalName} = Object.assign({}, ${globalName}, ReactDOMClient);\n`;
		} else {
			globalsExports += `\tglobalThis.${globalName} = ${globalName};\n`;
		}
	});

	globalsExports += `\t
if (typeof document !== "undefined") {
	globalThis.__R4XP_PUBLIC_PATH__ = getPublicPath("${process.env.R4X_APP_NAME}");
}\n`;

	const globalsES6 = `// AUTO-GENERATED by ${__filename}\n\n${globalsImports}\n(function() {\n${globalsExports}} )();\n`;

	writeFileSync(outputFileName, globalsES6);

	return outputFileName;
}