Aurora

Deprecated

• moved to aurorats/aurora https://github.com/aurorats/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 aurora-ts

'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	✓	✓

Libary Features

Features	Aurora
ES Module	✓
JavaScript	TO:DO
Dependency Injection	In Progress
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 Instanse	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 Cutom 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('tage: rootApp', data);
    }

}

in index.html add:

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

local test

git clone https://github.com/salemebo/aurora-ts.git
cd aurora-ts/test
nmp i
cd ..
npm i
npm run test-build
npx serve