search-gold 0.9.1 → 1.0.1

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.
@@ -52,7 +52,7 @@ const initSearchConfig = () => {
     // objects.
     //
     // 'search-gold' package only reads this data.
-    // Results are returned in a separate array.
+    // Search results are returned in a separate array.
     items: MyData,
 
     // required: keys are the object properties you
@@ -62,7 +62,14 @@ 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.
   searchSetConfig(config)
@@ -71,12 +78,14 @@ const initSearchConfig = () => {
   // as many times as necessary without having to set the
   // config again.
   //
-  // Passing an empty string effectively returns the
-  // the unfiltered set of records, the same as MyData.
+  // Your template would be iterating over myFilteredData
+  // in this example.
   //
   // How you set up your component to display the filtered
   // data is up to you and how your component is structured.
-  // This is just an example.
+  //
+  // Passing an empty string effectively returns the
+  // the unfiltered set of records, the same as MyData.
   myFilteredData = <ItemRecord[]>searchHandler('')
 }
 ````
@@ -87,7 +96,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 +107,9 @@ 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 behavior is left up to the front end
+engineer / design team.
 ```javascript
 const searchMyData = (query: string) => {
   // Call the imported method and get results.
@@ -111,10 +120,11 @@ 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 several apps I had previously created with Vue using its Composition API.
 
 In this documentation I tried to keep the Usage code snippets framework neutral.
 
+`search-gold` itself is framework neutral and should work in any TS codebase.
 # Credits
 
 G. Gold

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "search-gold",
   "private": false,
-  "version": "0.9.1",
+  "version": "1.0.1",
   "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
 }