Skip to content

Commit

Permalink
Add TypeScript support
Browse files Browse the repository at this point in the history
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
fwextensions committed Apr 19, 2022
1 parent 2792c71 commit 41b22ca
Show file tree
Hide file tree
Showing 17 changed files with 1,016 additions and 330 deletions.
2 changes: 1 addition & 1 deletion .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ insert_final_newline = true
indent_style = space
indent_size = 2

[package.json]
[*.json]
indent_style = space
indent_size = 2
1 change: 0 additions & 1 deletion .github/workflows/gh-pages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ on:
push:
branches:
- develop
pull_request:

jobs:
deploy:
Expand Down
31 changes: 0 additions & 31 deletions .travis.yml

This file was deleted.

21 changes: 21 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,26 @@
# Changelog

## [0.1.0](https://github.com/fwextensions/quick-score/releases/tag/v0.1.0) - 2022-04-19

### Added

- Add TypeScript support via `index.d.ts` declaration file, and add `types` field to `package.json`.
- Update JSDocs to include type information.

### Changed

- 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()`.

### Fixed

- Resolve #19 and #20.
- Remove empty PR trigger in `gh-pages.yml`.
- Improve API docs styling.
- Update `devDependencies` to the latest minor versions.


## [0.0.14](https://github.com/fwextensions/quick-score/releases/tag/v0.0.14) - 2022-02-24

### Fixed
Expand Down
42 changes: 25 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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",
Expand All @@ -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.

Expand All @@ -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": {
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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;

Expand All @@ -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
Expand Down
42 changes: 42 additions & 0 deletions jsdoc/static/styles/overrides.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,45 @@
h1, h2, h3, h4, h5 {
font-weight: bold;
letter-spacing: normal;
}

h1 {
font-size: 3rem;
}

h2 {
font-size: 2rem;
}

h3, h3.subsection-title {
font-size: 1.75rem;
letter-spacing: normal;
}

h4 {
font-size: 1.5rem;
}

h4.name {
font-size: 1.65rem;
letter-spacing: -0.03rem;
margin-bottom: .5rem;
}

h5, .container-overview .subsection-title {
font-size: 1.15rem;
color: #777 ;
}

h6 {
font-size: 1rem;
font-weight: normal;
}

ul {
margin-block-start: .5rem;
}

.params code, .description code, .param-desc code {
font-weight: bold;
}
Expand Down
Loading

0 comments on commit 41b22ca

Please sign in to comment.