{"id":13671905,"url":"https://github.com/tangbc/sugar","last_synced_at":"2025-04-05T03:02:47.538Z","repository":{"id":57374144,"uuid":"43250228","full_name":"tangbc/sugar","owner":"tangbc","description":"A lightweight and powerful JavaScript MVVM library. Used for production or learning how to make a full MVVM.","archived":false,"fork":false,"pushed_at":"2023-10-31T06:58:02.000Z","size":3519,"stargazers_count":355,"open_issues_count":2,"forks_count":58,"subscribers_count":31,"default_branch":"master","last_synced_at":"2025-03-29T02:04:17.983Z","etag":null,"topics":["framework","front-end","javascript","javascript-mvvm-library","mvvm"],"latest_commit_sha":null,"homepage":"https://github.com/tangbc/sugar/wiki","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tangbc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-09-27T14:43:58.000Z","updated_at":"2025-03-04T04:14:33.000Z","dependencies_parsed_at":"2022-09-17T15:50:44.075Z","dependency_job_id":"afc94ed2-5294-4047-903c-12ca7c93a387","html_url":"https://github.com/tangbc/sugar","commit_stats":{"total_commits":727,"total_committers":2,"mean_commits":363.5,"dds":0.03438789546079779,"last_synced_commit":"a0d5956964ede263e5b59c0d8ac6e3401bf1ee62"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangbc%2Fsugar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangbc%2Fsugar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangbc%2Fsugar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tangbc%2Fsugar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tangbc","download_url":"https://codeload.github.com/tangbc/sugar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280190,"owners_count":20912967,"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":["framework","front-end","javascript","javascript-mvvm-library","mvvm"],"created_at":"2024-08-02T09:01:21.641Z","updated_at":"2025-04-05T03:02:47.511Z","avatar_url":"https://github.com/tangbc.png","language":"JavaScript","readme":"\u003cp\u003e\n\t\u003ca href=\"https://travis-ci.org/tangbc/sugar\"\u003e\n\t\t\u003cimg src=\"https://travis-ci.org/tangbc/sugar.svg?branch=master\" alt=\"Travis CI Status\"/\u003e\n\t\u003c/a\u003e\n\t\u003ca href=\"https://codecov.io/gh/tangbc/sugar\"\u003e\n\t\t\u003cimg src=\"https://codecov.io/gh/tangbc/sugar/branch/master/graph/badge.svg\" alt=\"Code Coverage\"/\u003e\n\t\u003c/a\u003e\n\t\u003cbr\u003e\n\t\u003cimg src=\"https://tangbc.github.io/github-images/browser-matrix.svg\" alt=\"Sauce Browser Matrix\"/\u003e\n\u003c/p\u003e\n\n\n## sugar\n\n\u003e A lightweight and powerful JavaScript MVVM library for building easy web UI.\n\nSimple api and without any dependence. Consists of two independent libraries:\n* **`mvvm.js`** *A simple ViewModel library* , ***it can be used independently***.\n* **`sugar.js`** *Component system + mvvm.js , for building flexible web components*.\n\n\n## Diagram\n\n\u003cimg src=\"https://tangbc.github.io/github-images/sugar-diagram-en.png\" width=\"600\"\u003e\n\n\n## HelloWorld\n\n### mvvm.js\n```html\n\u003chtml\u003e\n\u003cbody\u003e\n\t\u003cdiv id=\"app\"\u003e\n\t\t\u003ch1\u003e{{ title }}\u003c/h1\u003e\n\t\u003c/div\u003e\n\n\t\u003cscript src=\"https://tangbc.github.io/sugar/dist/mvvm.js\"\u003e\u003c/script\u003e\n\t\u003cscript\u003e\n\tvar vm = new MVVM({\n\t\tview: document.getElementById('app'),\n\t\tmodel: {\n\t\t\ttitle: 'Hello world!'\n\t\t}\n\t})\n\n\t// Model drive View:\n\tvm.$data.title = 'Change title!';\n\t\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\nMore MVVM directives are supported, see all at [documentation](https://github.com/tangbc/sugar/wiki/MVVM).\n\n### sugar.js\n```html\n\u003chtml\u003e\n\u003cbody\u003e\n\t\u003cdiv id=\"app\"\u003e\n\t\t\u003ch1\u003e{{ title }}\u003c/h1\u003e\n\t\u003c/div\u003e\n\n\t\u003cscript src=\"https://tangbc.github.io/sugar/dist/sugar.js\"\u003e\u003c/script\u003e\n\t\u003cscript\u003e\n\t// define HelloWorld component:\n\tvar HelloWorld = Sugar.Component.extend({\n\t\tinit: function (config) {\n\t\t\tthis.Super('init', config, {\n\t\t\t\ttarget: '#app',\n\t\t\t\tmodel: {\n\t\t\t\t\ttitle: 'Hello world!'\n\t\t\t\t}\n\t\t\t});\n\t\t},\n\t\t// Hook of after view was rendered.\n\t\tafterRender: function () {\n\t\t\t// Model drive View:\n\t\t\tthis.vm.$data.title = 'Change title!';\n\t\t}\n\t});\n\n\t// create component instance:\n\tvar app = Sugar.core.create('hello-world', HelloWord);\n\t\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\nSubComponent, component nesting and message system see [documentaion](https://github.com/tangbc/sugar/wiki).\n\n\n## Demos\n\nThere are several complete and amusing demos in **`demos/`** folder make you know more about `sugar.js`, check it out and preview them in the following links:\n\n* [StarRating](https://tangbc.github.io/sugar/demos/starRating)\n* [DatePicker](https://tangbc.github.io/sugar/demos/datePicker)\n* [TodoMVC](https://tangbc.github.io/sugar/demos/todoMVC)\n* [Snake eat apple game](https://tangbc.github.io/snake-eat-bugs/)\n\n\u003e *i. Sometimes Github-page link disconnected by `Enforce HTTPS`, please use `https` protocol instead.*\n\n\u003e *ii. Some demos need httpSever (Ajax), so run script `npm run server` to preview them if in your local.*\n\nYou can also experience `sugar.js` online with a ***RadioComponent*** at [jsfiddle](https://jsfiddle.net/tangbc/may7jzb4/9/).\n\n\n## Usage\n\n* Both support [`UMD`](https://github.com/umdjs/umd) (Universal Module Definition)\n\t* `mvvm.js (just 28 kb)` https://tangbc.github.io/sugar/dist/mvvm.min.js\n\t* `sugar.js (just 35 kb)` https://tangbc.github.io/sugar/dist/sugar.min.js\n\n* Browsers: **Not support IE8 and below**. Besides, support most modern desktop and mobile browsers.\n\n\n## Documentation\n\n[Get start and check documentation on Wiki.](https://github.com/tangbc/sugar/wiki)\n\n\n## Directories\n\n* **`build/`** Development, production and test configurations.\n\n* **`demos/`** Several complete examples/demos developed by `sugar.js`.\n\n* **`dist/`** Product files of `sugar.js` and `mvvm.js`, and their compressed.\n\n* **`src/`** Source code module files:\n\n\t* `src/main/`\u003csup\u003e20%\u003c/sup\u003e A simple component system. [API \u0026 Doc](https://github.com/tangbc/sugar/wiki/API)\n\n\t* **`src/mvvm/`**\u003csup\u003e80%\u003c/sup\u003e A powerful and easy-using MVVM library. [API \u0026 Doc](https://github.com/tangbc/sugar/wiki/MVVM)\n\n* **`test/`** Unit test specs writing by karma + jasmine.\n\n\n## Contribution\n\n*Welcome any pull request of fixbug or improvement, even only supplement some unit test specs.*\n\n1. Fork and clone repository to your local.\n\n2. Install NodeJS package devtools: **`npm install`**.\n\n3. Develop and debug: **`npm run dev`** *(generate sourcemap files in `bundle/`)*.\n\n4. Add and write test spec, *(in `test/units/specs/`)* then run uint test：**`npm run test`**.\n\n5. Generate the test coverage report and jshint checking up: **`npm run build`**.\n\n\n## ChangeLogs\n\n[Check details from releases](https://github.com/tangbc/sugar/releases)\n\n\n## License\n\n[MIT License](https://github.com/tangbc/sugar/blob/master/LICENSE)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangbc%2Fsugar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftangbc%2Fsugar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangbc%2Fsugar/lists"}