README
Aurora
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.
Install
npm i --save @ibyar/aurora
yarn add @ibyar/aurora
'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 | | Fragment | ✓ | | camelCase Property Naming | ✓ | | lowercase for root element Property Naming | ✓ |
Library Features
- ES Module
- JavaScript API
- Dependency Injection
- Component
- Directives
- Pipes
- Services
- Lifecycle
- @Input
- @Output
- @View
- @HostListener
- @ViewChild
- @HostBinding
- @ViewChildren
- @SelfSkip
- @Optional
- Annotation/Decorators reflect-metadata
- XSS (cross-site-scripting)
Built-in Directive
Structure Directives
- *if
- *for is same as ( *forOf )
- *forIn
- *forAwait
- *switch and (*case, *default)
-- see directive syntax structural-directive-syntax-reference
Attributes Directives
- class
- style
Built-in Pipes ( Pipeline operator '|>' )
- async
- json
- lowercase
- uppercase
- titlecase
- keyvalue
- slice
- date
- currency
- number
- percent
- i18nPlural
- i18nSelect
Web Component standards
Custom Elements standards
- Reflecting Properties to Attributes
- Observing Changes to Attributes
- Element Upgrades
- Styling a Custom Element
- Extending native HTML elements
- Extending a Custom Element
- Two Component On Same Model Class
- Two Component Share Same Model Instance
Shadow DOM standards
HTML Templates Element standards
- Load template by ID from document
- As Normal Custom Element
- As Shadow DOM Element
How to use:
HTML -- template parser example
import { Component, HostListener, isModel, OnDestroy, OnInit } from '@ibyar/aurora';
import { interval, Subscription } from 'rxjs';
@Component({
selector: 'pipe-app',
template: `
<style>.bs-color{color: var({{currentColor}});}</style>
<div *for="let color of colors">
color: {{color}} <span *if="color === currentColor"> Current Color ='{{currentColor}}'</span>
</div>
<table class="table">
<thead>
<tr>
<th class="bs-color" scope="col">pipe</th>
<th class="bs-color" scope="col">expression</th>
<th class="bs-color" scope="col">view</th>
</tr>
</thead>
<tbody>
<tr>
<td>async</td>
<td>observable |> async</td>
<td>{{observable |> async}}</td>
</tr>
<tr>
<td>*</td>
<td>text</td>
<td>{{text}}</td>
</tr>
<tr>
<td>lowercase</td>
<td>text |> lowercase</td>
<td>{{text |> lowercase}}</td>
</tr>
<tr>
<td>titlecase</td>
<td>text |> titlecase</td>
<td>{{text |> titlecase}}</td>
</tr>
<tr>
<td>uppercase</td>
<td>text |> uppercase</td>
<td>{{text |> uppercase}}</td>
</tr>
<tr>
<td>json</td>
<td>obj |> json</td>
<td>{{obj |> json}}</td>
</tr>
<tr>
<td>json <small>pre element</small></td>
<td>obj |> json:undefined:2</td>
<td>
<pre>{{obj |> json:undefined:2}}</pre>
</td>
</tr>
<tr>
<td>keyvalue</td>
<td>keyValueObject |> keyvalue</td>
<td>{{keyValueObject |> keyvalue |> json}}</td>
</tr>
<tr>
<td>keyvalue</td>
<td>keyValueObject |> keyvalue</td>
<td>{{keyValueObject |> keyvalue |> json}}</td>
</tr>
<tr>
<td>keyvalue</td>
<td>keyValueMap |> keyvalue</td>
<td>{{keyValueMap |> keyvalue |> json}}</td>
</tr>
<tr>
<td>slice</td>
<td>array |> slice:1:3</td>
<td>{{array |> slice:1:3}}</td>
</tr>
<tr>
<td>slice</td>
<td>slice(array, 1, 3)</td>
<td>{{slice(array, 1, 3)}}</td>
</tr>
<tr>
<td>call windows method directly</td>
<td>3345.54645 |> Math.trunc</td>
<td>{{3345.54645 |> Math.trunc}}</td>
</tr>
</tbody>
</table>
`
})
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 = [
'--bs-blue',
'--bs-indigo',
'--bs-purple',
'--bs-pink',
'--bs-red',
'--bs-orange',
'--bs-yellow',
'--bs-green',
'--bs-teal',
'--bs-cyan',
'--bs-white',
'--bs-gray',
'--bs-gray-dark'
];
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)) {
this.emitChangeModel('currentColor');
}
console.log(this.currentColor);
});
}
@HostListener('currentColor')
onCurrentColorChange() {
console.log(this.currentColor);
}
onDestroy() {
this.subscription.unsubscribe();
}
}
in index.html add:
<body>
<pipe-app></pipe-app>
<script type="module" src="path-to-main-file/index.js"></script>
</body>
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
Dependencies
- @ibyar/auroraa central package to manage dependance only
- @ibyar/corecreate components, render elements, bind attributes, handle events
- @ibyar/pipesimplement all supported pipes
- @ibyar/directivesimplement all supported directives
- @ibyar/expressionsa JavaScript engine build by the guid of V8 JavaScript engine follow, ESTree for generate ast object.
- @ibyar/elementsparse html and extract bind expression and structural directive
- reflect-metadata
- tslib