wangyewei / typurejs

typure.js is a lightweight TypeScript library that is built on native web components for building user interfaces.

What is Typure?

typure.js is a lightweight TypeScript library that is built on native web components for building user interfaces.

Overview

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

FC

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>
    `
})

License

MIT

Copyright (c) 2023-present, Yewei Wang