@lauthieb/kquery

What's better than jQuery? 👉 kQuery 👈

The goal of this assignment is to build a simplified jQuery-like capable library, called 🎤 kQuery.

Instead of asking you to design an API, we thought we would ask you to implement one. Designing an API takes time, experience, and we usually do it as a team.

Installation 💻

With NPM:

npm i @lauthieb/kquery

or with a CDN:

<script src="https://unpkg.com/@lauthieb/kquery@1.0.0/dist/kQuery.js"></script>

Usage 🤔

import kQuery from 'kquery';

kQuery('.item').replaceWith(kQuery('.itemReplacement')).style({
  color: '#000',
});

This gets all the DOM elements matching the CSS selector .item, replaces them with all the elements matching .itemReplacement, and then changes the CSS color property of the DOM element.

Technologies 🕹

• typescript
• typedoc
• rollup
• prettier
• husky
• lint-staged
• eslint
• commintlint
• jest
• sort-package-json

API Documentation 📖

The kQuery API documentation is available here.

Contributing ❤️

We are thankful for any contributions from the community. Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to kQuery.

Available Scripts ⌨️

In the project directory, you can run:

npm run dev

Build the library, launch tests & serve API documentation in the development watch mode.
Open http://localhost:8080 to view the API documentation.

npm run build

Builds the library into a dist folder.

npm test

Launches the Snapshot tests.

npm run docs

Generates the API documentation into a docs folder.

About the author 🙋‍♂️

I’m Laurent, Senior Frontend Engineer at Decathlon, Founder of Frontend Beers & Musician 🎵

• Website: https://lauthieb.dev
• Blog: https://blog.lauthieb.dev
• GitHub: https://github.com/lauthieb
• Twitter: https://twitter.com/lauthieb
• LinkedIn: https://www.linkedin.com/in/lauthieb/
• YouTube: https://www.youtube.com/c/lauthieb
• Current project that I lead at Decathlon, Design System: https://decathlon.design & https://github.com/Decathlon/vitamin-web
• An Open Source project that I made (800+ stars ⭐️): https://github.com/lauthieb/code-notes

Ideas of improvement 🚀

• [ ] Add CI/CD workflows with GitHub Actions for generating documentation after merge on main branch & publish on NPM registry (with npm version, changelog auto-generated etc.)
• [ ] Setup coverage reports
• [ ] Setup Sonarcloud dashboard (w/ Pull Request analysis)
• [ ] Create live examples w/ CodePen or CodeSandbox