himynameisdave / browser-event-utils Goto Github PK

Run the linter and tests on commit, with husky + lint-staged

Let's jump on that Typescript train!

Add a withEscKeyPress (and other keyboard events)

See here.

Should include:

• Issue/PR templates
• Contributing guide
• Changelog/migration guide

Fix all the $TSFixMe (alias for any) type definitions by providing real type definitions for them.

This was added as a placeholder because there were a few places where I didn't know the best way to define types.

I would like help with this issue, not just to have stronger typing in this package, but also as a learning exercise so that I better understand complex typing.

Acceptance Criteria

• Fix all the cases of $TSFixMe
• Explain what has been changed

Sometimes you want event.target.value to be a number. Unfortunately the browser always casts it to a string (even for numeric inputs) -- see example. Would be nice to have a helper which casts it to a number for you 👍

Add CodeSandbox examples to docs. This will help folks onboard easier and play around with stuff, and is also a good way to test stuff in browserland.

In the 80%+ range is nice, but 100% would give consumers more confidence in this package.

Instead of widening the API offered by this package, let's instead just export the withKeyPress helper function, offloading choosing what key to test to userland.

Supersedes #11

Add withDebouncedEvent, so that keyboard events (or other events like clicking and scrolling) can be debounced.

Pass the event and any additional arguments along to the user's event handler.

Inspired by this package.

It'd be better to generate one single TS definition file, like most other projects do.

https://betterstack.dev/blog/publishing-type-definitions-with-npm-package/#heading-not-all-type-definitions-exported

I think rollup + the ts compiler should be enough to make this work.

At the very least we should be able to remove plugins for functionality which typescript now supports, such as @babel/plugin-proposal-optional-chaining

withSelectOnFocus would attempt to call event.target.select() if it exists. The idea is that this would be passed to onFocus and could be used to create focus-and-select style inputfields.

Not sure if we should add this, but event.currentTarget might be useful.

If we expose that, we should also expose the withTarget method as well.

Add testing, coverage, and CI:

• jest for testing
• Travis for CI
• Coveralls

To replace stuff like this...

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setChecked(event.target.checked);
};

We could do:

const handleChange = withTargetChecked(setChecked);

Describe the bug

When using withPreventDefault in a standard/template Rollup + Svelte project, I get the following error: Uncaught TypeError: Illegal invocation

It seems to be pointing to this line in callIfExists, which the compiler spits out as this:

return (_a = event === null || event === void 0 ? void 0 : event[method]) === null || _a === void 0 ? void 0 : _a();

Where invoking _a() seems to be causing the bug.

To Reproduce
Steps to reproduce the behavior:

1. Clone the svelte template repo.
2. yarn add browser-event-utils@next
3. Wrap an event handler with withPreventDefault:

<script>
  import { withPreventDefault } from 'browser-event-utils';

  const handleDrop = withPreventDefault(() => { //... });
</script>

<div on:drop={handleDrop}>
  Drop here!
</div>

1. Invoke the event, you should see the error.

Expected behavior

It should just call the expected method, no errors.

Versions (please complete the following information):

• browser-event-utils Version: [eg: v3.0.0-beta.5]
• Browser & Version: Google Chrome 83.0.4103.106
• Framework version (if applicable) [eg: [email protected]]
• (Optionally) NodeJS Version: v12.16.3

Additional context or comments
Add any other context about the problem here.

Description

A utility that grabs the event.target.value (if it exists) and passes it along as the first argument to the provided function, followed by the full event object.

Sample usage:

import { withTargetValue } from 'browser-event-utils';

const input = document.querySelector('input');
input.addEventListener('change', withTargetValue((value, event) => {
    console.log(`The value is ${value}`)
}));

Add a util for withTargetFiles to extract event.target.files.

Improve any or Function typings