Package Exports

@medv/finder
@medv/finder/finder
@medv/finder/finder.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@medv/finder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

finder

The CSS Selector Generator

Features

Generates shortest CSS selectors.
Unique CSS selectors per page.
Stable and robust CSS selectors.
Size: 1.5kb (minified & gzipped).

Install

npm install @medv/finder

Usage

import { finder } from '@medv/finder';

document.addEventListener('click', (event) => {
  const selector = finder(event.target);
});

Example

An example of a generated selector:

.blog > article:nth-of-type(3) .add-comment

Configuration

const selector = finder(event.target, {
  root: document.body,
  timeoutMs: 1000,  
  seedMinLength: 3,
  optimizedMinLength: 2,
});

root

Defines the root of the search. Defaults to document.body.

timeoutMs

Timeout to search for a selector. Defaults to 1000ms. After the timeout, finder fallbacks to nth-child selectors.

seedMinLength

Minimum length of levels in fining selector. Defaults to 3.

optimizedMinLength

Minimum length for optimising selector. Defaults to 2.

License

MIT