{"id":18651358,"url":"https://github.com/alexisvincent/systemjs-hot-reloader","last_synced_at":"2025-04-06T10:14:00.604Z","repository":{"id":65513632,"uuid":"43829379","full_name":"alexisvincent/systemjs-hot-reloader","owner":"alexisvincent","description":"reloads your modules as needed so that you can have satisfyingly fast feedback loop when developing your app","archived":false,"fork":false,"pushed_at":"2018-10-19T23:08:44.000Z","size":221,"stargazers_count":230,"open_issues_count":12,"forks_count":36,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-03-30T06:08:47.350Z","etag":null,"topics":["developer-tools","hot-reload","hot-reloading","jspm","react","socket","systemjs-hmr","systemjs-hot-reloader","tools"],"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/alexisvincent.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}},"created_at":"2015-10-07T16:30:12.000Z","updated_at":"2025-02-28T21:43:54.000Z","dependencies_parsed_at":"2023-01-26T20:55:19.377Z","dependency_job_id":null,"html_url":"https://github.com/alexisvincent/systemjs-hot-reloader","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexisvincent%2Fsystemjs-hot-reloader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexisvincent%2Fsystemjs-hot-reloader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexisvincent%2Fsystemjs-hot-reloader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexisvincent%2Fsystemjs-hot-reloader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexisvincent","download_url":"https://codeload.github.com/alexisvincent/systemjs-hot-reloader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247464225,"owners_count":20942970,"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":["developer-tools","hot-reload","hot-reloading","jspm","react","socket","systemjs-hmr","systemjs-hot-reloader","tools"],"created_at":"2024-11-07T06:49:36.033Z","updated_at":"2025-04-06T10:14:00.579Z","avatar_url":"https://github.com/alexisvincent.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# systemjs-hot-reloader\n[![npm version](https://badge.fury.io/js/systemjs-hot-reloader.svg)](https://badge.fury.io/js/systemjs-hot-reloader)\n[![Build Status](https://travis-ci.org/alexisvincent/systemjs-hot-reloader.svg?branch=master)](https://travis-ci.org/alexisvincent/systemjs-hot-reloader)\n\nOfficial Hot Module Replacement (HMR) for [SystemJS](https://github.com/systemjs/systemjs). As you modify your source, `systemjs-hot-reloader` will add, remove, or swap out modules in the running application, without a page refresh (significantly speeding up development time).\n\n`systemjs-hot-reloader` **MUST** be used in conjunction with event source such as:\n- [systemjs-tools](https://github.com/alexisvincent/systemjs-tools) - smart development server\n- [chokidar-socket-emitter](https://github.com/capaj/chokidar-socket-emitter) - simple file watcher\n- [jspm-dev-buddy](https://atom.io/packages/jspm-dev-buddy) - atom plugin\n\n`systemjs-hot-reloader` is a thin layer on top of [systemjs-hmr](https://github.com/alexisvincent/systemjs-hmr), which provides the meat of the reloading logic. If you are a library author looking to integrate HMR into your library or want a better understanding of how HMR works in [SystemJS](https://github.com/systemjs/systemjs) then check it out.\n\n## Usage\nInstall with your client-side package manager (choose one)\n- `jspm install --dev npm:systemjs-hot-reloader`\n- `yarn add --dev systemjs-hot-reloader`\n- `npm install --save-dev systemjs-hot-reloader`\n\n`systemjs-hot-reloader` requires SystemJS `\u003e0.19.x or \u003e=0.20.8`.\n\n`systemjs-hot-reloader` **MUST** run before your application code otherwise SystemJS\nwon't know how to resolve your app's `@hot` imports.\n\nAssuming your app entry point is `app.js`, wrap your import statement so that you first load `systemjs-hot-reloader`.\n\n```html\n\u003cscript\u003e\n    System.import('systemjs-hot-reloader').then((connect) =\u003e {\n        connect()\n        System.import('app.js')\n    })\n\u003c/script\u003e\n```\n\n`connect` can be passed a number of custom options. To initialise a custom connection\n\n```html\n\u003cscript\u003e\n    System.import('systemjs-hot-reloader').then((connect) =\u003e {\n        connect({ host: '//localhost:1234' })\n        System.import('app.js')\n    })\n\u003c/script\u003e\n```\n\nUntil SystemJS does automatically, you need to tell SystemJS how to handle\nthe `@hot` imports when building your app. To do this, add the following to\nyour jspm config file.\n\n```js\n{\n  ...\n  \"map\": {\n    ...\n    \"@hot\": \"@empty\"\n  }\n}\n```\n\n`systemjs-hot-reloader` will automatically set `SystemJS.trace = true`, so you no longer\nneed to set this manually, as with previous versions.\n\n### Production\nIn production, `systemjs-hot-reloader` maps to an empty module so you can leave\nthe `systemjs-hot-reloader` import in your `index.html`.\n\n### State Hydration and Safe Module Unloads\nAs described [here](https://github.com/alexisvincent/systemjs-hmr#state-hydration-and-safe-module-unloads), state hydration is handled in the following way.\n\nWhen hot module replacement is added to an application there are a few modifications we may need to\nmake to our code base, since the assumption that your code will run exactly once has been broken.\n\nWhen a new version of a module is imported it might very well want to reinitialize it's own state based\non the state of the previous module instance, to deal with this case and to cleanly unload your module\nfrom the registry you can import the previous instance of your module as you would any other module,\nas well as export an `__unload` function that will be called upon `System.unload`, ie. when your module is reloaded.\n\n```javascript\n/**\n * You can import the previous instance of your module as you would any other module.\n * On first load, module == false.\n */\nimport { module } from '@hot'\n\n/**\n * Since all exports of the previous instance are available, you can simply export any state you might want to persist.\n *\n * Here we set and export the state of the file. If 'module == false' (first load),\n * then initialise the state to {}, otherwise set the state to the previously exported\n * state.\n */\nexport const _state = module ? module._state : {}\n\n/**\n * If you're module needs to run some 'cleanup' code before being unloaded from the system, it can do so,\n * by exporting an `__unload` function that will be run just before the module is deleted from the registry,\n * ie. as your module is being unloaded in preparation for being reloaded.\n *\n * Here you would unsubscribe from listeners, or any other task that might cause issues in your application,\n * or prevent the module from being garbage collected.\n *\n * See SystemJS.unload API for more information.\n */\nexport const __unload = () =\u003e {\n    console.log('Unload something (unsubscribe from listeners, disconnect from socket, etc...)')\n    // force unload React components\n    ReactDOM.unmountComponentAtNode(DOMNode);\t// your container node\n}\n```\n\n## React\n### This section isn't yet finished. see https://github.com/gaearon/react-hot-loader/tree/next/docs for full instructions\nIf you also want the added benefit of your react component state persisting across\nreloads, you can use [Dan Abramov's](https://github.com/gaearon) excellent [react-hot-loader](https://github.com/gaearon/react-hot-loader) project, in conjunction with this one.\n\n`react-hot-loader` functions as a babel transform for your react apps, so we need to add it as a babel plugin.\n\nInstall with your client-side package manager (choose one)\n- `jspm install --dev npm:react-hot-loader`\n- `yarn add --dev react-hot-loader`\n- `npm install --save-dev react-hot-loader`\n\n## Example Projects\n- [React](https://github.com/capaj/jspm-react)\n- [Inferno](https://github.com/capaj/jspm-inferno)\n- [Mithril.js](https://github.com/capaj/jspm-mithril)\n- [Angular 2](https://github.com/capaj/jspm-ng2)\n- [Angular - NG6-starter](https://github.com/capaj/NG6-starter)\n\n## Contributing\nI've tried to keep both this, and [systemjs-hmr](https://github.com/alexisvincent/systemjs-hmr) as beginner friendly as possible with lots of comments. So please feel free to browse the code and contribute back to the project.\n\n## Credit\nThis project and the first HMR implementation was originally written by [@capaj](https://github.com/capaj), and none of this would have been possible without [Guy Bedford](https://github.com/guybedford).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexisvincent%2Fsystemjs-hot-reloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexisvincent%2Fsystemjs-hot-reloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexisvincent%2Fsystemjs-hot-reloader/lists"}