Skip to content
This repository has been archived by the owner on Sep 12, 2020. It is now read-only.
/ aurora-ts Public archive

Aurora is a web framework, that can create and define a usable 'custom elements', that compatible with other frameworks, using Typescript

License

Notifications You must be signed in to change notification settings

muhammad-salem/aurora-ts

Repository files navigation

Aurora

NPM Version NPM Downloads Install Size LICENSE npm-dependencies

Deprecated

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