♻️ Refactor: process theme.js with ESBuild

https://gohugo.io/hugo-pipes/js/

assets/js/theme.js

@@ -1,61 +1,4 @@
-class Util {
-  forEach(elements, handler) {
-    elements = elements || [];
-    for (let i = 0; i < elements.length; i++) {
-      handler(elements[i]);
-    }
-  }
-
-  getScrollTop() {
-    return (document.documentElement ?? document.body).scrollTop;
-  }
-
-  isMobile() {
-    return window.matchMedia('only screen and (max-width: 680px)').matches;
-  }
-
-  isTocStatic() {
-    return window.matchMedia('only screen and (max-width: 960px)').matches;
-  }
-
-  /**
-   * add animate to element
-   * @param {Element} element animate element
-   * @param {String|Array<String>} animation animation name
-   * @param {Boolean} reserved reserved animation
-   * @param {Function} callback remove callback
-   */
-  animateCSS(element, animation, reserved, callback) {
-    !Array.isArray(animation) && (animation = [animation]);
-    element.classList.add('animate__animated', ...animation);
-    element.addEventListener('animationend', () => {
-      !reserved && element.classList.remove('animate__animated', ...animation);
-      typeof callback === 'function' && callback();
-    }, { once: true });
-  }
-
-  /**
-   * date validator
-   * @param {*} date may be date or not
-   * @returns {Boolean}
-   */
-  isValidDate(date) {
-    return date instanceof Date && !isNaN(date.getTime());
-  }
-  
-  /**
-   * scroll some element into view
-   * @param {String} selector element to scroll
-   */
-  scrollIntoView(selector) {
-    const element = selector.startsWith('#')
-      ? document.getElementById(selector.slice(1))
-      : document.querySelector(selector);
-    element?.scrollIntoView({
-      behavior: 'smooth'
-    });
-  }
-}
+import Util from './util';
 
 class FixIt {
   constructor() {

assets/js/util.js

@@ -0,0 +1,58 @@
+export default class Util {
+  forEach(elements, handler) {
+    elements = elements || [];
+    for (let i = 0; i < elements.length; i++) {
+      handler(elements[i]);
+    }
+  }
+
+  getScrollTop() {
+    return (document.documentElement ?? document.body).scrollTop;
+  }
+
+  isMobile() {
+    return window.matchMedia('only screen and (max-width: 680px)').matches;
+  }
+
+  isTocStatic() {
+    return window.matchMedia('only screen and (max-width: 960px)').matches;
+  }
+
+  /**
+   * add animate to element
+   * @param {Element} element animate element
+   * @param {String|Array<String>} animation animation name
+   * @param {Boolean} reserved reserved animation
+   * @param {Function} callback remove callback
+   */
+  animateCSS(element, animation, reserved, callback) {
+    !Array.isArray(animation) && (animation = [animation]);
+    element.classList.add('animate__animated', ...animation);
+    element.addEventListener('animationend', () => {
+      !reserved && element.classList.remove('animate__animated', ...animation);
+      typeof callback === 'function' && callback();
+    }, { once: true });
+  }
+
+  /**
+   * date validator
+   * @param {*} date may be date or not
+   * @returns {Boolean}
+   */
+  isValidDate(date) {
+    return date instanceof Date && !isNaN(date.getTime());
+  }
+  
+  /**
+   * scroll some element into view
+   * @param {String} selector element to scroll
+   */
+  scrollIntoView(selector) {
+    const element = selector.startsWith('#')
+      ? document.getElementById(selector.slice(1))
+      : document.querySelector(selector);
+    element?.scrollIntoView({
+      behavior: 'smooth'
+    });
+  }
+}

layouts/partials/assets.html

@@ -290,13 +290,18 @@
 {{- $config | jsonify | printf "window.config=%s;" | dict "Content" | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
 
 {{- /* Theme script */ -}}
-{{- /* TODO migrate to js.build in hugo future version */ -}}
-{{- dict "Source" "js/theme.min.js" "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
-{{- $_ := (resources.Get "js/theme.min.js.map").RelPermalink -}}
+{{- $options := dict "targetPath" "js/theme.min.js" "minify" hugo.IsProduction -}}
+{{- if not hugo.IsProduction -}}
+  {{- $options = dict "sourceMap" "external" | merge $options -}}
+{{- end -}}
+{{- dict "Source" (resources.Get "js/theme.js") "Build" $options "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
 
 {{- /* Custom script */ -}}
 {{- with ((resources.Get "js/custom.js") | default (resources.Get "js/_custom.js")) -}}
-  {{- $options := dict "targetPath" "js/custom.min.js" "minify" true "sourceMap" "inline" -}}
+  {{- $options := dict "targetPath" "js/custom.min.js" "minify" hugo.IsProduction -}}
+  {{- if not hugo.IsProduction -}}
+    {{- $options = dict "sourceMap" "inline" | merge $options -}}
+  {{- end -}}
   {{- dict "Source" . "Build" $options "Fingerprint" $fingerprint "Defer" true | dict "Scratch" $.Scratch "Data" | partial "scratch/script.html" -}}
 {{- end -}}
 

layouts/partials/plugin/script.html

@@ -6,7 +6,8 @@
   {{- else -}}
     {{- $src := .Source -}}
     {{- $integrity := .Integrity -}}
-    {{- if (urls.Parse $src).Host | not -}}
+    {{- $attrs := "" -}}
+    {{- if $src | and (not (urls.Parse $src).Host) -}}
       {{- $resource := resources.Get $src -}}
       {{- with .Template -}}
         {{- $resource = $resource | resources.ExecuteAsTemplate . $.Context -}}
@@ -21,9 +22,10 @@
         {{- $resource = $resource | fingerprint . -}}
         {{- $integrity = $resource.Data.Integrity -}}
       {{- end -}}
-      {{- $src = $resource.RelPermalink -}}
+      {{- with $resource.RelPermalink -}}
+        {{- $attrs = printf `src="%v"` . | add $attrs -}}
+      {{- end -}}
     {{- end -}}
-    {{- $attrs := printf `src="%v"` $src -}}
     {{- if .Crossorigin -}}
       {{- $attrs = ` crossorigin="anonymous"` | add $attrs -}}
     {{- end -}}