Introducing IsoValid: A Lightweight Isomorphic Data Validation Library

alok5953 — Wed, 12 Mar 2025 08:10:31 +0000

🚀 Why Data Validation Matters

Data validation is a crucial part of modern web applications, ensuring data integrity, security, and a smooth user experience. However, developers often struggle with:

Writing separate validation logic for frontend and backend
Managing multiple validation libraries across environments
Keeping validation consistent between client and server

Introducing IsoValid—a powerful, isomorphic validation library that allows you to use the same validation logic across both browser and Node.js environments.

🔥 What is IsoValid?

IsoValid is a lightweight, TypeScript-first validation library designed to unify validation across your entire application stack. Whether you're validating user input in a React form or ensuring API request integrity in an Express server, IsoValid makes it seamless.

🌟 Key Features

✅ True Isomorphic Support – The same validation code runs in both frontend and backend

✅ TypeScript-First – Fully typed API for strong type inference

✅ Minimal Bundle Size – No unnecessary dependencies or bloat

✅ Intuitive API – Developer-friendly, chainable syntax

✅ High Performance – Optimized validation with minimal overhead

✅ Extensible – Easily add custom validators and error messages

📦 Installation

Get started with IsoValid in seconds:

npm install isovalid

🔹 Core Architecture

IsoValid is built on a flexible, extensible architecture that includes:

Base Schema Class

Foundation for all validation schemas
Handles optional/nullable states
Common validation logic across types

Type-Specific Schemas

StringSchema – Length, regex, email, trimming, etc.
NumberSchema – Min/max, integer, positive/negative checks
More types coming soon (Boolean, Array, Object)

Validation Pipeline

Multi-stage validation process
Supports custom validation functions
Returns detailed error reporting

⚡ Usage Examples

String Validation

import { v } from 'isovalid';

const stringSchema = v.string()
  .min(2)  // Minimum length
  .max(50) // Maximum length
  .email() // Must be a valid email
  .matches(/regex/) // Custom pattern
  .trimmed() // Remove extra whitespace
  .setOptional() // Allow undefined
  .setNullable(); // Allow null

Number Validation

const numberSchema = v.number()
  .min(0) // Minimum value
  .max(100) // Maximum value
  .integer() // Must be an integer
  .positive(); // Must be > 0

Validation Results

interface ValidationResult {
  valid: boolean;
  errors: Array<{ path: string[]; message: string; }>;
}

🎯 Real-World Examples

1. React Form Validation

import { v } from 'isovalid';
import { useState, FormEvent } from 'react';

const userSchema = {
  username: v.string().min(3).max(20),
  email: v.string().email(),
  age: v.number().integer().min(18)
};

function RegistrationForm() {
  const [formData, setFormData] = useState({ username: '', email: '', age: '' });
  const [errors, setErrors] = useState<Record<string, string>>({});

  const validateField = (field: keyof typeof userSchema, value: any) => {
    const result = userSchema[field].validate(value);
    return result.valid ? null : result.errors[0].message;
  };

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    const newErrors: Record<string, string> = {};

    Object.entries(formData).forEach(([field, value]) => {
      const error = validateField(field as keyof typeof userSchema, value);
      if (error) newErrors[field] = error;
    });

    if (Object.keys(newErrors).length === 0) {
      console.log('Submitting:', formData);
    } else {
      setErrors(newErrors);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Username" onChange={e => setFormData(prev => ({ ...prev, username: e.target.value }))} />
      {errors.username && <span>{errors.username}</span>}
      <button type="submit">Register</button>
    </form>
  );
}

2. Express API Validation

import express from 'express';
import { v } from 'isovalid';

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

const productSchema = {
  name: v.string().min(3).max(100),
  price: v.number().min(0),
  category: v.string().custom(value =>
    ['electronics', 'books', 'clothing'].includes(value) ? null : 'Invalid category'
  )
};

app.post('/api/products', (req, res) => {
  const errors = Object.entries(productSchema)
    .map(([field, schema]) => ({ field, result: schema.validate(req.body[field]) }))
    .filter(({ result }) => !result.valid)
    .map(({ field, result }) => ({ field, message: result.errors[0].message }));

  if (errors.length > 0) {
    return res.status(400).json({ errors });
  }

  res.status(201).json(req.body);
});

