Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/whatsup/whatsup
A frontend framework for chillout-mode development 🥤 JSX components on generators*, fast mobx-like state management and exclusive cssx style system
https://github.com/whatsup/whatsup
framework generators javascript jsx reactive state-management typescipt
Last synced: about 1 month ago
JSON representation
A frontend framework for chillout-mode development 🥤 JSX components on generators*, fast mobx-like state management and exclusive cssx style system
- Host: GitHub
- URL: https://github.com/whatsup/whatsup
- Owner: whatsup
- License: mit
- Created: 2020-08-06T07:54:33.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-04-23T09:25:25.000Z (about 1 year ago)
- Last Synced: 2024-03-29T17:07:31.338Z (2 months ago)
- Topics: framework, generators, javascript, jsx, reactive, state-management, typescipt
- Language: TypeScript
- Homepage: https://whatsup.js.org
- Size: 2.27 MB
- Stars: 145
- Watchers: 11
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-javascript - Whatsup - A frontend framework for chillout-mode development 🥤. JSX components on generators, fast mobx-like state management and exclusive cssx style system. (MVC Frameworks and Libraries / Runner)
- awesome-list - whatsup
- awesome-list - whatsup
- awesome-javascript-builds-project - Whatsup - A frontend framework for chillout-mode development 🥤. JSX components on generators, fast mobx-like state management and exclusive cssx style system. (MVC Frameworks and Libraries / Runner)
README
## What is it?
Whatsup is a modern frontend framework with own reactivity system and JSX components based on pure functions and generators.
### Features
- 🎉 easy to use: simple api, just write code
- 🚀 own reactivity system with high performance
- 🌈 cool styling system based on css modules
- 🚦 built-in router with intuitive api
- ⛓ glitch free, autotracking and updating of dependencies
- 🥗 written in typescript, type support out of the box
- 🗜 small size: ~7kB gzipped (state + jsx + cssx)
### Example
```tsx
import { observable } from 'whatsup'
import { render } from 'whatsup/jsx'
function* App() {
const counter = observable(0)
const increment = () => counter(counter() + 1)
while (true) {
yield (
You click {counter()} times
Click me
)
}
}
render()
```
### Documentation
You can find the Whatsup documentation on the [website](https://whatsup.js.org).
Check out the [Intro page](https://whatsup.js.org/docs/intro/) for a quick overview.
The documentation is divided into several sections:
- [Introduction](https://whatsup.js.org/docs/intro/)
- [Getting Started](https://whatsup.js.org/docs/getting-started)
- [Components](https://whatsup.js.org/docs/components/)
- [State management](https://whatsup.js.org/docs/state-management/)
- [Styling](https://whatsup.js.org/docs/styling/)
### Examples
- [Todos MVC](http://examples.whatsup.js.org/todos)
- [Async loaders](http://examples.whatsup.js.org/loadable)
- [Sierpinski triangle](http://examples.whatsup.js.org/sierpinski)
### License
[MIT](https://opensource.org/licenses/MIT) (c) 2020-present, [@iminside](https://github.com/iminside)