$mol Cheat Sheet. Офицальный сайт $mol https://mol.hyoo.ru/. Быстрый старт "Рабочее окружение": https://mol.hyoo.ru/#!section=docs/=yr3qrg_z2908a
|
1. Скачать и запустить $mol и плагины
|
Вы увидите работу $mol и все его особенности. Посмотрите на проекты и файлы, которые установились.
|
|
2. Создать проект My Hello World
|
Следуйте инструкции по созданию проекта. Обращайте внимание на файлы, именна переменных и синтаксис, которые используются. Запустите в браузере!
|
|
3. Опубликовать проект на GitHub Pages
|
Добавьте 1 файл и несколько настроек в GitHub по инструкции. Опубликованный сайт за пару минут - это просто!
|
git clone https://github.com/hyoo-ru/mam.git ./mam && cd mam
npm install && npm start|
Запустите mam
|
npm start
|
|
Создайте папку /my (имя компании)
|
/my
|
|
Создай проект /hello (имя проекта)
|
/my/hello
|
|
Перейдите в браузере на страницу
|
my -> hello
|
|
Создать файл в проект и настроить ключи
|
/my/hello/.github/workflows/deploy.yml
|
|
Настроить репозиторий GitHub
|
|
-
|
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
|
декоратор для работы с асинхронным кодом
|
<!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>$my_hello $mol_view
sub /
<= Name $mol_string
hint @ \Name
value? <=> name? \
<= message \namespace $.$$ {
export class $my_hello extends $.$my_hello {
message() {
const name = this.name()
return name && `Hello, ${name}!`
}
}
}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!' )
}
} )
}
[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;
}
{
"$my_hello_Name_hint": "Имя"
}No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.