lazy-load-script.ts

/**
 * External dependencies
 */
import { isString } from '@woocommerce/types';

interface LazyLoadScriptParams {
	handle: string;
	src: string;
	version?: string;
	after?: string;
	before?: string;
	translations?: string;
}

interface AppendScriptAttributesParam {
	id: string;
	innerHTML?: string;
	onerror?: OnErrorEventHandlerNonNull;
	onload?: () => void;
	src?: string;
}

/**
 * In WP, registered scripts are loaded into the page with an element like this:
 * `<script src='...' id='[SCRIPT_ID]'></script>`
 * This function checks whether an element matching that selector exists.
 * Useful to know if a script has already been appended to the page.
 */
const isScriptTagInDOM = ( scriptId: string ): boolean => {
	const scriptElements = document.querySelectorAll( `script#${ scriptId }` );
	return scriptElements.length > 0;
};

/**
 * Appends a script element to the document body if a script with the same id
 * doesn't exist.
 */
const appendScript = ( attributes: AppendScriptAttributesParam ): void => {
	// Abort if id is not valid or a script with the same id exists.
	if ( ! isString( attributes.id ) || isScriptTagInDOM( attributes.id ) ) {
		return;
	}
	const scriptElement = document.createElement( 'script' );
	for ( const attr in attributes ) {
		// We could technically be iterating over inherited members here, so
		// if this is the case we should skip it.
		if ( ! attributes.hasOwnProperty( attr ) ) {
			continue;
		}
		const key = attr as keyof AppendScriptAttributesParam;

		// Skip the keys that aren't strings, because TS can't be sure which
		// key in the scriptElement object we're assigning to.
		if ( key === 'onload' || key === 'onerror' ) {
			continue;
		}

		// This assignment stops TS complaining about the value maybe being
		// undefined following the isString check below.
		const value = attributes[ key ];
		if ( isString( value ) ) {
			scriptElement[ key ] = value;
		}
	}

	// Now that we've assigned all the strings, we can explicitly assign to the
	// function keys.
	if ( typeof attributes.onload === 'function' ) {
		scriptElement.onload = attributes.onload;
	}
	if ( typeof attributes.onerror === 'function' ) {
		scriptElement.onerror = attributes.onerror;
	}
	document.body.appendChild( scriptElement );
};

/**
 * Appends a `<script>` tag to the document body based on the src and handle
 * parameters. In addition, it appends additional script tags to load the code
 * needed for translations and any before and after inline scripts. See these
 * documentation pages for more information:
 *
 * https://developer.wordpress.org/reference/functions/wp_set_script_translations/
 * https://developer.wordpress.org/reference/functions/wp_add_inline_script/
 */
const lazyLoadScript = ( {
	handle,
	src,
	version,
	after,
	before,
	translations,
}: LazyLoadScriptParams ): Promise< void > => {
	return new Promise( ( resolve, reject ) => {
		if ( isScriptTagInDOM( `${ handle }-js` ) ) {
			resolve();
		}

		if ( translations ) {
			appendScript( {
				id: `${ handle }-js-translations`,
				innerHTML: translations,
			} );
		}
		if ( before ) {
			appendScript( {
				id: `${ handle }-js-before`,
				innerHTML: before,
			} );
		}

		const onload = () => {
			if ( after ) {
				appendScript( {
					id: `${ handle }-js-after`,
					innerHTML: after,
				} );
			}
			resolve();
		};

		appendScript( {
			id: `${ handle }-js`,
			onerror: reject,
			onload,
			src: version ? `${ src }?ver=${ version }` : src,
		} );
	} );
};

export default lazyLoadScript;