Создание внутреннего пакета компонентов React — проще, чем кажется / Комментарии / Хабр

nin-jin 26 сен 2023 в 17:26

А теперь сравните с..

Создание внутреннего пакета компонентов $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, чтобы прогнать все тесты и потыкать в демки.

Подводя итоги

На выходе будет что-то типа такого: