Vindo de React ou Vue e nada faz sentido? Leia primeiro Modelo mental: cinco minutos sobre para onde foram computed, watch, os hooks de ciclo de vida e o carregamento de dados.
O $mol é um framework de interface reativo: você descreve o que a interface é, e o framework descobre como e quando atualizá-la. Sem DOM virtual, sem assinaturas manuais, sem useEffect. Você escreve os componentes como uma árvore; o $mol renderiza apenas o que está visível e recalcula apenas o que de fato mudou.Um componente tem três arquivos:name.view.tree — o layout declarativo (uma linguagem de árvore compacta)name.view.ts — o comportamento (classes TypeScript simples)name.view.css.ts — os estilos tipados (verificados pelo compilador)Essa separação é a ideia inteira: o layout permanece legível, a lógica permanece testável, os estilos permanecem seguros em tipos.Nenhum dos três é obrigatório por si só. A árvore é uma abreviação para uma estrutura que você também pode escrever à mão: De TypeScript para view.tree constrói um mesmo componente das duas formas e mostra o código em que a árvore compila.
Você quer um aplicativo pequeno que continue pequeno à medida que cresce — o runtime é compacto e a renderização é virtualizada por padrão.Você gosta de tipos em todo lugar — até os estilos são verificados pelo TypeScript.Você está cansado de conectar a reatividade na mão — o estado no $mol é automaticamente reativo, como uma planilha.
Um contador, por inteiro:1$my_counter$mol_view2 sub /3<= Count $mol_view4 sub /<= count \5<= Increment $mol_button6 click?<=> increment?7 sub /<= label \+1namespace $.$${2export class $my_counterextends$.$my_counter{3@ $mol_memcount(){return 0}4@ $mol_actionincrement(){this.count(this.count()+1)}5}6}count é reativo: tudo o que o lê é renderizado novamente de forma automática quando ele muda. Não há setState, nem array de dependências, nem store para registrar.
