Code Monkey home page Code Monkey logo

browserify-react-live's People

Contributors

fraserxu avatar kirjs avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar

Forkers

dariocravero fraserxu gilesvangruisen

browserify-react-live's Issues

Issue working with babelify

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.

import react addons error

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.

Live update fails when requiring npm dependencies

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).

screen shot 2015-12-06 at 9 36 52 pm

Any idea how to fix this?

Why?

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.

Consider using React Proxy

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:

  • Fully covered by tests
  • Doesn't need ReactMount
  • Supports ES6 getters and setters
  • Supports hot-reloading static methods

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.

Description of What This Does

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.

Error when watched directory contains subdirectories

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)

Websocket connection refused

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'))
});

Error when browserify-patch-server argument has ./

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)

need to refresh the page to see changes with react-router auth demo

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).

screen shot 2015-08-06 at 10 35 22 am

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.