Search: Update from algoliasearch v3 to v4

* Use the new algoliasearch-lite mode available as of v4, which implements only the search() API and that's the only API we need. Overall this reduces the JS payload from ~70KB to ~11KB. * Avoid script errors on older browsers by limiting inline script execution with `type="module"`.
qunitjs · Jul 26, 2020 · be95630 · be95630
1 parent 1e55006
commit be95630
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/_includes/search.html b/_includes/search.html
@@ -11,9 +11,9 @@
 
 Remember to use the 'defer' attribute.
 {% endcomment %}
-<script defer src="https://cdn.jsdelivr.net/npm/algoliasearch@3.26.0/dist/algoliasearch.min.js" integrity="sha256-dgq8vEaJVxWMmcF/BEk9W6Wm+o2+LFlw1VSl2sx4JCI=" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/algoliasearch@4.3.1/dist/algoliasearch-lite.umd.js" integrity="sha256-YuyfhK9VEyfW6ejFiPbfOX2SELbFrgFU/8tU3MHuh60=" crossorigin="anonymous"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/autocomplete.min.js" integrity="sha256-YVWQosorZnr6fALvOW9VALYuInld27RkSPkElGBdCaU=" crossorigin="anonymous"></script>
-<script>
+<script type="module">
     window.addEventListener('DOMContentLoaded', function setupSearch() {
         const client = algoliasearch('{{ site.algolia.application_id }}', '{{ site.algolia.search_only_api_key }}');
         const indexMain = client.initIndex('{{ site.algolia.index_name }}');
@@ -37,9 +37,22 @@
                 return suggestion.url;
             }
         }
+        function newHitsSource(index, params) {
+            return function doSearch(query, cb) {
+                index
+                    .search(query, params)
+                    .then(function(res) {
+                        cb(res.hits, res);
+                    })
+                    .catch(function(err) {
+                        console.error(err);
+                        cb([]);
+                    });
+            };
+        }
         const autocompleteSources = [
             {
-                source: autocomplete.sources.hits(indexApi, { hitsPerPage: 5 }),
+                source: newHitsSource(indexApi, { hitsPerPage: 5 }),
                 displayKey: '',
                 templates: {
                     suggestion(suggestion) {
@@ -56,7 +69,7 @@
                 }
             },
             {
-                source: autocomplete.sources.hits(indexMain, { hitsPerPage: 5 }),
+                source: newHitsSource(indexMain, { hitsPerPage: 5 }),
                 displayKey: '',
                 templates: {
                     suggestion(suggestion) {

diff --git a/_layouts/wrapper.html b/_layouts/wrapper.html
@@ -54,7 +54,7 @@
                         <path d="M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5  C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5  C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342  c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332  s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225  S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z" />
                     </svg>
                 </button>
-                <script>
+                <script type="module">
                 const searchToggle = document.querySelector('.search-toggle');
                 const searchToggleOpens = document.querySelector(searchToggle.dataset.opens);
                 searchToggle.addEventListener('click', () => {
@@ -74,7 +74,7 @@
                         <path d="M5,80h90v16H5z" />
                     </svg>
                 </button>
-                <script>
+                <script type="module">
                 const navToggle = document.querySelector('.nav-toggle');
                 const navToggleOpens = document.querySelector(navToggle.dataset.opens);
                 navToggle.addEventListener('click', () => {
@@ -103,7 +103,7 @@
         </div>
     </footer>
 
-    <script>
+    <script type="module">
         window.addEventListener('DOMContentLoaded', function setupSubNav() {
             const itemWithSubNav = document.querySelector('.site-nav-item.has-sub-list');
             const closeSubNav = () => itemWithSubNav.classList.remove('is-open');