Rewrite spot.js

[fnune]

I am currently rewriting this library after almost ~three~ six years. Initially, I'm doing this because I feel guilty of having such ugly code in my profile, but hopefully one day I'll be able to tick off all the boxes in this file.

The branch for the rewrite is this: https://github.com/brainlessdeveloper/spot.js/tree/rewrite

Rough outline of functionality

• Defines a set of elements:

  • Container elements: listeners are attached to these and other relevant elements are contained inside them.

  • Instance elements: these respond with different effects depending on the mouse position relative to its container element.

    • Shadow effect.
    • Rotation effect.
    • Perspective effect.
    • Indicator effect for debugging.

Usability features

Provides a plug-in-friendly API.

• [ ] Instance elements can be passed an array of effect functions as parameters.
• [ ] Keeps effect logic exclusively outside of the core API functionality.
• [ ] Effect functions are only aware of the relative position of the mouse and the instance element.
• [ ] Container elements provide callbacks to control their instance elements as a group.

Has no dependencies.

• [ ] Can be used stand-alone using a script tag and HTML classes.
• [ ] Provides a minified version.

Has a sibling React library.

• [ ] The React library uses the core features in a React-friendly manner.

Provides a wrapper-friendly API.

• [ ] Can be easily wrapped for usage in a framework or rendering library of choice.
• [ ] The sibling React library is an example of this.

---

Performance features

60FPS.

• [ ] Uses requestAnimationFrame.
• [ ] Avoids unnecessary looping.

Can run thousands of instance elements.

• [ ] Does not run effects on elements that are not inside the viewport.
• [ ] Defines areas around the viewport and instantiates those in anticipation of user scrolling.
• [ ] Piggybacks on browser CSS rendering performance.

Can respond smoothly to mouse, scroll and zoom events.

• [ ] Calculates mouse position on mouse move.
• [ ] Does not stutter when scrolling.
• [ ] Does not stutter when zooming.
• [ ] Does not stutter when moving the mouse, scrolling and zooming simultaneously.

---

Configurability features

Container element configurability.

• [ ] Has a default target of 60FPS but can be configured with a different target.
• [ ] Has a configuration option for container element debugging indicators.

Effect element configurability.

• [ ] Effect functions can be passed a configuration argument.
• [ ] The configuration arguments are defined by the effect.
• [ ] All effect functions have the same signature.

---

Meta features

Is built in TypeScript.

• [ ] TypeScript code compiles with the most strict configuration.
• [ ] The types are exported.

Is developer-friendly.

• [ ] Has an up-to-date API reference.
• [ ] Utilizes continuous deployment.
• [ ] Has a test coverage above 95%.

Is contribution-friendly.

• [ ] Has a thought-through CONTRIBUTING.md file.
• [ ] Contains several issues before release.

Is performance-tested.

• [ ] Has stress tests for rendering many instance elements.
• [ ] Has stress tests for moving the mouse, scrolling and zooming.