electrodejs/deprecated-generator-electrode-component

Yeoman generator for Electrode-React Components

Deprecated

This repo has been moved here

generator-electrode-component

A Yeoman generator for Electrode React components.

Builds a React component project with useful gulp tasks for development, building, and publishing.

See [electrode-archetype-react-component-component-gulp-tasks] for complete documentation of the gulp tasks.

Contents

• Getting Started
• Developing Your Component
  • Source
  • Example and Preview
  • Linting and Unit Testing
  • Building and Publishing
• License

Getting Started

Install the generator:

npm install -g generator-electrode-component

Then run the generator:

yo electrode-component

...and follow the prompts.

Developing Your Component

Source

Your component source code is in src. You can use JSX and ES6 syntax freely in your component source; it will be transpiled to lib with Babel before being published to npm so that your users will simply be able to include it.

It's a great idea to add a description, documentation and other information to your README.md file, to help people who are interested in using your component.

Example and Preview

Preview your component with LiveReload:

gulp demo ; gulp open-demo

A webserver will be started on localhost:4000 running the examples in demo/examples/*

You can use this code-playground to test your component, then publish it to let potential users try out your component and see what it can do.

Linting and Unit Testing

gulp check

Your code will be linted with ESLint, using the Babel parser and the React plugin. You can customise the settings by editing the .eslintrc file.

Building and Publishing

gulp build

This will build your lib, dist and example/dist folders for release.

License

Apache-2.0

Built with ❤️ by Team Electrode @WalmartLabs.

deprecated-generator-electrode-component's Issues

make css-next by default, remove .styl

electrodejs/electrode-archetype-react-component#4

Allow for Bitbucket in addition to Github

When using the generator, it assumes the user is using Github, but that is not always the case. While not a huge deal, it means the user needs to go modify the package.json as soon as generation has been completed.

Other than that, this generator rocks!

Enhancement: Port configuration

I would assume there would be many component dev environments running at any given time. So it would be great if the http listen port was configurable via environment and/or config section in the package.json.

$ HTTP_PORT=4001 gulp dev
$ HTTP_PORT=4002 npm start

//package.json

"config": {
   "electrode":{
     "port":4002
   }
}

upgrade to [email protected]

electrodejs/electrode-archetype-react-component#3

Update documentation to include information about internationalization

It appears that the internationalization provided by the generator is not included in any documentation (if it is, please point me in the right direction). It would be helpful to have this included in the documentation as well as instructions for removing it or adding to it.

The concept of multi-tenancy is also not discussed in the documentation, but shows up under src\lang\tenants (as well as other places).

Gulp Check error

Ran into an issue working through an example in the docs ( http://www.electrode.io/docs/create_reusable_component.html ) and got the following error on gulp check

-d was unexpected at this time.

I was able to duplicate this by running the following

yo electrode-component

gulp check

resulting in a string of errors referencing the message above

Here is the full output of gulp check

gulp check
[14:57:01] Using gulpfile ~\Documents\Dev\my-electrode-component\gulpfile.js
[14:57:01] Starting 'check'...
[14:57:01] Starting 'check-dep'...
Check dependencies passed
[14:57:01] Finished 'check-dep' after 167 ms
[14:57:01] Starting 'lint'...
[14:57:01] Starting 'lint-stylus'...
-d was unexpected at this time.
[14:57:01] 'lint-stylus' errored after 7.12 ms
[14:57:01] Error: command exit code 1
at error (C:\Users\Nathan\Documents\Dev\my-electrode-component\node_modules\electrode-gulp-helper\lib\exec.js:6:15)
at C:\Users\Nathan\Documents\Dev\my-electrode-component\node_modules\electrode-gulp-helper\lib\exec.js:19:29
at C:\Users\Nathan\Documents\Dev\my-electrode-component\node_modules\shelljs\src\exec.js:180:7
at ChildProcess.exithandler (child_process.js:220:5)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:827:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
[14:57:01] 'check' errored after 181 ms
[14:57:01] Error in plugin 'run-sequence(lint-stylus)'
Message:
command exit code 1
Details:
stdout:
stderr: -d was unexpected at this time.

Stack:
Error: command exit code 1
at error (C:\Users\Nathan\Documents\Dev\my-electrode-component\node_modules\electrode-gulp-helper\lib\exec.js:6:15)
at C:\Users\Nathan\Documents\Dev\my-electrode-component\node_modules\electrode-gulp-helper\lib\exec.js:19:29
at C:\Users\Nathan\Documents\Dev\my-electrode-component\node_modules\shelljs\src\exec.js:180:7
at ChildProcess.exithandler (child_process.js:220:5)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:827:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
[14:57:01] 'lint' errored after 16 ms
[14:57:01] Error in plugin 'run-sequence(check)'
Message:
command exit code 1
Details:
stdout:
stderr: -d was unexpected at this time.

Stack:
Error: command exit code 1
at error (C:\Users\Nathan\Documents\Dev\my-electrode-component\node_modules\electrode-gulp-helper\lib\exec.js:6:15)
at C:\Users\Nathan\Documents\Dev\my-electrode-component\node_modules\electrode-gulp-helper\lib\exec.js:19:29
at C:\Users\Nathan\Documents\Dev\my-electrode-component\node_modules\shelljs\src\exec.js:180:7
at ChildProcess.exithandler (child_process.js:220:5)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:827:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
[14:57:01] 'lint' errored after 20 ms
[14:57:01] Error in plugin 'run-sequence(lint-stylus)'
Message:
command exit code 1
Details:
stdout:
stderr: -d was unexpected at this time.

Stack:
Error: command exit code 1
at error (C:\Users\Nathan\Documents\Dev\my-electrode-component\node_modules\electrode-gulp-helper\lib\exec.js:6:15)
at C:\Users\Nathan\Documents\Dev\my-electrode-component\node_modules\electrode-gulp-helper\lib\exec.js:19:29
at C:\Users\Nathan\Documents\Dev\my-electrode-component\node_modules\shelljs\src\exec.js:180:7
at ChildProcess.exithandler (child_process.js:220:5)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:827:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)

Enhancement: npm scripts

Should have a npm start script and npm test script, by default.

Bug: tmp directory

The generator creates (or maybe gulp?) a directory name tmp in the root of the project. If a temp directory is needed, should respect the systems tmp. If its not a temp directory, should have a different name.

Enhancement: Remove the 'What is the name of the GitHub repo where this will be published? (my-electrode-component)'

Is nearly a duplicate of this question. These should be the same 99% of the time. So why ask the question. Save questions for bigger code splits.

What is your Package/GitHub project name? (e.g., 'wysiwyg-component') my-electrode-component

Enhancment: Use the directory name as the repo name default

$ What is your Package/GitHub project name? (e.g., 'wysiwyg-component') (wysiwyg-component)

should be

$ What is your Package/GitHub project name? (e.g.,'my-electrode-component') (my-electrode-component)

where my-electrode-component is the name of your component.