TypeScript icon, indicating that this package has built-in type declarations

1.2.2 • Public • Published


NPM Version NPM Downloads LICENSE lerna GitHub contributors Build Aurora + Example

Ibyar Aurora, is a web framework, that can create and define a Web Component standards ('custom elements', 'Shadow DOM' and 'HTML Templates'), that compatible with other frameworks, using Typescript.

This framework build with-in a embedded JavaScript Engine @ibyar/expressions to execute Template syntax and attributes binding.


npm i --save @ibyar/aurora
yarn add @ibyar/aurora


README Description NPM, PKG, SRC
@ibyar/aurora a central package to manage dependance only NPM Version PKG SRC
@ibyar/core create components, render elements
bind attributes and handling events
@ibyar/expressions a JavaScript engine, parser and evaluator
build by the guid of V8 JavaScript engine.
Introduce a reactive scope concept to
detect changes for scope variables,
subscriptions based on a wave effect like concept,
(simple what is subscribed will only be reevaluated again).
Follow ESTree structural to generate an ast object.
@ibyar/elements parse HTML Template,
has tag names, properties for each tag
@ibyar/pipes implement all supported pipes NPM Version PKG SRC
@ibyar/directives implement all supported directives NPM Version PKG SRC
@ibyar/platform utility package for and plural stuff, json patch NPM Version PKG SRC
@ibyar/cli ibyar cli package NPM Version PKG SRC
@ibyar/decorators ibyar decorators package NPM Version PKG SRC
tslib Runtime library for TypeScript helpers. NPM Version PKG SRC

'HTML Template' Features

Support HTML Template
Parsing Attributes
One Way Data Binding
Two Way Data Binding
Event Binding
Template Parser
Template Syntax
Template Reference Variables
Template HTML File fetch or embedded
camelCase Property Naming
lowercase for root element Property Naming

Library Features

  • [x] ES Module
  • [ ] JavaScript API
  • [ ] Dependency Injection
  • [x] Component
  • [x] Directives (Attribute and Structural Directives)
  • [x] Pipes
  • [x] Lifecycle
  • [x] Signals
  • [x] @Input
  • [x] @Output
  • [x] @View
  • [x] @HostListener [Supported by Component and Attribute directive].
  • [x] @HostBinding [Supported by Component and Attribute directive].
  • [x] @ViewChild
  • [ ] @ViewChildren
  • [ ] XSS (cross-site-scripting)

Built-in Directive

Structure Directives

  • [x] *if
  • [x] *for is same as ( *forOf )
  • [x] *forIn
  • [x] *forAwait
  • [x] *switch and (*case, *default)

-- see directive syntax structural-directive-syntax-reference

Attributes Directives

  • [x] class [support Single class binding, Multi-class binding].
  • [x] style [support Single style binding, Multi-style binding]. the Single style binding with units not yet supported.

Built-in Pipes ( Pipeline operator '|>' )

  • [x] async
  • [x] json
  • [x] lowercase
  • [x] uppercase
  • [x] titlecase
  • [x] keyvalue
  • [x] slice
  • [ ] date
  • [ ] currency
  • [ ] number
  • [ ] percent
  • [ ] i18nPlural
  • [ ] i18nSelect

Web Component standards

Custom Elements standards

Shadow DOM standards

HTML Templates Element standards

How to use:

HTML -- template parser example

in a polyfills.ts file

  • use aurora zone for detect changes
import 'zone.js';
import { bootstrapZone } from '@ibyar/aurora';
  • or use manual Zone, if you don't like to use Zone.js all the events like rxjs observables, setTimeout and fetch, etc.. can't be detected.
import { bootstrapZone } from '@ibyar/aurora';
  • or use proxy Zone, if you don't like to use Zone.js but still like to have full change detection for your application. it my be hard in debugging your application.
import { bootstrapZone } from '@ibyar/aurora';
  • you still can control the zone peer component while define your component by add zone t one of the zone types 'aurora', 'manual' and 'proxy'. if aurora is selected, you need to import the Zone.js package.

  • the zone property in the @Component({zone: 'manual'}) is optional and will get the default value from bootstrapZone()

import { Component, HostListener, isModel, OnDestroy, OnInit } from '@ibyar/aurora';
import { interval, Subscription } from 'rxjs';

	selector: 'pipe-app',
	zone: 'AURORA',
	template: `
	<style>.bs-color{color: var({{currentColor}});}</style>
	<div *for="const color of colors">
		color: {{color}} <span *if="color === currentColor" class="bs-color"> Current Color ='{{currentColor}}'</span>
    <table class="table">
                <th class="bs-color" scope="col">pipe</th>
                <th class="bs-color" scope="col">expression</th>
                <th class="bs-color" scope="col">view</th>
                <td>observable |> async</td>
                <td>{{observable |> async}}</td>
                <td>text |> lowercase</td>
                <td>{{text |> lowercase}}</td>
                <td>text |> titlecase</td>
                <td>{{text |> titlecase}}</td>
                <td>text |> uppercase</td>
                <td>{{text |> uppercase}}</td>
                <td>obj |> json</td>
                <td>{{obj |> json}}</td>
                <td>json <small>pre element</small></td>
                <td>obj |> json:undefined:2</td>
                    <pre>{{obj |> json:undefined:2}}</pre>
                <td>keyValueObject |> keyvalue</td>
                <td>{{keyValueObject |> keyvalue |> json}}</td>
                <td>keyValueObject |> keyvalue</td>
                <td>{{keyValueObject |> keyvalue |> json}}</td>
                <td>keyValueMap |> keyvalue</td>
                <td>{{keyValueMap |> keyvalue |> json}}</td>
                <td>array |> slice:1:3</td>
                <td>{{array |> slice:1:3}}</td>
                <td>slice(array, 1, 3)</td>
                <td>{{slice(array, 1, 3)}}</td>
                <td>call windows method directly</td>
                <td>3345.54645 |> Math.trunc</td>
                <td>{{3345.54645 |> Math.trunc}}</td>
export class PipeAppComponent implements OnInit, OnDestroy {

	text = 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups';
	obj = {
		a: [1, 2, 3],
		b: 'property b',
		c: {
			d: [],
			e: 4,
			f: [{ 5: 'g' }]

	keyValueObject = {
		1: 100,
		a: 'A00'
	keyValueArray = [200, 300];
	keyValueMap = new Map<number, number | string>([[1, 400], [2, 500], [3, 'B200']]);

	observable = interval(1000);

	array = ['a', 'b', 'c', 'd'];

	colors = [

	currentColor = this.colors[0];

	subscription: Subscription;

	onInit() {
		let index = 0;
		this.subscription = this.observable.subscribe(() => {
			if (index === this.colors.length) {
				index = 0;
			this.currentColor = this.colors[index++];
			if (isModel(this)) {

	onCurrentColorChange() {

	onDestroy() {


in index.html add:

        <script type="module" src="path-to-main-file/index.js"></script>

how to build

git clone https://github.com/ibyar/aurora.git
cd aurora
yarn install
yarn build

For NPM 7(workshop support):

git clone https://github.com/ibyar/aurora.git
cd aurora
npm install
npm run build

see test app for full example

WebPack bundle

see test app for full bundles/webpack

see test app for full bundles/rollup

Package Sidebar


npm i @ibyar/aurora

Weekly Downloads






Unpacked Size

22.5 kB

Total Files


Last publish


  • salem.ebo