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'
canHot.config({preserveState: true})
new HMR({
main: 'app',
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
npm run start
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.