- Combina as vantagens de React, Solid e Svelte para construir componentes com um design JS/TS-first e sua própria linguagem de módulos
.ripple, formando um framework de UI type-safe
- Busca alto desempenho e eficiência de memória com variáveis/propriedades reativas usando o prefixo
$, templates semelhantes a JSX e renderização granular
- Oferece extensão para VS Code, Prettier e integração com TypeScript, além de incluir DX moderna com arrays/maps/sets reativos, efeitos baseados em
effect e decorators (@use)
- Atualmente está em alpha inicial e tem limitações como falta de suporte a SSR e tipagem incompleta, tendo sido aberto para experimentação de ideias e compartilhamento de feedback
- Com uma filosofia semelhante ao runtime baseado em signals do Svelte 5, é possível perceber a evolução dos frameworks de frontend ao experimentar uma abordagem JS/TS-first e uma sintaxe amigável para LLMs
What is Ripple?
- Ripple é um framework de UI TypeScript-first inspirado em React, Solid e Svelte, construído sobre uma linguagem superset própria que usa a extensão
.ripple
- Com uma sintaxe que combina bem com JSX, usa templates apenas dentro do corpo do componente e adota templates em estilo de instrução (statement) em vez de expressões de retorno (retorno JSX)
- O autor implementou essas ideias em formato experimental com base em sua experiência com Inferno, React Hooks, Lexical e Svelte 5
- No momento, está em estágio inicial de desenvolvimento, com muitos bugs e TODOs, e não é recomendado para produção
- O objetivo é compartilhar e incubar ideias, além de explorar a possibilidade de levar esses conceitos a outros frameworks
- É uma tentativa de validar a hipótese de que um design JS/TS-first oferece uma DX melhor tanto para pessoas quanto para LLMs
Features
- Reactive State Management: fornece reatividade para variáveis e propriedades de objeto com o prefixo
$, e valores derivados também podem ser escritos naturalmente como variáveis $
- Component-Based Architecture: declaração explícita de componentes com a palavra-chave
component, suporte a props/children e integração com templates no estilo JSX
- Performance: mira desempenho e eficiência de memória em nível de ponta da indústria com renderização granular (fine-grained)
- Tooling: integração com TypeScript, IntelliSense/diagnóstico/highlighting no VS Code e suporte a formatação com Prettier
- DX reforçada: filosofia JS/TS-first, sintaxe amigável para LLMs e estrutura SPA por padrão
Missing Features
- Sem SSR: por enquanto é voltado apenas para SPA, e SSR ainda não foi implementado
- Tipagem incompleta: a definição de tipos no codebase ainda é limitada e será aprimorada
Getting Started / Try Ripple
- É possível abrir o template básico no StackBlitz ou cloná-lo com
degit e executá-lo com o servidor de desenvolvimento do Vite
- Exemplo de comandos:
npx degit trueadm/ripple/templates/basic my-app → npm i → npm run dev
- Um playground online será adicionado futuramente, e já é possível fazer testes localmente pela pasta
playground do repositório
VSCode Extension
- Há uma extensão Ripple for VS Code, com suporte a highlight de sintaxe, diagnóstico em tempo real, integração com TS e autocompletar (IntelliSense) para arquivos
.ripple
- O projeto oferece links tanto para a versão publicada no marketplace quanto para o pacote
.vsix de instalação manual
Mounting your app
- Dá suporte a montar o componente raiz no entrypoint com
mount(App, { props, target })
- Oferece uma API simples para indicar o nó DOM em
target e injetar propriedades iniciais com props
Key Concepts
- Components
- Define componentes declarativos com assinatura parecida com função usando a palavra-chave
component, escrevendo diretamente o template estilo JSX dentro do corpo
- Suporta notação abreviada de propriedades (
{onClick}), spread ({...props}) e outras sintaxes familiares
- Reactive Variables
- Variáveis e propriedades com prefixo
$ têm reatividade automática, e incrementos/atribuições já disparam rerenderização
- O estado derivado pode ser declarado com uma notação intuitiva como
$double = $count * 2, permitindo derivações encadeadas
- Com
untrack, é possível bloquear a propagação da reatividade em trechos específicos, como durante a inicialização
- Variáveis reativas são proibidas no escopo global/no topo do módulo e devem ser criadas sempre em um contexto ativo de componente
- Transporting Reactivity
- Ao encapsular arrays e objetos, é possível transportar a reatividade além das fronteiras, permitindo composição e coexistência
- Recomenda-se o padrão em que uma factory function recebe valores
$, cria derivações/effect internamente e retorna valores $
- Reactive Arrays / Set / Map
RippleArray/Set/Map são coleções reativas que estendem as coleções padrão, e comprimento/tamanho só são reativos quando acessados por $length/$size- Os resultados dos métodos podem ser usados diretamente ou atribuídos a variáveis reativas, como em
$has, para uso no template
- Effects
effect(() => { ... }) declara efeitos colaterais executados quando os valores $ dos quais dependem mudam, com rastreamento automático
- Control flow
- Templates são permitidos apenas dentro do corpo do componente, e funções comuns/atribuições de variável não retornam JSX em si
- Dentro do template, é possível usar declaração de variáveis/chamadas de função/
debugger, com um fluxo de controle centrado em statements
- Literais de string devem ser escritos como
{ "…" }, adotando uma regra que os diferencia do código
- If / For / Try statements
- É possível usar
if/else dentro de blocos de template para construir um fluxo de controle legível
for...of permite renderizar coleções com repetição concisa, sem precisar de key prop- Blocos
try/catch permitem construir error boundaries (UI de fallback), com logging/reporting no catch e renderização de UI alternativa
- Props
- Props reativas usam o prefixo
$, e atributos DOM também precisam desse prefixo, como $class e $id, para terem atualização reativa
- Children
- Há um slot implícito de componente
$children, permitindo implementar composição com <$children />
- Também é possível declarar componentes de slot explícitos para obter mais legibilidade e controle
- Events
- Suporta uma API de eventos semelhante à do React (
onClick, onKeyDown, …Capture), com alguns eventos otimizados por delegação (delegate)
- Decorators
- A sintaxe de decorator
{@use fn} permite obter a referência real ao nó DOM e retornar hooks de mount/unmount
- Também suporta o padrão de passagem de valores reativos por funções inline/factories, além do envio para componentes compostos
- Styling
- CSS com escopo local ao componente pode ser escrito em um bloco
<style> de nível superior, oferecendo estilização encapsulada
- Context
- Com
createContext, é possível definir valores compartilhados entre níveis da árvore, permitindo get/set apenas dentro de componentes para maior previsibilidade
Playground
- Depois de clonar o repositório, é possível executar o playground local com
pnpm i && cd playground && pnpm dev
- Usando o plugin do Vite, fica fácil experimentar a sintaxe
.ripple em playground/src
Why it matters
- Elementos como JS/TS-first, templates em estilo statement e reatividade com prefixo
$ são um experimento que busca ao mesmo tempo uma estrutura de código amigável para LLMs e legibilidade/facilidade de análise estática
- A combinação de renderização granular, reatividade em coleções e hooks no DOM por decorators é uma tentativa de conciliar micro-otimização e DX
- Embora ainda esteja em alpha, o projeto cruza a validação do fluxo baseado em signals do Svelte 5 com a experiência de desenvolvimento do ecossistema React, oferecendo referências úteis para o design de frameworks de próxima geração
3 comentários
Parece bom, mas ao mesmo tempo não parece.
Dá bem forte a sensação de ser algo no estilo do Svelte.
No fim das contas, será que mais tarde não vai acabar indo para algo tipo ReactLike? kkk
Parece que surgiu uma tendência de todo mundo evitar frameworks novos porque há pouco material sobre eles no que a IA foi treinada.
Acho que o Svelte foi o último a entrar no bonde. Até o próprio Svelte, se você não escrever bem o prompt, fica insistindo em usar a sintaxe com
$em vez derune, o que complica.