Primeiros passos

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.Esta página leva você de uma pasta vazia até um app $mol reativo e em execução. Deve levar cerca de quinze minutos. Cada trecho abaixo é código real e funcional — copie-o como está.Você vai escrever o componente em TypeScript comum. O $mol também tem um formato mais curto para descrever componentes, o view.tree, que você encontra na próxima página. Nada aqui precisa dele: um componente $mol é uma classe comum de qualquer jeito.

O que você precisa

Node.js 18+ e git. É toda a lista.Você não instala uma CLI global nem gera código boilerplate que terá de entender depois. Os apps $mol vivem dentro do workspace MAM, que já sabe como construí-los e servi-los.

1. Obter o workspace

O MAM é a ferramenta de build e o registro de módulos do $mol. Clone-o e instale uma vez.1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start inicia o servidor de desenvolvimento em http://localhost:9080/. Ele observa seus arquivos e reconstrói automaticamente — deixe-o rodando em seu próprio terminal.

2. Criar um módulo

Um app $mol é apenas uma pasta. Escolha um namespace (o seu, por exemplo my) e um nome (hello).1mkdir -p my/helloUma regra para lembrar: underscores em um nome de componente são separadores de pastas. $my_hello fica em my/hello/, $my_hello_form ficaria em my/hello/form/. Nomes de pastas de módulos nunca contêm underscore.Agora adicione dois arquivos dentro de my/hello/.

index.html — o ponto de entrada

1<!doctype html>2<html mol_view_root>3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 </head>7 <body mol_view_root>8 <div mol_view_root="$my_hello"></div>9 <script src="web.js"></script>10 </body>11</html>O atributo mol_view_root="$my_hello" monta seu componente quando a página carrega.

hello.view.ts — o componente

1namespace $ {2 3 export class $my_hello extends $mol_page {4 5 title() {6 return 'Greeting'7 }8 9 body() {10 return [ this.Name(), this.Message() ]11 }12 13 @ $mol_mem14 Name() {15 const obj = new this.$.$mol_string16 obj.hint = () => 'Enter your name'17 obj.value = ( next?: string ) => this.name( next )18 return obj19 }20 21 @ $mol_mem22 name( next?: string ) {23 return next ?? ''24 }25 26 @ $mol_mem27 Message() {28 const obj = new this.$.$mol_view29 obj.sub = () => [ this.greeting() ]30 return obj31 }32 33 greeting() {34 const name = this.name()35 return name ? `Hello, ${ name }!` : 'Please enter your name'36 }37 38 }39 40}Editar esta página no GitHubIsto foi útil?SimNãoAnteriorModelo mental PróximoDe TypeScript para view.treeNesta páginaO que você precisa 1. Obter o workspace 2. Criar um módulo index.html — o ponto de entrada hello.view.ts — o componente 3. Executar 4. Adicionar um segundo valor reativo 5. Verificar seu build Você construiu um app $mol