Merge pull request #1 from live-codes/templates-search

Author: a0m0rajab

package-lock.json

@@ -292,7 +292,6 @@ export const getCommandMenuActions = ({
         'reason',
         'ocaml',
         'python',
-        'pyodide',
         'python-wasm',
         'r',
         'ruby',
@@ -302,7 +301,6 @@ export const getCommandMenuActions = ({
         'php',
         'php-wasm',
         'cpp',
-        'clang',
         'cpp-wasm',
         'java',
         'csharp-wasm',

src/livecodes/UI/command-menu-actions.ts

@@ -271,6 +271,6 @@ export const createImportUI = ({
     showScreen('open');
   });
 
-  modal.show(importContainer, { isAsync: true, autoFocus: false });
+  modal.show(importContainer, { isAsync: true, autoFocus: false, size: 'large-fixed' });
   getUrlImportInput(importContainer).focus();
 };

src/livecodes/UI/import.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/open.ts

@@ -490,6 +490,9 @@ export const getStarterTemplatesList = /* @__PURE__ */ (templatesContainer: HTML
 export const getUserTemplatesScreen = /* @__PURE__ */ (templatesContainer: HTMLElement) =>
   templatesContainer.querySelector('#templates-user .modal-screen') as HTMLElement;
 
+export const getTemplatesSearchInput = /* @__PURE__ */ (templatesContainer: HTMLElement) =>
+  templatesContainer.querySelector('#templates-search-input') as HTMLInputElement;
+
 export const getBulkImportButton = /* @__PURE__ */ (listContainer: HTMLElement) =>
   listContainer.querySelector('#bulk-import-button') as HTMLElement;
 

src/livecodes/UI/selectors.ts

@@ -1,11 +1,12 @@
 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';
 
-export const createTemplatesContainer = (
-  eventsManager: EventsManager,
-  loadUserTemplates: () => void,
-) => {
+let searchIndex: Promise<any> | undefined;
+
+export const createTemplatesContainer = (eventsManager: EventsManager) => {
   const div = document.createElement('div');
   div.innerHTML = templatesScreen;
   const templatesContainer = div.firstChild as HTMLElement;
@@ -23,21 +24,19 @@ export const createTemplatesContainer = (
       });
       const target = templatesContainer.querySelector('#' + link.dataset.target);
       target?.classList.add('active');
-      if (link.dataset.target === 'templates-user') {
-        loadUserTemplates();
-      }
     });
   });
   setupTemplatesSearch(templatesContainer);
   return templatesContainer;
 };
 
 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 = `
@@ -54,36 +53,78 @@ export const noUserTemplates = () => `
   <div class="description alert">${window.deps.translateString('templates.noUserTemplates.heading', 'You have no saved templates.')}</div>
   <div class="description help">
     ${window.deps.translateString(
-  'templates.noUserTemplates.desc',
-  'You can save a project as a template from <wbr />(App&nbsp;menu&nbsp;&gt;&nbsp;Save&nbsp;as&nbsp;&gt; Template).',
-  {
-    isHTML: true,
-  },
-)}
+      'templates.noUserTemplates.desc',
+      'You can save a project as a template from <wbr />(App&nbsp;menu&nbsp;&gt;&nbsp;Save&nbsp;as&nbsp;&gt; Template).',
+      {
+        isHTML: true,
+      },
+    )}
   </div>
 </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 = container.querySelector('#templates-search-input');
