can-hot
v0.1.8
Published
Hot reloading for canjs components
Downloads
9
Readme
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 [email protected]
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 onviewModel
will be restored) - insertedEvent (
true
) - executeinserted
event method - removedEvent (
true
) - executeremoved
event method - hotEvents (
true
) - executebeforeHot
andafterHot
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.