Version 1
;\n }\n});\n\nmodule.exports = SomeComponent;\n\n\n\n// ================================================\n// The code you might generate with your build tool\n// to hide hot reloading mechanics from user:\n\nvar makeHot = SOME_STORAGE_SHARED_BETWEEN_VERSIONS_OF_SAME_MODULE.makeHot;\nif (!makeHot) {\n // On the first run, we will get here\n makeHot = SOME_STORAGE_SHARED_BETWEEN_VERSIONS_OF_SAME_MODULE.makeHot = require('react-hot-api')(require('react/lib/ReactMount'));\n}\n\n// Will merely register SomeComponent so it can later be patched\nmodule.exports = makeHot(module.exports);\n```\n\n##### SomeComponent.js, subsequent runs (emitted after user edits the source)\n```javascript\nvar React = require('react');\n\nvar SomeComponent = React.createClass({\n render: function () {\n returnVersion 2
;\n }\n});\n\nmodule.exports = SomeComponent;\n\n\n\n// ================================================\n// The code you might generate with your build tool\n// to hide hot reloading mechanics from user:\n\nvar makeHot = SOME_STORAGE_SHARED_BETWEEN_VERSIONS_OF_SAME_MODULE.makeHot;\nif (!makeHot) {\n // On the second run, we will *NOT* get here\n makeHot = SOME_STORAGE_SHARED_BETWEEN_VERSIONS_OF_SAME_MODULE.makeHot = require('react-hot-api')(require('react/lib/ReactMount'));\n}\n\n// Will patch existing SomeComponent with updated methods, force re-rendering and return patched first version\nmodule.exports = makeHot(module.exports);\n```\n\nYou may also give user some way to access `makeHot` in case they want to allow hot-reloading for arbitrary classes inside the module:\n\n##### AnonComponents.js\n```javascript\n// The user still doesn't need to know these lines are being inserted by the tool:\nmodule.makeHot = SOME_STORAGE_SHARED_BETWEEN_VERSIONS_OF_SAME_MODULE.makeHot;\nif (!module.makeHot) {\n // put the function into some sane place (e.g. module.makeHot) without relying on hidden variables\n module.makeHot = SOME_STORAGE_SHARED_BETWEEN_VERSIONS_OF_SAME_MODULE.makeHot = require('react-hot-api')(require('react/lib/ReactMount'));\n}\n// You might generate the code above with your build tool\n// to hide hot reloading mechanics from user.\n// ================================================\n\n\n\nvar React = require('react');\n\nfunction createLabelComponent(str) {\n var cls = React.createClass({\n render: function () {\n return {str};\n }\n });\n \n // ... but you may give user freedom to do this:\n if (module.makeHot) { // we're in development and makeHot is available\n cls = module.makeHot(cls, str); // use parameter as unique ID for anon class\n }\n \n return cls;\n}\n\n// These will be hot-reloadable:\nvar Foo = createLabelComponent('Foo');\nvar Bar = createLabelComponent('Bar');\n```\n\n### Thanks\n\n* [Tobias Koppers](https://github.com/sokra) for Webpack and HMR;\n* [Johannes Lumpe](https://github.com/johanneslumpe) and [Ben Alpert](https://github.com/spicyj) for helping me come up with the original hot reloading approach I'm still using here;\n* [Omar Skalli](https://github.com/Chetane) for coming up with an approach for forcing tree update that is compatible with ES6 classes [just the moment I needed it most](https://twitter.com/dan_abramov/status/543174410493239297);\n* [Kyle Mathews](http://github.com/KyleAMathews) for being the first person to actually use hot loader and helping spread the word when it was in initial stages;\n* [Christopher Chedeau](https://github.com/vjeux) for retweeting my horrendously hacked together proof of concept video, overwhelming response from which gave me the incentive to actually finish this thing;\n* Bret Victor for making me think live editing should be the norm, although he probably hates what people do after watching his videos.\n","_attachments":{},"homepage":"https://github.com/gaearon/react-hot-api","bugs":{"url":"https://github.com/gaearon/react-hot-api/issues"},"license":"MIT"}