Початок роботи

Прийшли з 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