How to use @automattic/load-script - 10 common examples

componentDidMount() {
		if ( ! autocompleteService ) {
			autocompleteService = {}; // if multiple components are initialized on the page, we'd want the script to load only once
			loadScript(
				`//maps.googleapis.com/maps/api/js?key=${ config(
					'google_maps_and_places_api_key'
				) }&libraries=places`,
				function() {
					// eslint-disable-next-line no-undef
					autocompleteService = new google.maps.places.AutocompleteService();
				}
			);
		}
	}

const randomIdLength = 18; // 18 * 4/3 = 24 (base64 encoded chars).
					_ui = createRandomId( randomIdLength );
					document.cookie = cookie.serialize( 'tk_ai', _ui );
				}
			}
		}

		blockedTracksDebug( 'Loading /nostats.js', { _ut, _ui } );
		return loadScript(
			'/nostats.js?_ut=' + encodeURIComponent( _ut ) + '&_ui=' + encodeURIComponent( _ui )
		);
	} );
}

if ( typeof document !== 'undefined' ) {
	_loadTracksResult = loadScript( '//stats.wp.com/w.js?60' );
}

function buildQuerystring( group, name ) {
	let uriComponent = '';

	if ( 'object' === typeof group ) {
		for ( const key in group ) {
			uriComponent += '&x_' + encodeURIComponent( key ) + '=' + encodeURIComponent( group[ key ] );
		}
	} else {
		uriComponent = '&x_' + encodeURIComponent( group ) + '=' + encodeURIComponent( name );
	}

	return uriComponent;
}

export function loadjQueryDependentScriptDesktopWrapper( url, callback ) {
	debug( `Loading a jQuery dependent script from "${ url }"` );

	// It is not possible to expose jQuery globally in Electron App: https://github.com/atom/electron/issues/254.
	// It needs to be loaded using require and npm package.
	if ( config.isEnabled( 'desktop' ) ) {
		debug( `Attaching jQuery from node_modules to window for "${ url }"` );
		asyncRequire( 'jquery', $ => {
			window.$ = window.jQuery = $;
			loadScript( url, callback );
		} );
		return;
	}

	loadjQueryDependentScript( url, callback );
}

return new Promise( ( resolve, reject ) => {
		loadScript( DIRECTLY_RTM_SCRIPT_URL, function( error ) {
			if ( error ) {
				return reject( new Error( `Failed to load script "${ error.src }".` ) );
			}
			resolve();
		} );
	} );
}

async loadDependency() {
		if ( ! window.FB ) {
			await loadScript( '//connect.facebook.net/en_US/sdk.js' );
		}

		return window.FB;
	}

loader = new Promise( function( resolve, reject ) {
			loadScript( scriptUrl, function( err ) {
				if ( err ) {
					reject( err );
				} else {
					resolve();
				}
			} );
		} );
		loaders[ scriptUrl ] = loader;

return new Promise( ( resolve, reject ) => {
		if ( window[ gatewayNamespace ] ) {
			resolve( window[ gatewayNamespace ] );
			return;
		}

		loadScript( gatewayUrl, function( error ) {
			if ( error ) {
				reject( error );
				return;
			}

			debug( 'Payment gateway ' + gatewayNamespace + ' loaded for the first time' );
			resolve( window[ gatewayNamespace ] );
		} );
	} );
};

loadInitializeScript() {
		loadScript( videoPressUrl, this.onScriptLoaded );
	}

recordUser: function() {
		if ( ! hasLoaded ) {
			window._sift.push( [ '_setAccount', config( 'siftscience_key' ) ] );
			window._sift.push( [ '_setUserId', user().get().ID ] );
			window._sift.push( [ '_trackPageview' ] );

			hasLoaded = true;
			loadScript( SIFTSCIENCE_URL, function( error ) {
				if ( error ) {
					debug( 'Error loading siftscience' );
				} else {
					debug( 'siftscience loaded successfully' );
				}
			} );
		}
	},
};

async loadDependency() {
		if ( ! window.gapi ) {
			await loadScript( 'https://apis.google.com/js/platform.js' );
		}

		return window.gapi;
	}