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.

• Template can be a JSX template or HTML template.

Render Once, Update Properties On Change.
No need for Virtual Dom.

Install

npm i --save @aurorats/core

yarn add @aurorats/core

in your tsconfig.json add

{
    "extends": "@aurorats/core/tsconfig.compilerOption.json",
}

in your index.ts file add type reference for @aurorats/types

/// <reference types="@aurorats/types" />

see test for more help test

'HTML Template' and 'JSX' Features

| Support | HTML Template| JSX | | -------------------- | - | - | | Parsing Attributes | ✓ | ✓ | | One Way Data Binding | ✓ | ✓ | | Two Way Data Binding | ✓ | ✓ | | Event Binding | ✓ | ✓ | | Template Parser | ✓ | ✓ | | Template Syntax | ✓ | ✓ | | Template Reference Variables | ✓ | ✓ | | Template HTML File | fetch | no need | | JSX Factory | no need | ✓ | | Fragment | ✓ | ✓ | | camelCase Property Naming | ✓ | ✓ | | lowercase for root element Property Naming | ✓ | ✓ |

Library Features

Features	Aurora
ES Module	✓
JavaScript API	TO:DO
Dependency Injection	TO:DO
Component	✓
Directives	✓
Pipes	TO:DO
Services	TO:DO
Lifecycle	✓
@Input	✓
@Output	✓
@View	✓
@HostListener	✓
@ViewChild	✓
@HostBinding	TO:DO
@ViewChildren	TO:DO
@SelfSkip	TO:DO
@Optional	TO:DO
*if Directive	✓
*for Directive	TO:DO
*switch Directive	TO:DO
Annotation/Decorators reflect-metadata	✓
XSS (cross-site-scripting)	TO:DO

Web Component standards

Standards	Support
Custom Elements	✓
Shadow DOM	✓
HTML Templates Element	✓
HTML Templates Element with Shadow DOM	✓

Custom Elements standards

Features	Aurora
Reflecting Properties to Attributes	✓
Observing Changes to Attributes	✓
Element Upgrades	✓
Styling a Custom Element	TO:DO
Extending native HTML elements	✓
Extending a Custom Element	TO:DO
Two Component On Same Model Class	✓
Two Component Share Same Model Instance	TO:DO

Shadow DOM standards

Features	Aurora
Open Mode	✓
Closed Mode	✓
delegatesFocus	✓
Shadow DOM event model	✓

HTML Templates Element standards

Features	Aurora
Load template by ID from document	✓
As Normal Custom Element	✓
As Shadow DOM Element	✓

[JSX and HTML] -- template parser example

export interface DataModel {
    name: string;
    version: number;
    description: {
        title: string;
        desc: string;
    };
}

@Component({
    selector: 'app-view',
    template: ({viewData}: AppView) => {
        return (
            <Fragment>
                {/* just pass data as text, jsx feature*/}
                <h1>{viewData.name}</h1>
                {/* just pass data as text, from prop viewData.name to innerHTML */}
                <h1 innerHTML="$viewData.name"></h1>
                {/* one way binding for 'innerHTML' to property 'viewData.name' */}
                <h1 $innerHTML="viewData.name"></h1>
                {/* two way binding for 'innerHTML' to property 'viewData.name' */}
                <input type="text" $value="$viewData.name"></h1>

                <h2 $innerHTML="viewData.version"></h2>
                <div class="card">
                    <div class="card-header" $innerHTML="viewData.description.title"></div>
                    <div class="card-body" $innerHTML="viewData.description.desc" ></div>
                </div>
            </Fragment>
        );
    }
})
export class AppView {
    @Input()
    viewData: DataModel;
}

@Component({
    selector: 'app-edit',
    template:
        `
        <form #form >
            <div class="mb-3" >
                <label for="appName" class="form-label">Name</label>
                <input id="appName" type="text" [(value)]="editData.name"/>
            </div>
            <div class="mb-3" >
                <label for="appversin" class="form-label" > Version </label>
                <input id="appversin" type="number" [(value)]="editData.version"/>
            </div>

            <div class="mb-3" >
                <label for="title" class="form-label" >Title</label>
                <input id="title" type="text" [(value)]="editData.description.title"/>
            </div>

            <div class="mb-3" >
                <label for="desc" class="form-label">Description</label>
                <input id="desc" type="text" [(value)]="editData.description.desc"/>
            </div>
            <div class="btn-group" role="group" aria-label="Basic example" >
                <button type="button" class="btn btn-primary" (click)="printModel()">Print</button>
                <button type="button" class="btn btn-secondary" (click)="saveModel()">Save</button>
            </div>
        </form>
        `
})
export class AppEdit {
    @Input()
    editData: DataModel;

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

    @View()
    view: HTMLComponent<HTMLEdit> | HTMLElement;

    printModel() {
        console.log(this.editData);
    }

    saveModel() {
        this.save.emit(this.editData);
    }
}

@Component({
    selector: 'root-app',
    encapsulation: 'custom',
    template:
        `
        <div class="row" >
            <div class="col-6" >
                <app-edit [(editData)]="model" (save)="saveAction($event)" />
            </div>
            <div class="col-6" >
                <app-view [viewData]="model" />
            </div>
        </div>
        `
})
export class RootApp implements OnInit {

    model: DataModel;

    onInit(): void {
        this.model = {
            name: 'Aurora',
            version: 2,
            description: {
                title: 'Aurora custom element creator',
                desc: `Aurora is a web framework, that can create and define a usable 'custom elements',
                that compatible with other frameworks, using Typescript`
            }
        };
    }

    saveAction(data: any) {
        console.log('tag: rootApp', data);
    }

}

in index.html add:

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

how to build

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

see test app for full example https://github.com/aurorats/aurora/tree/master/test