{"id":17760634,"url":"https://github.com/mbasso/refraction","last_synced_at":"2026-01-24T02:34:35.409Z","repository":{"id":57352223,"uuid":"62747161","full_name":"mbasso/refraction","owner":"mbasso","description":"A guard that represents a central point of control in your application","archived":false,"fork":false,"pushed_at":"2016-10-15T16:44:10.000Z","size":654,"stargazers_count":151,"open_issues_count":0,"forks_count":5,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-27T00:04:28.479Z","etag":null,"topics":["data-flow","mediator","module","refraction","unidirectional"],"latest_commit_sha":null,"homepage":"http://refraction.js.org/","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/mbasso.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-06T19:15:31.000Z","updated_at":"2024-01-12T14:45:37.000Z","dependencies_parsed_at":"2022-09-15T23:02:38.495Z","dependency_job_id":null,"html_url":"https://github.com/mbasso/refraction","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Frefraction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Frefraction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Frefraction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Frefraction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mbasso","download_url":"https://codeload.github.com/mbasso/refraction/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243713357,"owners_count":20335564,"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":["data-flow","mediator","module","refraction","unidirectional"],"created_at":"2024-10-26T19:06:57.824Z","updated_at":"2026-01-24T02:34:30.375Z","avatar_url":"https://github.com/mbasso.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Refraction\n\n[![Build Status](https://travis-ci.org/mbasso/refraction.svg?branch=master)](https://travis-ci.org/mbasso/refraction)\n[![npm version](https://img.shields.io/npm/v/refraction.svg)](https://www.npmjs.com/package/refraction)\n[![npm downloads](https://img.shields.io/npm/dm/refraction.svg?maxAge=2592000)](https://www.npmjs.com/package/refraction)\n[![Coverage Status](https://coveralls.io/repos/github/mbasso/refraction/badge.svg?branch=master)](https://coveralls.io/github/mbasso/refraction?branch=master)\n[![Join the chat at https://gitter.im/mbasso/refraction](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/mbasso/refraction?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n\u003e A guard that represents a central point of control in your application.\n\nModern javascript applications are often organized into modules, which are awesome but have some problems that we can't avoid.\nWhen we are writing an application in this way, we must consider that all our modules must be independent, testable, instantly reusable and secure.\nRefraction's purpose is to make these concerns take care of themselves by using some design patterns.\nSince modules might be independent, with no inter-module dependencies, Refraction adds an intermediate layer that handles all messages that an application uses, allowing communication between modules. This way, modules don't need to know each other, only the layer that is responsible for managaging communication. If we want to change a module, we can do so without worrying about how other modules use it.\nModules have a very limited knowledge of what's going in the rest of the system. For this reason, we can define refraction as a guard, a central point of control.\n\n## Installation\n\nYou can install Refraction using [npm](https://www.npmjs.com/package/refraction):\n\n```bash\nnpm install --save refraction\n```\n\nIf you aren't using npm in your project, you can include Refraction using UMD build in the dist folder with `\u003cscript\u003e` tag.\n\n## Usage\n\nRefraction exposes only a small set of APIs. What is important to know is it's concept. A complete guide about usage can be found [here](https://mbasso.github.io/refraction/docs/basics/index.html).\nHowever, here is the gist:\n\n```js\nimport Refraction from 'refraction';\n\nclass CustomRefraction extends Refraction {\n\n  routeChange(route) {\n    this.publish('routeChange', {\n      type: 'route',\n      payload: route,\n    });\n  }\n}\n\nclass RouteManager {\n\n  routeChange({ payload }) {\n    window.location.href = payload;\n  }\n}\n\nclass ConsoleManager {\n\n  routeChange({ payload }) {\n    console.log(`New location = ${payload}`);\n  }\n}\n\nconst routeMiddleware = (param) =\u003e {\n  const result = Object.assign({}, param);\n  if (result \u0026\u0026 result.type === 'route') {\n    // build complete url\n    result.payload = `${window.location.protocol}//${window.location.host}${result.payload}`;\n  }\n  return result;\n}\n\nconst refractionInstance = new CustomRefraction([ routeMiddleware ]);\nconst routeManager = new RouteManager();\nconst consoleManager = new ConsoleManager();\n\nrefractionInstance.subscribe(routeManager);\nrefractionInstance.subscribe(consoleManager);\n\n// change route and log\nrefractionInstance.routeChange('home');\n\n```\n\n## Documentation\n\n* [Introduction](https://mbasso.github.io/refraction/docs/introduction/index.html)\n* [Basics](https://mbasso.github.io/refraction/docs/basics/index.html)\n* [Glossary](https://mbasso.github.io/refraction/docs/Glossary.html)\n* [API Reference](https://mbasso.github.io/refraction/docs/api/index.html)\n\n## Examples\n\nYou can find a series of examples in this repository under the `examples` folder. Alternatively, you can check [awesome-refraction](https://github.com/mbasso/awesome-refraction).\n\nIf you want to run examples, check out the instructions [here](https://mbasso.github.io/refraction/docs/introduction/Examples.html).\n\n# Chat\n\nThis project has an official chat channel on [gitter](https://gitter.im/).\nThis is the right place to talk about Refraction with us and others developers.\nFeel free to participate.\n\nJoin chat [here](https://gitter.im/mbasso/refraction).\n\n## Change Log\n\nThis project adheres to [Semantic Versioning](http://semver.org/).  \nEvery release, along with the migration instructions, is documented on the Github [Releases](https://github.com/mbasso/refraction/releases) page.\n\n## Inspiration\n\nRefraction is inspired by different articles and tools:\n- Its architecture is inspired by [this](https://addyosmani.com/largescalejavascript/) article based on Addy Osmani's talk of the same name, presented at LondonJS.\n- Its style is inspired by [Redux](https://github.com/reactjs/redux)\n\n## Authors\n**Matteo Basso**\n- [github/mbasso](https://github.com/mbasso)\n- [@Teo_Basso](https://twitter.com/Teo_Basso)\n\n**Adriano Buscema**\n- [github/adribusc](https://github.com/adribusc)\n\n## Copyright and License\nCopyright (c) 2016, Matteo Basso.\n\nRefraction source code is licensed under the [MIT License](https://github.com/mbasso/refraction/blob/master/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbasso%2Frefraction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmbasso%2Frefraction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbasso%2Frefraction/lists"}