now we can add attributes to js files using the tools class

plugins/fipfcard_plugin/html/menu/example_menu.html

@@ -1,2 +1,5 @@
 <input type='text' id='mytext'>
 <button id='mybutton'>send</button>
+
+<input type='text' id='mytext_2'>
+<button id='mybutton_2'>send</button>

plugins/fipfcard_plugin/js/menu/example_menu.js

@@ -1,29 +1,4 @@
-import {PLGNTLS_fetch} from '../../utils/plgntls_fetch.js';
 
-const inputElement = document.getElementById('mytext');
+import { test_fetch } from './example_submenu.js';
-const sendButton = document.getElementById('mybutton');
-
-sendButton.addEventListener('click', () => {
-	let inputValue = inputElement.value;
-	inputValue = {
-		key1: 'value1',
-		key2: 'value2'
-	};
-	inputValue = JSON.stringify(inputValue);
-	console.log("inputValue:");
-	console.log(inputValue);
-	PLGNTLS_fetch('/plgntls/get_data', {
-		method: "POST",
-	})
-	//PLGNTLS_fetch('get_data', {body: {inputValue}})
-	.then((response) => response.json())
-	.then((data) => {
-		console.log("dataaa: ");
-		console.log(data);
-	})
-	.catch((error) => {
-		console.log("error: ");
-		console.log(error);
-	});
-});
 
+test_fetch();

plugins/fipfcard_plugin/js/menu/example_menu_2.js

@@ -0,0 +1,29 @@
+
+const inputElement2 = document.getElementById('mytext_2');
+const sendButton2 = document.getElementById('mybutton_2');
+
+sendButton2.addEventListener('click', () => {
+	let inputValue = inputElement2.value;
+	inputValue = {
+		key1: 'value1',
+		key2: 'value2'
+	};
+	inputValue = JSON.stringify(inputValue);
+	console.log("inputValue:");
+	console.log(inputValue);
+	PLGNTLS_fetch('/plgntls/get_data', {
+		method: "POST",
+	})
+	//PLGNTLS_fetch('get_data', {body: {inputValue}})
+	.then((response) => response.json())
+	.then((data) => {
+		console.log("dataaa: ");
+		console.log(data);
+	})
+	.catch((error) => {
+		console.log("error: ");
+		console.log(error);
+	});
+});
+
+

plugins/fipfcard_plugin/js/menu/example_submenu.js

@@ -0,0 +1,33 @@
+
+import { PLGNTLS_fetch } from '../../utils/plgntls_fetch.js';
+
+export function test_fetch() {
+	const inputElement = document.getElementById('mytext');
+	const sendButton = document.getElementById('mybutton');
+
+	sendButton.addEventListener('click', () => {
+		let inputValue = inputElement.value;
+		inputValue = {
+			key1: 'value1',
+			key2: 'value2'
+		};
+		inputValue = JSON.stringify(inputValue);
+		console.log("inputValue:");
+		console.log(inputValue);
+		PLGNTLS_fetch('/plgntls/get_data', {
+			method: "POST",
+		})
+		//PLGNTLS_fetch('get_data', {body: {inputValue}})
+		.then((response) => response.json())
+		.then((data) => {
+			console.log("dataaa: ");
+			console.log(data);
+		})
+		.catch((error) => {
+			console.log("error: ");
+			console.log(error);
+		});
+	});
+}
+
+

plugins/fipfcard_plugin/php/menu/example_menu.php

@@ -11,7 +11,8 @@ function fipfcard_plugin_content() {
 	$fipfcard = new PLGNTLS_class();
 
 	echo $fipfcard->add_to_front( array(
-		"js/menu/example_menu.js",
+		array("js/menu/example_menu.js", 'type'=>'module'),
+		"js/menu/example_menu_2.js",
 		"html/menu/example_menu.html",
 	));
 }
@@ -27,7 +28,7 @@ ajax
 - to access the content of the data object properties of the ajax call :
   use $_POST['property_name']
 */
-function fipfcard_ajax_handler()
+function fipfcard_menu_fetch_handler()
 {
 	return new WP_REST_Response('hello', 200);
 }
@@ -35,7 +36,7 @@ function fipfcard_menu_endpoint()
 {
 	register_rest_route('plgntls', '/get_data', array(
 		'methods' => 'POST',
-		'callback' => 'fipfcard_ajax_handler',
+		'callback' => 'fipfcard_menu_fetch_handler',
 	));
 };
 add_action('rest_api_init', 'fipfcard_menu_endpoint');

