mommy-reaction

Uma toolkit pequena para criar interfaces reativas usando JavaScript puro. O núcleo lógico funciona com ou sem DOM. Não usa React, JSX, TypeScript ou bundler.

Instalação

npm install mommy-reaction

Início rápido

const mommy = require("mommy-reaction");

mommy.create("app");
const count = mommy.state(0);

mommy.text(count);
mommy.button("Clique");

mommy.click.set(() => {
  count.set(count.get() + 1);
});

O HTML precisa ter um elemento com id="app" ou ele será criado dentro de body.

DOM opcional

O núcleo da biblioteca pode ser carregado em Node.js, no processo main do Electron e em outros ambientes JavaScript sem document. Estados, assinaturas, contextos lógicos e handlers armazenados funcionam nesses ambientes.

const mommy = require("mommy-reaction");

const count = mommy.state(0);

count.subscribe((value) => {
  console.log(value);
});

count.set(1);

mommy.create("app") também cria um contexto lógico sem DOM. Ele não finge ser um elemento HTML. Recursos visuais como text() e button() só executam quando um DOM está disponível e informam claramente quando isso não é possível.

Para verificar o ambiente:

const mommy = require("mommy-reaction");

if (mommy.env.hasDOM()) {
  mommy.create("app");
}

No main do Electron, use apenas o núcleo lógico. A interface do renderer continua pertencendo ao renderer:

const mommy = require("mommy-reaction");

const state = mommy.state({ ready: false });
state.set({ ready: true });

No navegador ou renderer:

const mommy = require("mommy-reaction");

mommy.create("app");
const count = mommy.state(0);

mommy.text(count);
mommy.button("Somar");
mommy.click.set(() => count.set(count.get() + 1));

API principal

• mommy.create(id) cria ou reutiliza um contêiner e o torna o app atual.
• mommy.state(valor) cria um estado com get(), set(valor) e subscribe(função).
• mommy.text(valor) adiciona um span. Se receber um estado, seu texto é atualizado automaticamente.
• mommy.button(texto) adiciona um botão ao app atual.
• mommy.click.set(função) registra o clique do último botão criado.
• mommy.click.get() retorna a função de clique registrada, ou null.

O objeto retornado por mommy.create() também pode ser usado diretamente:

const mommy = require("mommy-reaction");

const app = mommy.create("app");
const count = mommy.state(0);

app.text(count);
const button = app.button("Somar");
app.click.set(() => count.set(count.get() + 1));

Essa forma permite manter vários apps independentes sem precisar trocar o app atual:

const mommy = require("mommy-reaction");

const first = mommy.create("first");
const second = mommy.create("second");

first.button("Primeiro");
second.button("Segundo");

Componentes reutilizáveis

Um componente pode ser apenas uma função JavaScript:

const mommy = require("mommy-reaction");

function contador() {
  const valor = mommy.state(0);
  mommy.text(valor);
  mommy.button("Somar");
  mommy.click.set(() => valor.set(valor.get() + 1));
  return valor;
}

mommy.create("app");
contador();

Eventos

click.set() esconde addEventListener e substitui o manipulador anterior do último botão. Para outros eventos, use o DOM diretamente quando necessário.

Estado atual e evolução

O mommy-reaction está em desenvolvimento. A API atual mantém o uso simples e direto, enquanto cada aplicação possui seu próprio contexto interno. Isso permite evoluir a biblioteca com novos componentes, estados, eventos e estratégias de renderização sem mudar desnecessariamente os exemplos básicos. Use-a em um navegador ou em um ambiente que forneça um DOM.

Desenvolvimento

npm test
npm run check
npm run pack:check

Publicação no npm

Atualize a versão com npm version patch, faça login com npm login e publique com npm publish. O campo files mantém o pacote publicado limitado ao código-fonte e à documentação.