Refactored icon search integration

material/assets/manifest.json

@@ -9,8 +9,8 @@
   "assets/stylesheets/main.css.map": "assets/stylesheets/main.45122f27.min.css.map",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.e03a20ad.min.css",
   "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.e03a20ad.min.css.map",
-  "overrides/assets/javascripts/bundle.js": "overrides/assets/javascripts/bundle.f4aeaef7.min.js",
+  "overrides/assets/javascripts/bundle.js": "overrides/assets/javascripts/bundle.0f7341a3.min.js",
-  "overrides/assets/javascripts/bundle.js.map": "overrides/assets/javascripts/bundle.f4aeaef7.min.js.map",
+  "overrides/assets/javascripts/bundle.js.map": "overrides/assets/javascripts/bundle.0f7341a3.min.js.map",
   "overrides/assets/stylesheets/main.css": "overrides/assets/stylesheets/main.c2cc92d1.min.css",
   "overrides/assets/stylesheets/main.css.map": "overrides/assets/stylesheets/main.c2cc92d1.min.css.map"
 }

material/overrides/main.html

@@ -53,5 +53,5 @@
 {% endblock %}
 {% block scripts %}
   {{ super() }}
-  <script src="{{ 'overrides/assets/javascripts/bundle.f4aeaef7.min.js' | url }}"></script>
+  <script src="{{ 'overrides/assets/javascripts/bundle.0f7341a3.min.js' | url }}"></script>
 {% endblock %}

src/overrides/assets/javascripts/components/icon-search/_/index.ts

