ericelliott / react-pure-component-starter Goto Github PK

View Code? Open in Web Editor NEW

792.0 20.0 83.0 113 KB

A pure component dev starter kit for React.

License: MIT License

JavaScript 97.77% HTML 2.23%

react-pure-component-starter's People

Contributors

Stargazers

Watchers

react-pure-component-starter's Issues

CircleCI build fail

We're getting a failing build using Node 4.2.2 and npm v3.5.0 on CircleCI (works fine on my machine).

TypeError: Cannot read property 'error' of undefined
    at OptionManager.mergeOptions (/home/ubuntu/react-pure-component-starter/node_modules/babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:126:28)
    at OptionManager.addConfig (/home/ubuntu/react-pure-component-starter/node_modules/babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:107:10)
...

It appears to be that an older version of Babel is trying to run the code. Which is odd, because we've got all the latest packages. Maybe some of the sub-dependencies need to be updated for Babel 6...

But it gets weirder.

When I log in with ssh and run:

$ rm -rf node_modules && npm install && npm test

The tests pass.

npm install generates a ton of warnings:

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN In [email protected] replacing bundled version of domelementtype with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of repeating with [email protected]
npm WARN In [email protected] replacing bundled version of kind-of with [email protected]
npm WARN In [email protected] replacing bundled version of semver with [email protected]
npm WARN In [email protected] replacing bundled version of graceful-fs with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of estraverse with [email protected]
npm WARN In [email protected] replacing bundled version of path-exists with [email protected]
npm WARN In [email protected] replacing bundled version of kind-of with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of pinkie-promise with [email protected]
npm WARN In [email protected] replacing bundled version of pinkie with [email protected]
npm WARN In [email protected] replacing bundled version of is-number with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of readable-stream with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of wordwrap with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of esutils with [email protected]
npm WARN In [email protected] replacing bundled version of camelcase with [email protected]
npm WARN In [email protected] replacing bundled version of readable-stream with [email protected]
npm WARN In [email protected] replacing bundled version of esprima with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of async with [email protected]
npm WARN In [email protected] replacing bundled version of qs with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of source-map with [email protected]
npm WARN In [email protected] replacing bundled version of source-map with [email protected]
npm WARN In [email protected] replacing bundled version of esprima-fb with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of source-map with [email protected]
npm WARN In [email protected] replacing bundled version of memory-fs with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of minimist with [email protected]
npm WARN In [email protected] replacing bundled version of strip-ansi with [email protected]
npm WARN In [email protected] replacing bundled version of ansi-regex with [email protected]
npm WARN In [email protected] replacing bundled version of source-map with [email protected]
npm WARN In [email protected] replacing bundled version of assert-plus with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of source-map with [email protected]
npm WARN In [email protected] replacing bundled version of source-map with [email protected]
npm WARN In [email protected] replacing bundled version of async with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of source-map with [email protected]
npm WARN In [email protected] replacing bundled version of minimist with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of babel-runtime with [email protected]
npm WARN In [email protected] replacing bundled version of esprima with [email protected]
npm WARN In [email protected] replacing bundled version of domutils with [email protected]
npm WARN In [email protected] replacing bundled version of entities with [email protected]
npm WARN In [email protected] replacing bundled version of readable-stream with [email protected]
npm WARN In [email protected] replacing bundled version of source-map with [email protected]
npm WARN In [email protected] replacing bundled version of esprima with [email protected]
npm WARN In [email protected] replacing bundled version of supports-color with [email protected]
npm WARN In [email protected] replacing bundled version of user-home with [email protected]
npm WARN In [email protected] replacing bundled version of minimatch with [email protected]
npm WARN In [email protected] replacing bundled version of espree with [email protected]

But things seem to work anyway:

> [email protected] pretest /home/ubuntu/react-pure-component-starter
> npm run lint


> [email protected] lint /home/ubuntu/react-pure-component-starter
> eslint source test


> [email protected] test /home/ubuntu/react-pure-component-starter
> babel-node ./test/index.js

TAP version 13
# Title
ok 1 should output the correct title text

1..1
# tests 1
# pass  1

# ok

Latest ESLint changed rule names

Same old rules have been deprecated in ESLint. Bring the .eslintrc up to date with the latest version.

To fix:

npm uninstall --save-dev eslint && npm install --save-dev eslint
npm run lint

Run npm run lint to spot failures, and correct the error messages.

using enzyme and cherrio

i see you are using both enzyme and cherrio libs for testing and i wonder why.
isn't cherrio full render enough?
and if not why not using the render function from enzyme and remove cherrio dependency altogether

