From f0346e2bbdafc5554f3fa6f09c79f5c67825f988 Mon Sep 17 00:00:00 2001
From: Dan Tovbein <dtovbein@gmail.com>
Date: Fri, 26 Apr 2024 14:10:36 -0300
Subject: [PATCH] Playing around with defer and sync WP strategies

- This is a POC
---
 assets/src/js/async-element.js | 12 ++++++++
 assets/src/js/async-script.js  |  7 +++++
 assets/src/js/defer-element.js | 12 ++++++++
 assets/src/js/defer-script.js  |  7 +++++
 functions.php                  | 53 ++++++++++++++++++++++++++++++++++
 webpack.config.js              |  2 ++
 6 files changed, 93 insertions(+)
 create mode 100644 assets/src/js/async-element.js
 create mode 100644 assets/src/js/async-script.js
 create mode 100644 assets/src/js/defer-element.js
 create mode 100644 assets/src/js/defer-script.js

diff --git a/assets/src/js/async-element.js b/assets/src/js/async-element.js
new file mode 100644
index 0000000000..0da1e01a6a
--- /dev/null
+++ b/assets/src/js/async-element.js
@@ -0,0 +1,12 @@
+(() => {
+  /*eslint-disable no-console*/
+  console.log('async-elements loaded.');
+  const elements = ['async'];
+
+  for (const element of elements) {
+    const el = document.createElement('h3');
+    el.className = element;
+    el.innerHTML = `${element} element`;
+    document.querySelector('.page-header-title').insertAdjacentElement('afterend', el);
+  }
+})();
diff --git a/assets/src/js/async-script.js b/assets/src/js/async-script.js
new file mode 100644
index 0000000000..db51ee7f6a
--- /dev/null
+++ b/assets/src/js/async-script.js
@@ -0,0 +1,7 @@
+(() => {
+  /*eslint-disable no-console*/
+  console.log('async-script loaded.');
+  for (const element of [['async', 'green']]) {
+    document.querySelector(`.${element[0]}`).style.color = element[1];
+  }
+})();
diff --git a/assets/src/js/defer-element.js b/assets/src/js/defer-element.js
new file mode 100644
index 0000000000..c9eb74dec0
--- /dev/null
+++ b/assets/src/js/defer-element.js
@@ -0,0 +1,12 @@
+(() => {
+  /*eslint-disable no-console*/
+  console.log('defer-element loaded.');
+  const elements = ['defer'];
+
+  for (const element of elements) {
+    const el = document.createElement('h3');
+    el.className = element;
+    el.innerHTML = `${element} element`;
+    document.querySelector('.page-header-title').insertAdjacentElement('afterend', el);
+  }
+})();
diff --git a/assets/src/js/defer-script.js b/assets/src/js/defer-script.js
new file mode 100644
index 0000000000..37a34bb379
--- /dev/null
+++ b/assets/src/js/defer-script.js
@@ -0,0 +1,7 @@
+(() => {
+  /*eslint-disable no-console*/
+  console.log('defer-script loaded.');
+  for (const element of [['defer', 'purple']]) {
+    document.querySelector(`.${element[0]}`).style.color = element[1];
+  }
+})();
diff --git a/functions.php b/functions.php
index 869a93e819..ef04fa2159 100644
--- a/functions.php
+++ b/functions.php
@@ -489,3 +489,56 @@ function ($canonical_url, $post) {
         return $options;
     });
 }
+
+wp_register_script(
+    'async-script',
+    get_template_directory_uri() . '/assets/build/async_script.js',
+    array(),
+    '1.0.0',
+    array(
+        'in_footer' => false,
+        'strategy' => 'async'
+    )
+);
+
+
+wp_register_script(
+    'async-element',
+    get_template_directory_uri() . '/assets/build/async_element.js',
+    array(),
+    '1.0.0',
+    // true,
+    array(
+        'in_footer' => false,
+        'strategy' => 'async'
+    )
+);
+
+wp_register_script(
+    'defer-script',
+    get_template_directory_uri() . '/assets/build/defer_script.js',
+    array(),
+    '1.0.0',
+    array(
+        'in_footer' => false,
+        'strategy' => 'defer'
+    )
+);
+
+
+wp_register_script(
+    'defer-element',
+    get_template_directory_uri() . '/assets/build/defer_element.js',
+    array(),
+    '1.0.0',
+    // true,
+    array(
+        'in_footer' => false,
+        'strategy' => 'defer'
+    )
+);
+
+wp_enqueue_script('async-element');
+wp_enqueue_script('async-script');
+wp_enqueue_script('defer-element');
+wp_enqueue_script('defer-script');
diff --git a/webpack.config.js b/webpack.config.js
index b10ae38f9e..40657f06ec 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -19,6 +19,8 @@ const mediaQueryAliases = {
 module.exports = {
   ...defaultConfig,
   entry: {
+    defer_async_script: './assets/src/js/defer-async-script.js',
+    defer_async_elements: './assets/src/js/defer-async-elements.js',
     index: './assets/src/js/app.js',
     style: './assets/src/scss/style.scss',
     post: './assets/src/scss/post.scss',