@@ -40,19 +40,9 @@ import {
  * ------------------------------------------------------------------------- */
 
 /**
- * Icon
+ * Icon category
  */
-export interface Icon {
+export interface IconCategory {
-  shortcode: string                    /* Icon shortcode */
-  url: string                          /* Icon URL */
-}
-
-/* ------------------------------------------------------------------------- */
-
-/**
- * Icon search database
- */
-export interface IconSearchDatabase {
   base: string                         /* Category base URL */
   data: Record<string, string>         /* Category data */
 }
@@ -61,8 +51,8 @@ export interface IconSearchDatabase {
  * Icon search index
  */
 export interface IconSearchIndex {
-  icons: IconSearchDatabase            /* Icon database */
+  icons: IconCategory                  /* Icons */
-  emojis: IconSearchDatabase           /* Emoji database */
+  emojis: IconCategory                 /* Emojis */
 }
 
 /* ------------------------------------------------------------------------- */

src/overrides/assets/javascripts/components/icon-search/result/index.ts

@@ -53,9 +53,9 @@ import {
   watchElementThreshold
 } from "~/browser"
 
-import { renderIconSearchResult } from "../../../templates"
+import { Icon, renderIconSearchResult } from "../../../templates"
 import { Component } from "../../_"
-import { Icon, IconSearchIndex } from "../_"
+import { IconSearchIndex } from "../_"
 import { IconSearchQuery } from "../query"
 
 /* ----------------------------------------------------------------------------
@@ -73,6 +73,14 @@ export interface IconSearchResult {
  * Helper types
  * ------------------------------------------------------------------------- */
 
+/**
+ * Watch options
+ */
+interface WatchOptions {
+  index$: Observable<IconSearchIndex>  /* Search index observable */
+  query$: Observable<IconSearchQuery>  /* Search query observable */
+}
+
 /**
  * Mount options
  */
@@ -85,6 +93,49 @@ interface MountOptions {
  * Functions
  * ------------------------------------------------------------------------- */
 
+/**
+ * Watch icon search result
+ *
+ * @param _el - Icon search result element
+ * @param options - Options
+ *
+ * @returns Icon search result observable
+ */
+export function watchIconSearchResult(
+  _el: HTMLElement, { index$, query$ }: WatchOptions
+): Observable<IconSearchResult> {
+  return combineLatest([
+    query$.pipe(distinctUntilKeyChanged("value")),
+    index$
+      .pipe(
+        map(({ icons, emojis }) => [
+          ...Object.keys(icons.data),
+          ...Object.keys(emojis.data)
+        ])
+      )
+  ])
+    .pipe(
+      map(([{ value }, data]) => search(data, value)),
+      switchMap(shortcodes => index$.pipe(
+        map(({ icons, emojis }) => ({
+          data: shortcodes.map<Icon>(shortcode => {
+            const category =
+              shortcode in icons.data
+                ? icons
+                : emojis
+            return {
+              shortcode,
+              url: [
+                category.base,
+                category.data[shortcode]
+              ].join("")
+            }
+          })
+        }))
+      ))
+    )
+}
+
 /**
  * Mount icon search result
  *
@@ -138,36 +189,8 @@ export function mountIconSearchResult(
       })
 
   /* Create and return component */
-  return combineLatest([
+  return watchIconSearchResult(el, { query$, index$ })
-    query$.pipe(distinctUntilKeyChanged("value")),
-    index$
-      .pipe(
-        map(({ icons, emojis }) => [
-          ...Object.keys(icons.data),
-          ...Object.keys(emojis.data)
-        ])
-      )
-  ])
     .pipe(
-      withLatestFrom(index$),
-      map(([[{ value }, data], index]) => {
-        const results = search(data, value)
-        return {
-          data: results.map(name => {
-            if (name in index.icons.data) {
-              return {
-                shortcode: name,
-                url: `${index.icons.base}${index.icons.data[name]}`
-              }
-            } else {
-              return {
-                shortcode: name,
-                url: `${index.emojis.base}${index.emojis.data[name]}`
-              }
-            }
-          })
-        }
-      }),
       tap(internal$),
       finalize(() => internal$.complete()),
       map(state => ({ ref: el, ...state }))

src/overrides/assets/javascripts/templates/icon-search/index.tsx

@@ -25,7 +25,17 @@ import { wrap } from "fuzzaldrin-plus"
 import { translation } from "~/_"
 import { h } from "~/utilities"
 
-import { Icon } from "../../components"
+/* ----------------------------------------------------------------------------
+ * Types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Icon
+ */
+export interface Icon {
+  shortcode: string                    /* Icon shortcode */
+  url: string                          /* Icon URL */
+}
 
 /* ----------------------------------------------------------------------------
  * Helper functions
@@ -34,13 +44,13 @@ import { Icon } from "../../components"
 /**
  * Highlight an icon search result
  *
- * @param value - Icon search result
+ * @param icon - Icon
- * @param query - Icon search query
+ * @param query - Search query
  *
  * @returns Highlighted result
  */
-function highlight(value: string, query: string) {
+function highlight(icon: Icon, query: string) {
-  return wrap(value, query, {
+  return wrap(icon.shortcode, query, {
     wrap: {
       tagOpen: "<b>",
       tagClose: "</b>"
@@ -55,8 +65,8 @@ function highlight(value: string, query: string) {
 /**
  * Render an icon search result
  *
- * @param icon - Icon search result
+ * @param icon - Icon
- * @param query - Icon search query
+ * @param query - Search query
  *
  * @returns Element
  */
@@ -73,7 +83,7 @@ export function renderIconSearchResult(
         title={translation("clipboard.copy")}
         data-clipboard-text={`:${icon.shortcode}:`}
       >
-        <code>{`:${highlight(icon.shortcode, query)}:`}</code>
+        <code>{`:${highlight(icon, query)}:`}</code>
       </button>
     </li>
   )

webpack.config.ts

@@ -346,8 +346,11 @@ export default (_env: never, args: Configuration): Configuration[] => {
                 fs.writeFileSync(file, template, "utf8")
               }
 
+              /* Icon indexes */
+              const icons:  Record<string, string> = {}
+              const emojis: Record<string, string> = {}
+
               /* Build search index for bundled icons */
-              const icons: Record<string, string> = {}
               for (const file of await glob("**/*.svg", {
                 cwd: "material/.icons"
               })) {
@@ -356,7 +359,6 @@ export default (_env: never, args: Configuration): Configuration[] => {
               }
 
               /* Build search index for emojis (based on Twemoji) */
-              const emojis: Record<string, string> = {}
               const [database] = await glob("venv/**/twemoji_db.py")
               if (typeof database !== "undefined") {
                 const contents = fs.readFileSync(database, "utf8")