typure.js
is a lightweight TypeScript library that is built on native web components for building user interfaces.
typure.js
uses a 'jsx-like' template string to render the Shadow DOM of the element. It also uses decorators to create responsive variables, implementing a javascript MVC framework with state-driven views.
import { PureElement } from '@typure/core'
import { type State, state } from '@typure/reactive'
class MyElement extends PureElement {
counter: State<number>
constructor() {
super()
this.counter = state(0)
}
countAdd() {
this.counter.value++
}
render() {
return `
<div>
<h2 align="center">hello, this is typure.js</h2>
<p align="center">
<span>${this.counter.value}</span>
<button @click="countAdd">count++</button>
</p>
</div>
`
}
}
export default MyElement
import { defineComponent } from '@typure/core'
import { state } from '@typure/reactive'
export defineComponent(() => {
const counter = state<number>(0)
function countAdd() {
counter.value++
}
return `
<div>
<h2 align="center">hello, this is typure.js</h2>
<p align="center">
<span>${counter.value}</span>
<button @click="countAdd">count++</button>
</p>
</div>
`
})
Copyright (c) 2023-present, Yewei Wang