Can-Hot

REAL and frictionless hot reloading for CanJS components without loosing state!

What is it

CanJS is a great framework (library) for building dynamic web applications. It gives out of the box everything you need to build modern dynamic web UIs, while keeping it simple.

Can-Hot is a small add-on aimed to make your DX (developers experience) much more pleasant and with less friction, it allows you to tweak can.Components in realtime the same way as for example React Hot Loader for React does, so you need rarely bother about full page reloads while application development process.

Install

npm install can-hot

NB! Implicitly depends on can@2.3.x and jquery npm modules.

Usage

Can-hot provides a basic mechanics for hot-swapping can.Components and can be used with any set of tools for hot-reloading. Given example uses Steal-HMR and Watchalive Dev Server.

<script src="/node_modules/steal/steal.js">    
  import HMR from 'steal-hmr'
  import canHot from 'can-hot'
   
  // We can call `canHot.reload()` method any time when 
  // some `can.Component` has been replaced by new instance
  // but we need to know when it actually happens, 
  // so are using it here with Steal-HMR.    
 
  // We may instruct Can-Hot to preserve state of reloaded components.
  // Components having their own state is not very good thing
  // and side effects are possible, so it is `false` by default
  canHot.config({preserveState: true})
 
  new HMR({                    
    main: 'app',                
    // Here we just attach Can-Hot's `after` hook to Steal-HMR,
    // so Can-Hot knows when reloading are finished.
    plugin: [canHot],       
    handle: watchalive.onFiles,   
    teardown: () => $('bmi-app').remove()
  })
</script> 

API

Your can configure using canHot.config following options:

• preserveState (false) - keep state of reloaded components (attribute values on viewModel will be restored)
• insertedEvent (true) - execute inserted event method
• removedEvent (true) - execute removed event method
• hotEvents (true) - execute beforeHot and afterHot component's events method

Try and explore sources of demo app

Try and test how all this works with module's demo app.

git clone http://github.com/whitecolor/can-hot
npm install # please, use NPM 3, otherwice remove system.npmAlgorithm in package.json 
npm run start # app will run on 7000, to use other port: npm run start -- --port your_port 

Open your browser http://localhost:7000 You can changes files js/css/less inside the app folder and see what happens Notice that css/less reload do not made any changes to apps current state

NB! This demo app uses watchalive server-side pre-compilation for *.js sources with BabelJS for the sake of example.

Licence

ISC.