Use in Wordpress plugin?

[dotte1]

Is there a standalone JS file that can be used in a Wordpress theme or plugin in lieu of using a module loader? Or how would you recommend using this in Wordpress? I'm familiar with using AMD modules in non-Wordpress projects, but trying to keep things simple for a plugin I'm building.

Basically trying to achieve how the script is loaded in this [dated] tutorial: https://return-true.com/adding-content-to-yoast-seo-analysis-using-yoastseojs/

[dotte1]

I should clarify I'm trying to build a company-specific plugin on the wp-admin side to hook the TinyMCE editor into YoastJS without having to creating a custom post type for our purpose. I was able to get Webpack to build a standalone script, but when trying to initialize a snippet preview I'm getting the following error:

TypeError: undefined is not an object (evaluating 'this.i18n.dgettext')

The code I'm using is from one of your examples, but adapted slightly for Typescript:

import {SnippetPreview, App } from "yoastseo";

import { forEach } from "lodash-es";
import { escape } from "lodash-es"; 


var setLocale = function() {
	this.config.locale = (<HTMLInputElement>document.getElementById( "locale" )).value;
	this.initializeAssessors( this.config );
	this.initAssessorPresenters();
	this.refresh();
};

var setPremium = function() {
	this.changeAssessorOptions( { useKeywordDistribution: (<HTMLInputElement>document.getElementById( "premium" )).checked } );
	this.refresh();
};


 
/**
 * Binds the renewData function on the change of input elements.
 *
 * @param {YoastSEO.App} app The YoastSEO.js app.
 *
 * @returns {void}
 */
var bindEvents = function( app : any) {

	var elems = [ "content", "focusKeyword" ];
	for ( var i = 0; i < elems.length; i++ ) {
		document.getElementById( elems[ i ] ).addEventListener( "input", app.refresh.bind( app ) );
	}
	document.getElementById( "locale" ).addEventListener( "input", setLocale.bind( app ) );
	document.getElementById( "premium" ).addEventListener( "input", setPremium.bind( app ) );
};


window.onload = function() {
	var snippetPreview = new SnippetPreview( {
		targetElement: document.getElementById( "snippet" ),
    } );

	var app = new App( {
		snippetPreview: snippetPreview,
		targets: {
			output: "output",
			contentOutput: "contentOutput",
		},
		callbacks: {
			getData: function() {
				return {
					keyword: (<HTMLInputElement>document.getElementById( "focusKeyword" )).value,
					text: (<HTMLInputElement>document.getElementById( "content" )).value
				};
			},
		},
		marker: function( paper : any, marks : any) {
			var text = paper.getText();

			forEach( marks, function( mark ) {
				text = mark.applyWithReplace( text );
			} );

			document.getElementsByClassName( "marked-text" )[ 0 ].innerHTML = text;

			document.getElementsByClassName( "marked-text-raw" )[ 0 ].innerHTML = escape( text );
		},
	} );

	bindEvents( app );

            
    app.refresh();
}

Any suggestions would be appreciated! :)