Simple component system with integrated routing.
You"ll need to enable jsx in your tsconfig
{
"compileOnSave": false,
"compilerOptions": {
"jsx": "react",
"jsxFactory": "this.createElement",
....
}
}
Compile your client with tsc and page compile!
tsc && page compile
Create a component by extending the component class
export class ExampleComponent extends Component {
constructor() {
super();
}
render() {
return <section>
Example Component!
</section>;
}
}
new ExampleComponent().host(document.body);Let"s extends this by creating a recursive component
export class ExampleRecursiveComponent extends Component {
constructor(private index: number) {
super();
}
render() {
return <section>
Component {this.index}
{index > 0 && new ExampleRecursiveComponent(index - 1)}
</section>;
}
}
new ExampleRecursiveComponent(10).host(document.body);page has a built-in router
const router = new PathRouter(PageComponent
.route("/home", HomeComponent),
.route("/books", BooksComponent
.default(BookOverviewComponent)
.route("/:id", BookDetailComponent)
)
// will only be resolved and thus loaded when users access the /admin route
// → your builder can do code splitting!
.route("/admin", () => import("./admin").then(module => module.default))
);
class PageComponent extends Component {
render(child) {
return <main>
<nav>App</nav>
{child}
</main>;
}
}
class HomeComponent extends Component {
render() {
return <p>Welcome to my Book Store</p>;
}
}
class BooksComponent extends Component {
render(child) {
return <section>
<h1>Books!</h1>
{child}
</section>;
}
}
class BookOverviewComponent extends Component {
render() {
return <ui-book-overview>
<button ui-href="someid">Some book!</button>
<button ui-href="someid">Some other book!</button>
<button ui-href="someid">Another book!</button>
</ui-book-overview>;
}
}
class BookDetailComponent extends Component {
parameters: { id: string }
render() {
return <p>Book with id {this.parameters.id}</p>;
}
}
router.host(document.body);You can create custom directives (attribute handlers).
Component.directives["epic-link"] = (element, value, tag, attributes, content) => {
element.onclick = () => {
location.href = value;
}
}
export class ExampleComponent extends Component {
constructor() {
super();
}
render() {
return <section>
Test <a epic-link="http://github.com/">Link</a>
</section>;
}
}
new ExampleComponent().host(document.body);