We welcome contributions to improve this DOM animation library that enables element tracking across multiple frameworks. This document provides essential guidelines for setting up your development environment, implementing new features.
- Node.js v20.18.3: We recommend using a version manager like asdf for easy version switching
- Yarn v4.6.0:
- Fork repository
- Clone repository:
git clone https://github.com/[your-username]/watching-you.git
// e.g.git clone https://github.com/[your-username]/watching-you.git
- Install dependencies:
yarn install
from root directory
cd packages/core
yarn start # Starts core package in dev mode
For framework-specific development (React, Vue, etc.):
cd packages/[framework-name]
yarn start # Starts framework implementation in dev mode
Targets define coordinate calculation logic for different element types. To create a new target type:
- Create new file in
packages/core/src/targetPlugin
folder - Implement class extending BaseTarget interface (packages/core/src/type/Target.ts):
- Register target in plugin index:
// packages/core/src/targetPlugin/index.ts
+ import NewTarget from './NewTarget';
const targetPlugins = {
// Existing targets
mouse: MouseTarget,
// Add new entry
+ newTarget: NewTarget
};
You can refer to other files in packages/core/src/targetPlugin/*
for details on how to develop watching-you
target
- Create new package in
packages
folder - implementing (ref: package/react)
Our testing strategy focuses on real-world usage scenarios (after build):
- Build all dependencies: Always run
yarn build
in both core and all relevant framework packages before testing
cd packages/core
yarn build
cd ../react
yarn build
cd ../vue
yarn build
- Start test environment:
cd packages/tests
yarn start
Feel free to open PRs, but please note that more comprehensive descriptions will help reviewers better understand your contributions and increase the likelihood of merging.
Here are some tips to improve merge probability:
- PR Description: Provide complete and clear documentation of your contribution in the pull request description
- Commit Hygiene: Maintain clean, atomic commits
- Test Coverage: When contributing new features or bug fixes, please add corresponding test cases in
packages/tests
to validate functionality