+  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/UI/templates.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';
@@ -3147,10 +3149,10 @@ const handleLogout = () => {
 };
 
 const handleNew = () => {
-  const templatesContainer = createTemplatesContainer(eventsManager, () => loadUserTemplates());
-  const userTemplatesScreen = UI.getUserTemplatesScreen(templatesContainer);
+  const templatesContainer = createTemplatesContainer(eventsManager);
 
   const loadUserTemplates = async () => {
+    const userTemplatesScreen = UI.getUserTemplatesScreen(templatesContainer);
     const defaultTemplate = getAppData()?.defaultTemplate;
     const userTemplates = ((await stores.templates?.getList()) || []).sort((a, b) =>
       a.id === defaultTemplate ? -1 : b.id === defaultTemplate ? 1 : 0,
@@ -3174,6 +3176,7 @@ const handleNew = () => {
         getLanguageByAlias,
         true,
       );
+      addTemplateToIndex(item);
 
       if (defaultTemplate === item.id) {
         link.parentElement?.classList.add('selected');
@@ -3255,41 +3258,50 @@ const handleNew = () => {
     });
   };
 
-  let starterTemplatesCache: Template[];
   const createTemplatesUI = async () => {
+    initTemplatesSearchIndex();
     const starterTemplatesList = UI.getStarterTemplatesList(templatesContainer);
+    if (!starterTemplatesList) return;
+    starterTemplatesList.innerHTML = '';
+    const searchInput = UI.getTemplatesSearchInput(templatesContainer);
+    if (searchInput) {
+      searchInput.value = '';
+    }
     const loadingText = starterTemplatesList?.firstElementChild;
-    if (!starterTemplatesCache) {
-      getTemplates()
-        .then((starterTemplates) => {
-          starterTemplatesCache = starterTemplates;
-          loadingText?.remove();
-          starterTemplates.forEach((template) => {
-            const link = createStarterTemplateLink(template, starterTemplatesList, baseUrl);
-            eventsManager.addEventListener(
-              link,
-              'click',
-              (event) => {
-                event.preventDefault();
-                loadStarterTemplate(template.name, /* checkSaved= */ false);
-              },
-              false,
-            );
-          });
-        })
-        .catch(() => {
-          loadingText?.remove();
-          notifications.error(
-            window.deps.translateString(
-              'core.error.failedToLoadTemplates',
-              'Failed loading starter templates',
-            ),
+    getTemplates()
+      .then((starterTemplates) => {
+        loadingText?.remove();
+        starterTemplates.forEach((template, id) => {
+          const link = createStarterTemplateLink(
+            { id: String(id), ...template },
+            starterTemplatesList,
+            baseUrl,
+          );
+          addTemplateToIndex({ id: String(id), ...template });
+          eventsManager.addEventListener(
+            link,
+            'click',
+            (event) => {
+              event.preventDefault();
+              loadStarterTemplate(template.name, /* checkSaved= */ false);
+            },
+            false,
           );
         });
-    }
+      })
+      .catch(() => {
+        loadingText?.remove();
+        notifications.error(
+          window.deps.translateString(
+            'core.error.failedToLoadTemplates',
+            'Failed loading starter templates',
+          ),
+        );
+      });
 
-    setTimeout(() => UI.getStarterTemplatesTab(templatesContainer)?.click());
-    modal.show(templatesContainer, { isAsync: true });
+    loadUserTemplates();
+    requestAnimationFrame(() => UI.getStarterTemplatesTab(templatesContainer)?.click());
+    modal.show(templatesContainer, { isAsync: true, size: 'large-fixed' });
   };
 
   eventsManager.addEventListener(

src/livecodes/core.ts

@@ -12,13 +12,15 @@
       </li>
     </ul>
     <div class="templates-search-container">
-      <label for="templates-search-input" class="visually-hidden" data-i18n="templates.search.label"
+      <label for="templates-search-input" data-i18n="templates.search.label"
         >Search templates</label
       >
       <input
         id="templates-search-input"
         type="search"
         placeholder="Search templates..."
+        data-i18n="templates.search.placeholder"
+        data-i18n-prop="placeholder"
         aria-label="Search templates by language"
       />
     </div>

src/livecodes/html/templates.html

@@ -2552,6 +2552,10 @@
     "notes": "",
     "translation": "Search templates"
   },
+  "templates.search.placeholder": {
+    "notes": "",
+    "translation": "Search templates..."
+  },
   "templates.starter.angular": {
     "notes": "",
     "translation": "Angular Starter"
@@ -2608,6 +2612,14 @@
     "notes": "",
     "translation": "C++ (Wasm) Starter"
   },
+  "templates.starter.csharp-wasm": {
+    "notes": "",
+    "translation": "C# (Wasm) Starter"
+  },
+  "templates.starter.d3": {
+    "notes": "",
+    "translation": "D3 Starter"
+  },
   "templates.starter.daisyui": {
     "notes": "",
     "translation": "daisyUI Starter"
@@ -2712,6 +2724,10 @@
     "notes": "",
     "translation": "Perl Starter"
   },
+  "templates.starter.phaser": {
+    "notes": "",
+    "translation": "Phaser Starter"
+  },
   "templates.starter.php": {
     "notes": "",
     "translation": "PHP Starter"
@@ -2736,6 +2752,10 @@
     "notes": "",
     "translation": "Python Starter"
   },
+  "templates.starter.python-wasm": {
+    "notes": "",
+    "translation": "Python (Wasm) Starter"
+  },
   "templates.starter.r": {
     "notes": "",
     "translation": "R Starter"

src/livecodes/i18n/locales/en/translation.lokalise.json

@@ -984,6 +984,7 @@ const translation = {
     },
     search: {
       label: 'Search templates',
+      placeholder: 'Search templates...',
     },
     starter: {
       angular: 'Angular Starter',
@@ -1000,6 +1001,8 @@ const translation = {
       commonlisp: 'Common Lisp Starter',
       cpp: 'C++ Starter',
       'cpp-wasm': 'C++ (Wasm) Starter',
+      'csharp-wasm': 'C# (Wasm) Starter',
+      d3: 'D3 Starter',
       daisyui: 'daisyUI Starter',
       diagrams: 'Diagrams Starter',
       fennel: 'Fennel Starter',
@@ -1026,12 +1029,14 @@ const translation = {
       minizinc: 'MiniZinc Starter',
       ocaml: 'Ocaml Starter',
       perl: 'Perl Starter',
+      phaser: 'Phaser Starter',
       php: 'PHP Starter',
       'php-wasm': 'PHP (Wasm) Starter',
       postgresql: 'PostgreSQL Starter',
       preact: 'Preact Starter',
       prolog: 'Prolog Starter',
       python: 'Python Starter',
+      'python-wasm': 'Python (Wasm) Starter',
       r: 'R Starter',
       react: 'React Starter',
       'react-native': 'React Native Starter',