wip trying to create better options to include scripts with attributes

plugins/fipfcard_plugin/fipfcard_plugin.php

@@ -374,6 +374,13 @@ function fipfcard_ajax_handler()
 		200
 	);
 }
-add_action( 'wp_ajax_get_data', 'fipfcard_ajax_handler' );
+function fipfcard_menu_endpoint()
+{
+	register_rest_route('', '/get_data', array(
+		'methods' => 'POST',
+		'callback' => 'fipfcard_ajax_handler',
+	));
+};
+add_action('rest_api_init', 'fipfcard_menu_endpoint');
 
 ?>

plugins/fipfcard_plugin/js/menu/example_menu.js

@@ -10,7 +10,7 @@ sendButton.addEventListener('click', () => {
 	inputValue = JSON.stringify(inputValue);
 	console.log("inputValue:");
 	console.log(inputValue);
-	PLGNTLS_ajax('get_data', inputValue)
+	PLGNTLS_fetch('/get_data', {inputValue})
 	//PLGNTLS_fetch('get_data', {body: {inputValue}})
 	.then((response) => response.json())
 	.then((data) => {

plugins/fipfcard_plugin/js/paypal/create_order.js

@@ -1,11 +1,12 @@
 
-//import { resultMessage } from './result_message.js';
+import { resultMessage } from './result_message.js';
+import { PLGNTLS_fetch } from '../../utils/plgntls_fetch.js';
 
 /**
  * @see https://developer.paypal.com/docs/checkout/standard/integrate/#link-integratebackend
  */
-//export async function createOrder() {
-async function createOrder() {
+//async function createOrder() {
+export async function createOrder() {
 	try {
 		//const fetch_create_url = PLGNTLS_data.fetch_url + "/fipf_plugin/api/v1/orders";
 		//console.log("fetch_create_url:", fetch_create_url);

plugins/fipfcard_plugin/js/paypal/on_approve.js

@@ -1,11 +1,12 @@
 
-//import { resultMessage } from './result_message.js';
+import { resultMessage } from './result_message.js';
+import { PLGNTLS_fetch } from '../../utils/plgntls_fetch.js';
 
 /**
  * @see https://developer.paypal.com/docs/checkout/standard/integrate/#link-integratebackend
  */
-//export async function onApprove(data, actions) {
-async function onApprove(data, actions) {
+//async function onApprove(data, actions) {
+export async function onApprove(data, actions) {
 	try {
 		const fetch_approve_url = PLGNTLS_data.fetch_url + "/fipf_plugin/api/v1/orders/" + data.orderID + "/capture";
 		console.log("fetch_approve_url:", fetch_approve_url);

plugins/fipfcard_plugin/js/paypal/paypal.js

@@ -1,5 +1,5 @@
-//import { createOrder } from './create_order.js';
-//import { onApprove } from './on_approve.js';
+import { createOrder } from './create_order.js';
+import { onApprove } from './on_approve.js';
 
 
 window.paypal.Buttons({

plugins/fipfcard_plugin/js/paypal/plgntls_fetch.js

@@ -0,0 +1,13 @@
+
+//function PLGNTLS_fetch(url, options = {}) {
+export function PLGNTLS_fetch(url, options = {}) {
+	console.log("inside PLGNTLS_fetch");
+	url = PLGNTLS_data.fetch_url + url;
+
+	options.headers = options.headers || {};
+	options.headers['X-WP-Nonce'] = PLGNTLS_data.fetch_nonce,
+	console.log("options:", options);
+
+	return fetch(url, options);
+}
+

plugins/fipfcard_plugin/js/paypal/result_message.js

@@ -1,7 +1,7 @@
 
 // Example function to show a result to the user. Your site's UI library can be used instead.
-//export function resultMessage(message) {
-function resultMessage(message) {
+//function resultMessage(message) {
+export function resultMessage(message) {
   const container = document.querySelector("#result-message");
   container.innerHTML = message;
 }

plugins/fipfcard_plugin/php/paypal/paypal.php

@@ -56,9 +56,9 @@ function fipf_paypal_shortcode_content()
 	$added_to_front = $fipfcard_paypal->add_to_front(
 		array(
 			$pp_sdk_src,
-			'js/paypal/result_message.js',
-			'js/paypal/create_order.js',
-			'js/paypal/on_approve.js',
+		//	'js/paypal/result_message.js',
+		//	'js/paypal/create_order.js',
+		//	'js/paypal/on_approve.js',
 			"js/paypal/paypal.js",
 			"html/paypal/paypal.html",
 		),

plugins/fipfcard_plugin/utils/plgntls_class.php

@@ -18,6 +18,7 @@ class PLGNTLS_class
 	private $_prefix;
 	private $_js_dependencies;
 	private $_css_dependencies;
+	private $_scripts_modules;
 
 	/**
 	 */
@@ -26,6 +27,7 @@ class PLGNTLS_class
 		$this->_first_script = null;
 		$this->_js_dependencies = array();
 		$this->_css_dependencies = array();
+		$this->_scripts_modules = array();
 	}
 
 	/**
@@ -194,12 +196,29 @@ class PLGNTLS_class
 				$previous_css_basename = $script->handle;
 			}
 		}
+
+		$this->make_scripts_modules();
+
 		/*
 		 * uncomment to print all enqueued scripts, can be usefull
-		 */
 				global $wp_scripts;
 				error_log("wp_scripts->queue:");
 				error_log(json_encode($wp_scripts->queue));
+		 */
+	}
+	// funciton is just a wrapper, only to facilitate writing
+	private function make_scripts_modules() {
+		// https://developer.wordpress.org/reference/hooks/wp_script_attributes/
+		// https://wordpress.stackexchange.com/questions/66843/attach-a-private-function-at-a-hook
+		add_filter( 'wp_script_attributes', fn() => $this->add_type_module(), 10, 1 );
+	}
+	private function add_type_module($attr) {
+		if (empty($attr['id']))
+			return $attr;
+		if ($attr['id'] === 'PLGNTLS_plgntls_fetch_js-js') {
+			$attr['type'] = 'module';
+		}
+		return $attr;
 	}
 
 	private function check_dependencies(&$script, $previous_basename)

plugins/fipfcard_plugin/utils/plgntls_fetch.js

@@ -1,5 +1,6 @@
 
-function PLGNTLS_fetch(url, options = {}) {
+//function PLGNTLS_fetch(url, options = {}) {
+export function PLGNTLS_fetch(url, options = {}) {
 	console.log("inside PLGNTLS_fetch");
 	url = PLGNTLS_data.fetch_url + url;