{"id":19663844,"url":"https://github.com/elliothux/muse","last_synced_at":"2025-06-12T13:06:27.995Z","repository":{"id":116544167,"uuid":"106098582","full_name":"elliothux/Muse","owner":"elliothux","description":"⚡️ A light and ease-to-use front-end framework 🌪","archived":false,"fork":false,"pushed_at":"2017-12-13T10:39:45.000Z","size":690,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-28T21:44:41.551Z","etag":null,"topics":["front-end","front-end-development","observer","two-way-databinding"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elliothux.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-07T13:06:11.000Z","updated_at":"2022-12-29T00:53:38.000Z","dependencies_parsed_at":"2024-04-26T23:43:18.843Z","dependency_job_id":"efd311d0-c163-479f-ba1b-8c912907d21b","html_url":"https://github.com/elliothux/Muse","commit_stats":null,"previous_names":["elliothux/muse"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/elliothux/Muse","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elliothux%2FMuse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elliothux%2FMuse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elliothux%2FMuse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elliothux%2FMuse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elliothux","download_url":"https://codeload.github.com/elliothux/Muse/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elliothux%2FMuse/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259470938,"owners_count":22862995,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["front-end","front-end-development","observer","two-way-databinding"],"created_at":"2024-11-11T16:15:51.185Z","updated_at":"2025-06-12T13:06:27.958Z","avatar_url":"https://github.com/elliothux.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Muse\n\n✨ A light-weight and fast front-end framework\n\n* Supporting JSX  \n* Virtual DOM  \n* Two-way Data Binding  \n* Observable State  \n* State Management  \n* Directives  \n* Supporting HOC  \n* More Easy to Use Features...\n\n\n## Project Plan\n\n### Done\n✔ First Render using Virtual DOM   \n✔ Diff and Patch Render  \n✔ Supporting Two-way Data Binding  \n✔ Observer State  \n✔ Computed Data  \n✔ Handle Events  \n✔ Supporting Directives\n\n### Todo\n* [ ] Components and Props\n* [ ] Life Cycle Hooks  \n* [ ] Events Encapsulation\n* [ ] Dependence Collection\n* [ ] Supporting Watch  \n* [ ] More Efficient Diff Render\n\n\n## Usage\n\n### Run Example\n`git clone https://github.com/HuQingyang/Muse \u0026\u0026 cd ./Muse`  \n`npm install`  \n`npm start`  \n\n\n### Example\n```jsx harmony\nimport { Muse } from 'muse.js';\n\nclass App extends Muse {\n    state = {\n        name: 'Joe',\n        age: 22,\n        langs: [\n            'JavaScript',\n            'Python',\n            'Rust',\n            'Scala'\n        ],\n        showHello: true\n    }\n\n    computed = {\n        isAgeOdd() {\n            return this.state.age % 2 !== 0\n        }\n    }\n\n    handleClick = () =\u003e {\n        this.state.age ++;\n    }\n\n    render() { return (\n        \u003cdiv\u003e\n            \u003ch1 if={this.state.showHello}\u003eHello!\u003c/h1\u003e\n            \u003cinput\n                type=\"password\"\n                model={this.state.name}\n            /\u003e\n            \u003cinput\n                type=\"checkbox\"\n                model={this.state.showHello}\n            /\u003e\n            \u003cp\u003eMy name is {this.state.name}.\u003c/p\u003e\n            \u003cp\u003e\n                I'm {this.state.age} years old\n                \u003cspan if={this.computed.isAgeOdd}\u003e and it's an odd number.\u003c/span\u003e\n            \u003c/p\u003e\n            \u003cp\u003eAnd I can those programming languages:\u003c/p\u003e\n            \u003cul\u003e\n                \u003cli for={lang in this.state.langs}\u003e{lang}\u003c/li\u003e\n            \u003c/ul\u003e\n            \u003cbutton onClick={this.handleClick}\u003eClick Me\u003c/button\u003e\n        \u003c/div\u003e\n    )}\n}\n\nconst app = new App();\napp.renderTo(document.getElementById('root'));\n```\nSee also [Example](https://github.com/HuQingyang/Muse/blob/master/example/index.js)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felliothux%2Fmuse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felliothux%2Fmuse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felliothux%2Fmuse/lists"}