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","maintainers":[{"name":"gaearon","email":"dan.abramov@gmail.com"}],"time":{"modified":"2022-06-25T23:14:11.762Z","created":"2014-12-12T05:01:59.407Z","0.1.0":"2014-12-12T05:01:59.407Z","0.1.1":"2014-12-12T05:04:04.459Z","0.1.2":"2014-12-12T05:58:23.893Z","0.1.3":"2014-12-12T06:09:38.991Z","0.1.4":"2014-12-12T16:28:25.014Z","0.1.5":"2014-12-12T17:00:28.054Z","0.1.6":"2014-12-12T17:02:44.684Z","0.2.0":"2014-12-19T04:47:02.027Z","0.2.1":"2014-12-19T12:19:23.602Z","0.2.2":"2014-12-31T16:39:11.691Z","0.3.0":"2015-01-12T14:01:44.316Z","0.3.1":"2015-01-28T12:36:41.152Z","0.3.2":"2015-01-28T13:07:58.496Z","0.3.3":"2015-01-30T05:24:55.816Z","0.3.4":"2015-01-31T22:42:52.711Z","0.3.5":"2015-02-26T01:58:17.236Z","0.3.6":"2015-03-02T17:23:42.908Z","0.3.7":"2015-03-04T20:39:40.795Z","0.4.0":"2015-03-09T19:51:33.058Z","0.4.1":"2015-03-09T20:20:25.898Z","0.4.2":"2015-03-10T04:08:01.065Z","0.4.3":"2015-03-10T04:08:51.154Z","0.4.4":"2015-05-01T23:34:35.072Z","0.4.5":"2015-07-08T11:01:57.305Z","0.4.6":"2015-08-21T18:33:19.344Z","0.5.0-alpha":"2015-08-22T15:12:13.318Z","0.5.0-alpha-1":"2015-08-24T10:21:08.870Z","0.5.0-alpha-2":"2015-08-24T14:22:28.644Z","0.5.0-alpha-3":"2015-08-27T21:44:00.440Z","0.5.0":"2015-09-02T12:20:54.034Z","0.4.7":"2015-09-28T11:34:39.278Z"},"homepage":"https://github.com/gaearon/react-hot-api","repository":{"type":"git","url":"git+https://github.com/gaearon/react-hot-api.git"},"author":{"name":"Dan Abramov","email":"dan.abramov@me.com","url":"http://github.com/gaearon"},"bugs":{"url":"https://github.com/gaearon/react-hot-api/issues"},"license":"MIT","readmeFilename":"README.md","users":{"moimikey":true}}