Ω

nanots

Una librería minimalista para el manejo eficiente del DOM. Simple, ligera y poderosa.

npm install nanots

¿Por qué nanots?

⚡

Ultra Rápido

Solo 2KB minificado. Carga instantánea sin sacrificar funcionalidad.

🔗

Encadenamiento

API fluida que permite encadenar métodos para código más limpio y legible.

🎯

Sin Dependencias

Código puro, sin librerías externas. Compatible con navegadores modernos.

Mira la diferencia

❌ JavaScript Vanilla 

// Seleccionar elementos y agregar eventos
const buttons = document.querySelectorAll('.btn');
buttons.forEach(btn => {
  btn.addEventListener('click', function(e) {
    // Agregar clase
    this.classList.add('active');
    
    // Cambiar texto
    this.textContent = 'Clickeado!';
    
    // Cambiar estilo
    this.style.backgroundColor = '#3b82f6';
  });
});

// Hacer una petición y actualizar DOM
fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById('container');
    container.innerHTML = '';
    data.forEach(item => {
      const div = document.createElement('div');
      div.className = 'item';
      div.textContent = item.name;
      container.appendChild(div);
    });
  });

✅ Con nanots 

// Seleccionar elementos y agregar eventos
$n('.btn').on('click', function() {
  $n(this)
    .addClass('active')
    .text('Clickeado!')
    .css('background-color', '#3b82f6');
});

// Hacer una petición y actualizar DOM
fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    $n('#container')
      .empty()
      .append(
        data.map(item => `<div>${item.name}</div>`).join('')
      );
  });

20% menos código para la misma funcionalidad

Empezar es súper fácil

1. Instala nanots

npm install nanots

2. Importa en tu proyecto

import $n from 'nanots';

3. ¡Usa la magia!

$n('.mi-elemento').addClass('activo');
Ver Documentación Completa

Código abierto bajo licencia ISC

Ejemplos Prácticos

📝 Formulario Interactivo

Validación en tiempo real y manejo de eventos de formulario 

// Validación en tiempo real
$n('#email').on('input', function() {
  const email = $n(this).val();
  const isValid = /\S+@\S+\.\S+/.test(email);
  
  $n(this)
    .toggleClass('border-red-500', !isValid)
    .toggleClass('border-green-500', isValid);
    
  $n('#submit-btn')
    .attr('disabled', !isValid)
    .toggleClass('opacity-50', !isValid);
});

// Envío del formulario
$n('#contact-form').on('submit', function(e) {
  e.preventDefault();
  
  $n('#loading').show();
  $n('#submit-btn').text('Enviando...');
  
  // Simular envío
  setTimeout(() => {
    $n('#loading').hide();
    $n('#success-msg').show();
    $n(this).hide();
  }, 2000);
});

🔍 Lista con Filtros

Filtrado dinámico y manipulación de listas 

// Filtrar lista en tiempo real
$n('#search-input').on('input', function() {
  const searchTerm = $n(this).val().toLowerCase();
  
  $n('.list-item').each((item) => {
    const text = $n(item).text().toLowerCase();
    const matches = text.includes(searchTerm);
    
    $n(item)
      .toggleClass('hidden', !matches)
      .css('opacity', matches ? '1' : '0.5');
  });
  
  // Mostrar mensaje si no hay resultados
  const visibleItems = $n('.list-item').not('.hidden');
  $n('#no-results')
    .toggleClass('hidden', visibleItems.length > 0);
});

// Agregar nuevo elemento
$n('#add-btn').on('click', function() {
  const newItem = $n('#new-item-input').val();
  
  if (newItem.trim()) {
    $n('#items-list').append(`
      <div class="list-item p-2 border-b">
        ${newItem}
        <button class="delete-btn text-red-500">×</button>
      </div>
    `);
    
    $n('#new-item-input').val('');
  }
});

🎭 Modal Dinámico

Popup interactivo con animaciones y manejo de eventos 

// Abrir modal con animación
$n('.open-modal').on('click', function() {
  const modalId = $n(this).data('modal');
  
  $n(`#${modalId}`)
    .removeClass('hidden')
    .css('opacity', '0')
    .css('transform', 'scale(0.9)')
    .css('opacity', '1')
    .css('transform', 'scale(1)');
});

// Cerrar modal
$n('.close-modal, .modal-overlay').on('click', function(e) {
  if (e.target === this) {
    $n('.modal')
      .css('opacity', '0')
      .css('transform', 'scale(0.9)');
      
    setTimeout(() => {
      $n('.modal').addClass('hidden');
    }, 200);
  }
});

// Cerrar con tecla Escape
$n(document).on('keydown', function(e) {
  if (e.key === 'Escape') {
    $n('.modal:not(.hidden) .close-modal').trigger('click');
  }
});

Estos ejemplos muestran cómo nanots simplifica tareas comunes del desarrollo web con una sintaxis limpia y encadenamiento fluido.