perf: lean bootstrap javascript (#1734)

_javascript/modules/components/category-collapse.js

@@ -1,6 +1,9 @@
 /**
  * Tab 'Categories' expand/close effect.
  */
+
+import 'bootstrap/js/src/collapse.js';
+
 const childPrefix = 'l_';
 const parentPrefix = 'h_';
 const children = document.getElementsByClassName('collapse');

_javascript/modules/components/clipboard.js

@@ -2,10 +2,11 @@
  * Clipboard functions
  *
  * Dependencies:
- *   - popper.js (https://github.com/popperjs/popper-core)
- *   - clipboard.js (https://github.com/zenorocha/clipboard.js)
+ *    clipboard.js (https://github.com/zenorocha/clipboard.js)
  */
 
+import Tooltip from 'bootstrap/js/src/tooltip';
+
 const clipboardSelector = '.code-header>button';
 
 const ICON_DEFAULT = 'far fa-clipboard';
@@ -38,11 +39,11 @@ function unlock(node) {
 function showTooltip(btn) {
   const succeedTitle = btn.getAttribute(ATTR_TITLE_SUCCEED);
   btn.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
-  bootstrap.Tooltip.getInstance(btn).show();
+  Tooltip.getInstance(btn).show();
 }
 
 function hideTooltip(btn) {
-  bootstrap.Tooltip.getInstance(btn).hide();
+  Tooltip.getInstance(btn).hide();
   btn.removeAttribute(ATTR_TITLE_ORIGIN);
 }
 
@@ -56,7 +57,7 @@ function resumeIcon(btn) {
   icon.setAttribute('class', ICON_DEFAULT);
 }
 
-export function initClipboard() {
+function setCodeClipboard() {
   const clipboardList = document.querySelectorAll(clipboardSelector);
 
   if (clipboardList.length === 0) {
@@ -73,7 +74,7 @@ export function initClipboard() {
 
   [...clipboardList].map(
     (elem) =>
-      new bootstrap.Tooltip(elem, {
+      new Tooltip(elem, {
         placement: 'left'
       })
   );
@@ -97,11 +98,15 @@ export function initClipboard() {
       unlock(trigger);
     }, TIMEOUT);
   });
+}
 
-  /* --- Post link sharing --- */
-
+function setLinkClipboard() {
   const btnCopyLink = document.getElementById('copy-link');
 
+  if (btnCopyLink === null) {
+    return;
+  }
+
   btnCopyLink.addEventListener('click', (e) => {
     const target = e.target;
 
@@ -116,7 +121,7 @@ export function initClipboard() {
 
       // Switch tooltip title
       target.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
-      bootstrap.Tooltip.getInstance(target).show();
+      Tooltip.getInstance(target).show();
 
       lock(target);
 
@@ -128,6 +133,11 @@ export function initClipboard() {
   });
 
   btnCopyLink.addEventListener('mouseleave', (e) => {
-    bootstrap.Tooltip.getInstance(e.target).hide();
+    Tooltip.getInstance(e.target).hide();
   });
 }
+
+export function initClipboard() {
+  setCodeClipboard();
+  setLinkClipboard();
+}

_javascript/modules/components/tooltip-loader.js

@@ -1,12 +1,11 @@
-/**
- * Initial Bootstrap Tooltip.
- */
+import Tooltip from 'bootstrap/js/src/tooltip';
+
 export function loadTooptip() {
   const tooltipTriggerList = document.querySelectorAll(
     '[data-bs-toggle="tooltip"]'
   );
 
   [...tooltipTriggerList].map(
-    (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
+    (tooltipTriggerEl) => new Tooltip(tooltipTriggerEl)
   );
 }

_javascript/pwa/_frontmatter

@@ -0,0 +1,3 @@
+---
+permalink: /:basename
+---

_javascript/pwa/app.js

@@ -0,0 +1,51 @@
+import { pwa, baseurl } from '../../_config.yml';
+import Toast from 'bootstrap/js/src/toast';
+
+if ('serviceWorker' in navigator) {
+  if (pwa.enabled) {
+    const swUrl = `${baseurl}/sw.min.js`;
+    const notification = document.getElementById('notification');
+    const btnRefresh = notification.querySelector('.toast-body>button');
+    const popupWindow = Toast.getOrCreateInstance(notification);
+
+    navigator.serviceWorker.register(swUrl).then((registration) => {
+      // In case the user ignores the notification
+      if (registration.waiting) {
+        popupWindow.show();
+      }
+
+      registration.addEventListener('updatefound', () => {
+        registration.installing.addEventListener('statechange', () => {
+          if (registration.waiting) {
+            if (navigator.serviceWorker.controller) {
+              popupWindow.show();
+            }
+          }
+        });
+      });
+
+      btnRefresh.addEventListener('click', () => {
+        if (registration.waiting) {
+          registration.waiting.postMessage('SKIP_WAITING');
+        }
+        popupWindow.hide();
+      });
+    });
+
+    let refreshing = false;
+
+    // Detect controller change and refresh all the opened tabs
+    navigator.serviceWorker.addEventListener('controllerchange', () => {
+      if (!refreshing) {
+        window.location.reload();
+        refreshing = true;
+      }
+    });
+  } else {
+    navigator.serviceWorker.getRegistrations().then(function (registrations) {
+      for (let registration of registrations) {
+        registration.unregister();
+      }
+    });
+  }
+}

_javascript/pwa/sw.js

@@ -0,0 +1,82 @@
+import { baseurl } from '../../_config.yml';
+
+importScripts(`${baseurl}/assets/js/data/swconf.js`);
+
+const purge = swconf.purge;
+
+function verifyUrl(url) {
+  const requestPath = new URL(url).pathname;
+
+  for (const path of swconf.denyPaths) {
+    if (requestPath.startsWith(path)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+self.addEventListener('install', (event) => {
+  if (purge) {
+    return;
+  }
+
+  event.waitUntil(
+    caches.open(swconf.cacheName).then((cache) => {
+      return cache.addAll(swconf.resources);
+    })
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keyList) => {
+      return Promise.all(
+        keyList.map((key) => {
+          if (purge) {
+            return caches.delete(key);
+          } else {
+            if (key !== swconf.cacheName) {
+              return caches.delete(key);
+            }
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('message', (event) => {
+  if (event.data === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.headers.has('range')) {
+    return;
+  }
+
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      if (response) {
+        return response;
+      }
+
+      return fetch(event.request).then((response) => {
+        const url = event.request.url;
+
+        if (purge || event.request.method !== 'GET' || !verifyUrl(url)) {
+          return response;
+        }
+
+        // See: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>
+        let responseToCache = response.clone();
+
+        caches.open(swconf.cacheName).then((cache) => {
+          cache.put(event.request, responseToCache);
+        });
+        return response;
+      });
+    })
+  );
+});