lumaX - Documentação Oficial

🌟 Apresentação da Biblioteca

lumaX é uma biblioteca utilitária JavaScript que unifica dois conjuntos de ferramentas:

Funções de Lógica Geral para entrada de dados, log, e manipulação básica.

Funções DOM para seleção, manipulação visual e eventos em elementos HTML.

Ela é leve, modular, e pode ser usada tanto em projetos frontend (navegador) quanto em aplicações Node.js (APIs) para operações gerais sem dependências externas.

🚀 Importação para APIs / Node.js (modo ESM)

✅ Recomendado para uso com bundlers, Bun, Node moderno (v14+ com type: module).

// Importação via NPM import lumaX from '@mobtrue/lumax';

// Usando uma função de lógica const ano = lumaX.year(); console.log(Ano atual: ${ano});

▶ Como configurar seu package.json

{ "type": "module" }

🌐 Importação para o Navegador (modo DOM)

1. Com type="module" (modo moderno)

2. Modo Clássico ( global)

✅ Validação da Importação

Para garantir que a biblioteca foi corretamente importada no ambiente:

lumaX.validateImport();

Retorno:

[✓] Core API loaded. se está tudo ok.

[X] Missing: [...] se algo não foi carregado corretamente.

🔑 Ativação e Desativação Global (globalThis)

Habilita todas as funções para uso direto no escopo global:

lumaX.enableGlobals(); $show("#minhaDiv");

Para desativar:

lumaX.disableGlobals();

Parâmetro opcional:

lumaX.enableGlobals(true); // Força sobrescrita de funções globais existentes

🔢 Funções Disponíveis

General

show(arg)

Exibe no console qualquer valor.

show("teste"); show({ nome: "João" });

data(promptMsg)

Solicita entrada do usuário via prompt().

const nome = data("Digite seu nome:");

dataNum(promptMsg)

Solicita entrada numérica, com validação.

const idade = dataNum("Digite sua idade:");

year()

Retorna o ano atual.

const ano = year(); console.log(ano);

DOM: Seleção e Consulta

$query(sel) / $el(sel)

Seleciona o primeiro elemento correspondente.

const btn = $query("#botao"); const titulo = $el("h1");

$queryAll(sel) / $els(sel)

Seleciona todos os elementos.

const itens = $queryAll("li");

$getParent(sel)

Retorna o elemento pai.

$getParent("#campo");

$getChildren(sel)

Lista os filhos diretos.

$getChildren("#lista");

$getSiblings(sel)

Irmãos (exceto o próprio).

$getSiblings(".item-selecionado");

$getFirstChild(sel) / $getLastChild(sel) / $getNthChild(sel, n)

$getFirstChild("ul"); $getLastChild("ul"); $getNthChild("ul", 2);

$getNextSibling(sel) / $getPreviousSibling(sel)

$getNextSibling("#item"); $getPreviousSibling("#item");

DOM: Conteúdo e Atributos

$setText(sel, text)

$setText("h1", "Novo título");

$setHTML(sel, html)

$setHTML("#box", "Negrito");

$setAttribute(sel, attr, val) / $setAttr(...)

$setAttr("img", "alt", "Foto");

$getAttr(sel, attr) / $removeAttr(sel, attr)

$getAttr("img", "src"); $removeAttr("img", "alt");

$dataAttr(sel, name, [val])

$dataAttr("#user", "id", "123"); const id = $dataAttr("#user", "id");

DOM: Estilos e Classes

$setStyle(sel, { prop: val })

$setStyle(".box", { backgroundColor: "blue", padding: "10px" });

$addClass, $removeClass, $toggleClass, $replaceClass, $hasClass, $getClasses, $setClasses

$addClass("#el", "ativo"); $removeClass("#el", "inativo"); $toggleClass("#el", "selecionado"); $replaceClass("#el", "antigo", "novo"); $setClasses("#el", ["a", "b"]);

DOM: Eventos

$onClick(sel, cb) / $onHover(sel, cb)

$onClick("#btn", () => alert("Clicou!"));

$onKeyPress(key, cb) / $onResize(cb)

$onKeyPress("Enter", () => console.log("Enter pressionado"));

$onInput, $onChange, $onFocus, $onBlur

$onInput("#nome", e => console.log(e.target.value));

DOM: Efeitos Visuais

$fadeIn, $fadeOut

$fadeIn("#banner"); $fadeOut("#popup", 300);

$zoomIn, $zoomOut

$zoomIn(".img"); $zoomOut(".img");

$slideDown, $slideUp, $bounce, $shake

$slideDown("#menu"); $bounce("#botao");

DOM: Manipulação de Elementos

$createElement(tag, attrs, children)

const el = $createElement("div", { id: "caixa" }, ["Oi"]); $appendChild("body", el);

$appendChild, $insertBefore, $insertAfter, $removeElement, $clone

$insertAfter("#referencia", $createElement("p", {}, ["Texto"]));

DOM: Drag & Drop

$makeDraggable(sel) / $makeDroppable(sel, cb)

$makeDraggable("#drag"); $makeDroppable("#drop", e => alert("Soltou!"));

$getDragData(e) / $setDragData(e, val)

$setDragData(event, "meuDado");

Eventos Globais Genéricos

$addEvent(event, callback, [target])

$addEvent("click", () => console.log("clicou"));

⚙ Ajuda Extra

Se quiser gerar os arquivos automaticamente nos formatos .js e .global.js, é possível usar ferramentas como:

bun build

esbuild

rollup

Caso queira um exemplo de bundler configurado, posso ajudar com um rollup.config.js.

👋 Contribuições

Essa biblioteca é modular e extensível. Envie ideias, melhorias e otimizações para crescimento colaborativo!

Feito com ❤ por desenvolvedores que amam produtividade.