Introducing helping-js v2: A Zero-Dependency Utility Library to Level Up Your App

Posted on by — No Comments ↓

Introducing helping-js v2: A Zero-Dependency Utility Library to Level Up Your App

TL;DR — helping-js is a lightweight JavaScript utility library with no dependencies. It adds type checkers, regex patterns, schema-based validation, and safe browser APIs that work in Node, Vue, React, Express, and the browser. In this post, we’ll see how it can simplify your code.

Why helping-js?

  • Zero dependencies — no extra packages
  • Small — tree-shakeable, subpath imports
  • Universal — Node (CJS/ESM), Vue, React, Express, Vite, Next.js, CRA, CDN
  • TypeScript — .d.ts for all modules
  • Validation — validate(obj, rules) without validator.js


Installation

npm install helping-js
# or
yarn add helping-js

Module Overview

1. Type checkers (helping-js/core/types)

Reliable type checks for common values: 

import {
  isString,
  isNumber,
  isArray,
  isPlainObject,
  isUndefinedOrNull,
  isNumeric,
  isPromise,
} from 'helping-js/core/types';

isString('hello');        // true
isNumber(42);             // true
isArray([1, 2]);          // true
isPlainObject({});        // true
isUndefinedOrNull(null);  // true
isNumeric('123.45');      // true
isPromise(Promise.resolve()); // true

Useful for handling user input, API responses, and config objects.

2. Regex patterns (helping-js/core/regex)

Pre-built patterns for common formats: 

import {
  RX_EMAIL,
  RX_URL,
  RX_PHONE,
  RX_IPV4,
  RX_UUID,
  RX_HEX_COLOR,
} from 'helping-js/core/regex';

RX_EMAIL.test('user@example.com');   // true
RX_URL.test('https://example.com');  // true
RX_PHONE.test('+1-555-123-4567');   // true
RX_IPV4.test('192.168.1.1');        // true
RX_UUID.test('550e8400-e29b-41d4-a716-446655440000'); // true
RX_HEX_COLOR.test('#ff5733');       // true

No need to write or maintain these regexes yourself.

3. Country-specific phone regex (helping-js/core/phones-regex)

import { RX_PHONE_US, RX_PHONE_UK, RX_PHONE_IR } from 'helping-js/core/phones-regex';

RX_PHONE_US.test('5552345678');    // true
RX_PHONE_UK.test('+447912345678'); // true
RX_PHONE_IR.test('+989121234567'); // true

Works for many countries.

4. Currency regex (helping-js/core/currencies-regex)

import { RX_CURRENCY_USD, RX_CURRENCY_EUR } from 'helping-js/core/currencies-regex';

RX_CURRENCY_USD.test('1,234.56');  // true
RX_CURRENCY_EUR.test('1.000,00€'); // true

For validating and normalizing currency input.

5. Environment support (helping-js/core/support)

Detect runtime environment: 

import {
  HAS_WINDOW_SUPPORT,
  HAS_DOCUMENT_SUPPORT,
  IS_BROWSER,
  IS_IE,
} from 'helping-js/core/support';

if (IS_BROWSER) {
  console.log('Running in browser');
}
if (HAS_WINDOW_SUPPORT) {
  // use window
}

Helps write code that works in both browser and Node.

6. Safe browser globals (helping-js/core/safe-types)

Use window, document, navigator, etc. safely in SSR or Node: 

import { WINDOW, DOCUMENT, File } from 'helping-js/core/safe-types';

// No ReferenceError in Node
console.log(WINDOW);   // {} in Node, window in browser
console.log(DOCUMENT); // {} in Node, document in browser

7. Validation API (helping-js/core/validate)

Lightweight schema-based validation: 

import { validate } from 'helping-js/core/validate';
import { RX_EMAIL } from 'helping-js/core/regex';
import { isNumber } from 'helping-js/core/types';

const result = validate(
  { email: 'user@example.com', age: 25 },
  { email: RX_EMAIL, age: isNumber }
);

if (result.valid) {
  console.log('All valid');
} else {
  console.log('Errors:', result.errors); // { age: false }
}

