Cheatography
https://cheatography.com
$mol Cheat Sheet.
Офицальный сайт $mol https://mol.hyoo.ru/.
Быстрый старт "Рабочее окружение": https://mol.hyoo.ru/#!section=docs/=yr3qrg_z2908a
$mol - это
Реактивный микромодульный веб фреймворк для разработки прогрессивных приложений. Очень простой, но весьма мощный. |
Ваша цель №1. Быстрый старт
1. Скачать и запустить $mol и плагины |
Вы увидите работу $mol и все его особенности. Посмотрите на проекты и файлы, которые установились. |
2. Создать проект My Hello World |
Следуйте инструкции по созданию проекта. Обращайте внимание на файлы, именна переменных и синтаксис, которые используются. Запустите в браузере! |
3. Опубликовать проект на GitHub Pages |
Добавьте 1 файл и несколько настроек в GitHub по инструкции. Опубликованный сайт за пару минут - это просто! |
Как скачать и запустить $mol?
Проект Hello World (/my/hello)
Запустите mam |
npm start |
Создайте папку /my (имя компании) |
/my |
Создай проект /hello (имя проекта) |
/my/hello |
Перейдите в браузере на страницу |
my -> hello |
Как запушить на GitHub Pages?
Создать файл в проект и настроить ключи |
/my/hello/.github/workflows/deploy.yml |
Настроить репозиторий GitHub |
|
Синтаксис *.view.tree
- |
remarks, ignored by code generation |
$ |
component name prefix, e.g $mol_button
|
/ |
array, optionally you can set type of array, e.g sub /number
|
* |
dictionary (string keys, any values) |
^ |
return value of the same property from super class |
\ |
raw string, e.g. message \Hello
|
@ |
localized string, e.g. message @ \Hello world
|
<= |
provides read-only property from owner to sub-componen |
=> |
provides read-only property from sub-componen to owner |
<=> |
fully replace sub component property by owner's one |
* ! |
property *
or !
- property takes ID as first argument, e.g. Task_row* $mol_view
|
? |
property + ?
- property can be changed by providing an additional optional argument, e.g. `value <=> name?val ` |
Реактивность состояния
@ $mol_mem |
декоратор используется для хранения и работы с единичным состоянием. |
@ $mol_mem_key |
декоратор для хранения и работы с коллекцией состояний. |
@ $mol_action |
декоратор для работы с асинхронным кодом |
|
|
index.html - точка входа в проект
<!doctype html> <!-- Disable quirks mode -->
<html mol_view_root> <!-- Reset root styles -->
<head>
<meta charset="utf-8" /> <!-- Force utf-8 encoding -->
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1"
/> <!-- Disable mobile browser auto zoom, $mol is adaptive -->
<meta name="mobile-web-app-capable" content="yes"> <!-- Fullscreen support -->
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body mol_view_root> <!-- Reset root styles -->
<div mol_view_root="$my_hello"></div> <!-- Autobind component to element on load -->
<script src="web.js"></script> <!-- Load autogenerated js bundle -->
</body>
</html>
|
index.view.tree - Шаблон страницы
$my_hello $mol_view
sub /
<= Name $mol_string
hint @ \Name
value? <=> name? \
<= message \
|
@ - это строка доступна для локализации
hello.view.ts Поведение страницы
namespace $.$$ {
export class $my_hello extends $.$my_hello {
message() {
const name = this.name()
return name && Hello, ${name}!
}
}
}
|
hello.test.ts - тестирование
namespace $.$$ {
$mol_test( {
'Generating greeting message'() {
const app = new $my_hello
$mol_assert_equal( app.message(), '' )
app.name( 'Jin' )
$mol_assert_equal( app.message(), 'Hello, Jin!' )
}
} )
}
|
hello.view.css
[my_hello] {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 0 0 1px var(--mol_theme_line);
}
[my_hello_name] {
flex-grow: 0;
margin: 1rem;
width: 14rem;
}
|
hello.locale=ru.json - переводы
{
"$my_hello_Name_hint": "Имя"
}
|
|
Created By
Metadata
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets