docs: build JS with esbuild (#1686)

Also, backport a few tweaks in application.js from upstream

.eslintrc.json

@@ -5,7 +5,8 @@
     "node": true
   },
   "parserOptions": {
-    "ecmaVersion": 2019
+    "ecmaVersion": 2019,
+    "sourceType": "script"
   },
   "extends": "eslint:recommended",
   "rules": {
@@ -29,7 +30,7 @@
         "node": false
       },
       "parserOptions": {
-        "sourceType": "script"
+        "sourceType": "module"
       }
     }
   ]

config.yml

@@ -48,10 +48,6 @@ module:
       target:           assets/scss/bootstrap
     - source:           node_modules/bootstrap/dist/js/bootstrap.bundle.min.js
       target:           static/assets/js/vendor/bootstrap.bundle.min.js
-    - source:           node_modules/clipboard/dist/clipboard.min.js
-      target:           assets/js/vendor/clipboard.min.js
-    - source:           node_modules/fuse.js/dist/fuse.min.js
-      target:           assets/js/vendor/fuse.min.js
 
 params:
   description:          "Official open source SVG icon library for Bootstrap"

docs/assets/js/application.js

@@ -1,11 +1,14 @@
-/* global ClipboardJS:false */
+import ClipboardJS from 'clipboard'
 
 (function () {
-  'use strict'
+  const btnHtml = [
+  '<div class="bd-clipboard">',
+    '<button type="button" class="btn-clipboard" title="Copy to clipboard">',
+      '<i class="bi bi-clipboard" aria-hidden="true"></i>',
+    '</button>',
+  '</div>'].join('')
 
-  const btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard"><i class="bi bi-clipboard" aria-hidden="true"></i></button></div>'
-
-  Array.prototype.slice.call(document.querySelectorAll('div.highlight'))
+  document.querySelectorAll('div.highlight')
     .forEach(element => {
       element.insertAdjacentHTML('beforebegin', btnHtml)
     })
@@ -53,7 +56,7 @@
   }
 
   // Disable empty links in docs
-  Array.prototype.slice.call(document.querySelectorAll('[href="#"]'))
+  document.querySelectorAll('[href="#"]')
     .forEach(link => {
       link.addEventListener('click', event => {
         event.preventDefault()

docs/assets/js/color-modes.js

@@ -5,8 +5,6 @@
  */
 
 (() => {
-  'use strict'
-
   const storedTheme = localStorage.getItem('theme')
 
   const getPreferredTheme = () => {

docs/assets/js/search.js

@@ -1,8 +1,6 @@
-/* global Fuse:false */
+import Fuse from 'fuse.js'
 
 (function () {
-  'use strict'
-
   const iconsBody = document.querySelector('#icons-body')
 
   if (!iconsBody) return

docs/layouts/partials/scripts.html

@@ -1,21 +1,15 @@
 <script async src="/assets/js/vendor/bootstrap.bundle.min.js"></script>
 
-{{- if or .IsHome (eq .Page.Layout "sprite") -}}
-  {{- $fuseVendor := resources.Get "js/vendor/fuse.min.js" -}}
-  {{- $searchJs := resources.Get "js/search.js" -}}
-  {{- $searchBundle := slice $fuseVendor $searchJs | resources.Concat "assets/js/search.js" -}}
-
-  {{- if eq hugo.Environment "production" -}}
-    {{- $searchBundle = $searchBundle | resources.Minify -}}
-  {{- end }}
-  <script async src="{{ $searchBundle.Permalink | relURL }}"></script>
-{{- end }}
-
-{{- $clipboardVendor := resources.Get "js/vendor/clipboard.min.js" -}}
-{{- $applicationJs := resources.Get "js/application.js" -}}
-{{- $applicationBundle := slice $clipboardVendor $applicationJs | resources.Concat "assets/js/application.js" -}}
+{{- $esbuildOptions := dict "target" "es2019" -}}
 
 {{- if eq hugo.Environment "production" -}}
-  {{- $applicationBundle = $applicationBundle | resources.Minify -}}
+  {{- $esbuildOptions = merge $esbuildOptions (dict "minify" "true") -}}
+{{- end -}}
+
+{{- if or .IsHome (eq .Page.Layout "sprite") -}}
+  {{- $searchJs := resources.Get "js/search.js" | js.Build $esbuildOptions | resources.Copy "/assets/js/search.js" -}}
+  <script async src="{{ $searchJs.Permalink | relURL }}"></script>
 {{- end }}
-<script async src="{{ $applicationBundle.Permalink | relURL }}"></script>
+
+{{- $application := resources.Get "js/application.js" | js.Build $esbuildOptions | resources.Copy "/assets/js/application.js" -}}
+<script async src="{{ $application.Permalink | relURL }}"></script>