Rules can be RegExp or (value) => boolean.

8. Form preset (helping-js/preset/form)

One import for common form validation needs: 

import {
  validate,
  isString,
  isNumber,
  RX_EMAIL,
  RX_URL,
  RX_PHONE,
} from 'helping-js/preset/form';

Real-world examples

Vue 3 – form validation

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="form.email" type="email" placeholder="Email" />
    <span v-if="errors.email" class="error">Invalid email</span>

    <input v-model.number="form.age" type="number" placeholder="Age" />
    <span v-if="errors.age" class="error">Invalid age</span>

    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { validate, RX_EMAIL, isNumber } from 'helping-js/preset/form';

const form = reactive({ email: '', age: null });
const errors = ref({});

const rules = { email: RX_EMAIL, age: isNumber };

function onSubmit() {
  const result = validate(form, rules);
  errors.value = result.errors;
  if (result.valid) {
    // submit to API
    console.log('Submitting', form);
  }
}
</script>

React – form validation

import { useState } from 'react';
import { validate, RX_EMAIL, isNumber } from 'helping-js/preset/form';

export function ContactForm() {
  const [form, setForm] = useState({ email: '', age: '' });
  const [errors, setErrors] = useState({});

  const rules = { email: RX_EMAIL, age: isNumber };

  function handleSubmit(e) {
    e.preventDefault();
    const result = validate(form, rules);
    setErrors(result.errors);
    if (result.valid) {
      // submit to API
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={form.email}
        onChange={(e) => setForm((s) => ({ ...s, email: e.target.value }))}
        type="email"
        placeholder="Email"
      />
      {errors.email && <span className="error">Invalid email</span>}

      <input
        value={form.age}
        onChange={(e) => setForm((s) => ({ ...s, age: e.target.value }))}
        type="number"
        placeholder="Age"
      />
      {errors.age && <span className="error">Invalid age</span>}

      <button type="submit">Submit</button>
    </form>
  );
}

Express.js – API validation

const express = require('express');
const { validate } = require('helping-js/core/validate');
const { RX_EMAIL } = require('helping-js/core/regex');
const { isString } = require('helping-js/core/types');

const app = express();
app.use(express.json());

app.post('/api/users', (req, res) => {
  const result = validate(req.body, {
    email: RX_EMAIL,
    name: (v) => isString(v) && v.length >= 2,
  });

  if (!result.valid) {
    return res.status(400).json({ errors: result.errors });
  }

  // create user...
  res.json({ ok: true });
});

// Reusable validation middleware
const validateBody = (rules) => (req, res, next) => {
  const result = validate(req.body || {}, rules);
  if (!result.valid) {
    return res.status(400).json({ errors: result.errors });
  }
  next();
};

app.post('/api/contact', validateBody({ email: RX_EMAIL }), (req, res) => {
  res.json({ ok: true });
});

Vue 3 – environment-aware logic

import { IS_BROWSER, HAS_TOUCH_SUPPORT } from 'helping-js/core/support';
import { isString } from 'helping-js/core/types';

// Use only in browser
if (IS_BROWSER && HAS_TOUCH_SUPPORT) {
  document.addEventListener('touchstart', handleTouch);
}

// Validate before processing
function processInput(value) {
  if (!isString(value)) return null;
  return value.trim();
}

React – type checking for API data

import { isPlainObject, isArray, isString } from 'helping-js/core/types';

function UserList({ data }) {
  if (!isArray(data)) return <p>Invalid data</p>;

  return (
    <ul>
      {data
        .filter((item) => isPlainObject(item) && isString(item.name))
        .map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
    </ul>
  );
}

How helping-js improves your app

Use case Benefit
Form validation Replace validator.js with validate() and built-in regex
Type safety Use type checkers instead of typeof/instanceof checks
Regex validation Reuse many common patterns instead of writing your own
SSR / universal code IS_BROWSER and safe globals avoid runtime errors
Smaller bundle Import only the modules you use
DX TypeScript types and clear module layout

Links

If you found this useful, star the repo or leave feedback in the comments.

#vue #js #nodejs #express #utils #frontned #backend #web

Leave a Reply