search-gold 0.9.1 → 1.0.0

package/README.md

@@ -40,7 +40,7 @@ import {
 
 This wrapper method only needs to be called in the following two cases:
 
-  * when component is initialized and when data is ready.
+  * when component is initialized and when data is ready
   * when data changes (record has been created, edited, deleted)
 
 You can name this wrapper method anything you want.
@@ -62,6 +62,13 @@ const initSearchConfig = () => {
 
     // optional: default is false
     caseSensitive: true,
+
+    // optional: default is true
+    //
+    // You should only ever consider disabling
+    // memoization if you observe browser memory
+    // limitations with cached search results.
+    enableMemoize: false
   },
 
   // Call the imported method with config arg.
@@ -87,7 +94,7 @@ This method (from Step 2.) should be called when your component has been
 initialized and your data is ready.
 
 Also, this `initSearchConfig()` method should be called whenever your
-data changes via a record create, edit, or delete.
+data changes after a record has been created, edited, or deleted.
 
 ```javascript
 // For this example we chose this method name; you
@@ -98,9 +105,7 @@ initSearchConfig()
 ### 4. Execute search queries and get results.
 
 Presumably, a method is binded to the UI's search field (in this example it's called
-`searchMyData`) and is called on every keystroke.
-
-(You can optionally add a debounce mechanism in your component if need be.)
+`searchMyData`) and is called on every keystroke, debounced keystrokes, or an explicit and separate submit event. Ultimately, the UX is left up to the front end developer.
 ```javascript
 const searchMyData = (query: string) => {
   // Call the imported method and get results.
@@ -111,7 +116,7 @@ const searchMyData = (query: string) => {
 ## Author's Development
 
 During development of the `search-gold` package, I integrated it
-into a couple of apps I had built with Vue using its Composition API.
+into a several  apps I had built with Vue using its Composition API.
 
 In this documentation I tried to keep the Usage code snippets framework neutral.
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "search-gold",
   "private": false,
-  "version": "0.9.1",
+  "version": "1.0.0",
   "description": "speedy search engine targeting an array of objects",
   "author": "gold",
   "main": "./src/search.ts",

package/src/search.ts

@@ -4,13 +4,14 @@ export interface ConfigParams {
   items: ItemRecord[]
   keys: string[]
   caseSensitive?: boolean
+  enableMemoize?: boolean
 }
 
 interface Config {
   Items: ItemRecord[]
   Keys: string[]
-  CaseSensitive: boolean
   RegexFlag: 'i' | undefined
+  EnableMemoize: boolean
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
@@ -21,18 +22,22 @@ const escapeRegExp = (str: string): string => {
   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }
 
+const cache = new Map()
+
 const Conf: Config = {
   Items: [],
   Keys: [],
-  CaseSensitive: false,
   RegexFlag: 'i',
+  EnableMemoize: true,
 }
 export const searchSetConfig = (params: ConfigParams): void => {
-  const { items, keys, caseSensitive = false } = params
+  const { items, keys, caseSensitive = false, enableMemoize = true } = params
   Conf.Items = items
   Conf.Keys = keys
-  Conf.CaseSensitive = caseSensitive
   Conf.RegexFlag = caseSensitive ? undefined : 'i'
+  Conf.EnableMemoize = enableMemoize
+
+  cache.clear()
 }
 
 // Since (if no debounce) every search input keystroke calls this
@@ -52,6 +57,10 @@ export const searchHandler = (query: string): ItemRecord[] => {
     return Conf.Items
   }
 
+  if (Conf.EnableMemoize && cache.has(qTrimmed)) {
+    return cache.get(qTrimmed)
+  }
+
   const rx = new RegExp(qTrimmed, Conf.RegexFlag)
 
   // All the dirty work is done here...
@@ -62,5 +71,9 @@ export const searchHandler = (query: string): ItemRecord[] => {
     }
   }
 
+  if (Conf.EnableMemoize && qTrimmed.length >= 3) {
+    cache.set(qTrimmed, results)
+  }
+
   return results
 }