kureev / browserify-react-live Goto Github PK
View Code? Open in Web Editor NEWReact Live Patch for browserify
License: MIT License
React Live Patch for browserify
License: MIT License
In the first example, change the follow in scripts/run
#!/bin/bash
node_modules/.bin/watchify index.js -o dist/bundle.js &
-node_modules/.bin/bfps components/* &
+node_modules/.bin/bfps ./components/* &
node_modules/.bin/http-server . &
wait
With a client connected, making a change will error
Starting up http-server, serving . on: http://0.0.0.0:8080
Hit CTRL-C to stop the server
ℹ [BDS:SYSTEM] [17:50:19] Patch server has been started on port 8081
ℹ [BDS:SYSTEM] [17:50:25] File components/MyComponent.js has been changed
ℹ [BDS:SYSTEM] [17:50:33] File components/MyComponent.js has been changed
/Users/kenneth/stuff/browserify-react-live/examples/01 - Basic/node_modules/browserify-patch-server/makeP
atch.js:9
})[0].content;
^
TypeError: Cannot read property 'content' of undefined
at calculateDiff (/Users/kenneth/stuff/browserify-react-live/examples/01 - Basic/node_modules/browser
ify-patch-server/makePatch.js:9:10)
at composeWrapper (/Users/kenneth/stuff/browserify-react-live/examples/01 - Basic/node_modules/browse
rify-patch-server/compose.js:6:24)
at processFile (/Users/kenneth/stuff/browserify-react-live/examples/01 - Basic/node_modules/browserif
y-patch-server/index.js:119:50)
at /Users/kenneth/stuff/browserify-react-live/examples/01 - Basic/node_modules/browserify-patch-serve
r/node_modules/babel/node_modules/babel-core/lib/api/node.js:125:5
at fs.js:334:14
at /Users/kenneth/stuff/browserify-react-live/examples/01 - Basic/node_modules/browserify-patch-serve
r/node_modules/chokidar/node_modules/readdirp/node_modules/graceful-fs/graceful-fs.js:42:10
at FSReqWrap.oncomplete (fs.js:95:15)
I'm assuming this library is similar to HMR in Webpack / React Hot Reloader? It would be useful if you provided a paragraph overview of exactly what this does.
React Proxy is still in early stages but it's considerably more stable than React Hot API and will eventually replace it.
Some advantages of React Proxy:
ReactMount
I have not actually tested it on RHL yet, but feel free to investigate it in parallel with me.
I'll port React Hot API to use it internally within a few days, but I'd just suggest using it directly.
I'm trying to play with the basic example, when I try to import the react with addons like this
'use strict';
import React from 'react/addons';
console.log('React', React);
const styles = {
button: {
padding: 20,
display: 'block',
},
};
module.exports = class MyComponent extends React.Component //...
React is actually undefined here and I got the Uncaught TypeError: Cannot read property 'Component' of undefined
error.
Note that this work if without the browserify-react-live
transformer.
Repro:
Add some directory under the components
folder in the first example.
├── components
│ ├── MyComponent.js
│ └── __tests__
❯ npm start
> [email protected] start /Users/kenneth/stuff/browserify-react-live/examples/01 - Basic
> ./scripts/run
Starting up http-server, serving . on: http://0.0.0.0:8080
Hit CTRL-C to stop the server
/Users/kenneth/stuff/browserify-react-live/examples/01 - Basic/node_modules/browserify-patch-server/index.js:53
throw e;
^
Error: EISDIR, illegal operation on a directory
at Error (native)
at Object.fs.readSync (fs.js:552:19)
at Object.fs.readFileSync (fs.js:384:28)
at Object.transformFileSync (/Users/kenneth/stuff/browserify-react-live/examples/01 - Basic/node_modules/browserify-patch-server/node_modules/babel/node_modules/babel-core/lib/api/node.js:137:54)
at iterateFiles (/Users/kenneth/stuff/browserify-react-live/examples/01 - Basic/node_modules/browserify-patch-server/index.js:51:22)
at Array.map (native)
at runServer (/Users/kenneth/stuff/browserify-react-live/examples/01 - Basic/node_modules/browserify-patch-server/index.js:48:25)
at Object.<anonymous> (/Users/kenneth/stuff/browserify-react-live/examples/01 - Basic/node_modules/browserify-patch-server/bin/cmd.js:17:15)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
Hey,
I'm getting this error:
WebSocket connection to 'ws://localhost:8081/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
Here is the task from my gulpfile.js:
var hot = require('browserify-react-live');
gulp.task('js', function() {
browserify({
entries: 'src/js/main.js',
extensions: ['.jsx'],
debug: true
})
.transform(hot)
.transform(babelify)
.bundle()
.pipe(source('main.js'))
// .pipe(uglifyjs())
.pipe(gulp.dest('dist'))
});
Hey, just want to say this project looks sweet from the demos and I really hope I can get it working for me. I ran into an issue when trying this library on my own codebase and was able to reproduce in the example 01 demo app too.
At the top of MyComponent.js I added the line var $ = require('jquery');
and then npm installed jquery and ran the app with npm start
. It starts up fine, watchify is able to find jquery and bundle the app. But now when I make a change in that same file, the patch fails with an error (attached screenshot of chrome dev console).
Any idea how to fix this?
General idea is to build as-much-as-possible bug-free browserify live react module replacement tool. I tried it on 2 different projects, and it doesn't work out-of-box for no one of them.
For this project I took some ideas from livereactload
, excluded support for legacy versions of react and improved the way how program transmit the data between server and client. Now it uses jsdiff
to calculate (on the server) and apply diff (on the client). In this case we transmit only patch which has barely small size (~ 1Kb for common updates).
That's the initial idea and what we get now. We need to consider the best way to use react-hot-api
to make 100% working prototype.
If I add "babelify" to transform (via package of CLI options) I get error:
Error: Parsing file D:\WebServers\custom_home\_BFK_NODE\_Strongloop\browserify-r
eact-live\examples\basic\client\users\store.js: Bad character escape sequence (8
:81)
Apparently there is nothing bad with store.js since error goes away if I remove 'browserify-react-live' transform.
However, my store.js
:
import User from './user';
import {Record} from 'immutable';
import {actions as authActions} from '../auth/actions';
function revive(state) {
// Handle case user was authenticated on the server.
const viewer = state && state.get('viewer');
return new (Record({
viewer: viewer ? new User(viewer) : null
}));
}
export default function(state, action, payload) {
if (!action) state = revive(state);
switch (action) {
case authActions.loginSuccess:
// Hideous side effect hack, will be removed soon with new react-router.
User.isLoggedIn = true;
console.log('Set viewer to:',payload)
return state.set('viewer', new User(payload));
}
return state;
}
I'm sorry if this is a bad question - I'm kind of new in Node.
My CLI command is:
watchify -t [babelify --stage 0] -t browserify-react-live client/main.js -o dist/build.js
Please, advice.
Hi @Kureev again, I'm trying to play with this module more and find some new issue:
Basically I copy all the code from the react-router
auth-flow example here and want to check if the hot-reload stuff support the login state well(very important in my case as I don't want to do login again and again while development and I think this is a big reason why I need it so much).
The login state is kept well with hot-reload but the page become blank and I have to refresh to make it work. Any idea on this?
I don't mind to refresh the browser but it would be cool if I don't have to.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.