├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── index.html ├── index.js ├── package.json ├── server.js ├── src └── app.js └── styles.css /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Nick Johnstone 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cycle-hot-reloading-example 2 | A Cycle.js starter project with hot reloading using browserify and browserify-hmr. 3 | 4 | Usage 5 | --- 6 | 7 | To get set up: 8 | 9 | ```bash 10 | git clone https://github.com/Widdershin/cycle-hot-reloading-example.git 11 | cd cycle-hot-reloading-example 12 | npm install 13 | npm start 14 | ``` 15 | 16 | You should then be able to visit localhost:8000 and you'll see the text 'Change me!'. 17 | 18 | You can then go into `src/app.js` and change that text, and you should see the result straight away without the page reloading. 19 | 20 | You can also change the styles in `styles.css` and it will live reload. 21 | 22 | This is made possible by [AgentME/browserify-hmr](http://www.github.com/AgentME/browserify-hmr), along with mattdesl's excellent [budo](http://www.github.com/mattdesl/budo) development server. All of the hot reloading configuration is done in `index.js`. The key part is that the old Cycle application is diposed every time the code changes. 23 | 24 | 25 | Deployment 26 | --- 27 | 28 | To get your project online, if you don't need a backend server, you can deploy to Github pages. 29 | 30 | Note: if you cloned this repo directly, you will first need to [create a new repo](https://github.com/new). Since you're uploading an existing repo, don't add a README, license or .gitignore. Then follow the instructions to add your new repo as the remote. You will need to `git remote rm origin` beforehand. 31 | 32 | To deploy for the first time, we need to set up a `gh-pages` branch: 33 | 34 | ```bash 35 | git checkout -b gh-pages 36 | npm run bundle 37 | git add . 38 | git commit -m "Add bundled app" 39 | git push origin gh-pages 40 | ``` 41 | 42 | Then visit http://**username**.github.io/**repository**. Your site should be online within 5 minutes or so. 43 | 44 | To update your site in future, just checkout back to the branch and repeat the process: 45 | ```bash 46 | git checkout gh-pages 47 | git merge master --no-edit 48 | npm run bundle 49 | git add . 50 | git commit -m "Update bundle" 51 | git push origin gh-pages 52 | ``` 53 | 54 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cycle Hot Reloading Example 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import {run} from '@cycle/core'; 2 | import {makeDOMDriver} from '@cycle/dom'; 3 | import {restart, restartable} from 'cycle-restart'; 4 | import isolate from '@cycle/isolate'; 5 | 6 | var app = require('./src/app').default; 7 | 8 | const drivers = { 9 | DOM: restartable(makeDOMDriver('.app'), {pauseSinksWhileReplaying: false}), 10 | }; 11 | 12 | const {sinks, sources} = run(app, drivers); 13 | 14 | if (module.hot) { 15 | module.hot.accept('./src/app', () => { 16 | app = require('./src/app').default; 17 | 18 | restart(app, drivers, {sinks, sources}, isolate); 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cycle-hot-reloading-example", 3 | "version": "0.0.1", 4 | "description": "A Cycle.js starter project with hot reloading using Browserify", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "babel-node server.js", 8 | "test": "mocha --compilers js:babel-register", 9 | "bundle": "browserify index.js -t babelify -t uglifyify -o bundle.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/Widdershin/cycle-hot-reloading-example.git" 14 | }, 15 | "keywords": [ 16 | "hot", 17 | "reloading", 18 | "cycle.js", 19 | "happiness" 20 | ], 21 | "author": "Nick Johnstone", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/Widdershin/cycle-hot-reloading-example/issues" 25 | }, 26 | "homepage": "https://github.com/Widdershin/cycle-hot-reloading-example", 27 | "dependencies": { 28 | "@cycle/core": "^6.0.0-rc2", 29 | "@cycle/dom": "^9.0.1", 30 | "@cycle/isolate": "^1.2.0", 31 | "babel-preset-es2015": "^6.1.18", 32 | "cycle-restart": "0.0.14", 33 | "rx": "^4.0.7" 34 | }, 35 | "devDependencies": { 36 | "babel-cli": "^6.2.0", 37 | "babel-core": "^6.2.1", 38 | "babelify": "^7.2.0", 39 | "browserify": "^12.0.1", 40 | "browserify-hmr": "^0.3.1", 41 | "budo": "^6.1.0", 42 | "uglifyify": "^3.0.1" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | import budo from 'budo'; 2 | import babelify from 'babelify'; 3 | import hotModuleReloading from 'browserify-hmr'; 4 | 5 | budo('./index.js', { 6 | serve: 'bundle.js', 7 | live: '*.{css,html}', 8 | port: 8000, 9 | stream: process.stdout, 10 | browserify: { 11 | transform: babelify, 12 | plugin: hotModuleReloading 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import {div, button} from '@cycle/dom'; 2 | 3 | import {Observable} from 'rx'; 4 | 5 | function view (count) { 6 | return ( 7 | div('.counter', [ 8 | div('.count', `Count: ${count}`), 9 | button('.subtract', 'Subtract'), 10 | button('.add', 'Add') 11 | ]) 12 | ); 13 | } 14 | 15 | export default function App ({DOM}) { 16 | const add$ = DOM 17 | .select('.add') 18 | .events('click') 19 | .map(ev => +1); 20 | 21 | const subtract$ = DOM 22 | .select('.subtract') 23 | .events('click') 24 | .map(ev => -1); 25 | 26 | const count$ = add$.merge(subtract$) 27 | .startWith(0) 28 | .scan((total, change) => total + change); 29 | 30 | return { 31 | DOM: count$.map(view) 32 | }; 33 | } 34 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Widdershin/cycle-hot-reloading-example/0b1af5850c6f7ca73a87d4ee1a06738130f8b213/styles.css --------------------------------------------------------------------------------