diff --git a/.gitignore b/.gitignore index cb32dd9..eee3ca0 100644 --- a/.gitignore +++ b/.gitignore @@ -47,4 +47,5 @@ yarn-error.log *.d.ts *.js.map -npm-debug.log \ No newline at end of file +npm-debug.log +yarn.lock \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..8838e22 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,8 @@ +{ + "workbench.colorCustomizations": { + "statusBar.background": "#BDB76B", + "statusBar.debuggingBackground": "#BDB76B", + "statusBar.noFolderBackground": "#BDB76B", + "statussBar.prominentBackground": "#BDB76B" + } +} \ No newline at end of file diff --git a/README.md b/README.md index a2e0fb0..cf79e33 100644 --- a/README.md +++ b/README.md @@ -5,12 +5,39 @@ Also easily **highlight** matched terms which is the true added value of this mo Demo: +## 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. \ No newline at end of file +If you encounter any bug, please check who is the culprit before submitting an issue - it might be a bug in fuse.js library. diff --git a/index.js b/index.js deleted file mode 100644 index aa88a8c..0000000 --- a/index.js +++ /dev/null @@ -1,35 +0,0 @@ -"use strict"; -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -function __export(m) { - for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; -} -Object.defineProperty(exports, "__esModule", { value: true }); -var core_1 = require("@angular/core"); -var fusejs_pipe_1 = require("./src/fusejs.pipe"); -var fusejs_service_1 = require("./src/fusejs.service"); -var FusejsModule = (function () { - function FusejsModule() { - } - return FusejsModule; -}()); -FusejsModule = __decorate([ - core_1.NgModule({ - providers: [ - fusejs_service_1.FusejsService - ], - declarations: [ - fusejs_pipe_1.FusejsPipe, - ], - exports: [ - fusejs_pipe_1.FusejsPipe, - ] - }) -], FusejsModule); -exports.FusejsModule = FusejsModule; -__export(require("./src/fusejs.service")); -__export(require("./src/fusejs.pipe")); diff --git a/index.ts b/index.ts index 674da86..dec895b 100644 --- a/index.ts +++ b/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'; \ No newline at end of file diff --git a/package.json b/package.json index 4418e76..85aeb42 100644 --- a/package.json +++ b/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" } diff --git a/src/fusejs.module.ts b/src/fusejs.module.ts new file mode 100644 index 0000000..f405039 --- /dev/null +++ b/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 {}; diff --git a/src/fusejs.pipe.ts b/src/fusejs.pipe.ts index 3b3ecd2..bfe0081 100644 --- a/src/fusejs.pipe.ts +++ b/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 implements PipeTransform { constructor( - private FusejsService: FusejsService + private FusejsService: FusejsService ) {} - transform(elements: Array, + transform(elements: Array, searchTerms: string, - options: AngularFusejsOptions = {}) { + options: AngularFusejsOptions = {}) { return this.FusejsService.searchList(elements, searchTerms, options); } -} \ No newline at end of file +} diff --git a/src/fusejs.service.ts b/src/fusejs.service.ts index f38472f..c667907 100644 --- a/src/fusejs.service.ts +++ b/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 extends FuseOptions { 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 { + private defaultOptions: AngularFusejsOptions = { supportHighlight: true, shouldSort: false, threshold: 0.6, @@ -30,11 +31,13 @@ export class FusejsService { fusejsScoreKey: 'fuseJsScore', }; - searchList(list: Array, searchTerms: string, options: AngularFusejsOptions = {}) { - const fuseOptions: AngularFusejsOptions = Object.assign({}, this.defaultOptions, options); - let result = []; + searchList(list: Array, searchTerms: string, options: AngularFusejsOptions = {}) { + // https://stackoverflow.com/questions/35959372/property-assign-does-not-exist-on-type-objectconstructor + // TODO : remove (Object) hack by using right lib or polyfill ? + const fuseOptions: AngularFusejsOptions = (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) { 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 = ""; let highlightedTerm = initialValue.substring(startOffset, endOffset); - let newValue = initialValue.substring(0, startOffset) + '' + highlightedTerm + '' + initialValue.substring(endOffset); - highlightOffset += ''.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; }); } -} \ No newline at end of file +} diff --git a/tsconfig.json b/tsconfig.json index 458dad9..bfc0692 100644 --- a/tsconfig.json +++ b/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 - } -} \ No newline at end of file + "skipLibCheck": false, + "outDir": "./dist", + "baseUrl": "./", + "rootDir": "./", + "allowSyntheticDefaultImports": true, + "strict": true + }, + "angularCompilerOptions": { + "enableIvy": false + } +} diff --git a/yarn.lock b/yarn.lock deleted file mode 100644 index 1b32747..0000000 --- a/yarn.lock +++ /dev/null @@ -1,30 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -# yarn lockfile v1 -"@types/lodash.get": - version "4.4.2" - resolved "https://registry.yarnpkg.com/@types/lodash.get/-/lodash.get-4.4.2.tgz#24d03d099d9df65656b724c38c616147ff7e2b13" - dependencies: - "@types/lodash" "*" - -"@types/lodash.set": - version "4.3.2" - resolved "https://registry.yarnpkg.com/@types/lodash.set/-/lodash.set-4.3.2.tgz#ad68cf88cb7bc12c0ada134bd4b805188953fe7b" - dependencies: - "@types/lodash" "*" - -"@types/lodash@*": - version "4.14.57" - resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.57.tgz#f0095fb15ec1004455613f3ad73766583e62f830" - -fuse.js@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.2.0.tgz#f0448e8069855bf2a3e683cdc1d320e7e2a07ef4" - -lodash.get: - version "4.4.2" - resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" - -lodash.set: - version "4.3.2" - resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23" -