feast-mailru-toolkit

feast-mailru-toolkit

Коннектор feast <-> Почта@Toolkit

Примеры использования

<!-- Feast Style -->
<toolkit:btn
    text="Click me!"
    remit:click="tap"
/>
 
<!-- Toolkit Style -->
<toolkit:btn><![CDATA[
    {
        'text': 'Click me!',
        'remit:click': 'tap'
    }
]]></toolkit:btn>

Доступ к блоку по идентификатор

К тулкитовому блоку можно обратится через объект ids. Для этого ему достаточно определить параметр id

<!-- Feast Style -->
<toolkit:b-input
    id="firstname"
    text="Click me!"
    name="firstname"
/>

export default feast.Block.extend(/** @lends UIAwesomBlock# */{
 
    didMount() {
        console.log(this.ids.firstname.getData()); // выведет даные блока
    }
 
});

TypeScript

import {Block} from 'feast';
import {Toolkit} from 'feast-mailru-toolkit/jsx';
 
export default class extends Block<null> {
    static blockName = 'app';
    static events = {
        'prompt': 'handlePrompt',
    };
    
    template() {
        return (
            <div>
                <Toolkit>
                    <Toolkit.Btn
                        text="Click me!"
                        remit-click="prompt"
                    />
                </Toolkit>
            </div>
        );
    }
 
    handlePrompt() {
        // ...
    }
}

TypeScript + Toolkit

• <Toolkit.Btn/>
• <Toolkit.BInput/>
• <Toolkit.BForm/>
• <Toolkit.BForm.Columns/>
• <Toolkit.BCellphone/>
• <Toolkit.BPassword/>
• <Toolkit.BSpinner/>

Добавление своего описания блока, например b-avatar -> <Toolkit.BAvatar/>

// 1. Создаём ./jsx/BAvatar/BAvatar.d.ts
export interface BAvatarProps {
    name: string;
    email: string;
    width?: number;
    height?: number;
}
 
 
// 2. Добавляем JSX описание в ./jsx.d.ts
import {BAvatarProps} from './jsx/BAvatar/BAvatar';
 
export interface IToolkit extends StatelessComponent<{}> {
    // ...
    BAvatar: StatelessComponent<BAvatar>;
}
 
 
// 3. Создаём трасформатор `props` в `params`: ./jsx/BAvatar/BAvatar.js
define(function () {
    // Export
    return ['b-avatar', (props, children) => props];
});
 
 
// 4. Подключаем в /jsx.js (в самом конце файла)
// ...
Toolkit.register('BAvatar', require('./jsx/BAvatar/BAvatar'));
 
 
// Готово! Теперь можно использовать:
<Toolkit.BAvatar />

---

Установка и Конфигурация

Сборка JS и шиблонов

npm i --save-dev grunt-autogen-bemdecl grunt-mrg-enb-autoconf toolkit-bem grunt-fest

Grunt

grunt.initConfig({
    'autogen-bemdecl': {
        'mailru-toolkit': {
            mask: ['<toolkit:([a-z0-9-]+)', '(["\'])(b-[a-z0-9-]+)\\1'],
            source: ['./app/blocks/**/*.html'],
            output: './app/.bem/mailru-toolkit.bemdecl.js'
        }
    },
 
    'mrg-enb-autoconf': {
        'mailru-toolkit': {
            name: 'mailru-toolkit',
            bemdecl: './app/.bem/mailru-toolkit.bemdecl.js'
        },
        options: {
            basePath: './app/',
            layers: ['./app/packages/toolkit']
        }
    },
 
    'fest': {
        'mailru-toolkit': {
            options: {
                template: (data) => grunt.template.process(
                    '"use strict"\n var __window = Function("return this")(); __window.fest = {};' +
                    '__window.fest[<%= JSON.stringify(name) %>] = ' +
                    '__window[<%= JSON.stringify(name) %>] = <%= contents %> ;',
                    {data}
                )
            },
            files: [
                {
                    expand: true,
                    cwd: './app/bundles/mailru-toolkit/',
                    src: '*.lego.xml',
                    dest: './app/bundles/mailru-toolkit/'
                }
            ]
        }
    }
});
 
grunt.registerTask('toolkit', ['autogen-bemdecl', 'mrg-enb-autoconf', 'fest']);

Require

require.config({
    deps: ['feast-mailru-toolkit'],
    paths: {
        'mailru-toolkit-bundle': './app/bundles/mailru-toolkit/mailru-toolkit',
        'mailru-toolkit-lego-bundle': './app/bundles/mailru-toolkit/mailru-toolkit.lego'
    }
});

ВАЖНО: feast-mailru-toolkit — загружает mailru-toolkit-bundle и mailru-toolkit-lego-bundle только после встречи первого <toolkit:block-name/>, т.е. коннектор работает в ленивом режиме.

Если нужна синхронная инициализация, принужительно добавьте бандлы в глобальный deps:

require.config({
    deps: [
        'feast-mailru-toolkit',
        'mailru-toolkit-bundle',
        'mailru-toolkit-lego-bundle'
    ]
});

---

Разработка и публикация

• npm install
• ...разработка...
• npm publish — запускает npm run build на prepublish, потом jam publish и npm run clean на postpublish.

---

Todo

• ESLint