Windows is not supported

Mention in readme that Windows is not currently supported.

Compatible with Redux Async pattern?

Curious if there was a way to make pure components work with the pattern in this example:

http://redux.js.org/docs/advanced/ExampleRedditAPI.html

Webpack error "Unexpected token"

Hi,

I just cloned and tried to build the starter kit, but there seems to be an error with webpack.

ERROR in ./source/components/hello/index.js
Module parse failed: C:.../source\components\hello\index.js Unexpected token (9:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (9:6)

I have tracked down the cause of this to the webpack.config.dev.js and webpack.config.prod.js files. The line that triggers the error is :
include: path.join(__dirname, 'source')

As soon as I remove that line (actually replacing it with an exclude of node_modules instead), the projet build and runs perfectly.

Do you have any idea what causes this ?

Thanks!

Simulating onClick when testing

Thank you for this. I was actually busy implementing my own solution similar to this, but including Redux. Anyway, curious to know how you test components that require user interaction? An example would be onClick. I looked at shallowRender, but then you have to navigate to your children and call the method manually. Not ideal and not elegant.

Question

Question about pure components: I am passing props from parent to pure component, can I do something like "shouldComponentUpdate" because I don't want it to re-render. Or do I have to do that somehow in the parent component?

typeError after running `npm t` or `npm run watch`

Hi, I'm getting this error after cloning the repo and git checkout 93b7017.

Cheers.

~/work/react-pure-component-starter(93b7017) » npm run test

> [email protected] pretest /Users/sam/work/react-pure-component-starter
> npm run lint


> [email protected] lint /Users/sam/work/react-pure-component-starter
> eslint source

TypeError: Cannot read property 'visitClass' of undefined
    at monkeypatch (/Users/sam/work/react-pure-component-starter/node_modules/babel-eslint/index.js:220:40)
    at Object.exports.parse (/Users/sam/work/react-pure-component-starter/node_modules/babel-eslint/index.js:399:5)
    at parse (/Users/sam/work/react-pure-component-starter/node_modules/eslint/lib/eslint.js:512:27)
    at EventEmitter.module.exports.api.verify (/Users/sam/work/react-pure-component-starter/node_modules/eslint/lib/eslint.js:646:19)
    at processText (/Users/sam/work/react-pure-component-starter/node_modules/eslint/lib/cli-engine.js:230:27)
    at processFile (/Users/sam/work/react-pure-component-starter/node_modules/eslint/lib/cli-engine.js:270:18)
    at executeOnFile (/Users/sam/work/react-pure-component-starter/node_modules/eslint/lib/cli-engine.js:617:23)
    at Array.forEach (native)
    at CLIEngine.executeOnFiles (/Users/sam/work/react-pure-component-starter/node_modules/eslint/lib/cli-engine.js:640:56)
    at Object.cli.execute (/Users/sam/work/react-pure-component-starter/node_modules/eslint/lib/cli.js:162:95)

devServer.js config with environment variable

In devServer.js, instead of

app.listen(3000, 'localhost', function (err) {

for Cloud9 this should be:

app.listen(8080, '0.0.0.0', function(err) {

and Nitrous.io:

app.listen(3000, '0.0.0.0', function (err) {

This could be configured with an environment variable.

The console.log output of course would also need to be updated, and for Cloud9 should also mention that Open in Preview should not be used.

Update babel

Currently blocked. See babel-plugin-react-transform #46.

React instance injection ?

Pure component factories let you inject your React instance into the component so that you can share a single React instance across your entire app -- even if you load React from CDN for client use

I can't see the advantage over using ES6 import React from 'react' on each file - besides the repeated 1-line advantage, obviously. That, and the classic-er ES5 require call provided by libs, gives you one same React instance on all components too. Am I missing something ?

Testing nested components

Could there be an example of testing nested pure components? I always found that hard to test without needing to know the implementation of a child component. With class-components you could select them by type.

Dependency injection: just the React instance?

Is it recommended to inject the instances of the other packages on which the component depends? e.g:

export default (React, CssModules, classnames) => (props) => <h1>{ props.title }</h1>

The injected packages could then be moved from 'dependencies' to 'peerDependencies' in the library's package.json.

Hot reloading

What is the actual implementation state of the "hot reloading" feature in this repo? A fresh install of the repo shows the following console output after a file change:

[HMR] connected
client.js:123 [HMR] bundle rebuilding
client.js:126 [HMR] bundle rebuilt in 450ms
process-update.js:27 [HMR] Checking for updates on the server...
process-update.js:81 [HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
process-update.js:89 [HMR]  - ./source/index.js

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.