1.2.1 • Published 1 month ago
@tooooools/ui v1.2.1
tooooools/ui
JSX ui kit built for Toools™
Installation
$ npm install @tooooools/ui
Configuring JSX rendering in vitejs
import { defineConfig } from 'vite'
export default defineConfig({
// ...
esbuild: {
jsxInject: "import { h } from '@tooooools/ui'",
jsxFactory: 'h'
}
})
Available components
See documentation.
Usage
Basic usage
import { render } from '@tooooools/ui'
import { Button } from '@tooooools/ui/components'
render(<Button label='Hello world' />)
render(<Button label='Hello world' />, parent)
render(<Button label='Hello world' />, { insertBefore: el })
Using signals
import { render } from '@tooooools/ui'
import { writable } from '@tooooools/ui/state'
import { Button } from '@tooooools/ui/components'
const label = writable('Click me')
render((
<Button
store-label={label}
event-click={e => {
label.set('Thank you')
}}
/>
))
Creating components
import { render, Component } from '@tooooools/ui'
import { writable } from '@tooooools/ui/state'
class MyComponent extends Component {
beforeRender (props) {
this.state = {
count: writable(0)
}
}
template (props, state) {
return (
<div
event-click={e => {
state.count.update(count => count++)
}}
>
{props.text}: <span store-text={state.count} />
</div>
)
}
afterRender () {}
afterMount () {}
beforeDestroy () {}
}
render(<MyComponent text='Click count' />)
Developement
# Local development
$ yarn start
# Linked local developement
$ yarn link
$ yarn build:watch
# Build, deploy, publish
$ yarn version
Credits
JSX and state utils heavily based on pqml’s work.
License
1.2.1
1 month ago
1.2.0
2 months ago
1.1.1
2 months ago
1.1.0
2 months ago
1.0.0
2 months ago
0.8.6
3 months ago
0.8.5
4 months ago
0.8.4
4 months ago
0.8.3
5 months ago
0.8.1
5 months ago
0.8.2
5 months ago
0.8.0
5 months ago
0.7.4
5 months ago
0.7.3
5 months ago
0.7.2
5 months ago
0.7.1
5 months ago
0.7.0
5 months ago
0.5.0
6 months ago
0.6.0
5 months ago
0.4.1
6 months ago
0.4.0
6 months ago
0.3.5
6 months ago
0.3.4
6 months ago
0.3.3
6 months ago
0.3.2
7 months ago
0.3.1
9 months ago
0.2.0
9 months ago
0.1.1
9 months ago
0.1.0
9 months ago
0.0.0
9 months ago