From b600c0544ca71cc9b997f1e958dba19c2af2d4a9 Mon Sep 17 00:00:00 2001 From: Luke Date: Sun, 14 Feb 2016 19:34:52 +0000 Subject: [PATCH 1/6] Switch back to using resolve to fix server hot loading --- src/configuration.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/configuration.js b/src/configuration.js index cf01d7a..c0d72f6 100644 --- a/src/configuration.js +++ b/src/configuration.js @@ -2,10 +2,10 @@ import path from 'path'; function defaultConfig() { const app = { - assetsPath: path.join(process.cwd(), '/app/assets/'), - tmpPath: path.join(process.cwd(), '/tmp/'), - rootPath: path.join(process.cwd(), '/'), - viewsPath: path.join(process.cwd(), '/app/views/') + assetsPath: path.resolve(process.cwd() + '/app/assets/'), + tmpPath: path.resolve(process.cwd() + '/tmp/'), + rootPath: path.resolve(process.cwd() + '/'), + viewsPath: path.resolve(process.cwd() + '/app/views/') }; const express = { From 485e204f692bbaae44ce3c00ff1ff22e4a765321 Mon Sep 17 00:00:00 2001 From: Luke Date: Sun, 14 Feb 2016 09:49:30 +0000 Subject: [PATCH 2/6] Implement livereactload for hot loading --- package.json | 17 ++++++++++++++++- src/application.js | 3 ++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index dfbe75e..0ffd252 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ }, "devDependencies": { "babel-cli": "^6.4.5", + "babel-plugin-react-transform": "^2.0.0", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babelify": "^7.2.0", @@ -47,7 +48,9 @@ "eslint-config-standard-react": "^1.2.1", "eslint-plugin-react": "^3.15.0", "eslint-plugin-standard": "^1.3.1", + "livereactload": "^2.1.1", "morgan": "^1.6.1", + "react-proxy": "^1.1.2", "watchify": "^3.7.0" }, "eslintConfig": { @@ -76,6 +79,18 @@ "presets": [ "es2015", "react" - ] + ], + "env": { + "development": { + "plugins": [ + ["react-transform", { + "transforms": [{ + "transform": "livereactload/babel-transform", + "imports": ["react"] + }] + }] + ] + } + } } } diff --git a/src/application.js b/src/application.js index fa53dd6..d32df99 100644 --- a/src/application.js +++ b/src/application.js @@ -1,5 +1,6 @@ import browserify from 'browserify'; import watchify from 'watchify'; +import livereactload from 'livereactload'; import fs from 'fs'; import path from 'path'; @@ -103,7 +104,7 @@ export function watchClient({ config, onBuildFinish }) { const entries = buildClientEntryPoint(config); const cache = {}; const packageCache = {}; - const plugin = [watchify]; + const plugin = [watchify, livereactload]; ensureTmpPathExists(config); From dd69fd1b0ca87640d33535fbf42b0a13b560f5fe Mon Sep 17 00:00:00 2001 From: Luke Date: Sun, 14 Feb 2016 18:55:00 +0000 Subject: [PATCH 3/6] Reorder creation of tmp dir --- src/application.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/application.js b/src/application.js index d32df99..b3286e3 100644 --- a/src/application.js +++ b/src/application.js @@ -101,13 +101,13 @@ export function buildClient({ config, onBuildFinish }) { } export function watchClient({ config, onBuildFinish }) { + ensureTmpPathExists(config); + const entries = buildClientEntryPoint(config); const cache = {}; const packageCache = {}; const plugin = [watchify, livereactload]; - ensureTmpPathExists(config); - let b = browserify({ cache, entries, insertGlobalVars, From 494bd65f92bcb9b608ab2ba28f1a6d55707da098 Mon Sep 17 00:00:00 2001 From: Luke Date: Sun, 14 Feb 2016 20:03:10 +0000 Subject: [PATCH 4/6] Stop propagation of hot loading any further than userland --- src/application.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/application.js b/src/application.js index b3286e3..eb3d4bc 100644 --- a/src/application.js +++ b/src/application.js @@ -26,7 +26,8 @@ function buildIndexEntryPoint(config) { const entryPointPath = config.app.tmpPath + '/index.js'; const requireGlobs = "['app/actions/*.jsx', 'app/views/**/*.jsx', 'config/*.jsx']"; console.log('Writing index entry point to', entryPointPath); - fs.writeFileSync(entryPointPath, `export default require('bulk-require')('${config.app.rootPath}', ${requireGlobs});`); + fs.writeFileSync(entryPointPath, `module.onReload && module.onReload(() => true); +export default require('bulk-require')('${config.app.rootPath}', ${requireGlobs});`); console.log('Finished writing index entry point.'); return entryPointPath; } From 4de99e31725c21a08d2c30b5af4c1fdb3d3950e9 Mon Sep 17 00:00:00 2001 From: Luke Date: Sun, 14 Feb 2016 20:04:53 +0000 Subject: [PATCH 5/6] Update example views to be classes since pure functions cannot be hot loaded --- examples/app/views/hello/test.jsx | 16 +++++++++------- examples/app/views/hello/world.jsx | 16 +++++++++------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/examples/app/views/hello/test.jsx b/examples/app/views/hello/test.jsx index ce0d8a8..6fb26ef 100644 --- a/examples/app/views/hello/test.jsx +++ b/examples/app/views/hello/test.jsx @@ -1,8 +1,10 @@ -export default function Test() { - return ( -
- test - Hello -
- ); +export default class Test extends React.Component { + render() { + return ( +
+ test + Hello +
+ ); + } } diff --git a/examples/app/views/hello/world.jsx b/examples/app/views/hello/world.jsx index 870912a..774238e 100644 --- a/examples/app/views/hello/world.jsx +++ b/examples/app/views/hello/world.jsx @@ -1,8 +1,10 @@ -export default function World(props) { - return ( -
- Hello World: {props.world} - Test -
- ); +export default class World extends React.Component { + render() { + return ( +
+ Hello World: {this.props.world} + Test +
+ ); + } } From ef35c1a63a436d77dc722bca2f08201554b48a6f Mon Sep 17 00:00:00 2001 From: Luke Date: Sun, 14 Feb 2016 20:05:44 +0000 Subject: [PATCH 6/6] Update roadmap --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4423943..48ef333 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ This will boot up a server at http://localhost:3000 - [x] Client side rendering - [x] Isomorphic routing with execution of actions based on route match - [x] Server side hot loading (no browser refresh tho) - - [ ] Client side hot loading (need help: https://github.com/lukemorton/republic/pull/12) + - [x] Client side hot loading of views extending React.Component - [ ] `republic new` command for new projects - [ ] Rewrite republic with tests (initial dev was spike) - [ ] Promo video