Быстрый старт

Пришли из React или Vue и ничего не складывается? Прочтите сначала

Ментальную модель: пять минут о том, куда делись computed, watch, хуки жизненного цикла и загрузка данных.Эта страница проведёт вас от пустой папки до работающего реактивного $mol-приложения. Займёт около пятнадцати минут. Каждый фрагмент ниже — настоящий рабочий код, копируйте как есть.Компонент вы напишете на обычном TypeScript. У $mol есть и более короткий формат описания компонентов, view.tree, с ним вы познакомитесь на следующей странице. Здесь он не нужен: компонент $mol в любом случае остаётся обычным классом.

Что понадобится

Node.js 18+ и git. Это весь список.Вам не нужно устанавливать глобальный CLI или генерировать шаблонный код, в котором потом придётся разбираться. $mol-приложения живут внутри воркспейса MAM, который уже умеет их собирать и раздавать.

1. Получите воркспейс

MAM — это инструмент сборки и реестр модулей для $mol. Склонируйте его и установите зависимости один раз:1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start запускает дев-сервер на http://localhost:9080/. Он следит за файлами и пересобирает автоматически — оставьте его работать в отдельном терминале.

2. Создайте модуль

$mol-приложение — это просто папка. Выберите пространство имён (своё, например my) и имя (hello):1mkdir -p my/helloОдно правило, которое стоит запомнить: подчёркивания в имени компонента — это разделители папок. $my_hello живёт в my/hello/, а $my_hello_form жил бы в my/hello/form/. Имена папок-модулей никогда не содержат подчёркивания.Теперь добавьте два файла внутрь my/hello/.

index.html — точка входа

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>Атрибут mol_view_root="$my_hello" монтирует ваш компонент при загрузке страницы.

hello.view.ts — компонент

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}Редактировать эту страницу на GitHubБыло полезно?ДаНетНазадМентальная модель ВперёдОт TypeScript к view.treeНа этой страницеЧто понадобится 1. Получите воркспейс 2. Создайте модуль index.html — точка входа hello.view.ts — компонент 3. Запустите 4. Добавьте второе реактивное значение 5. Проверьте сборку Вы собрали $mol-приложение