Merge pull request #397 from devgeniem/TMS-768

TMS-768: Duet Date Picker from CDN

Author: tim0haapala

CHANGELOG.MD

@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Fixed
 
+- TMS-768: Duet Date Picker from CDN to prevent build issues that sometimes break JS
+
+### Changed
+
 - Fix image clickable option #396
 - TMS-674: Fix modaal background focus & translations #395
 - TMS-769: Fix issue with countdown block text contrast in certain color schemes. #394

assets/scripts/date-picker.js

@@ -3,8 +3,6 @@
  * Date Picker controller.
  */
 
-import { defineCustomElements } from '@duetds/date-picker/dist/loader';
-
 /**
  * Export the class reference.
  */
@@ -66,5 +64,3 @@ export default class DatePicker {
         } );
     }
 }
-
-defineCustomElements( window );

assets/styles/main.scss

@@ -50,4 +50,3 @@ $tablet: 680px;
 # External resources
 --------------------------------------------------------------*/
 @import "~modaal/source/css/modaal";
-@import "~@duetds/date-picker/dist/duet/themes/default.css";

lib/Assets.php

@@ -63,6 +63,13 @@ public function hooks() : void {
             10,
             0
         );
+
+        add_filter(
+            'script_loader_tag',
+            \Closure::fromCallable( [ $this, 'add_script_attributes' ] ),
+            10,
+            2
+        );
     }
 
     /**
@@ -158,6 +165,43 @@ private function enqueue_assets() : void {
         ] );
 
         \wp_dequeue_style( 'wp-block-library' );
+
+        \wp_enqueue_script( // phpcs:ignore
+            'duet-date-picker-module',
+            'https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/duet.esm.js',
+            [ 'jquery' ],
+            null,
+            false
+        );
+
+        \wp_enqueue_script( // phpcs:ignore
+            'duet-date-picker-nomodule',
+            'https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.4.0/dist/duet/duet.js',
+            [ 'jquery' ],
+            null,
+            false
+        );
+    }
+
+    /**
+     * Add attributes to enqueued script tags
+     *
+     * @param string $tag Script tag.
+     * @param string $handle Script handle name.
+     * @return string The script tag.
+     */
+    private function add_script_attributes( $tag, $handle ) : string {
+
+        if ( $handle === 'duet-date-picker-module' ) {
+            $tag = str_replace( '<script ', ' <script type="module" ', $tag );
+            return $tag;
+        }
+
+        if ( $handle === 'duet-date-picker-nomodule' ) {
+            $tag = str_replace( '<script ', ' <script nomodule ', $tag );
+            return $tag;
+        }
+        return $tag;
     }
 
     /**