Numeric Production Mechanism

    @ibyar/aurora
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.3 • Public • Published

    Aurora

    NPM Version NPM Downloads LICENSE npm-dependencies lerna GitHub contributors

    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.

    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

    • [x] ES Module
    • [ ] JavaScript API
    • [ ] Dependency Injection
    • [x] Component
    • [x] Directives
    • [x] Pipes
    • [ ] Services
    • [x] Lifecycle
    • [x] @Input
    • [x] @Output
    • [x] @View
    • [x] @HostListener
    • [x] @ViewChild
    • [ ] @HostBinding
    • [ ] @ViewChildren
    • [ ] @SelfSkip
    • [ ] @Optional
    • [x] Annotation/Decorators reflect-metadata
    • [ ] XSS (cross-site-scripting)

    Built-in Directive

    Structure Directives

    • [x] *if
    • [x] *for
    • [x] *for in
    • [x] *for of
    • [x] *for await
    • [x] *while
    • [x] *switch

    Attributes Directives

    • [x] *class
    • [x] *styles

    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

    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

    Install

    npm i @ibyar/aurora

    DownloadsWeekly Downloads

    20

    Version

    0.3.3

    License

    MIT

    Unpacked Size

    13.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • salem.ebo