Next fusejs version and angular 10

.gitignore

@@ -47,4 +47,5 @@ yarn-error.log
 *.d.ts
 
 *.js.map
-npm-debug.log
+npm-debug.log
+yarn.lock

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "workbench.colorCustomizations": {
+        "statusBar.background": "#BDB76B",
+        "statusBar.debuggingBackground": "#BDB76B",
+        "statusBar.noFolderBackground": "#BDB76B",
+        "statussBar.prominentBackground": "#BDB76B"
+    }
+}

README.md

@@ -5,12 +5,39 @@ Also easily **highlight** matched terms which is the true added value of this mo
 
 Demo: <https://maleblond.github.io/angular-fusejs/>
 
+## Forked by Miguel Monwoo for Angular 10 compatibilities
+Watting for Author updates, did fix missing type to fit angular-fusejs with last fusejs lib and fix some production issue, all seem ok with Angular 10.
+
+Production build inspired from :
+https://github.com/malick-dev/angular-fusejs/commit/89d005037f62728c734904a155f996699ab882bb
+
+https://github.com/ng-packagr/ng-packagr/issues/355
+
+https://github.com/abbazabacto/ngpackagr-barrel-issue/blob/master/package.json
+
+https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports
+
+And fixed with ng-packagr
+
+```bash
+# Just use this fork dist build in your project :
+yarn upgrade angular-fusejs@git+https://github.com/MonwooServices/angular-fusejs.git#DistBuild
+
+
+# Build the fork sources for production (in ./dist):
+yarn install
+yarn clean && yarn package
+
+```
+
+
 ## How to install?
 
 This module is available through npm. It is compatible with module bundlers (webpack / browserify ...).
 
