https://github.com/elliothux/muse
⚡️ A light and ease-to-use front-end framework 🌪
https://github.com/elliothux/muse
front-end front-end-development observer two-way-databinding
Last synced: 26 days ago
JSON representation
⚡️ A light and ease-to-use front-end framework 🌪
- Host: GitHub
- URL: https://github.com/elliothux/muse
- Owner: elliothux
- Created: 2017-10-07T13:06:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-13T10:39:45.000Z (over 7 years ago)
- Last Synced: 2025-04-05T11:23:09.115Z (about 2 months ago)
- Topics: front-end, front-end-development, observer, two-way-databinding
- Language: JavaScript
- Homepage:
- Size: 674 KB
- Stars: 11
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Muse
✨ A light-weight and fast front-end framework
* Supporting JSX
* Virtual DOM
* Two-way Data Binding
* Observable State
* State Management
* Directives
* Supporting HOC
* More Easy to Use Features...
## Project Plan
### Done
✔ First Render using Virtual DOM
✔ Diff and Patch Render
✔ Supporting Two-way Data Binding
✔ Observer State
✔ Computed Data
✔ Handle Events
✔ Supporting Directives
### Todo
* [ ] Components and Props
* [ ] Life Cycle Hooks
* [ ] Events Encapsulation
* [ ] Dependence Collection
* [ ] Supporting Watch
* [ ] More Efficient Diff Render
## Usage
### Run Example
`git clone https://github.com/HuQingyang/Muse && cd ./Muse`
`npm install`
`npm start`
### Example
```jsx harmony
import { Muse } from 'muse.js';
class App extends Muse {
state = {
name: 'Joe',
age: 22,
langs: [
'JavaScript',
'Python',
'Rust',
'Scala'
],
showHello: true
}
computed = {
isAgeOdd() {
return this.state.age % 2 !== 0
}
}
handleClick = () => {
this.state.age ++;
}
render() { return (
Hello!
My name is {this.state.name}.
I'm {this.state.age} years old
and it's an odd number.
And I can those programming languages:
- {lang}
Click Me
)}
}
const app = new App();
app.renderTo(document.getElementById('root'));
```
See also [Example](https://github.com/HuQingyang/Muse/blob/master/example/index.js)