jsonmaur / jumpsuit Goto Github PK

You should try reaching out to the author of this TechCrunch article, offering an exclusive into the mindset of React developers, where Jumpsuit compares to the Facebook project, etc.
https://techcrunch.com/2016/07/22/facebooks-new-open-source-project-makes-it-easier-to-get-started-with-react/

Hi, is there any example how to use this with redux-thunk? I tried, it didn't work.

How do you do asynchronous calls?

If i launch jumpsuit watch for the first time in a project it has to build a lot of things, then every time a file changes it rebuilds in less time.

If I close the development server and open it again on the same project it still takes a lot of time, It could use some caching so the time to build is more like in succesive builds.

% jumpsuit watch
     _                       _ _
    |_|_ _ _____ ___ ___ _ _|_| |_
    | | | |     | . |_ -| | | |  _|
   _| |___|_|_|_|  _|___|___|_|_|
  |___|         |_|
  
▸   running at http://localhost:8000
▸   building... ✓ (7259ms)
▸   building... ✓ (1416ms)
▸   building... ✓ (1425ms)
▸   building... ✓ (1014ms)
▸   building... ✓ (967ms)

The --port command line argument is ignored by the serve.js file.

It receives the argv object, but does nothing with it and just uses the CONFIG to start the server and set the process.env variables.

if try to access a route that is deeper than one the website will fail to find app.js and app.css

opening http://localhost:8000/asdf/asdf in my browser will result in

asdf:6 GET http://localhost:8000/asdf/app.css
asdf:11 GET http://localhost:8000/asdf/app.js

while opening http://localhost:8000/asdf will give you the expected

browser.js:49Warning: [react-router] Location "/asdf" did not match any routes

(Running on Ubuntu 16.04.1 amd64)

I am wanting to use jsx file extensions rather than js file extensions. I have tried adding .jsx to the browserify config section but that doesn't seem to be helping. Can someone give me a quick example of how I need to configure jumpsuit.config.js to make this work properly?

Is it recommended to combine all states before passing into the render of an application's router or is it possible to only import a state file when needed by a container / component?

const state = { app: AppState, language: LanguageState }

Hey,

I've just installed jumpsuit globally but when I run the new command nothing is being created. I get the ASCII logo and a message saying it's ready to go, cd into the directory but it hasn't actually created anything.

Jumpsuit: 0.6.0
Node: 6.3.1
NPM: 3.10.5
OS: Ubuntu 16.04 xenial

Cheers

I love this project, and the examples are pretty straight forward, but I think it would be highly beneficial to include some unit testing examples as well to ease any uncertainty around how to unit test things in jumpsuit (even though I'm sure it's not much different to testing standard functions and components)

If in development mode I save a file with errors no more building... output will be shown after the error is fixed, even if the server is actually rebuiling the code and reloading the page.

% jumpsuit watch
     _                       _ _
    |_|_ _ _____ ___ ___ _ _|_| |_
    | | | |     | . |_ -| | | |  _|
   _| |___|_|_|_|  _|___|___|_|_|
  |___|         |_|
  
▸   running at http://localhost:8000
▸   building... ✓ (6858ms)
▸   building... ✓ (1973ms)
▸   building... ✓ (1571ms)
▸   building... 
▸   /home/hchinchilla/projects/arale-ng/web/frontend/src/components/link.js: Unexpected token, expected , (23:50) while parsing file: /home/hchinchilla/projects/arale-ng/web/frontend/src/components/link.js

# Fix error, expect to se more lines like this
# ▸   building... ✓ (1973ms)
# but it won't happen

The project builds, but when loading on the browser this error appears on the console:

state.js:1 Uncaught TypeError: Cannot read property 'initial' of undefined(…)

If I want a plain app with no routing, and just pass a component into Render(), it throws this error:

Warning: [react-router] Location "/" did not match any routes

We need to somehow take into account initialization functions in the app (componentWillMount, etc.), and not replay those actions.

Hi

