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