-1. `npm install angular-fusejs`
-2. Import `FusejsModule` into your module:
+1. `# npm install angular-fusejs`
+2. `npm upgrade angular-fusejs@git+https://github.com/MonwooServices/angular-fusejs.git#DistBuild`
+3. Import `FusejsModule` into your module:
 ```
 import {FusejsModule} from 'angular-fusejs'
 @NgModule({
@@ -71,4 +98,4 @@ Replace `whateverAttribute` with your attribute name, trust it as HTML and you a
 
 I made this just for fun, to learn a bit more about fuzzy search + angular. Fuzzy search + detecting what should be highlighted is 100% handled by [fuse.js](http://fusejs.io/).
 
-If you encounter any bug, please check who is the culprit before submitting an issue - it might be a bug in fuse.js library.
+If you encounter any bug, please check who is the culprit before submitting an issue - it might be a bug in fuse.js library.

index.ts

@@ -1,18 +1,4 @@
-import { NgModule } from '@angular/core'
-import { FusejsPipe } from './src/fusejs.pipe'
-import { FusejsService } from './src/fusejs.service'
 
-@NgModule({
-  providers: [
-    FusejsService
-  ],
-  declarations: [
-    FusejsPipe,
-  ],
-  exports: [
-    FusejsPipe,
-  ]
-})
-export class FusejsModule {}
+export * from './src/fusejs.module';
 export * from './src/fusejs.service';
 export * from './src/fusejs.pipe';

package.json

@@ -1,18 +1,45 @@
 {
+  "$schema": "./node_modules/ng-packagr/package.schema.json",
   "name": "angular-fusejs",
-  "version": "1.0.1",
+  "version": "1.0.6",
   "description": "Angular plugin using fuse.js to search through a list of elements with a string. Supports highlight.",
   "main": "index.js",
+  "type": "module",
+  "ngPackage": {
+    "lib": {
+      "entryFile": "index.ts"
+    },
+    "allowedNonPeerDependencies": [
+      "."
+    ]
+  },
   "dependencies": {
-    "fuse.js": "^3.2.0",
-    "lodash.get": "^4.4.2",
-    "lodash.set": "^4.3.2"
+    "@angular/core": "10.2.0",
+    "fuse.js": "^3.6.1",
+    "lodash-es": "^4.17.21",
+    "rxjs": "^6.6.7",
+    "tslib": "^2.1.0",
+    "zone.js": "~0.10.3"
   },
   "peerDependencies": {
-    "@angular/core": "^2.0.0"
+    "@angular/core": "10.2.0"
+  },
+  "devDependencies": {
+    "@angular/compiler": "10.2.0",
+    "@angular/compiler-cli": "10.2.0",
+    "@types/lodash-es": "^4.17.4",
+    "@types/lodash.get": "^4.4.2",
+    "@types/lodash.set": "^4.3.2",
+    "@types/node": "^13.1.8",
+    "ng-packagr": "^11.2.4",
+    "typescript": "3.9.7"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "rm -rf ./dist",
+    "copy-files": "cp README.md LICENSE package.json tsconfig.json dist/",
+    "package": "ng-packagr -p package.json",
+    "build": "tsc -p . && yarn copy-files"
   },
   "repository": {
     "type": "git",
@@ -28,9 +55,5 @@
   "bugs": {
     "url": "https://github.com/maleblond/angular-local-search/issues"
   },
-  "homepage": "https://github.com/maleblond/angular-local-search#readme",
-  "devDependencies": {
-    "@types/lodash.get": "^4.4.2",
-    "@types/lodash.set": "^4.3.2"
-  }
+  "homepage": "https://github.com/maleblond/angular-local-search#readme"
 }

src/fusejs.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core'
+import { FusejsPipe } from './fusejs.pipe'
+import { FusejsService } from './fusejs.service'
+
+@NgModule({
+  providers: [
+    FusejsService
+  ],
+  declarations: [
+    FusejsPipe,
+  ],
+  exports: [
+    FusejsPipe,
+  ]
+})
+export class FusejsModule {};

src/fusejs.pipe.ts

@@ -3,14 +3,14 @@ import {FusejsService, AngularFusejsOptions} from './fusejs.service';
 
 
 @Pipe({name: 'fusejs'})
-export class FusejsPipe implements PipeTransform {
+export class FusejsPipe<T> implements PipeTransform {
   constructor(
-    private FusejsService: FusejsService
+    private FusejsService: FusejsService<T>
   ) {}
 
-  transform(elements: Array<Object>,
+  transform(elements: Array<T>,
             searchTerms: string,
-            options: AngularFusejsOptions = {}) {
+            options: AngularFusejsOptions<T> = {}) {
     return this.FusejsService.searchList(elements, searchTerms, options);
   }
-}
+}

src/fusejs.service.ts

@@ -1,22 +1,23 @@
-import {Injectable} from '@angular/core'
-import * as Fuse from 'fuse.js'
-import FuseOptions = Fuse.FuseOptions;
+import {Injectable} from '@angular/core';
+import * as Fuse from 'fuse.js';
+import {FuseOptions} from 'fuse.js'
 
-import _set = require('lodash.set');
-import _get = require('lodash.get');
+import {set as _set} from 'lodash-es';
+import {get as _get} from 'lodash-es';
 
 
-export interface AngularFusejsOptions extends FuseOptions {
+export interface AngularFusejsOptions<T> extends FuseOptions<T> {
   supportHighlight?: boolean;
   fusejsHighlightKey?: string;
   fusejsScoreKey?: string;
-  minSearchTermLength?: number;
+  minSearchTermLength?: number; // = 0;
   maximumScore?: number;
+  highlightTag?: string;
 }
 
 @Injectable()
-export class FusejsService {
-  private defaultOptions: AngularFusejsOptions = {
+export class FusejsService<T> {
+  private defaultOptions: AngularFusejsOptions<T> = {
     supportHighlight: true,
     shouldSort: false,
     threshold: 0.6,
@@ -30,11 +31,13 @@ export class FusejsService {
     fusejsScoreKey: 'fuseJsScore',
   };
 
-  searchList(list: Array<any>, searchTerms: string, options: AngularFusejsOptions = {}) {
-    const fuseOptions: AngularFusejsOptions = Object.assign({}, this.defaultOptions, options);
-    let result = [];
+  searchList(list: Array<T>, searchTerms: string, options: AngularFusejsOptions<T> = {}) {
+    // https://stackoverflow.com/questions/35959372/property-assign-does-not-exist-on-type-objectconstructor
+    // TODO : remove (<any>Object) hack by using right lib or polyfill ?
+    const fuseOptions: AngularFusejsOptions<T> = (<any>Object).assign({}, this.defaultOptions, options);
+    let result:any = [];
 
-    if (searchTerms && searchTerms.length >= fuseOptions.minSearchTermLength) {
+    if (searchTerms && searchTerms.length >= (fuseOptions?.minSearchTermLength || 0)) {
       if (fuseOptions.supportHighlight) {
         fuseOptions.includeMatches = true;
       }
@@ -49,7 +52,7 @@ export class FusejsService {
 
       if (fuseOptions.supportHighlight) {
         result.forEach((element) => {
-          element[fuseOptions.fusejsHighlightKey] = this.deepClone(element);
+          element[fuseOptions.fusejsHighlightKey || '_'] = this.deepClone(element);
         });
       }
     }
@@ -67,40 +70,42 @@ export class FusejsService {
     return _out;
   }
 
-  private handleHighlight(result, options: AngularFusejsOptions) {
+  private handleHighlight(result, options: AngularFusejsOptions<T>) {
     if (options.maximumScore && options.includeScore) {
       result = result.filter((matchObject) => {
-        return matchObject.score <= options.maximumScore;
+        return matchObject.score <= (options.maximumScore||0);
       })
     }
 
     return result.map((matchObject) => {
       const item = this.deepClone(matchObject.item);
-      item[options.fusejsHighlightKey] = this.deepClone(item);
-      item[options.fusejsScoreKey] = matchObject.score;
+      item[options.fusejsHighlightKey || "_"] = this.deepClone(item);
+      item[options.fusejsScoreKey || "_"] = matchObject.score;
       for (let match of matchObject.matches) {
         const indices: number[][] = match.indices;
 
         let highlightOffset: number = 0;
 
         let key: string = match.key;
-        if(_get(item[options.fusejsHighlightKey], key).constructor === Array) {
+        if(_get(item[options.fusejsHighlightKey || "_"], key).constructor === Array) {
           key += `[${match.arrayIndex}]`
         }
 
         for (let indice of indices) {
-          let initialValue: string = _get(item[options.fusejsHighlightKey], key) as string;
+          let initialValue: string = _get(item[options.fusejsHighlightKey || "_"], key) as string;
 
           const startOffset = indice[0] + highlightOffset;
           const endOffset = indice[1] + highlightOffset + 1;
+          const tagStart = "<" + (options.highlightTag ?? "em") + ">";
+          const tagEnd = "</" + (options.highlightTag ?? "em") + ">";
           let highlightedTerm = initialValue.substring(startOffset, endOffset);
-          let newValue = initialValue.substring(0, startOffset) + '<em>' + highlightedTerm + '</em>' + initialValue.substring(endOffset);
-          highlightOffset += '<em></em>'.length;
-          _set(item[options.fusejsHighlightKey], key, newValue);
+          let newValue = initialValue.substring(0, startOffset) + tagStart + highlightedTerm + tagEnd + initialValue.substring(endOffset);
+          highlightOffset += (tagStart + tagEnd).length;
+          _set(item[options.fusejsHighlightKey || "_"], key, newValue);
         }
       }
 
       return item;
     });
   }
-}
+}

tsconfig.json

@@ -5,15 +5,34 @@
   "exclude": [
     "node_modules"
   ],
+  "include": [
+    "src/**/*"
+  ],
+  "lib": [
+    "es2015",
+    "es2017",
+    "esnext",
+    "dom"
+  ],
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es5",
+    "target": "es6",
+    "esModuleInterop": true,
     "noImplicitAny": false,
     "sourceMap": false,
     "declaration": true,
+    "declarationMap": true,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "moduleResolution": "node",
-    "skipLibCheck": true
-  }
-}
+    "skipLibCheck": false,
+    "outDir": "./dist",
+    "baseUrl": "./",
+    "rootDir": "./",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }  
+}