I know you guys have your own thing but I would like to webpack(I just spent alot of time learning it a few days ago and don't feel like switching)

I am trying to get some text to dispaly.

index.js (what webpack looks at)

import {Render } from 'jumpsuit';

import App from './components/app.js';

Render({}, <App />);

app.js

import { Component } from 'jumpsuit';

import 'materialize-css/sass/materialize.scss';
import '../styles/main.scss';

const App =  Component({
    render() {
      return (
        <div>
          <h4>Hi</h4>
        </div>
      );
    },
  });

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <!--materialize does not understand jquery if I use it as import-->
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

Today I'm trying to give jumpsuit a try but I'm getting the attached error when trying to create a new project.

OS X El Capitan 10.11.5
Node version: v4.1.0
npm version: 3.8.3

Hi,

I'm trying to use the router, but whatever URL I type, it's always MainMenu that is rendered :

const Layout = Component({
    render() {
        return (
            <div>
                <p>pl id : <code>{this.props.playerId}</code></p>
                {this.props.children}
                <Notifications />
            </div>
        )
    }
}, function(state){
    return {playerId: state.player.id}
})

const App = Component({
    render() {
        return (
            <Router>
                <Route path="/" component={Layout}>
                    <IndexRoute component={MainMenu} />
                    <Route path="/party/:id" component={Party} />
                </Route>
            </Router>
        )
    }
})

If I define my router as follows, I see a "did not mach any route" error :

<Router>
    <Route path="/party/abcd" component={Party} />
</Router>

An action of type @@router/LOCATION_CHANGE and hash: "#/party/zd" is fired. I tried with simple paths like "/party" too.

Can you help me to figure out why ?

Thank you

On Windows 10 Aniversary Update (1607):

> jumpsuit watch --port 8800
     _                       _ _
    |_|_ _ _____ ___ ___ _ _|_| |_
    | | | |     | . |_ -| | | |  _|
   _| |___|_|_|_|  _|___|___|_|_|
  |___|         |_|

▸   running at http://localhost:8000
✓ (19ms)
▸   building... ✓ (518ms)

and it doesn't listen on port 8800 as requested (ie. not just a message issue)

Behaves the same way in both powershell and cmd

Great project, I want to give it a try. Is there any tutorial on how to implement react router and server side rendering? Sorry if it's noob stuff but I'm very new to react

Would it be possible to add react-intl to one of the example applications. I'm still getting a "property 'props' of undefined" error when wrapping the JumpSuit Router component with the IntlProvider component.

I've managed to get it working by adding react-router as a dependency and importing Router directly.

Just noticed that I'm getting butler 0.4.1 instead of 0.4.2 on the package.json of the jumpsuit-cli npm package. I'm guessing this has something to do with lerna, but I'm not really sure...

Hello, I looked everywhere and couldn't find anything about it:
Is there any way to disable the DevTool in production?

PS: jumpsuit.io doesn't work anymore, but you probably know that

I've splitted the previous issue (#71) to explain my findings.

When importing the saved state React complains:

Dev Tools: Press ctrl+h to toggle and ctrl+p to change position
bundle.js:39217 Jumpsuit State Imported
bundle.js:12109 Warning: setState(...): Cannot update during an existing state transition
(such as within `render` or another component's constructor). Render methods should
be a pure function of props and state;
constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

My first idea was that it's caused by a race condition, created when the promise finishes it's execution while the component is still rendering.

But editing the code to create a minimal version to reproduce the problem I saw that replacing return this.state.ready ? this.props.children : <span />by return this.props.children; in the render() method makes the bug impossible to reproduce, so may not be related to a race condition.

Also I've noticed than after rerendering the page and loading the previous state future editions in code will not trigger a successful HSR and the page will reload normally instead.

I've spent several hours this weekend trying to find a fix for this, but with my limited knowledge in the area this is all I've managed to learn about.

When the state contains a dispatched action which contains a function the HSR module fails because it seems that PouchDB can't store functions.

Failed to execute 'put' on 'IDBObjectStore': An object could not be cloned.

As a workarround I've edited hsrPouch.js like this:

const cleanState = (state) => {
  Object.keys(state.actionsById).forEach((actionId) => {
    Object.keys(state.actionsById[actionId].action).forEach((actionKey) => {
      if (typeof(state.actionsById[actionId].action[actionKey]) === "function") {
        state.actionsById[actionId].action[actionKey] = "function {...removed...}"
      }
    })
  })
  return state
}

function save (ts, state) {
  return ready
    .then((res) => {
      return db.put({
        _id: String(ts),
        state: cleanState(state)
      })
    })
}

Now it works but I get this other error:

Dev Tools: Press ctrl+h to toggle and ctrl+p to change position
bundle.js:39217 Jumpsuit State Imported
bundle.js:12109 Warning: setState(...): Cannot update during an existing state transition
(such as within `render` or another component's constructor). Render methods should
be a pure function of props and state;
constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

errors coming like this:

media query expression must begin with '('

failed to locate @import file new.scss.styl

Upgrade to the latest dependencies. i.e. React, React Router etc.

On Windows 10 in node v6.2.2 and npm v3.9.5, I followed the getting started instructions:

1. jumpsuit new myProjectName
2. cd myProjectName
3. jumpsuit watch

When browsing to localhost:8000 address, however, I get an empty, dark blue page. Opening the web console shows the following error message:
GET http://localhost:8000/app.js [HTTP/1.1 404 Not Found 4ms]

There is no app.js file anywhere other than the src folder.

I just found this project and thought it would be a great way to start learning about React. But, I can not get any of it to work. Just doing the Quick Start guide gives a blank page with a gradient blue background. None of the JavaScript files were compiled. Since I do not know much about React, I can't figure out where it went wrong. HELP!

I'm getting this error in the console and I couldn't find anything related to it, so here goes:

invariant.js:38 Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
    at invariant (webpack:///./~/fbjs/lib/invariant.js?:38:15)
    at Object.addComponentAsRefTo (webpack:///./~/jumpsuit/~/react/lib/ReactOwner.js?:69:47)
    at attachRef (webpack:///./~/jumpsuit/~/react/lib/ReactRef.js?:23:16)
    at Object.ReactRef.attachRefs (webpack:///./~/jumpsuit/~/react/lib/ReactRef.js?:42:5)
    at ReactDOMComponent.attachRefs (webpack:///./~/jumpsuit/~/react/lib/ReactReconciler.js?:24:12)
    at CallbackQueue.notifyAll (webpack:///./~/jumpsuit/~/react/lib/CallbackQueue.js?:67:22)
    at ReactReconcileTransaction.close (webpack:///./~/jumpsuit/~/react/lib/ReactReconcileTransaction.js?:81:26)
    at ReactReconcileTransaction.closeAll (webpack:///./~/jumpsuit/~/react/lib/Transaction.js?:204:25)
    at ReactReconcileTransaction.perform (webpack:///./~/jumpsuit/~/react/lib/Transaction.js?:151:16)
    at batchedMountComponentIntoNode (webpack:///./~/jumpsuit/~/react/lib/ReactMount.js?:127:15)

Following the details, I've learned that this might be caused by 2 instances of React being loaded. I've checked the code, and it seems to be true. I have React 15.3.2 in my deps and Jumpsuit has 15.3.1 in it's own deps. Digging in the code, I've noticed line 12 in devtools.js:

var _react = require('react');

To make sure, I've removed line 43 in render.js:

      _react2.default.createElement(DevTools, null),

And it seems to be fixed (removing line 44 fixed the other one, with the HSR breaking the Webpack build).

When we convert over to <style> for HSR, the sourcemaps that are in app.css are transferred into <style>, and inline sourcemaps don't work there. Thoughts?

Why is it not supported?

This is a pretty interesting project!

I went to run the counter example through Webpack with below config and the following errors were thrown in the browser:

bundle.js:11462 Uncaught SyntaxError: Failed to construct 'WebSocket': The URL 'undefined' is invalid.

Which is at this line.

        var client = new WebSocket(process.env.HSR_WS, 'echo-protocol');

This one is probably unrelated but showed up.

Warning: There is an internal error in the React performance measurement code. Did not expect componentDidMount timer to start while componentWillMount timer is still in progress for another instance.

// webpack.config.js
module.exports = {
  entry: __dirname + '/src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        },
        exclude: /node_modules/
      }
    ]
  }
}

Realize this isn't much information. Happy to provide more specifics if you let me know what will help.

Hi guys, I wanted to try jumpsuit today, sounds very promising!

I did:

sudo npm install jumpsuit-cli -g
jumpsuit new test-jumpsuit todo
jumpsuit watch

and I get a
Cannot find module 'react' from '/opt/local/lib/node_modules/jumpsuit-cli/lib/compilers' multiple times and then it just get stuck on building...

Any idea of what could be the problem here?

Thanks!

I'm having trouble because redux-form is messing with the state after an HSR reload.

Here is what is happening:

1. I perform a series of actions to get the store into an specific state
2. I change the code and save, the page reloads
3. While the previous state is being loaded the page renders, and some actios get dispatched (redux-form starts to initialize a form which should not be mounted if state was already loaded)
4. The previous state arrives and is loaded
5. Some redux-forms actions apply over the recently loaded state, breaking it

I have tested that the problem does not happen if the redux-form doesn't load by replacing it with an empty div, so I'm quite sure that this is what is happening.

As a way to prevent this kind of behavior the application should not render if an hsr param is present in the querystring, isntead it should only load a minimal app code to trigger the HSR loading, load the old state, and then let te applciation render as normal.

npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

Is there a way to upgrade this dependency?

This will allow users to still use Containers to make components with functions other than render, but not create the performance impact of connecting to the state.

Hey guys, this is an AWESOME job that you guys have done here!

Jumpsuit is, along with choo, the most exciting front-end framework that i've seen for a long time.
Keep on the awesome work! :)

I think that, maybe, you guys could also provide more exemples, demonstrating how to deal with auth-protected routes, "real-time" with websockets, webservices integration...

Best,
Rafa

After jumpsuit new project,
cd project
jumpsuit watch

shows the error message:

Cannot find module 'react' from '.../node_modules'

looks like 'react' is missing from 'package.json'

I have a couple of static JS files that I need to manually include in my HTML file. I put them under assets/js but they're not copied to the dist folder.

I'm working on a page with a slightly big state (it loads a JSON of 3.5MB) after some minutes working with it I usually get this errors.

▸   building... ✓ (542ms)
▸   building... ✓ (2121ms)
▸   building... ✓ (2502ms)
▸   building... ✓ (2178ms)

<--- Last few GCs --->

 1840848 ms: Scavenge 1393.6 (1454.7) -> 1393.6 (1454.7) MB, 0.6 / 0 ms (+ 2.9 ms in 1 steps since last GC) [allocation failure] [incremental marking delaying mark-sweep].
 1841448 ms: Mark-sweep 1393.6 (1454.7) -> 1393.6 (1454.7) MB, 600.8 / 0 ms (+ 4.1 ms in 2 steps since start of marking, biggest step 2.9 ms) [last resort gc].
 1842049 ms: Mark-sweep 1393.6 (1454.7) -> 1393.6 (1454.7) MB, 601.1 / 0 ms [last resort gc].


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x2833abfb4629 <JS Object>
    1: parse [native json.js:~40] [pc=0x302e00f575e0] (this=0x2833abface39 <a JSON with map 0x196218e1ca41>,r=0x328c36204101 <Very long string[102124947]>,l=0x2833abf041b9 <undefined>)
    2: parse(aka parse) [/usr/local/lib/node_modules/jumpsuit-cli/node_modules/body-parser/lib/types/json.js:88] [pc=0x302e0103ed48] (this=0x2833abf041b9 <undefined>,body=0x328c36204101 <Very long string[10212494...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

The HSR response gets bigger and bigger after every build.

These errors show up randomly right before a refresh, seemingly after the server has been running for a bit. They're hard to catch, as they all go away when the page refreshes, but they're there. Something we should look into deeper.

What exactly causes these deprecation warnings to come up?

Is it possible to get rid of them?

$ node -v
v7.1.0

$ jumpsuit build
     _                       _ _
    |_|_ _ _____ ___ ___ _ _|_| |_
    | | | |     | . |_ -| | | |  _|
   _| |___|_|_|_|  _|___|___|_|_|
  |___|         |_|

▸   building... 

(node:19656) DeprecationWarning: Using Buffer without `new` will soon stop working.  
Use `new Buffer()`, or preferably `Buffer.from()`,  
`Buffer.allocUnsafe()` or `Buffer.alloc()` instead.

(node:19656) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1):  
Invariant Violation:  
Minified React error #46; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=46 for the  
full message or use the non-minified dev environment for full errors and additional helpful warnings.

(node:19656) DeprecationWarning: Unhandled promise rejections are deprecated.  
In the future, promise rejections that are not handled will terminate the Node.js process  
with a non-zero exit code.
✓ (13822ms)

Hey,

I'm getting the following error:

app.js:9830` Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Router`, expected `object`.
    in Router

Here's my routes:

<Router component={LayoutMaster}>

        <Route path="/" component={SecretsIndex} />
        <Route path="/fresh" component={SecretsFresh} />
        <Route path="/random" component={SecretsRandom} />
        <Route path="/search" component={SearchIndex} />
        <Route path="/write" component={SecretsCreate} />

        <Route path='*' component={Errors404} />
    </Router>

I'm pretty sure I'm doing something wrong with the routes declaration :/

I had a jumpsuit app started, screwed it up, deleted it, then tried to start a new one and I'm now getting this error message. Some information I found suggested that the old app may have been occupying port 8000, but the $ top command didn't indicate anything was running on 8000.

Ref : https://github.com/omnidan/redux-undo

And how?

Thanks

module.js:457
throw err;
^

Error: Cannot find module '../lib'
at Function.Module._resolveFilename (module.js:455:15)
at Function.Module._load (module.js:403:25)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at Object. (C:\Users\jonh\AppData\Roaming\npm\node_modules\jumpsuit-cli\bin\jumpsuit:3:1)
at Module._compile (module.js:556:32)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)

Using a random port is a bad idea, at least it should be possible to specify a fixed port using cli arguments.

I cannot use HSR on a dockerized development environment because of this.