Proof of Concept Cross-framework UI Component Framework in TypeScript

• SCSS as default style preprocessor
• Reference SCSS & HTML files in @Component decorator
• One-way Data Binding for template
• Hot Page Reloading
• Data Binding for attributes
• Input & Output

import {Component} from '@hero';

@Component({
    selector: 'ui-counter',
    templateUrl: './counter.component.html',
    styleUrls: ['./counter.component.scss']
})
export class CounterComponent {
    seconds: number;

    constructor() {
        this.seconds = 0;

        setInterval(()=>{
            this.seconds++;
        }, 1000);
    }
}

<div>{{seconds}} seconds have elapsed</div>

ui-counter {
  width: 400px;
  color: white;
  display: block;
  font-weight: bold;
  margin-top: 20px;
}

• Node.js v8.9.4
• yarn v1.12.3

yarn

yarn watch

You should see the following files in dist:

• index.html
• ui.js

To view the example app, open index.html in the web browswer.

The page will automatically reload on code change through the magic provided by HotReload Webpack plugin.

You only need to include the generated ui.js file in the HTML to integrate hero UI components in your existing project.

yarn test

• Harry Liu ( [email protected] )