Crafting My NPM Package: Beyond jQuery

The Problem

A few years ago, when I began to lead development teams, I often faced a problem. I would say, "use the function we used in another project," and we would always end up copying and pasting code from one project to another.

Yes, we were using npm and similar tools, but sometimes the tasks we needed were very specific, like checking the browser, adding or removing styles, and many developers still preferred using jQuery for those tasks.

Draft

So I thought, "Why not create my own package?" I can address these small items, all in one library. My team will have a single source of truth, and together, we can solve our problems.

You might think vanilla JS makes jQuery unnecessary, and you're right. However, I chose to start with something easier to manage, aiming to use it for our internal projects. This also helps old developers move to the vanilla ecosystem more smoothly.

Objectives

1 - Develop an NPM Module
2 - Avoid Repetitive Work
3 - Connect with other devs
4 - Make the library Grow in terms of functionalities.

Library Features

The library offers functionalities for manipulating HTML elements and attributes with ease. Features include hiding, showing, styling elements, adding or removing classes, toggling classes, and checking element matches.

It also enables attribute manipulation, converts strings to boolean or number, identifies browser types and systems, and introduces delays in code execution. These tools streamline web development tasks, enhancing efficiency and code readability.

Some Examples

Hide Elements

import { u_addClass } from '@andresclua/jsutil';
u_addClass('selector', 'add-new-class');
// examples
u_addClass('.add-class'), 'add-new-class');
u_addClass(document.querySelectorAll('.add-class'), 'add-new-class');
u_addClass(document.querySelector('.add-class'), 'add-new-class');
u_addClass(document.getElementById('my-element-class'), 'add-new-class');

Add style to elements

import { u_style } from '@andresclua/jsutil';
// Apply multiple styles to elements with class 'styled-elements'
u_style('.styled-elements', [{ color: 'red' }, { fontSize: 16 }]); // if no unit is define will use pixels
u_style('.styled-elements', [{ background: 'red' }, { display: 'block' }]);

Add Single class or multiple Classes to element

import { u_addClass } from '@andresclua/jsutil';
// Add 'class1' and 'class2' to elements with class 'add-classes-to-me'
u_addClass('.add-classes-to-me', 'class1 class2');

Check if element has matches certain criteria

import { u_matches } from '@andresclua/jsutil';
// Check if there's an element with the class 'active'
const hasActive = u_matches('.menu-item', 'active');

import { u_matches } from '@andresclua/jsutil';
// Check if there's an element containing both 'active' and 'highlighted' classes
const hasActiveAndHighlighted = u_matches('.menu-item', 'active highlighted');

import { u_matches } from '@andresclua/jsutil';
// Check if there's an element with a data-attribute 'data-role' equal to 'admin'
const hasAdminRole = u_matches('div', 'admin', 'data-role');

Browser Type

import { u_browser } from '@andresclua/jsutil';
const isChrome = u_browser('chrome');

You can find more documentation on how to use it

Conclusion

Creating my npm package was very rewarding. I started with webpack but switched to Vite recently, to use its library mode. This change made my package work better for UMD and ES modules, improving how developers can use it.

For the latest version, I've improved the documentation using Astro, which I like for its ease of use in web projects.

Using these tools made development smoother and helped me make a useful and easy-to-understand package. Making my npm package taught me about being adaptable, the importance of good documentation, and keeping up with new technology to help developers.

I enjoyed sharing about making my npm package. It's been a great journey, and I'm excited to share more. Thanks for reading my first post. I'd love to hear your thoughts or feedback!