use flexsearch for templates

Author: hatemhosny

src/livecodes/UI/open.ts

@@ -23,6 +23,7 @@ export const createOpenItem = (
   isTemplate = false,
 ) => {
   const li = document.createElement('li');
+  li.dataset.id = item.id;
   list.appendChild(li);
 
   const link = document.createElement('a');

src/livecodes/UI/templates.ts

@@ -1,8 +1,11 @@
 import { templatesScreen } from '../html';
 import type { EventsManager, Template } from '../models';
-import { debounce } from '../utils/utils';
+import { debounce, loadScript } from '../utils/utils';
+import { flexSearchUrl } from '../vendors';
 import { getTemplatesSearchInput } from './selectors';
 
+let searchIndex: Promise<any> | undefined;
+
 export const createTemplatesContainer = (eventsManager: EventsManager) => {
   const div = document.createElement('div');
   div.innerHTML = templatesScreen;
@@ -28,11 +31,12 @@ export const createTemplatesContainer = (eventsManager: EventsManager) => {
 };
 
 export const createStarterTemplateLink = (
-  template: Template,
+  template: Template & { id: string },
   starterTemplatesList: HTMLElement | null,
   baseUrl: string,
 ) => {
   const li = document.createElement('li');
+  li.dataset.id = template.id;
   const link = document.createElement('a');
   link.href = '?template=' + template.name;
   link.innerHTML = `
@@ -59,26 +63,68 @@ export const noUserTemplates = () => `
 </div>
 `;
 
+export const initTemplatesSearchIndex = () => {
+  searchIndex = loadScript(flexSearchUrl, 'FlexSearch').then(
+    async (FlexSearch: any) =>
+      new FlexSearch.Document({
+        index: ['name', 'title', 'description', 'aliases', 'tags', 'languages'],
+        tokenize: 'full',
+        worker: true,
+      }),
+  );
+};
+
+export const addTemplateToIndex = ({
+  id,
+  title,
+  name = '',
+  description = '',
+  aliases = [],
+  tags = [],
+  languages = [],
+}: {
+  id: string;
+  title: string;
+  name?: string;
+  description?: string;
+  aliases?: string[];
+  tags?: string[];
+  languages?: string[];
+}) => {
+  searchIndex?.then((index) => {
+    index.add({ id, name, title, description, aliases, tags, languages });
+  });
+};
+
 export const setupTemplatesSearch = (container: HTMLElement) => {
   const input = getTemplatesSearchInput(container);
   if (!input) return;
 
   const filterTemplates = (query: string) => {
-    const mainItems = container.querySelectorAll('#templates-starter li');
-    const userItems = container.querySelectorAll('#templates-user li');
-    const items = Array.from(mainItems).concat(Array.from(userItems));
-    items.forEach((item) => {
-      const text = item.textContent?.toLowerCase() || '';
-      const matches = text.includes(query.toLowerCase());
-      (item as HTMLElement).style.display = matches ? '' : 'none';
+    searchIndex?.then(async (index) => {
+      const mainItems = container.querySelectorAll(
+        '#templates-starter li',
+      ) as NodeListOf<HTMLElement>;
+      const userItems = container.querySelectorAll('#templates-user li') as NodeListOf<HTMLElement>;
+      const items = Array.from(mainItems).concat(Array.from(userItems));
+
+      const result =
+        query === ''
+          ? null
+          : (await index.searchAsync(query)).map((field: any) => field.result).flat();
+
+      items.forEach((item) => {
+        (item as HTMLElement).style.display =
+          query === '' || result.includes(item.dataset.id as string) ? '' : 'none';
+      });
     });
   };
 
   const debouncedFilter = debounce((val: string) => {
     filterTemplates(val.trim());
   }, 150);
 
-  input.addEventListener('input', (e: Event) => {
+  input.addEventListener('keyup', (e: Event) => {
     const val = (e.target as HTMLInputElement).value || '';
     debouncedFilter(val);
   });

src/livecodes/core.ts

@@ -1,5 +1,6 @@
 import { getPlaygroundUrl } from '../sdk';
 import {
+  addTemplateToIndex,
   createLoginContainer,
   createOpenItem,
   createProjectInfoUI,
@@ -10,6 +11,7 @@ import {
   displayLoggedOut,
   getFullscreenButton,
   getResultElement,
+  initTemplatesSearchIndex,
   loadingMessage,
   noUserTemplates,
 } from './UI';
@@ -3174,6 +3176,7 @@ const handleNew = () => {
         getLanguageByAlias,
         true,
       );
+      addTemplateToIndex(item);
 
       if (defaultTemplate === item.id) {
         link.parentElement?.classList.add('selected');
@@ -3256,6 +3259,7 @@ const handleNew = () => {
   };
 
   const createTemplatesUI = async () => {
+    initTemplatesSearchIndex();
     const starterTemplatesList = UI.getStarterTemplatesList(templatesContainer);
     if (!starterTemplatesList) return;
     starterTemplatesList.innerHTML = '';
@@ -3267,8 +3271,13 @@ const handleNew = () => {
     getTemplates()
       .then((starterTemplates) => {
         loadingText?.remove();
-        starterTemplates.forEach((template) => {
-          const link = createStarterTemplateLink(template, starterTemplatesList, baseUrl);
+        starterTemplates.forEach((template, id) => {
+          const link = createStarterTemplateLink(
+            { id: String(id), ...template },
+            starterTemplatesList,
+            baseUrl,
+          );
+          addTemplateToIndex({ id: String(id), ...template });
           eventsManager.addEventListener(
             link,
             'click',