Comments 2
А теперь сравните с..
Создание внутреннего пакета компонентов $mol
Создание локального репозитория
mkdir acme
cd acme
git init
cd ..
Установка $mol
Не дурак, сам поставится.
Настройка Typescript
Привет, zero-config.
Добавление компонентов
Добавим композицию в файл acme/card/card.view.tree
:
$acme_card $mol_view
event * click? <=> click? null
attr * acme_card_enabled <= enabled true
sub /
<= Title $mol_view
sub /
<= title \
Добавим оформление в файл acme/card/card.view.css.ts
:
namespace $.$$ {
$mol_style_define( $acme_card, {
border: {
width: `2px`,
style: `dashed`,
color: `#0ebeff`,
radius: `20px`,
},
padding: [ `12px`, `24px`, ],
cursor: `none`,
'@': {
acme_card_enabled: {
true: {
cursor: `pointer`,
},
}
}
Title: {
font: {
size: `24px`,
weight: `bold`,
},
},
} )
}
Могли бы добавить и поведение в файл acme/card/card.view.ts
, но поведения у этого компонента нет.
Настройка сборки
Привет, zero-config.
Ну, можно сбилдить, чтобы убедиться, что нигде не накосячили, собрав бандл и прогнав тесты:
yarn mam acme/card
Публикация пакета
git remote set-url origin ...
git push
Версионирование
Дополнительно: документация и тесты
Добавим демонстрацию использования нашего компонента в файл acme/card/demo/demo.view.tree
:
$acme_card_demo $mol_example_small
title \Clickable card
sub /
<= Enabled $acme_card
title \Enabled Card
enabled true
click? <=> run? null
<= Disabled $acme_card
title \Disabled Card
enabled false
click? <=> run? null
Добавим к демонстрации поведение в файл acme/card/demo/demo.view.ts
:
namespace $.$$ {
export class $acme_card_demo extends $.$acme_card_demo {
run() {
alert( 'Run!' )
}
}
}
Скомпонуем приложение демонстрирующее все компоненты в файл acme/demo/demo.meta.tree
:
include \/mol/app/demo
include \/acme/card
Добавим точку входа в демо приложение в файл acme/demo/index.html
:
<!doctype html>
<html mol_view_root>
<body mol_view_root="$mol_app_demo">
<script src="web.js" charset="utf-8"></script>
Можем открыт его по ссылке http://localhost:9080/acme/demo/test.html, чтобы прогнать все тесты и потыкать в демки.
Подводя итоги
На выходе будет что-то типа такого:
Создание внутреннего пакета компонентов React — проще, чем кажется