@fmcoldays/shared

Utilidades base compartidas por los demás paquetes de fmcoldays. Centraliza la lógica de HTTP, DOM y tipos para no duplicarla.

pnpm add @fmcoldays/shared

API

HTTP

import { buildHttpPayload, resolvePick, resolveCsrfToken, applyCsrfHeader } from '@fmcoldays/shared'

// Arma URL, método, headers y body a partir de datos declarativos.
const { url, method, headers, body, isFormData } = buildHttpPayload({
  url: '/api/items',
  method: 'POST',           // opcional: POST si hay body, GET si no
  bodyJson: '{"tipo":"sensor"}',
  pick: { nombre: '#input-nombre', etiquetas: '#sel-multiple' },
  csrf: true,
})

resolvePick — soporte multi-select

resolvePick detecta automáticamente los <select multiple> y devuelve un array con todos los valores seleccionados en lugar de solo el primero.

resolvePick({ fecha: '#fecha', ids: '#sel-multiple' })
// => { fecha: '2026-06-15', ids: ['1', '3', '7'] }

Cuando buildHttpPayload detecta que algún campo resuelto es un array, cambia el body de POST a application/x-www-form-urlencoded con claves repetidas (en lugar de JSON), lo que permite que frameworks como ASP.NET MVC bindeen List<T> sin [FromBody].

• buildHttpPayload(input) — GET → todo al query string; POST → FormData, form-encoded o JSON según el contenido.
• resolvePick(map) — { campo: selector } → { campo: valor | valor[] } leído del DOM. Los <select multiple> devuelven string[].
• resolveCsrfToken() — lee el token del input antiforgery o del meta tag.
• applyCsrfHeader(headers, enabled) — añade el header CSRF si procede.

DOM

import { showSpinner, hideSpinner, configureSpinner, queryRequired } from '@fmcoldays/shared'

configureSpinner('#mi-spinner')   // opcional; default '.spinner__contenedor'
showSpinner()
hideSpinner()

const el = queryRequired<HTMLFormElement>('#mi-form') // lanza si no existe

Tipos

import type { ApiResponse, FileOperationResult } from '@fmcoldays/shared'

Estructura

src/
├── index.ts            # barril raíz
├── types/              # ApiResponse, FileOperationResult
├── const/              # selectores y nombres de header
├── dom/                # spinner, queryRequired
└── http/               # pick, csrf, request-payload