{"id":27251517,"url":"https://github.com/scarletsfiction/scarletsframe","last_synced_at":"2025-04-11T01:10:11.777Z","repository":{"id":37430974,"uuid":"152055440","full_name":"ScarletsFiction/ScarletsFrame","owner":"ScarletsFiction","description":"A frontend framework that can help you write performant complex web feature with low dev time and resource cost.","archived":false,"fork":false,"pushed_at":"2023-10-17T22:39:43.000Z","size":3383,"stargazers_count":29,"open_issues_count":4,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T01:10:04.834Z","etag":null,"topics":["api","asset-loader","data-binding","dom-binding","frontend-framework","hot-reload","html","i18n","javascript","router","scarletsframe","shared-models","two-way-databinding","virtual-scroll"],"latest_commit_sha":null,"homepage":"","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/ScarletsFiction.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":["stefansarya"],"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"otechie":null,"custom":null}},"created_at":"2018-10-08T09:44:17.000Z","updated_at":"2024-06-11T13:12:56.000Z","dependencies_parsed_at":"2024-01-06T14:56:55.156Z","dependency_job_id":null,"html_url":"https://github.com/ScarletsFiction/ScarletsFrame","commit_stats":{"total_commits":1417,"total_committers":3,"mean_commits":472.3333333333333,"dds":"0.20889202540578689","last_synced_commit":"1182d5aae04826ee80d2caf5c730fb46848a823d"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScarletsFiction%2FScarletsFrame","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScarletsFiction%2FScarletsFrame/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScarletsFiction%2FScarletsFrame/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScarletsFiction%2FScarletsFrame/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ScarletsFiction","download_url":"https://codeload.github.com/ScarletsFiction/ScarletsFrame/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322601,"owners_count":21084337,"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":["api","asset-loader","data-binding","dom-binding","frontend-framework","hot-reload","html","i18n","javascript","router","scarletsframe","shared-models","two-way-databinding","virtual-scroll"],"created_at":"2025-04-11T01:10:11.050Z","updated_at":"2025-04-11T01:10:11.768Z","avatar_url":"https://github.com/ScarletsFiction.png","language":"JavaScript","readme":"[![Software License](https://img.shields.io/badge/License-MIT-brightgreen.svg)](LICENSE)\n[![](https://data.jsdelivr.com/v1/package/npm/scarletsframe/badge)](https://www.jsdelivr.com/package/npm/scarletsframe)\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=ScarletsFrame%20is%20frontend%20library%20that%20can%20help%20simplify%20your%20code.\u0026url=https://github.com/ScarletsFiction/ScarletsFrame\u0026via=github\u0026hashtags=scarletsframe,browser,framework,library,mvw)\n[![Discord](https://img.shields.io/discord/840593315157245972.svg?label=\u0026logo=discord\u0026logoColor=ffffff\u0026color=7389D8\u0026labelColor=6A7EC2)](https://discord.gg/cNrBnCFy7q)\n\n# ScarletsFrame\nA frontend framework that can help you write a simple web structure with complex feature. This framework built for performance with balanced memory allocation and allows you to directly write template in the HTML. [Here](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html) you can see the benchmark.\n\nThe documentation located on [Github Wiki](https://github.com/ScarletsFiction/ScarletsFrame/wiki).\n\nThis framework haven't reach v1.0.0. Every increment of `(v0.*.0)` may have a breaking changes. Please see the **CHANGELOG.md** if you want to check the breaking changes. Make sure to specify the version instead of **latest** when using CDN link or the package like below.\n\n```xml\n\u003c!-- Production mode --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/scarletsframe@0.35.x/dist/scarletsframe.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Development mode --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/scarletsframe@0.35.x/dist/scarletsframe.dev.js\"\u003e\u003c/script\u003e\n\n\u003c!-- sQuery only (sf.$) --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/scarletsframe@0.35.x/dist/squery.min.js\"\u003e\u003c/script\u003e\n```\n\n## Try it online like a project\nExample with file and folder structure\n - Simple in [StackBlitz](https://stackblitz.com/edit/scarletsframe-simple?file=index.js) or with languages in [StackBlitz](https://stackblitz.com/edit/scarletsframe-simple-language?file=index.html)\n - With page routes in [Glitch](https://glitch.com/edit/#!/scarletsframe-default?path=src%2Fvw-myview%2Fexample.html%3A4%3A7) and hot reload in [CodeSandbox](https://codesandbox.io/s/scarletsframe-default-5wxo7?file=/src/vw-myview/example.js)\n\n### Advanced Example\n- [List Swap](https://jsbin.com/wicunop/edit?js,console,output)\n- [Cards](https://jsbin.com/bicijol/edit?js,output)\n- [Control Style](https://jsbin.com/venipic/edit?html,js,output)\n- [One Array For All](https://jsbin.com/weyecin/edit?html,js,output)\n- [ToDo MVC](https://jsfiddle.net/stefansarya/b0z238r7/)\n\n## Simple Example\n- [Shared Model](https://jsbin.com/xiyeron/edit?html,js,output)\n- [State Listener](https://jsbin.com/qohifel/edit?html,js,output)\n- [Input Elements](https://jsbin.com/toripov/edit?js,console,output)\n- [Simple Element Binding](https://jsbin.com/liluhul/edit?js,console,output) | [Deep Binding](https://jsbin.com/wesayec/edit?html,js,output)\n- [Simple Component](https://jsbin.com/guwevis/edit?html,js,console,output)\n- [Gesture Event](https://jsbin.com/jilivas/edit?html,js,output)\n- [Views and Router](https://1vbdh.csb.app/) | [Source](https://codesandbox.io/s/viewsrouter-example-1vbdh)\n- [Virtual Scroll](https://playcode.io/224164?tabs=model.js\u0026output)\n- [Language](https://jsbin.com/delayeb/edit?html,js,output)\n\n## Real World App\n - [Blackprint](https://blackprint.github.io/) | [Source](https://github.com/Blackprint/Blackprint)\n - [NekoNyaan](https://nekonyaan.com)\n\n## Install with CDN link\nThis is optional if you prefer using CDN link.\nBut I recommend to use the default template that have Hot Reload enabled.\n```html\n\u003cscript src='https://cdn.jsdelivr.net/npm/scarletsframe@0.35.x/dist/scarletsframe.min.js'\u003e\u003c/script\u003e\n```\n\n### Polyfill for older browser\nThe `dist` file from the CDN link will only support Chrome \u003e= 55, Firefox \u003e= 68, and iOS \u003e= 10.3.\nIf you want to support some old browser, you need to add some polyfill before load the framework.\u003cbr\u003e\nFor Safari or iOS browser you may need to polyfill PointerEvent too\u003cbr\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick here to see the polyfills\u003c/summary\u003e\n  ```html\n  \u003cscript type=\"text/javascript\"\u003e\n    // Polyfill for Old Browser\n    (function(){function z(a){document.write('\u003cscript src=\"'+a+'\"\u003e\u003c\\/script\u003e')}\n      if(!window.PointerEvent) // Chrome \u003c 55, Firefox 42\n        z('https://code.jquery.com/pep/0.4.3/pep.js');\n      if(!window.Reflect) // Chrome \u003c 49\n        z('https://unpkg.com/core-js-bundle@latest/minified.js');\n      if(!window.customElements) // Chrome \u003c 54, Firefox 63\n        z('https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js');\n\n      // From https://polyfill.io/v3/url-builder/\n      if(!window.ResizeObserver || !Element.prototype.append || !Element.prototype.matches || !Array.prototype.includes || !Object.assign || !window.MutationObserver)\n        z('https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.append%2CElement.prototype.prepend%2CArray.prototype.includes%2CArray.from%2CElement.prototype.matches%2CElement.prototype.closest%2CIntersectionObserver%2CIntersectionObserverEntry%2CObject.assign%2CObject.create%2CResizeObserver%2CPromise%2CWeakMap%2CWeakSet%2CrequestAnimationFrame%2CMutationObserver');\n    })();\n  \u003c/script\u003e\n  ```\n\u003c/details\u003e\n\n## Using the template\nFor starting the development environment, let's use the [default template](https://github.com/StefansArya/scarletsframe-default).\n\n```sh\n$ npm i -g scarletsframe-cli\n\n# Download template to current directory\n$ scarletsframe init default\n\n# Install the needed package\n$ npm i\n\n# Start the development server\n$ npm start\n```\n\n## Install with with NPM\nThis is optional if you prefer for using webpack, parcel, rollup, etc.\n```sh\n$ npm i scarletsframe@0.35.x\n```\n\nAnd include it on your project with webpack ([example](https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/keyed/scarletsframe)) or browserify.\n```js\nconst sf = require('scarletsframe');\n// import { model } from \"scarletsframe\";\n\n// You can use require to reference another model scope\nsf.model('things', function(My, require) {\n  My.something = 123;\n});\n```\n\n## Contribution\nIf you want to help in ScarletsFrame please fork this project and edit on your repository, then make a pull request to here. Otherwise, you can help with donation via [kofi](https://ko-fi.com/stefansarya).\n\n## License\nScarletsFrame is under the MIT license.","funding_links":["https://github.com/sponsors/stefansarya","https://ko-fi.com/stefansarya"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscarletsfiction%2Fscarletsframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscarletsfiction%2Fscarletsframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscarletsfiction%2Fscarletsframe/lists"}