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 de que todo app Nuclo é feito.
Contador
Mute 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 parâmetro de valor é lido uma vez, quando o componente é construído. Um parâmetro de função é lido 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. Um interruptor clona os objetos a cada update para mostrar o custo de quebrar a identidade.
Dados Aninhados
Um time com membros com tarefas: 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 sua limpeza. Desmontar executa a limpeza, então a contagem pausa até o timer montar 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 minúsculo.
Formulários
3Validação como funções simples sobre estado simples, campos tocados, etapas e linhas dinâmicas.
Validação de Campos
Regras como uma função sobre estado simples, erros exibidos depois que um campo foi tocado, 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 toca os campos da etapa e só prossegue quando eles passam. 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
Rects 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 rects 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 de 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 a 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 forma.
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 e uma caneta a traça. 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 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 ele lança no post quebrado.
Camadas
O formulário de pedido empurra 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 load()s: 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 atrás de 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 mutam 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 mexerem — 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 interruptores 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 recorrem com um If como saída. 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. Só um orçamento de passos interrompe uma recursão sem saída. Arrastar grava x e y e atualiza só o escopo do canvas; a contagem de execuções mostra que o grafo nunca roda por um movimento.
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 para 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 interruptores a partir deles. Os tokens são variáveis CSS, então cada classe compila uma vez. Cada controle grava um objeto de tema simples e chama update(), que reescreve o texto de um único elemento style.