Ibi NPM | npm.io

Interface-based instructions

A set of tools for working with code on interfaces-based. It is best to use together with tx-reflector.

npm i --save-dev ibi

Features

Create mocks by interface
"Code generation" on interfaces-based
Creating Regression Tests

Create mocks by interface

See tx-reflector configuration

npm i --save-dev ibi tx-reflector

import {createMockFactory} from 'ibi';
import {getRawInterfaces} from 'tx-reflector';

interface IProps {
	name: string
	type: string;
	checked: boolean;;
}

const mock = createMockFactory<IProps>({
	interfaces: getRawInterfaces<IProps>(),
});

mock(); // {name: "", type: "", checked: false};
mock({checked: true}); // {name: "", type: "", checked: true};

Code Generation

const factory: IDeclarationFactory = createDeclarationFactory<T>(
	args: string[],
	defaultHandle(...args) => void,
);

// Where
//   - <T> — Interface of the result-object
//   - args — Array of variable names, the first is a reference to the result-object, the second source-object

interface IDeclarationFactory {
	// Register rules for the `T`-interface
	register<T>(name: string, rules: IRules) => ((...args) => object);

	// Run all registered rules
	exec(names: string[], ...args) => void;
}

interface IRules {
	[propName: string]: true | (handle(...args) => void);
}

An example of creating a function for generating DOM-properties based on the input props.

import {createGenerator} from 'ibi';

// Source interface
interface IInputProps {
	name: string;
	value: string;
	disabled?: boolean;
	onInput: (evt: Event) => void;
}

// Result interface
interface IInputDOMAttrs extends IInputProps {
	'aria-disabled': boolean;
}

// Create a factory of declarations
const domAttrs = createDeclarationFactory<IInputDOMAttrs>(
	['attrs', 'srcProps', 'classNames', 'css'],
	(prop, value, attrs, srcProps) => { // Processing `true`
		(srcProps[prop] != null) && (attrs[prop] = srcProps[prop]);
	}
);

// Register the conversion function for `IInputProps`
const inputPropsToAttrs = domAttrs.register<IInputProps>('IInputProps', {
	name: true, // Transfer "as is"
	value: true,
	disabled(prop, value, attrs, srcProps, classNames, css) {
		// In this handler, except `disabled`,
		// define `aria-disabled` and into `classNames` add `css.isDisabled`.
		attrs[prop] = value;

		if (value) {
			attrs[`aria-${prop}`] = value + '';
			classNames.push(css.isDisabled);
		}
	},
	onInput(prop, value, attrs, srcProps) {
		// Add the listener only if not `disabled`
		attrs[prop] = srcProps.disabled ? null : value;
	},
});


// Somewhere in the code, for example React-like component
import css from './Input.css';

export default function InputComponent(props: IInputProps) {
	const attrs = {};
	const classNames = [css.input]; // базовый класс

	inputPropsToAttrs(attrs, props, classNames, css);
	// or domAttrs.exec(['IInputProps'], attrs, props, classNames, css);
	// or better still, if  use `tx-reflector`:
	//   domAttrs.exec(getComponentInterfaces<IInputProps>(this), attrs, props, classNames, css);

	return <input {...attrs} className={classNames.join(' ')}/>;
}