Componentes com estado
Um framework web full stack produtivo não deve forçar você a pensar sobre detalhes de estrutura.
Nullstack assume o controle de suas subclasses e gera um proxy para cada instância.
Quando você invoca qualquer coisa em sua classe, você está na verdade dizendo ao Nullstack o que fazer com o ambiente nos bastidores.
Isso permite que você use operações de JavaScript vanilla como atribuir a uma variável e ver o reflexo no dom.
Mutabilidade
Você pode modificar variáveis de instância para atualizar o estado do seu aplicativo.
As funções são vinculadas automaticamente ao proxy da instância e podem ser passadas como referência para eventos.
Os eventos são declarados como atributos HTML normais.
import Nullstack from "nullstack";
class Counter extends Nullstack {
count = 0;
increment() {
this.count++;
}
render() {
return (
<button onclick={this.increment}>
{this.count}
</button>
)
}
}
export default Counter;
💡 As atualizações são feitas em lotes, geralmente enquanto aguardam chamadas assíncronas, portanto, fazer várias atribuições não tem custos de desempenho!
Objeto de Eventos
Você pode criar atalho em eventos que são simples atribuições passando um objeto para o evento.
Cada chave do objeto será atribuída à instância.
import Nullstack from "nullstack";
class Counter extends Nullstack {
count = 0;
render() {
return (
<button onclick={{ count: this.count + 1 }}>
{this.count}
</button>
)
}
}
export default Counter;
Fonte de Evento
Por padrão, os eventos referem-se a this
quando você passa um objeto.
Você pode usar o atributo source
para definir qual objeto receberá as atribuições.
import Nullstack from "nullstack";
class Paginator extends Nullstack {
render({ params }) {
return (
<button source={params} onclick={{ page: 1 }}>
Primeira Página
</button>
)
}
}
export default Paginator;
✨ Aprenda mais sobre a chave
params
do contexto.
💡 Se você não declarar uma fonte para o evento, o Nullstack injetará
source={this}
no tempo de transpilação para pular completamente o processo de pesquisa em tempo de execução!
Contexto de Evento
Os atributos do elemento-alvo do evento serão mesclados ao context
da instância e podem ser desestruturados na assinatura da função.
import Nullstack from "nullstack";
class Counter extends Nullstack {
count = 0;
increment({ delta }) {
this.count += delta;
}
render() {
return (
<button onclick={this.increment} delta={2}>
{this.count}
</button>
)
}
}
export default Counter;
💡 Qualquer atributo com valor primitivo será adicionado ao DOM.
✨ Considere usar atributos
data
para tornar seu HTML válido.
Evento Original
O comportamento padrão do navegador é impedido por padrão.
Você pode desativar isso declarando um atributo default
para o elemento de evento.
Uma referência ao evento original é sempre mesclada com o contexto da função.
import Nullstack from "nullstack";
class Form extends Nullstack {
submit({ event }) {
event.preventDefault();
}
render() {
return (
<form onsubmit={this.submit} default>
<button> Enviar </button>
</form>
)
}
}
export default Form;
Próximos passos
⚔ Aprenda sobre o ciclo da vida full-stack.
Tem alguma pergunta ou sugestão? Participe do nosso Discord