plugins/fipfcard_plugin/php/paypal/paypal.php

@@ -59,7 +59,8 @@ function fipf_paypal_shortcode_content()
 		//	'js/paypal/result_message.js',
 		//	'js/paypal/create_order.js',
 		//	'js/paypal/on_approve.js',
-			"js/paypal/paypal.js",
+			//"js/paypal/paypal.js",
+			array("js/paypal/paypal.js", 'type'=>'module'),
 			"html/paypal/paypal.html",
 		),
 	);
@@ -71,7 +72,6 @@ function fipf_paypal_shortcode_content()
 /**
  * the js file paypal.js needs to be imported as a module to use import
  * @see https://developer.wordpress.org/reference/hooks/script_loader_tag/
- */
 function fipf_add_id_to_script( $tag, $handle, $src ) {
 	if ( $handle === 'PLGNTLS_paypal_js' ) {
 		$tag = '<script type="module" src="' . esc_url( $src ) . '" ></script>';
@@ -79,6 +79,7 @@ function fipf_add_id_to_script( $tag, $handle, $src ) {
 	return $tag;
 }
 add_filter( 'script_loader_tag', 'fipf_add_id_to_script', 10, 3 );
+ */
 
 
 // handling routes and endpoints

plugins/fipfcard_plugin/utils/plgntls_class.php

@@ -56,6 +56,7 @@ class PLGNTLS_class
 	private $_js_dependencies;
 	private $_css_dependencies;
 	private $_scripts_modules;
+	private $_scripts_attributes;
 
 	/**
 	 */
@@ -65,6 +66,7 @@ class PLGNTLS_class
 		$this->_js_dependencies = array();
 		$this->_css_dependencies = array();
 		$this->_scripts_modules = array();
+		$this->_scripts_attributes = array();
 	}
 
 	/**
@@ -87,24 +89,26 @@ class PLGNTLS_class
 	}
 
 
-	public function add_to_front($scripts_arr = null, $vars = null) {
+	public function add_to_front($srcs_arr = null, $vars = null) {
 		if (!is_array($vars))
 			$vars = array();
-		if (!is_null($scripts_arr))
+		if (!is_null($srcs_arr))
-			$this->add_fetch($scripts_arr, $vars);
+			$this->add_fetch($srcs_arr, $vars);
 
 		array_push($this->_scripts_modules, 'PLGNTLS_example_menu_js', 'PLGNTLS_plgntls_fetch_js');
 
-		$scripts = array();
+		$srcs = array();
-		foreach($scripts_arr as $key => $script_name) {
+		foreach($srcs_arr as $src_key => $src_value) {
-			$scripts[] = $this->init_script($key, $script_name);
+			$init = $this->init_src($src_key, $src_value);
+			if ($init !== null)
+				$srcs[] = $init;
 		}
-		if (!is_null($scripts_arr))
+		if (!is_null($srcs_arr))
-			$this->add_scripts_to_front($scripts);
+			$this->add_srcs_to_front($srcs);
 
 		if (!is_null($vars))
 			$this->add_vars_to_front($vars);
-		return $this->create_html($scripts, $vars);
+		return $this->create_html($srcs, $vars);
 	}
 
 
@@ -127,9 +131,18 @@ class PLGNTLS_class
 
 
 
-	private function add_fetch(&$scripts_arr, &$vars) {
+	/**
+	 * for fetch, we add the file script that contains the fetch function
+	 * it is an es6 module with the export keyword
+	 * that way, it can also be used by modules scripts
+	 * to achieve that, we wouldn't need to include it here though
+	 * but we need that the fetch function is also available for inline scripts
+	 * so we could attach a copy of the script file without the export keyword
+	 * but instead, inside the file, we add the fetch function to the global scope
+	 */
+	private function add_fetch(&$srcs_arr, &$vars) {
 		// add fetch script at beginning of scripts list
-		array_unshift($scripts_arr, "utils/plgntls_fetch.js");
+		array_unshift($srcs_arr, array("utils/plgntls_fetch.js", 'type'=>'module'));
 		// for the custom endpoints in rest api to work
 		// they need to have a nonce named 'wp_rest'
 		// see : https://developer.wordpress.org/rest-api/using-the-rest-api/authentication/
@@ -214,75 +227,86 @@ class PLGNTLS_class
 	 * 	- to add ajax script and variables
 	 * 	- default to true
 	 */
-	private function add_scripts_to_front($scripts_arr) {
+	private function add_srcs_to_front($srcs_arr) {
 		//wp_enqueue_script(<give_it_a_name>, /url/to/script, [depends on], version, defer? );
 		//wp_enqueue_style( <give_it_a_name>, /url/to/script, [depends on], version, media );
 
 		$previous_css_basename = '';
 		$previous_js_basename = '';
-		foreach ($scripts_arr as $script) {
+		foreach ($srcs_arr as $src) {
-			if (in_array($script->ext, array("js", "url"))) {
+			if (in_array($src->ext, array("js", "url"))) {
-				if (is_null($this->_first_script))
+				$this->add_script($src, $previous_js_basename);
-					$this->_first_script = $script->handle;
+				$previous_js_basename = $src->handle;
-				$depends_on = $this->check_dependencies($script, $previous_js_basename);
-				if ($depends_on !== null)
-					wp_enqueue_script( $script->handle, $script->url, $depends_on, $script->version, true);
-				$previous_js_basename = $script->handle;
 			}
-			else if ($script->ext === "css") {
+			else if ($src->ext === "css") {
-				$depends_on = $this->check_dependencies($script, $previous_css_basename);
+				$this->add_style($src, $previous_css_basename);
-				if ($depends_on !== null)
+				$previous_css_basename = $src->handle;
-					wp_enqueue_style( $script->handle, $script->url, $depends_on, $script->version, '');
-				$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));
-	}
-	// function 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($attr)=>$this->add_type_module($attr), 10, 1 );
+
+		/*
+		 * uncomment to print all enqueued scripts, can be usefull
+				global $wp_scripts;
+				error_log("wp_scripts->queue:");
+				error_log(json_encode($wp_scripts->queue));
+		 */
 	}
+	private function add_script($script, $previous_js_basename) {
+		if (is_null($this->_first_script))
+			$this->_first_script = $script->handle;
+		$depends_on = $this->check_dependencies($script, $previous_js_basename);
+		if ($depends_on !== null)
+			wp_enqueue_script( $script->handle, $script->url, $depends_on, $script->version, true);
+	}
+	private function add_style($style, $previous_css_basename) {
+		$depends_on = $this->check_dependencies($style, $previous_css_basename);
+		if ($depends_on !== null)
+			wp_enqueue_style( $style->handle, $style->url, $depends_on, $style->version, '');
+	}
+
+
+
 	private function add_type_module($attr) {
 		if (empty($attr['id']))
 			return $attr;
-		foreach($this->_scripts_modules as $script){
+		$handle = $attr['id'];
-			if ($attr['id'] === $script.'-js') {
+		if (isset($this->_scripts_attributes[$handle]))
-				$attr['type'] = 'module';
+			$script = $this->_scripts_attributes[$handle];
-			}
+		else
+			return $attr;
+
+		foreach($script as $key => $value){
+			$attr[$key] = $value;
 		}
+		unset($this->_scripts_attributes[$handle]);
+
 		return $attr;
 	}
 
-	private function check_dependencies(&$script, $previous_basename)
+	private function check_dependencies(&$src, $previous_basename)
 	{
-		if (in_array($script->ext, array("js", "url")))
+		if (in_array($src->ext, array("js", "url")))
 		{
 			global $wp_scripts;
-			$already_enqueued = array_search($script->handle, $wp_scripts->queue);
+			$already_enqueued = array_search($src->handle, $wp_scripts->queue);
 			if ($already_enqueued !== false)
 				return null;
 		}
 		else if ($script->ext === "css")
 		{
 			global $wp_styles;
-			$already_enqueued = array_search($script->handle, $wp_styles->queue);
+			$already_enqueued = array_search($src->handle, $wp_styles->queue);
 			if ($already_enqueued !== false)
 				return null;
 		}
 
 		$depends_on = array();
-		if (isset($script->depends) && $script->depends !== '')
+		if (isset($src->depends) && $src->depends !== '')
-			$depends_on[] = $script->depends;
+			$depends_on[] = $src->depends;
 		if (isset($previous_basename) && $previous_basename !== '')
 			$depends_on[] = $previous_basename;
 
@@ -294,48 +318,83 @@ class PLGNTLS_class
 	 * 	- from js/ root for .js files
 	 * 	- from css/ root for .css files
 	 * @return object / null :
-	 * 	- null if file is not js or css
+	 * 	- null if file is not valid
 	 * 	- or an object with all the necessary infos :
-	 * 	  - ext      : name.js -> "js"
+	 * 	  0. src      : array("name.js", ...) -> "name.js"
-	 * 	  - basename : name.js -> "name"
+	 * 	                "name.js" -> "name.js"
-	 * 	  - handle   : name.js -> "name_js"
+	 * 	  1. ext      : name.js -> "js"
-	 * 	  - url     : url to file in wordpress
+	 * 	  2. basename : name.js -> "name"
-	 * 	  - path    : path to file in server
+	 * 	  3. handle   : name.js -> "name_js"
-	 * 	  - version : used to avoid browser caching
+	 * 	  4. url      : url to file in wordpress
-	 * 	  - depends : string if depends on a handle, or ''
+	 * 	  5. path     : path to file in server
+	 * 	  6. version  : used to avoid browser caching
+	 * 	  7. depends  : string if depends on a handle, or ''
+	 * 	  8. attr     : associative array of html attribute like 'type'=>'module'
 	 */
-	private function init_script($key, $script_name) {
+	private function init_src($key, $value) {
-		$script = (object)[];
+		if (empty($value))
+			return null;
+		$src = (object)[];
 
-		if(filter_var($script_name, FILTER_VALIDATE_URL))
+		// 0. src
-			$script->ext = "url";
+		// 8. attr
+		if (is_array($value)){
+			$src->src = array_shift($value);
+			$src->attr = $value;
+		}
 		else
-			$script->ext = pathinfo($script_name, PATHINFO_EXTENSION);
+		{
-		if (! in_array($script->ext, array("js", "css", "html", "url")))
+			$src->src = $value;
+			$src->attr = null;
+		}
+
+		// 1. ext
+		if(filter_var($src->src, FILTER_VALIDATE_URL))
+			$src->ext = "url";
+		else
+			$src->ext = pathinfo($src->src, PATHINFO_EXTENSION);
+		if (! in_array($src->ext, array("js", "css", "html", "url")))
 			return null;
 
-		if ($script->ext === "url")
+		// 2. basename
-			$script->basename = parse_url($script_name, PHP_URL_HOST);
+		// 3. handle
+		//                              basename             handle
+		// https://www.url.com/route -> www.url.com/route -> www_url_com_route
+		// path/to/script.js         -> script.js         -> script_js
+		if ($src->ext === "url")
+		{
+			$url = parse_url($src->src);
+			$src->basename = $url['host'] . $url['path'];
+		}
 		else
-			$script->basename = pathinfo($script_name, PATHINFO_BASENAME);
+			$src->basename = pathinfo($src->src, PATHINFO_BASENAME);
-		$script->handle = "PLGNTLS_" . str_replace(".", "_", $script->basename);
+		$src->handle = "PLGNTLS_" . str_replace(array('.', '/'), "_", $src->basename);
 
-		if ($script->ext === "url") {
+		// 4. url
-			$script->url = $script_name;
+		// 5. path
-			$script->path = null;
+		// 6. version
-			$script->version = null;
+		if ($src->ext === "url") {
+			$src->url = $src->src;
+			$src->path = null;
+			$src->version = null;
 		}
 		else {
-			$script->url = $this->get_url().$script_name;
+			$src->url = $this->get_url().$src->src;
-			$script->path = $this->get_path().$script_name;
+			$src->path = $this->get_path().$src->src;
-			$script->version = date("ymd-Gis", filemtime($script->path));
+			$src->version = date("ymd-Gis", filemtime($src->path));
 		}
 
-		$script->depends = '';
+		// 7. depends
+		$src->depends = '';
 		if (is_string($key))
-			$script->depends = $key;
+			$src->depends = $key;
 
-		return $script;
+		// also add to global variable to access in 'wp_script_attributes' filter
+		if ($src->attr !== null) {
+			$this->_scripts_attributes[$src->handle.'-js'] = $src->attr;
+		}
+
+		return $src;
 	}
 
 

plugins/fipfcard_plugin/utils/plgntls_fetch.js

@@ -1,5 +1,7 @@
 
-//function PLGNTLS_fetch(url, options = {}) {
+/**
+ * this file is there for scripts that uses modules import
+ */
 export function PLGNTLS_fetch(url, options = {}) {
 	console.log("inside PLGNTLS_fetch");
 	url = PLGNTLS_data.fetch_url + url;
@@ -11,3 +13,10 @@ export function PLGNTLS_fetch(url, options = {}) {
 	return fetch(url, options);
 }
 
+/**
+ * For non-module scripts, attach to the global scope
+ */
+if (typeof window !== 'undefined') {
+	window.PLGNTLS_fetch = PLGNTLS_fetch;
+}
+