🎯 Best Practices

✅ Schema Reuse – Define schemas once & share across frontend/backend

✅ Type Safety – Leverage TypeScript’s inference capabilities

✅ Performance Optimization – Cache schema instances for reuse

✅ Error Handling – Always check .valid before using data

🛠️ Roadmap

🚀 Upcoming Features:

[ ] Array & Object Schema Support
[ ] Custom Error Message Templates
[ ] Async Validation
[ ] Integration with Popular Form Libraries
[ ] Schema Composition & Inheritance

📌 Get Started with IsoValid

IsoValid is open-source and welcomes contributions! Try it today and share your feedback.

🔗 NPM Package: IsoValid on NPM

🔗 GitHub Repository: GitHub Repo

Let’s make data validation simpler together! 🚀

TypeScript #NodeJS #Validation #Isomorphic #WebDevelopment #DataIntegrity

Introducing crossmemo: A Powerful Cross-Environment Caching & Memoization Utility

alok5953 — Tue, 11 Mar 2025 07:59:07 +0000

Why Caching & Memoization Matter

Caching and memoization are essential for optimizing performance in web applications, reducing redundant computations, and improving response times. However, managing caching across different environments—Node.js and browsers—can be a challenge.

That’s why I built crossmemo, a lightweight yet powerful caching and memoization utility designed for seamless cross-environment use. Whether you're optimizing API calls in a Node.js backend or caching UI data in a React app, crossmemo has got you covered.

🚀 What is crossmemo?

crossmemo is a flexible and easy-to-use caching solution with built-in TTL (Time-To-Live) support, multiple storage adapters, and LRU (Least Recently Used) eviction strategy. It allows developers to cache function results or store frequently accessed data across different environments.

🔹 Key Features

✅ Cross-Environment Support – Works in Node.js & browsers

✅ Multiple Storage Adapters – Supports Memory, LocalStorage, and FileSystem

✅ TTL Support – Set expiration time for cached items

✅ LRU Cache – Automatically evicts least recently used items

✅ TypeScript Support – Fully typed API for type safety

✅ Custom Key Resolution – Flexible cache key generation

✅ Robust Error Handling – Graceful fallbacks on storage failures

📦 Installation & Quick Start

Getting started with crossmemo is simple:

npm install crossmemo

Memoization Example

import { memoize } from 'crossmemo';

const expensiveFunction = async (x: number) => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return x * 2;
};

const memoizedFn = memoize(expensiveFunction, { ttl: 5000 });

await memoizedFn(5); // Takes 1 sec
await memoizedFn(5); // Instant (cached result)

🔥 Advanced Usage

Direct Cache Usage

import { Cache } from 'crossmemo';

const cache = new Cache();
await cache.set('key', { data: 'value' }, { ttl: 60000 });
const value = await cache.get('key');

Custom Storage Adapter

import { LocalStorageAdapter } from 'crossmemo';

const cache = new Cache({
  adapter: new LocalStorageAdapter({ prefix: 'myapp:', maxSize: 100 })
});

Custom Key Resolution

const memoizedFn = memoize(async (user: { id: number }) => {
  return fetchUserData(user.id);
}, {
  keyResolver: (user) => `user-${user.id}`
});

🎯 Why Use crossmemo?

Boost Performance – Reduce redundant function executions
Save Resources – Optimize API calls and expensive computations
Flexible Storage – Choose the best storage for your environment
Lightweight & Easy-to-Use – Simple API with powerful capabilities

📌 Get Started Today

crossmemo is open-source and available on NPM. Try it out and let me know your feedback!

🔗 NPM Package: crossmemo on NPM

🔗 GitHub Repository: GitHub Repo

I’d love to hear your thoughts and contributions. Let’s build better caching solutions together! 🚀

NodeJS #ReactJS #TypeScript #Caching #Memoization #WebPerformance #SoftwareDevelopment

DEV Community: alok5953