Exemplos práticos. Demos ao vivo.
Escolha um exemplo para abri-lo em tela cheia, com a pré-visualização ao vivo e seu código lado a lado.
Básico
4Os padrões que formam a base de todo app Nuclo.
Contador
Altere o estado e chame update(). O texto dinâmico se atualiza.
Lista de Tarefas
Use list() para itens repetidos. Chame update() após cada mutação.
Filtro de Busca
Filtre um array com JavaScript simples. Renderize o resultado com list().
Estilização
Use css() para classes. Use cx() para pequenas mudanças condicionais.
Componentes
4Funções simples com parâmetros estáticos e dinâmicos, filhos, listas associadas por identidade e dados aninhados. Cada pré-visualização conta suas montagens.
Parâmetros Estáticos e Dinâmicos
Um valor passado como parâmetro é lido uma vez, quando o componente é construído. Uma função passada como parâmetro é lida a cada update(). O componente em si roda uma vez em ambos os casos, e a contagem de montagens prova isso.
Filhos e Modificadores
Um componente repassa seus filhos com um spread: construtores, texto, objetos de atributos e modificadores. Partes condicionais vão em when(), então o componente ao redor nunca é reconstruído.
Identidade de Lista
list() mantém uma linha enquanto seu item está no array: reordene, insira e renomeie sem perder inputs ou foco. Uma opção clona os objetos a cada update para mostrar o custo de quebrar a identidade.
Dados Aninhados
Uma equipe, seus membros e as tarefas de cada um: um componente por nível, chamadas list() aninhadas, contagens derivadas como funções sobre os mesmos objetos. Mudanças profundas atualizam só os próprios nós.
API
13Uma pequena demo por bloco de construção, as mesmas que a documentação incorpora.
Construtores de Tags
Um construtor recebe atributos, filhos estáticos e texto dinâmico. Renomear altera o estado e depois chama update().
Componentes
Um componente é uma função simples. Cada chamada Counter() mantém a própria contagem.
Atributos
Valores de atributos podem ser funções. O segundo botão inverte busy e chama update(); o disabled e o aria-busy de Save acompanham.
Eventos
onInput e onKeyDown são atributos simples. Digite e pressione Escape para limpar.
Ciclo de Vida
onMount inicia um intervalo e retorna uma função de limpeza. Desmontar executa a limpeza, então a contagem pausa até o timer ser montado de novo.
Atualizações Explícitas
count++ só altera a variável. O texto se atualiza no próximo update(), vindo do botão ou de qualquer outra coisa nesta página.
Valores Dinâmicos
Edite o nome. O texto estático foi fixado quando o elemento foi construído; o dinâmico roda de novo a cada update(). forceUpdate() reconstrói a árvore, então o texto estático também se atualiza.
update()
Cada update() executa cada valor dinâmico, mesmo quando seus dados não mudaram. Outras demos nesta página também aumentam a contagem.
scope()
Os dois botões adicionam um item e renomeiam o usuário. update('cart') atualiza só o painel com escopo.
when()
A primeira condição verdadeira vence; caso contrário, .else() renderiza. Um novo ramo é construído do zero.
list()
Linhas são associadas por identidade. Marque uma linha e depois Inverta: o mesmo <li> se move, com checkbox e tudo.
region() e into()
Um layout com uma região principal empilhada e uma região lateral, preenchidas de fora dele. Digite em Home, abra o diálogo e feche-o: o texto permanece. Article preenche as duas regiões com um só into().
forceUpdate()
update() atualiza só a linha dinâmica de lang. forceUpdate() chama App de novo e aplica as mudanças no mesmo <h1>. A forma explícita reconstrói só esta árvore, não a página inteira.
Estilização
3Crie uma classe, componha uma classe e use um tema pequeno.
Formulários
3Validação como funções simples sobre estado simples, campos com os quais o usuário já interagiu, etapas e linhas dinâmicas.
Validação de Campos
Regras como uma função sobre estado simples, erros exibidos depois que o usuário interagiu com um campo, uma verificação assíncrona com debounce e estado pendente, e um envio que espera por tudo isso.
Assistente em Etapas
Três etapas como ramos de when() sobre um único objeto de dados. Avançar marca os campos da etapa como visitados e só prossegue quando todos passam na validação. A revisão lista tudo com links de Editar.
Linhas Dinâmicas
Linhas de fatura em um array renderizado com list(). Cada linha se valida sozinha, o total conta as válidas, e as linhas mantêm seus inputs quando outras são adicionadas ou removidas.
SVG
27Gráficos, animações, ferramentas e jogos a partir dos construtores de tags SVG, guiados por dados simples, eventos de ponteiro e update().
Gráfico de Barras
Elementos rect a partir de um array. Seus y e height são funções dos dados, então update() move as barras.
Gráfico de Linhas
Um path cujo d é construído a partir dos pontos, com uma área em gradiente e um círculo por ponto.
Gráfico de Rosca
Um círculo por fatia. stroke-dasharray dá a cada uma sua parte do anel e stroke-dashoffset seu início.
Animação SVG
SMIL como construtores: animateSvg pulsa o sol, animateTransformSvg orbita o planeta. Um dur dinâmico define a velocidade.
Medidor
Um arco que se preenche com stroke-dashoffset e uma agulha que gira com um transform CSS. Ambos são funções de um só número.
Gráfico de Radar
Cinco valores em cinco eixos. A forma é um path cujo d é calculado a partir dos dados, então update() a transforma.
Mapa de Calor
Uma grade de elementos rect cujo fill-opacity segue um nível. Clique em uma célula para aumentá-lo; um filho titleSvg é sua dica.
Dica ao Passar o Mouse
Eventos de ponteiro em elementos SVG. onPointerEnter escolhe o ponto ativo e um grupo com a dica desliza até ele.
Editor de Curvas
Arraste as alças de uma Bézier cúbica. onPointerDown escolhe um ponto, onPointerMove no svg o move e o path acompanha.
Relógio
Os ponteiros são linhas cujo transform é uma função da hora. onMount inicia o tique-taque e retorna uma função de limpeza.
Ícones Alternáveis
Um ícone de menu que se transforma em um X com transições CSS, e um coração que pulsa com uma animação SMIL iniciada no clique.
Fluxo ao Vivo
Duas séries rolam para a esquerda em um timer. Uma transição CSS com a duração de um tick torna o deslize suave, e passar o mouse lê qualquer amostra.
Gráfico de Candles
Quarenta posições leem o próprio candle. Mude o período, alterne a média, passe o mouse para ver os números ou deixe o candle ao vivo avançar.
Corrida de Barras
Dez barras nunca saem do DOM. A posição de cada uma define um translateY, então uma transição desliza cada barra para sua linha conforme os valores mudam.
Gráfico de Área Empilhada
Quatro faixas se transformam entre os layouts empilhado, fluxo e percentual. Ocultar uma série só dá espessura zero à sua faixa, então cada path mantém a mesma estrutura de comandos.
Treemap
Um layout squarified que você explora em profundidade. Trocar a métrica desliza cada célula para sua nova caixa, e clicar em um grupo traz seus filhos.
Histograma ao Vivo
Amostras chegam de quatro distribuições. Os bins são recontados a cada mudança, uma curva normal ajustada segue a média, e um controle define o número de bins.
Prancheta de Desenho
Eventos de ponteiro desenham polilinhas. list() renderiza uma por traço, e o traço em andamento cresce a cada update().
Botão Giratório
Um controle deslizante personalizado: o ângulo do ponteiro define o valor, as setas do teclado o ajustam, e pathLength="100" transforma o valor em um traço.
Roda de Cores
Escolha um matiz pelo ângulo e uma saturação pela distância. Noventa fatias, um gradiente radial e um disco escuro formam a roda.
Espirógrafo
Uma roda gira dentro de um anel enquanto uma caneta desenha seu percurso. Cada quadro alonga um traço e atualiza só o seu scope().
Bolas Quicando
Gravidade, paredes e colisões em um loop de requestAnimationFrame. Puxe para trás e solte para lançar uma bola.
Bolhas Pegajosas
Um desfoque e um filtro de matriz de cores fundem as bolhas. Um rastro de círculos segue o ponteiro.
Grafo de Forças
Os nós se repelem, as ligações puxam, e o layout esfria até parar. Arraste um nó, ou clique em um para criar um filho.
Seleção e Zoom
Selecione um intervalo na visão geral para dar zoom no gráfico acima. Um clipPath que segue a seleção colore o trecho.
Jogo da Velha
Jogue contra o computador. when() adiciona cada marca, e uma animação CSS no seu traço a desenha.
Texto Circular
Digite o texto de um emblema. textPath curva o texto ao redor de um círculo e textLength o ajusta a exatamente uma volta.
Roteamento
6Tabelas de rotas, correspondência, a rota ativa, camadas e loaders. nuclo-router é um pacote separado: npm install nuclo nuclo-router.
Um App com Rotas
Um app real com o próprio roteador, rodando no quadro: uma tabela de rotas, um outlet(), links simples, um estado pendente e um 404. Navegue por aí e depois use Voltar.
Rotas Aninhadas
Docs é um layout com rotas filhas. Um tópico renderiza em seu outlet() e links ./topic são resolvidos em relação à rota do layout. Digite nas notas e troque de tópico: o layout nunca é reconstruído.
Loaders de Rota
A página do post exporta um load() que roda antes de a página ser construída. Observe router.pending enquanto espera, e o estado de erro com Tentar de novo quando load() lança um erro no post com falha.
Camadas
O formulário de pedido abre a página do cliente como uma camada e aguarda seu resultado. O formulário não é re-renderizado, então suas notas sobrevivem. Salvar resolve o push; Cancelar ou Voltar o descarta.
Vários Roteadores e Carregamento
Dois roteadores, dois indicadores de carregamento. O layout da loja e sua seção têm funções load(): eles rodam em paralelo sob um só router.pending. A barra lateral tem um roteador próprio, criado mas nunca iniciado, com sua própria flag de carregamento atualizada a partir de onNavigate.
Correspondência de Padrões
Padrões estáticos, :param e *rest, e uma tabela de seções montada sob dois pais. Digite um caminho e observe match(), que resolve sem carregar nada.
Apps
15Programas maiores, em tela cheia, com seu código-fonte real organizado em abas: um desktop com janelas, uma grade de dados, um chat, jogos, editores e bibliotecas que gerenciam o próprio estado.
Construtor de Páginas
Escreva direto na página, arraste as alças para reordenar blocos ou movê-los para layouts, pressione / para inserir e clique com o botão direito para ações. Estilize layouts grid e flex, desfaça edições, pré-visualize em tamanho de celular e exporte HTML.
Passo a Passo de Algoritmos
O motor é JavaScript simples: generators que alteram um array e fazem yield após cada passo. O player chama next() e update(); as barras são um list() sobre os mesmos objetos, então uma troca move dois elementos.
Quadro Kanban
Um quadro de equipe: adicione tarefas, atribua-as a pessoas, edite-as em um diálogo, filtre por pessoa ou busca, arraste-as entre colunas e desfaça uma exclusão. Colunas e cartões são arrays simples dos mesmos objetos; cada movimento é um splice(). Linhas são associadas por identidade, então arrastar, ordenar, atribuir ou editar um cartão reutiliza seu elemento. A contagem de montagens na tela prova isso.
Inspetor three.js
Uma biblioteca que gerencia o próprio estado. O painel lê posições, cores e flags direto dos objetos three.js e grava as edições de volta neles. O loop de renderização chama update() uma vez por quadro; nada é espelhado.
Rolagem Infinita
Um feed sem fim: um fetch() falso e rápido gera cada página na hora em um único array simples. Só as linhas perto da viewport estão no DOM: o list() renderiza posts.slice(start, end) entre dois espaçadores, então a página continua leve com cem mil posts. Um sentinela no fim real pede a próxima página antes de entrar em vista.
Desktop
Um desktop funcional com Arquivos, Notas, Terminal, Calculadora, Timer, um quadro Kanban, Finanças e um Calendário. Crie e organize pastas, edite notas e use comandos de shell em um disco simulado compartilhado, salvo no seu navegador. Digite na Calculadora direto do teclado, clique em qualquer lugar do Terminal para focar sua linha de entrada, arraste cartões entre colunas no quadro, ou mantenha um livro-caixa na planilha de Finanças e veja seus gráficos se atualizarem — o livro-caixa vive no IndexedDB. As janelas mantêm seu estado enquanto você move, redimensiona e alterna entre apps; um timer em execução preenche a bandeja da barra de tarefas com into().
Grafo de Nós
Conecte números, texto e controles de alternância por meio de nós de matemática, comparação e If, e cada valor se atualiza enquanto você digita. Funções também são grafos: seus nós Input e Output são as portas de cada Call, e um Call pode nomear a própria função, então factorial e sum fazem chamadas recursivas com um If como condição de parada. O motor é JavaScript simples: cada nó é um generator que faz yield para pedir uma entrada, e um só loop os conduz a partir da própria pilha, então sum(50000) aninha cinquenta mil chamadas em cerca de um décimo de segundo sem tocar na pilha de chamadas do JavaScript. Um limite de passos interrompe uma recursão sem condição de parada. Arrastar grava x e y e atualiza só o escopo do canvas; a contagem de execuções mostra que mover um nó nunca executa o grafo.
Grade de Dados
Uma tabela de trabalho sobre 10.000 objetos de linha simples. Busca, filtro, ordenação e paginação são funções simples sobre o array, e o corpo da tabela é um list() sobre a página atual. Linhas são associadas por identidade, então ordenar move as linhas que permanecem na página, e uma linha editada é o mesmo objeto em todo lugar. A contagem de linhas construídas prova isso.
Chat
Um chat com três canais, cada um um objeto simples: seu histórico, cursor, digitação, rascunho e posição de rolagem, então alternar mantém cada canal exatamente como estava, e update("chat-sidebar") atualiza só os selos de não lidas. O histórico carrega para cima indefinidamente com unshift() e um scrollTop que cresce pela altura adicionada. Sua mensagem aparece antes de o servidor recebê-la, send() aplica as mudanças no mesmo objeto, e Tentar de novo, Editar, Excluir e reações nunca reconstroem sua linha. As mensagens renderizam código, negrito, links e @menções.
Painel ao Vivo
Cartões que se atualizam em ritmos diferentes, de 20 vezes por segundo até uma vez por segundo. Cada cartão é um scope(), e seu timer chama update() com o id desse cartão, então um tick avalia só aquele cartão. Cada valor dinâmico é contado na tela: troque para um update() simples e o relógio é avaliado cerca de cem vezes por segundo para mudar uma vez.
Editor de Pixels
A imagem é um único array simples de 1024 strings de cor, e cada célula lê sua cor dele. Um traço grava no array e chama update(); quando termina, o editor guarda uma cópia com slice(). Desfazer, refazer e cada passo do list() de histórico colocam um array mais antigo de volta: sem store, sem dados imutáveis.
Snake
Um loop de jogo é um timer que chama step() em objetos simples e depois update() uma vez por tick. A cobra é um list() dos seus objetos de célula, e a cada tick o objeto da cauda vira a nova cabeça, então um elemento se move e nenhum é construído: a contagem de segmentos construídos só sobe quando a cobra come. A comida surge com uma animação keyframes().
Sequenciador de Passos
Uma biblioteca que gerencia o próprio relógio. O Web Audio agenda cada nota com antecedência na própria linha do tempo, e o padrão é um array 2D simples de booleanos que a grade inverte e o agendador lê, então um clique é ouvido na próxima passagem. O cursor de reprodução atualiza só seu scope() quando o passo audível muda. O áudio começa no primeiro Play e fecha na limpeza da montagem, então sair do exemplo interrompe o som.
Seletor de Idioma
Cada rótulo é um valor estático, escrito como em um app de um só idioma, então update() nunca o lê de novo: cliques no carrinho atualizam só quantidades e totais. Trocar o idioma chama forceUpdate() nesta árvore, que executa o componente de novo e aplica as mudanças nos mesmos elementos, lang e dir inclusos. Moeda, plurais, datas e listas vêm do Intl, e o carrinho e um cupom digitado sobrevivem à troca.
Editor de Temas
Uma pequena biblioteca de componentes: createCss() nomeia os tokens e variants() constrói botões, selos, cartões, inputs, alertas e controles de alternância a partir deles. Os tokens são variáveis CSS, então cada classe compila uma vez. Cada controle altera um objeto de tema simples e chama update(), que reescreve o texto de um único elemento style.