All Projects → alexisvincent → Systemjs Hot Reloader

alexisvincent / Systemjs Hot Reloader

Licence: mit
reloads your modules as needed so that you can have satisfyingly fast feedback loop when developing your app

Programming Languages

javascript
137323 projects - #8 most used programming language

Projects that are alternatives of or similar to Systemjs Hot Reloader

Crx Hotreload
Chrome Extension Hot Reloader
Stars: ✭ 545 (+153.49%)
Mutual labels:  hot-reloading, hot-reload
Developer Tools And Resources
The Best Tools and Resources for developers
Stars: ✭ 39 (-81.86%)
Mutual labels:  developer-tools, tools
Systemjs Hmr
Hot Module Replacement for SystemJS
Stars: ✭ 24 (-88.84%)
Mutual labels:  hot-reloading, hot-reload
Awesome Live Reloading
A curated collection of live-reloading / hot-reloading / watch-reloading tools for different languages and frameworks.
Stars: ✭ 396 (+84.19%)
Mutual labels:  developer-tools, hot-reload
Cssfx
Allow runtime modification of JavaFX CSS
Stars: ✭ 95 (-55.81%)
Mutual labels:  hot-reloading, hot-reload
Re Frisk
Take full control of re-frame app
Stars: ✭ 396 (+84.19%)
Mutual labels:  developer-tools, tools
Hr4r
Example project - "Hot Reloading 4 RequireJS" front-end web applications & some extra code demonstrating hot-reloading for Node.js Express servers
Stars: ✭ 28 (-86.98%)
Mutual labels:  hot-reloading, hot-reload
Jet Live
c++ hot code reload for linux and macos
Stars: ✭ 283 (+31.63%)
Mutual labels:  hot-reloading, hot-reload
Tutorialdb
A search 🔎 engine for programming/dev tutorials, See it in action 👉
Stars: ✭ 93 (-56.74%)
Mutual labels:  developer-tools, tools
Httptoolkit Ui
The UI of HTTP Toolkit
Stars: ✭ 91 (-57.67%)
Mutual labels:  developer-tools, tools
Restool
RESTool is an open source UI tool for managing RESTful APIs. It could save you time developing your own internal tools. A live example:
Stars: ✭ 338 (+57.21%)
Mutual labels:  developer-tools, tools
Httptoolkit Server
The backend of HTTP Toolkit
Stars: ✭ 140 (-34.88%)
Mutual labels:  developer-tools, tools
Elm Webpack Starter
Elm 0.19.1 + Webpack 4 with hot-reloading! (Includes Babel for port code; CI script)
Stars: ✭ 332 (+54.42%)
Mutual labels:  developer-tools, hot-reload
Ergo
The management of multiple apps running over different ports made easy
Stars: ✭ 452 (+110.23%)
Mutual labels:  developer-tools, tools
Fiddler Plus
自定义的Fiddler规则,多环境切换、解决跨域开发、快速调试线上代码必备|高效调试分析利器
Stars: ✭ 325 (+51.16%)
Mutual labels:  developer-tools, tools
Hoppscotch
👽 Open source API development ecosystem https://hoppscotch.io
Stars: ✭ 34,569 (+15978.6%)
Mutual labels:  developer-tools, tools
sp-live-reload
SharePoint pages live reload module for client side development
Stars: ✭ 23 (-89.3%)
Mutual labels:  developer-tools, hot-reload
Httptoolkit Desktop
Electron wrapper to build and distribute HTTP Toolkit for the desktop
Stars: ✭ 260 (+20.93%)
Mutual labels:  developer-tools, tools
Blindfold
🔎 Gitignore file generator written in rust
Stars: ✭ 60 (-72.09%)
Mutual labels:  developer-tools, tools
Instapack
All-in-one TypeScript and Sass compiler for web applications! 📦 🚀
Stars: ✭ 131 (-39.07%)
Mutual labels:  developer-tools, hot-reload

systemjs-hot-reloader

npm version Build Status

Official Hot Module Replacement (HMR) for 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).

systemjs-hot-reloader MUST be used in conjunction with event source such as:

systemjs-hot-reloader is a thin layer on top of 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 then check it out.

Usage

Install with your client-side package manager (choose one)

  • jspm install --dev npm:systemjs-hot-reloader
  • yarn add --dev systemjs-hot-reloader
  • npm install --save-dev systemjs-hot-reloader

systemjs-hot-reloader requires SystemJS >0.19.x or >=0.20.8.

systemjs-hot-reloader MUST run before your application code otherwise SystemJS won't know how to resolve your app's @hot imports.

Assuming your app entry point is app.js, wrap your import statement so that you first load systemjs-hot-reloader.

<script>
    System.import('systemjs-hot-reloader').then((connect) => {
        connect()
        System.import('app.js')
    })
</script>

connect can be passed a number of custom options. To initialise a custom connection

<script>
    System.import('systemjs-hot-reloader').then((connect) => {
        connect({ host: '//localhost:1234' })
        System.import('app.js')
    })
</script>

Until SystemJS does automatically, you need to tell SystemJS how to handle the @hot imports when building your app. To do this, add the following to your jspm config file.

{
  ...
  "map": {
    ...
    "@hot": "@empty"
  }
}

systemjs-hot-reloader will automatically set SystemJS.trace = true, so you no longer need to set this manually, as with previous versions.

Production

In production, systemjs-hot-reloader maps to an empty module so you can leave the systemjs-hot-reloader import in your index.html.

State Hydration and Safe Module Unloads

As described here, state hydration is handled in the following way.

When hot module replacement is added to an application there are a few modifications we may need to make to our code base, since the assumption that your code will run exactly once has been broken.

When a new version of a module is imported it might very well want to reinitialize it's own state based on the state of the previous module instance, to deal with this case and to cleanly unload your module from the registry you can import the previous instance of your module as you would any other module, as well as export an __unload function that will be called upon System.unload, ie. when your module is reloaded.

/**
 * You can import the previous instance of your module as you would any other module.
 * On first load, module == false.
 */
import { module } from '@hot'

/**
 * Since all exports of the previous instance are available, you can simply export any state you might want to persist.
 *
 * Here we set and export the state of the file. If 'module == false' (first load),
 * then initialise the state to {}, otherwise set the state to the previously exported
 * state.
 */
export const _state = module ? module._state : {}

/**
 * If you're module needs to run some 'cleanup' code before being unloaded from the system, it can do so,
 * by exporting an `__unload` function that will be run just before the module is deleted from the registry,
 * ie. as your module is being unloaded in preparation for being reloaded.
 *
 * Here you would unsubscribe from listeners, or any other task that might cause issues in your application,
 * or prevent the module from being garbage collected.
 *
 * See SystemJS.unload API for more information.
 */
export const __unload = () => {
    console.log('Unload something (unsubscribe from listeners, disconnect from socket, etc...)')
    // force unload React components
    ReactDOM.unmountComponentAtNode(DOMNode);	// your container node
}

React

This section isn't yet finished. see https://github.com/gaearon/react-hot-loader/tree/next/docs for full instructions

If you also want the added benefit of your react component state persisting across reloads, you can use Dan Abramov's excellent react-hot-loader project, in conjunction with this one.

react-hot-loader functions as a babel transform for your react apps, so we need to add it as a babel plugin.

Install with your client-side package manager (choose one)

  • jspm install --dev npm:react-hot-loader
  • yarn add --dev react-hot-loader
  • npm install --save-dev react-hot-loader

Example Projects

Contributing

I've tried to keep both this, and 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.

Credit

This project and the first HMR implementation was originally written by @capaj, and none of this would have been possible without Guy Bedford.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected]