petehunt / generator-react-library

Yeoman generator for React components

generator-react-library

Codebase going through major changes.

A generator for Yeoman. If you don't have it yet:

npm install -g yo

To install generator-react-library from npm:

npm install -g generator-react-library

To initiate the generator, run the following in an empty folder:

yo react-library

License

Apache 2.

generator-react-library's Issues

`npm install` fails with component installed from npm

Reason is that npm run build (jsxc src/ lib/) is executed after npm install, and the src is npmignored.

Just wanted to mark this down. There might be a bit of directory structure shuffling soon so no need to fix this just yet.

Put travis badge back

Once #11 is done. Because people like seeing the green indicator.

Idea for the site

We'll have a React component site:

• Live preview of modules (+ live editor, etc.).
• npm test from this generator is used to validate a component before accepting it.
• PropTypes as brute documentation. This might seem slightly extreme but I think this is the least the author should do if he intends to share his components. Makes other people's workflow much easier.
• ^ If we do that, maybe even have the README auto-generated from the PropTypes and its sibling comments. Pull the rest (name, version, license) from package.json. That'll be one less worry for component writers.

"yo generator-react-library" doesn't work

I'm new to Yeoman and followed the readme but it doesn't work.
I don't really know what I have done wrong.

Any idea?

sebastien@sebastien-xps:react-library$ npm install -g generator-react-library

npm http GET https://registry.npmjs.org/generator-react-library
npm http 304 https://registry.npmjs.org/generator-react-library
npm http GET https://registry.npmjs.org/yeoman-generator
npm http 304 https://registry.npmjs.org/yeoman-generator
npm http GET https://registry.npmjs.org/cheerio
npm http GET https://registry.npmjs.org/rimraf
npm http GET https://registry.npmjs.org/diff
npm http GET https://registry.npmjs.org/mime
npm http GET https://registry.npmjs.org/underscore.string
npm http GET https://registry.npmjs.org/lodash
npm http GET https://registry.npmjs.org/mkdirp
npm http GET https://registry.npmjs.org/glob
npm http GET https://registry.npmjs.org/debug
npm http GET https://registry.npmjs.org/isbinaryfile
npm http GET https://registry.npmjs.org/dargs
npm http GET https://registry.npmjs.org/async
npm http GET https://registry.npmjs.org/iconv-lite
npm http GET https://registry.npmjs.org/inquirer
npm http GET https://registry.npmjs.org/shelljs
npm http GET https://registry.npmjs.org/chalk
npm http GET https://registry.npmjs.org/findup-sync
npm http GET https://registry.npmjs.org/text-table
npm http GET https://registry.npmjs.org/download
npm http GET https://registry.npmjs.org/file-utils
npm http GET https://registry.npmjs.org/request
npm http 304 https://registry.npmjs.org/rimraf
npm http 304 https://registry.npmjs.org/mime
npm http 304 https://registry.npmjs.org/lodash
npm http 304 https://registry.npmjs.org/mkdirp
npm http 304 https://registry.npmjs.org/glob
npm http 304 https://registry.npmjs.org/debug
npm http 304 https://registry.npmjs.org/isbinaryfile
npm http 304 https://registry.npmjs.org/dargs
npm http 304 https://registry.npmjs.org/async
npm http 304 https://registry.npmjs.org/underscore.string
npm http 304 https://registry.npmjs.org/iconv-lite
npm http 304 https://registry.npmjs.org/inquirer
npm http 304 https://registry.npmjs.org/shelljs
npm http 304 https://registry.npmjs.org/findup-sync
npm http 304 https://registry.npmjs.org/text-table
npm http 304 https://registry.npmjs.org/cheerio
npm http 304 https://registry.npmjs.org/diff
npm http 304 https://registry.npmjs.org/request
npm http 304 https://registry.npmjs.org/chalk
npm http 304 https://registry.npmjs.org/file-utils
npm http 304 https://registry.npmjs.org/download
npm http GET https://registry.npmjs.org/has-color
npm http GET https://registry.npmjs.org/ansi-styles
npm http GET https://registry.npmjs.org/decompress
npm http GET https://registry.npmjs.org/each-async
npm http GET https://registry.npmjs.org/through2
npm http 304 https://registry.npmjs.org/has-color
npm http 304 https://registry.npmjs.org/ansi-styles
npm http 304 https://registry.npmjs.org/decompress
npm http 304 https://registry.npmjs.org/each-async
npm http 304 https://registry.npmjs.org/through2
npm http GET https://registry.npmjs.org/minimatch
npm http GET https://registry.npmjs.org/inherits
npm http GET https://registry.npmjs.org/stream-combiner
npm http GET https://registry.npmjs.org/tar
npm http GET https://registry.npmjs.org/tempfile
npm http GET https://registry.npmjs.org/adm-zip
npm http GET https://registry.npmjs.org/mout
npm http GET https://registry.npmjs.org/graceful-fs
npm http GET https://registry.npmjs.org/inherits
npm http 304 https://registry.npmjs.org/minimatch
npm http 304 https://registry.npmjs.org/inherits
npm http GET https://registry.npmjs.org/readable-stream
npm http GET https://registry.npmjs.org/xtend
npm http 304 https://registry.npmjs.org/adm-zip
npm http 304 https://registry.npmjs.org/mout
npm http 304 https://registry.npmjs.org/graceful-fs
npm http 304 https://registry.npmjs.org/inherits
npm http 304 https://registry.npmjs.org/readable-stream
npm http 304 https://registry.npmjs.org/xtend
npm http 304 https://registry.npmjs.org/tempfile
npm http GET https://registry.npmjs.org/underscore
npm http GET https://registry.npmjs.org/cheerio-select
npm http GET https://registry.npmjs.org/htmlparser2/3.1.4
npm http GET https://registry.npmjs.org/entities
npm http 304 https://registry.npmjs.org/tar
npm http 304 https://registry.npmjs.org/stream-combiner
npm http GET https://registry.npmjs.org/qs
npm http GET https://registry.npmjs.org/json-stringify-safe
npm http GET https://registry.npmjs.org/forever-agent
npm http GET https://registry.npmjs.org/node-uuid
npm http GET https://registry.npmjs.org/tough-cookie
npm http GET https://registry.npmjs.org/tunnel-agent
npm http GET https://registry.npmjs.org/form-data
npm http GET https://registry.npmjs.org/http-signature
npm http GET https://registry.npmjs.org/oauth-sign
npm http GET https://registry.npmjs.org/aws-sign2
npm http GET https://registry.npmjs.org/hawk
npm http 304 https://registry.npmjs.org/entities
npm http 304 https://registry.npmjs.org/json-stringify-safe
npm http 304 https://registry.npmjs.org/underscore
npm http 304 https://registry.npmjs.org/qs
npm http 304 https://registry.npmjs.org/forever-agent
npm http 304 https://registry.npmjs.org/node-uuid
npm http 304 https://registry.npmjs.org/tunnel-agent
npm http 304 https://registry.npmjs.org/form-data
npm http 304 https://registry.npmjs.org/http-signature
npm http 304 https://registry.npmjs.org/oauth-sign
npm http GET https://registry.npmjs.org/object-keys
npm http 304 https://registry.npmjs.org/aws-sign2
npm http 304 https://registry.npmjs.org/hawk
npm http GET https://registry.npmjs.org/uuid
npm http 304 https://registry.npmjs.org/htmlparser2/3.1.4
npm http GET https://registry.npmjs.org/cli-color
npm http GET https://registry.npmjs.org/mute-stream/0.0.3
npm http 304 https://registry.npmjs.org/cheerio-select
npm http 304 https://registry.npmjs.org/tough-cookie
npm http 304 https://registry.npmjs.org/mute-stream/0.0.3
npm http GET https://registry.npmjs.org/duplexer
npm http 304 https://registry.npmjs.org/object-keys
npm http 304 https://registry.npmjs.org/cli-color
npm http GET https://registry.npmjs.org/lru-cache
npm http GET https://registry.npmjs.org/sigmund
npm http 304 https://registry.npmjs.org/duplexer
npm http 304 https://registry.npmjs.org/uuid
npm http GET https://registry.npmjs.org/combined-stream
npm http GET https://registry.npmjs.org/CSSselect
npm http 304 https://registry.npmjs.org/sigmund
npm http GET https://registry.npmjs.org/aws-sign
npm http GET https://registry.npmjs.org/cookie-jar
npm http 304 https://registry.npmjs.org/lru-cache
npm http 304 https://registry.npmjs.org/combined-stream
npm http 304 https://registry.npmjs.org/aws-sign
npm http GET https://registry.npmjs.org/assert-plus/0.1.2
npm http GET https://registry.npmjs.org/asn1/0.1.11
npm http GET https://registry.npmjs.org/ctype/0.5.2
npm http 304 https://registry.npmjs.org/assert-plus/0.1.2
npm http 304 https://registry.npmjs.org/asn1/0.1.11
npm http 304 https://registry.npmjs.org/ctype/0.5.2
npm http 304 https://registry.npmjs.org/CSSselect
npm http GET https://registry.npmjs.org/es5-ext
npm http GET https://registry.npmjs.org/memoizee
npm http 304 https://registry.npmjs.org/cookie-jar
npm http GET https://registry.npmjs.org/block-stream
npm http GET https://registry.npmjs.org/fstream
npm http 304 https://registry.npmjs.org/es5-ext
npm http 304 https://registry.npmjs.org/block-stream
npm http 304 https://registry.npmjs.org/memoizee
npm http GET https://registry.npmjs.org/delayed-stream/0.0.5
npm http 304 https://registry.npmjs.org/fstream
npm http GET https://registry.npmjs.org/domelementtype
npm http GET https://registry.npmjs.org/domhandler
npm http GET https://registry.npmjs.org/domutils
npm http 304 https://registry.npmjs.org/delayed-stream/0.0.5
npm http GET https://registry.npmjs.org/punycode
npm http 304 https://registry.npmjs.org/domelementtype
npm http 304 https://registry.npmjs.org/domutils
npm http 304 https://registry.npmjs.org/punycode
npm http GET https://registry.npmjs.org/cryptiles
npm http GET https://registry.npmjs.org/boom
npm http GET https://registry.npmjs.org/hoek
npm http GET https://registry.npmjs.org/sntp
npm http 304 https://registry.npmjs.org/domhandler
npm http 304 https://registry.npmjs.org/cryptiles
npm http 304 https://registry.npmjs.org/sntp
npm http 304 https://registry.npmjs.org/boom
npm http 304 https://registry.npmjs.org/hoek
npm http GET https://registry.npmjs.org/event-emitter
npm http GET https://registry.npmjs.org/next-tick
npm http GET https://registry.npmjs.org/CSSwhat
npm http 304 https://registry.npmjs.org/event-emitter
npm http 304 https://registry.npmjs.org/next-tick
npm http 304 https://registry.npmjs.org/CSSwhat
[email protected] /home/sebastien/Desktop/devhome/install/node-v0.10.24-linux-x64/lib/node_modules/generator-react-library
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])



