Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/acryps/page
https://github.com/acryps/page
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/acryps/page
- Owner: acryps
- Created: 2023-08-09T12:07:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-05T11:22:34.000Z (5 months ago)
- Last Synced: 2024-06-05T12:45:40.271Z (5 months ago)
- Language: TypeScript
- Size: 94.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](http://badge.acryps.com/go/npm/@acryps%2Fpage)
# @acryps/page TypeScript Frontend Component System
Simple component system with integrated routing.
## Setup
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
```
## Usage
Create a component by extending the component class
``` tsx
export class ExampleComponent extends Component {
constructor() {
super();
}
render() {
return
Example Component!
;
}
}
new ExampleComponent().host(document.body);
```
Let"s extends this by creating a recursive component
``` tsx
export class ExampleRecursiveComponent extends Component {
constructor(private index: number) {
super();
}
render() {
return
Component {this.index}
{index > 0 && new ExampleRecursiveComponent(index - 1)}
;
}
}
new ExampleRecursiveComponent(10).host(document.body);
```
## Router
page has a built-in router
``` tsx
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
App
{child}
;
}
}
class HomeComponent extends Component {
render() {
return
Welcome to my Book Store
;
}
}
class BooksComponent extends Component {
render(child) {
return
Books!
{child}
;
}
}
class BookOverviewComponent extends Component {
render() {
return
Some book!
Some other book!
Another book!
;
}
}
class BookDetailComponent extends Component {
parameters: { id: string }
render() {
return
Book with id {this.parameters.id}
;
}
}
router.host(document.body);
```
## Directives
You can create custom directives (attribute handlers).
``` ts
Component.directives["epic-link"] = (element, value, tag, attributes, content) => {
element.onclick = () => {
location.href = value;
}
}
export class ExampleComponent extends Component {
constructor() {
super();
}
render() {
return
Test Link
;
}
}
new ExampleComponent().host(document.body);
```