@ibyar/cli v2.5.0

Ibyar CLI

The Ibyar/Aurora CLI tool. ( dev - prerelease)

Install

npm i -g --save @ibyar/cli

yarn global add @ibyar/cli

How to use

npx ibyar --build --watch --verbose

it load the configuration from a tsconfig.json file

Usage: ibyar [options]

Examples:
    ibyar
    ibyar -b				# run build
    ibyar -b -w				# run build and watch
    ibyar -b -v -w			# run build, show tsc logs and watch
    ibyar -v				# show cli version
    ibyar --help

Options:
    -b      --build             compile the project source code with ibyar transformers
	                            and generate '.d.ts' files with created Custom HTML Element definitions.
    -w		--watch				compile and watch source files, used with --build
    -h      --help              print help message
    -v      --version           output the version number

Integration with Webpack

add @ibyar/cli as loader

module.exports = {
  entry: './src/index.ts',
    module: {
      exprContextCritical: false,
        rules: [
          {
            test: /\.tsx?$/,
            use: ['@ibyar/cli',],
            exclude: /node_modules/,
          }
        ]
      }
};

use ts-loader

// 1. import default from the plugin module
import {
	beforeCompileDirectiveOptions, beforeCompileComponentOptions,
	afterDeclarationsCompileComponentOptions,
	afterDeclarationsCompileDirectiveOptions,
	scanDirectivesOnceAsTransformer,
} from '@ibyar/cli';


// 3. add getCustomTransformer method to the loader config
var config = {
    ...
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    ... // other loader's options
                    getCustomTransformers: () => ({
						before: [
							scanDirectivesOnceAsTransformer(),
							beforeCompileDirectiveOptions,
							beforeCompileComponentOptions,
						],
						after: [],
						afterDeclarations: [
							afterDeclarationsCompileComponentOptions,
							afterDeclarationsCompileDirectiveOptions,
						],
					})
                }
            }
        ]
    }
    ...
};

Integration with Rollup

import typescript from '@rollup/plugin-typescript';
import {
	beforeCompileDirectiveOptions, beforeCompileComponentOptions,
	afterDeclarationsCompileComponentOptions,
	afterDeclarationsCompileDirectiveOptions,
	scanDirectivesOnceAsTransformer,
} from '@ibyar/cli';

export default = {
	...,
	plugins: [
		typescript({
			transformers: {
				before: [
					{ type: 'program', factory: scanDirectivesOnceAsTransformer() },
					{ type: 'program', factory: beforeCompileDirectiveOptions },
					{ type: 'program', factory: beforeCompileComponentOptions },
				],
				after: [],
				afterDeclarations: [
					{ type: 'program', factory: afterDeclarationsCompileComponentOptions },
					{ type: 'program', factory: afterDeclarationsCompileDirectiveOptions },
				],
			}
		}),
	],
};

The Ibyar CLI has a typescript transformer to generate a definitions for you component

import { Component, EventEmitter, Input, Output } from '@ibyar/aurora';


@Component({
	selector: 'person-edit',
	template: `<form #form>
					<input if="show" type="text" [(value)]="person.name" />
					<input type="number" [(value)]="person.age" />
					<input type="button" (click)="printPerson()" value="Save" />
				</form>`
})
export class PersonEdit {

	@Input()
	person: Person;

	@Input()
	show = true;

	@Output()
	save = new EventEmitter<Person>();

	printPerson() {
		console.log(this.person);
		this.save.emit(this.person);
	}
}

will generate the view class and add it to the definition files

import { EventEmitter } from '@ibyar/aurora';

export declare class PersonEdit {
    static readonly HTMLPersonEditElement: ConstructorOfView<HTMLPersonEditElement>;
    person: Person;
    show: boolean;
    save: EventEmitter<Person>;
    printPerson(): void;
}

import { BaseComponent, ConstructorOfView } from "@ibyar/core";

declare class HTMLPersonEditElement extends HTMLElement {
    public static observedAttributes: "person" | "show" | "onSave"[];
    public person: Person;
    public show: true;
    public onSave: EventEmitter<Person>;
}

declare interface HTMLPersonEditElement extends BaseComponent<PersonEdit> {}

declare global {
    interface HTMLElementTagNameMap {
        ["person-edit"]: HTMLPersonEditElement;
    }
}