sebastien@sebastien-xps:react-library$ yo generator-react-library
Error generator-react-library 

You don't seem to have a generator with the name generator-react-library installed.
You can see available generators with npm search yeoman-generator and then install them with npm install [name].
To see the 6 registered generators run yo with the `--help` option.



sebastien@sebastien-xps:react-library$ yo --help
Usage: yo GENERATOR [args] [options]

General options:
  -h, --help     # Print generator's options and usage
  -f, --force    # Overwrite files that already exist

Please choose a generator below.


Mocha
  mocha:app

React-webpack
  react-webpack:app
  react-webpack:common
  react-webpack:component
  react-webpack:main

Webapp
  webapp:app

Make tests pass

@sdawson I tried to make the test work here. The small discussion is here. Either I suck or the libs were buggy. If you encounter the same problem as I did, then maybe we're overkilling this.

(I'll assume you read that last post) Frankly I'd rather use Yeoman's built-in testing methods, since they will naturally work in the future for smart options. We could slightly dirty this (which is basically the root of the whole problem) by passing a callback exclusively for the test to make it work. I didn't want to do that and ended up digging myself into a hole lol.

`npm dedupe` doesn't cooperate with `npm link`ed modules

Apparently a known problem: https://github.com/thlorenz/browserify-devdupe
Basically, running npm dedupe becomes useless.

inexistent static dir (didn't run `collect-static` yet) makes `browserify-min` fail

Same as #5, don't fix yet.

Reduce the number of commands

@sdawson don't start this yet, we'll determine the folder structure first.

There are way too many for the scope of the tasks we can accomplish. I had a local branch that had 3 commands and it fit most use cases really well. For example, a "not watching" option wouldn't be necessary.

beefy and `index.html`

beefy very conveniently generates and starts its own page if it doesn't find an index.html in the folder. However, an index.html template is still needed to test the final browserified/stylesheet-ed bundle (dev and prod, but mostly prod). One or two errors actually creeped up only when I used the browserified bundle.

So about the index.html template: this gets confusing as the it uses the browserified bundle and beefy really doesn't have a role in all of this beside watching for changes (can substitute with watch) and refresh the page (should be possible without beefy?). I'll explore some solutions further.

Simplified folder structure

@sdawson @petehunt one thing I forgot to talk about yesterday is how the folders look like here. I need feedback on this one (related to #13).
I was testing a simpler folder structure:

├── README.md
├── build
│   └── static
│       └── Comp-MyComponent.css
├── package.json
├── src
│   └── index.js
├── static
│   └── MyComponent.css
└── test
    ├── entrypoint.js
    └── index.spec.js

I removed lib/ because in all use cases they've been only an intermediate step. There's an argument to be made for not requiring people to use JSX when they include our lib, but really, the odds that every single lib that person uses doesn't ship JSX is rather small (or maybe I shouldn't be talking about JSX at all since this is framework-agnostic? I'll start by making sharing React components easy though).
Also moved the spec and entrypoint into test/, so that they can be npmignored. Build is generated of course. When a person installs the lib, he sees only this:

├── package.json
├── src
│   └── index.js
├── static
      └── MyComponent.css

which is as small a component can get.

Tracking all the friction points

A general issue to track each part that might cause friction in usage. I'll work on each of them. For the more controversial ones I'll submit issues to discuss on solutions.

1. template's README: not directly publishable currently.
2. yeoman's README: way too long.
3. repo has no description.
4. travis not passing.
5. statics: requires knowing how it works, and extra package.json fields.
6. statics-stylesheet: same.
7. stylesheets: bigger overhead: requires knowing the API.
8. Yeoman: sticking with this as soon as generator options are introduced.
9. Browserify: not universal.
10. Jasmine: same.
11. entrypoint.js.
12. current folder structure.
13. trouble with multiple components: no dedupe command yet
14. statics multi-plugins support.
15. uglifyjs fails if it's not globally installed already.
16. workflow with loopholes: npm dedupe and collect-static should be run by watch, but this takes way too long currently.
17. the react-library name: doesn't ring a bell. Confusing since there's also react-quickstart.
18. commands: too many.
19. noisy output.

Auto run `npm init` or not

The only real reason why the tests are failing is because npm init is run right after the generator's other works, prompting for input. After two seconds the test times out and fails.

@petehunt I'm wondering if there's a way to send random enter keys to the terminal to step through package.json's creation programmatically.

Cleaning up and start on the same ground

@petehunt @sdawson

I'm closing every issue and PR across generator-react-library, statics, stylesheets and statics-stylesheets right now since statics might change entirely (require('statics') makes way more sense), and because we can all start at the same place. I'll reopen the relevant ones gradually.

Pete: this week I'll be working on collect-static, require and reading more on fb's system. I doubt I'll have the time to understand all of it, so for the meantime I'll at least get to the point where it looks like the format outlined in the gist. This way you also don't have to get involved as early. Once I'm done with that, you can start modifying the api, which by then it should be pretty straightforward.

Sophie: so we've settled on Yeoman. Can you work on this repo? I'll bring separate issues up, it'd be cool if you can fix the mess I made at some places lol. We'll see how far we get til next monday, then I'll fix another meeting.

Btw, Pete:

1. Can you make a new collect-static repo, since statics is doing stylesheets' job now. It looks more legit when the basic repos are owned by the same person lol.
2. Can we change this library's name to generator-react-app/lib and possibly kill generator-react-quickstart (maybe later)? Since this is mainly for building separate components and (for me at least?) quickly testing some React scripts, it'd be nice to save those few keystrokes every time.

Change entrypoint to not depend on client env

I think we can adapt react-page-middleware to replace beefy. To do this we'll need to have the entrypoint export a React component that takes the path and querystring as props and renders an example.