-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Resolve #19. Resolve #20. Add `index.d.ts` declaration file. Add `types` field to `package.json`. Update version to 0.1.0. Update CHANGELOG.md. Update JSDocs to include type information. Don't concat the parameters to `setItems()` and `setKeys()` with an empty array. Call `.slice()` instead to create a copy. Don't supply a default value for the `sortKey` parameter in `setKeys()`. Don't supply default values for the `string` and `query` parameters in `quickScore()`. Update tests to reflect default parameter changes. Remove empty PR trigger in `gh-pages.yml`. Improve API docs styling. Update `devDependencies` to the latest minor versions. Remove unused .travis.yml.
- Loading branch information
1 parent
2792c71
commit 41b22ca
Showing
17 changed files
with
1,016 additions
and
330 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,7 +4,6 @@ on: | |
push: | ||
branches: | ||
- develop | ||
pull_request: | ||
|
||
jobs: | ||
deploy: | ||
|
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -28,7 +28,7 @@ If you prefer to use the built library files directly instead of using `npm`, yo | |
Or you can load a particular release of the minified script directly from `unpkg.com`, and then access the library via the `quickScore` global: | ||
|
||
```html | ||
<script src="https://unpkg.com/[email protected].7/dist/quick-score.min.js"></script> | ||
<script src="https://unpkg.com/[email protected].14/dist/quick-score.min.js"></script> | ||
<script type="text/javascript"> | ||
console.log(quickScore.quickScore("thought", "gh")); | ||
</script> | ||
|
@@ -51,7 +51,7 @@ Or from a property of the CommonJS module: | |
const quickScore = require("quick-score").quickScore; | ||
``` | ||
|
||
You can then call `quickScore()` with a `string` and a `query` to score against that string. It will return a floating point score between `0` and `1`. A higher score means that string is a better match for the query. A `1` means the query is the highest match for the string, though the two strings may still differ in case and whitespace characters. | ||
Then call `quickScore()` with a `string` and a `query` to score against that string. It will return a floating point score between `0` and `1`. A higher score means that string is a better match for the query. A `1` means the query is the highest match for the string, though the two strings may still differ in case and whitespace characters. | ||
|
||
```js | ||
quickScore("thought", "gh"); // 0.4142857142857143 | ||
|
@@ -71,7 +71,7 @@ import {QuickScore} from "quick-score"; | |
const qs = new QuickScore(["thought", "giraffe", "GitHub", "hello, Garth"]); | ||
const results = qs.search("gh"); | ||
|
||
//=> | ||
// results => | ||
[ | ||
{ | ||
"item": "GitHub", | ||
|
@@ -83,14 +83,15 @@ const results = qs.search("gh"); | |
"score": 0.6263888888888888, | ||
"matches": [[7, 8], [11, 12]] | ||
}, | ||
... | ||
// ... | ||
] | ||
``` | ||
|
||
The `results` array is a list of objects that represent the results of matching the query against each string that was passed to the constructor. It's sorted high to low on each item's score. Strings with identical scores are sorted alphabetically and case-insensitively. In the simple case of scoring bare strings, each item in the results array has three properties: | ||
The `results` array in this example is a list of [ScoredString](https://fwextensions.github.io/quick-score/global.html#ScoredString) objects that represent the results of matching the query against each string that was passed to the constructor. It's sorted high to low on each item's score. Strings with identical scores are sorted alphabetically and case-insensitively. In the simple case of scoring bare strings, each `ScoredString` item has three properties: | ||
|
||
* `item`: the string that was scored | ||
* `score`: the floating point score of the string for the current query | ||
* `matches`: an array of arrays that specifies the character ranges where the query matched the string | ||
* `matches`: an array of arrays that specify the character ranges where the query matched the string | ||
|
||
This array could then be used to render a list of matching results as the user types a query. | ||
|
||
|
@@ -109,12 +110,12 @@ const bookmarks = [ | |
"title": "Supplying Images - Google Chrome", | ||
"url": "developer.chrome.com/webstore/images" | ||
}, | ||
... | ||
// ... | ||
]; | ||
const qs = new QuickScore(bookmarks, ["title", "url"]); | ||
const results = qs.search("devel"); | ||
|
||
//=> | ||
// results => | ||
[ | ||
{ | ||
"item": { | ||
|
@@ -132,10 +133,11 @@ const results = qs.search("devel"); | |
"url": [[0, 5]] | ||
} | ||
}, | ||
... | ||
// ... | ||
] | ||
``` | ||
|
||
Each item in the results array has a few more properties when matching against objects: | ||
When matching against objects, each item in the results array is a [ScoredObject](https://fwextensions.github.io/quick-score/global.html#ScoredObject), with a few additional properties : | ||
|
||
* `item`: the object that was scored | ||
* `score`: the highest score from among the individual key scores | ||
|
@@ -146,7 +148,12 @@ Each item in the results array has a few more properties when matching against o | |
|
||
When two items have the same score, they're sorted alphabetically and case-insensitively on the key specified by the `sortKey` option, which defaults to the first item in the keys array. In the example above, that would be `title`. | ||
|
||
Each result item also has a `_` property, which caches transformed versions of the item's strings, and might contain additional internal metadata in the future. It can be ignored. | ||
Each `ScoredObject` item also has a `_` property, which caches transformed versions of the item's strings, and might contain additional internal metadata in the future. It can be ignored. | ||
|
||
|
||
### TypeScript support | ||
|
||
Although the QuickScore codebase is currently written in JavaScript, the package comes with full TypeScript typings. The QuickScore class takes a generic type parameter based on the type of objects in the `items` array passed to the constructor. That way, you can access `.item` on the `ScoredObject` result and get back an object of the same type that you passed in. | ||
|
||
|
||
### Ignoring diacritics and accents when scoring | ||
|
@@ -163,28 +170,29 @@ const items = ["Café", "Cafeteria"]; | |
const qs = new QuickScore(items, { transformString: s => latinize(s).toLowerCase() }); | ||
const results = qs.search("cafe"); | ||
|
||
//=> | ||
// results => | ||
[ | ||
{ | ||
"item": "Café", | ||
"score": 1, | ||
"matches": [[0, 4]], | ||
"_": "cafe" | ||
}, | ||
... | ||
// ... | ||
] | ||
``` | ||
|
||
`transformString()` will be called on each of the searchable keys in the `items` array as well as on the `query` parameter to the `search()` method. The default function calls `toLocaleLowerCase()` on each string, for a case-insensitive search. In the example above, the basic `toLowerCase()` call is sufficient, since `latinize()` will have already stripped the accents. | ||
`transformString()` will be called on each of the searchable keys in the `items` array as well as on the `query` parameter to the `search()` method. The default function calls `toLocaleLowerCase()` on each string, for a case-insensitive search. In the example above, the basic `toLowerCase()` call is sufficient, since `latinize()` will have already stripped any accents. | ||
|
||
|
||
### Highlighting matched letters | ||
|
||
Many search interfaces highlight the letters in each item that match what the user has typed. The `matches` property of each item in the results array contains information that can be used to highlight those matching letters. | ||
|
||
This function is an example of how an item could be highlighted using React. It surrounds each sequence of matching letters in a `<mark>` tag and then returns the full string in a `<span>`. You could then style the `<mark>` tag to be bold or a different color to highlight the matches. (Something similar could be done by concatenating plain strings of HTML tags, though you'll need to be careful to escape the substrings.) | ||
The functional component below is an example of how an item could be highlighted using React. It surrounds each sequence of matching letters in a `<mark>` tag and then returns the full string in a `<span>`. You could then style the `<mark>` tag to be bold or a different color to highlight the matches. (Something similar could be done by concatenating plain strings of HTML tags, though you'll need to be careful to escape the substrings.) | ||
|
||
```jsx | ||
function highlight(string, matches) { | ||
function MatchedString({ string, matches }) { | ||
const substrings = []; | ||
let previousEnd = 0; | ||
|
||
|
@@ -202,7 +210,7 @@ function highlight(string, matches) { | |
} | ||
``` | ||
|
||
The [QuickScore demo](https://fwextensions.github.io/quick-score-demo/) uses this approach to highlight the matches, via the [MatchedString](https://github.com/fwextensions/quick-score-demo/blob/master/src/js/MatchedString.js) component. | ||
The [QuickScore demo](https://fwextensions.github.io/quick-score-demo/) uses this approach to highlight the query matches, via the [MatchedString](https://github.com/fwextensions/quick-score-demo/blob/master/src/js/MatchedString.js) component. | ||
|
||
|
||
## API | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.