From a6613794f8abcd1d43affaeef35860caa7d6e61c Mon Sep 17 00:00:00 2001
From: Tim MacDonald <hello@timacdonald.me>
Date: Wed, 10 Jul 2024 15:53:16 +1000
Subject: [PATCH] Only load JS when needed

---
 resources/js/app.js                       | 18 ++++-----
 resources/js/components/accessibility.js  | 25 -------------
 resources/js/components/search.js         | 11 ------
 resources/js/components/theme.js          | 14 -------
 resources/js/docs.js                      | 45 ++++++++++++++++++-----
 resources/views/partials/layout.blade.php |  6 ++-
 vite.config.js                            |  2 +-
 7 files changed, 51 insertions(+), 70 deletions(-)
 delete mode 100644 resources/js/components/accessibility.js
 delete mode 100644 resources/js/components/search.js
 delete mode 100644 resources/js/components/theme.js

diff --git a/resources/js/app.js b/resources/js/app.js
index b31a6b20..b0c8244f 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,8 +1,6 @@
 import Alpine from 'alpinejs';
 import Focus from '@alpinejs/focus';
-
-import './clipboard';
-import './components/search';
+import docsearch from '@docsearch/js';
 
 import.meta.glob([
   '../images/**',
@@ -13,10 +11,12 @@ window.Alpine = Alpine;
 Alpine.plugin(Focus);
 Alpine.start();
 
-document.addEventListener('DOMContentLoaded', () => {
-    if (document.querySelector('#docsScreen')) {
-        import('./docs.js');
-    }
-
-    import('./components/accessibility');
+docsearch({
+    container: '#docsearch',
+    appId: algolia_app_id,
+    apiKey: algolia_search_key,
+    indexName: 'laravel',
+    searchParameters: {
+        facetFilters: ['version:' + window.version],
+    },
 });
diff --git a/resources/js/components/accessibility.js b/resources/js/components/accessibility.js
deleted file mode 100644
index 40934aae..00000000
--- a/resources/js/components/accessibility.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const skipToContentLink = document.querySelector('#skip-to-content-link');
-const mainContentWrapper = document.querySelector('#main-content');
-
-if (skipToContentLink && mainContentWrapper) {
-    skipToContentLink.addEventListener('click', setFocusOnContentWrapper);
-    mainContentWrapper.addEventListener('blur', removeContentWrapperTabIndex);
-}
-
-if (skipToContentLink && !mainContentWrapper) {
-    removeSkipToContentLink();
-}
-
-function setFocusOnContentWrapper(e) {
-    e.preventDefault();
-    mainContentWrapper.setAttribute('tabindex', -1);
-    mainContentWrapper.focus();
-}
-
-function removeContentWrapperTabIndex() {
-    mainContentWrapper.removeAttribute('tabindex');
-}
-
-function removeSkipToContentLink() {
-    skipToContentLink.parentNode.removeChild(skipToContentLink);
-}
diff --git a/resources/js/components/search.js b/resources/js/components/search.js
deleted file mode 100644
index 935abbe2..00000000
--- a/resources/js/components/search.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import docsearch from '@docsearch/js';
-
-docsearch({
-    container: '#docsearch',
-    appId: algolia_app_id,
-    apiKey: algolia_search_key,
-    indexName: 'laravel',
-    searchParameters: {
-        facetFilters: ['version:' + window.version],
-    },
-});
diff --git a/resources/js/components/theme.js b/resources/js/components/theme.js
deleted file mode 100644
index 6ca4a1a9..00000000
--- a/resources/js/components/theme.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export const toDarkMode = () => {
-    localStorage.theme = 'dark';
-    window.updateTheme();
-}
-
-export const toLightMode = () => {
-    localStorage.theme = 'light';
-    window.updateTheme();
-}
-
-export const toSystemMode = () => {
-    localStorage.theme = 'system';
-    window.updateTheme();
-}
diff --git a/resources/js/docs.js b/resources/js/docs.js
index 75481f35..fa490f15 100644
--- a/resources/js/docs.js
+++ b/resources/js/docs.js
@@ -1,7 +1,39 @@
-wrapHeadingsInAnchors();
-setupNavCurrentLinkHandling();
-replaceBlockquotesWithCalloutsInDocs();
-highlightSupportPolicyTable();
+import './clipboard';
+
+window.toDarkMode = () => {
+    localStorage.theme = 'dark';
+    window.updateTheme();
+}
+
+window.toLightMode = () => {
+    localStorage.theme = 'light';
+    window.updateTheme();
+}
+
+window.toSystemMode = () => {
+    localStorage.theme = 'system';
+    window.updateTheme();
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    wrapHeadingsInAnchors();
+    setupNavCurrentLinkHandling();
+    replaceBlockquotesWithCalloutsInDocs();
+    highlightSupportPolicyTable();
+
+    const skipToContentLink = document.querySelector('#skip-to-content-link');
+    const mainContentWrapper = document.querySelector('#main-content');
+
+    skipToContentLink.addEventListener('click', (e) => {
+        e.preventDefault();
+        mainContentWrapper.setAttribute('tabindex', -1);
+        mainContentWrapper.focus();
+    });
+
+    mainContentWrapper.addEventListener('blur', () => {
+        mainContentWrapper.removeAttribute('tabindex');
+    });
+})
 
 function wrapHeadingsInAnchors() {
     [...document.querySelector('.docs_main').querySelectorAll('a[name]')].forEach(anchor => {
@@ -164,8 +196,3 @@ function highlightSupportPolicyTable() {
 function getCellDate(cell) {
     return Date.parse(cell.innerHTML.replace(/(\d+)(st|nd|rd|th)/, '$1'));
 }
-
-import { toDarkMode, toLightMode, toSystemMode } from './components/theme';
-window.toDarkMode = toDarkMode;
-window.toLightMode = toLightMode;
-window.toSystemMode = toSystemMode;
diff --git a/resources/views/partials/layout.blade.php b/resources/views/partials/layout.blade.php
index 1cb298d7..9bc24400 100644
--- a/resources/views/partials/layout.blade.php
+++ b/resources/views/partials/layout.blade.php
@@ -49,7 +49,11 @@
     <link rel="preconnect" href="https://{{ config('algolia.connections.main.id') }}-dsn.algolia.net" crossorigin />
 
     <link rel="stylesheet" href="https://use.typekit.net/ins2wgm.css">
-    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    @vite([
+        'resources/css/app.css',
+        'resources/js/app.js',
+        ...request()->is('docs/*') ? ['resources/js/docs.js'] : [],
+    ])
 
     @production
         <!-- Fathom - beautiful, simple website analytics -->
diff --git a/vite.config.js b/vite.config.js
index 421b5695..e5109ea1 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,7 +4,7 @@ import laravel from 'laravel-vite-plugin';
 export default defineConfig({
     plugins: [
         laravel({
-            input: ['resources/css/app.css', 'resources/js/app.js'],
+            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/js/docs.js'],
             refresh: true,
         }),
     ],