yeoman generator for components

[IdanCo]

Add some awesome sauce to the project by harnessing the powers of yeoman to scaffold new components with a single click.

simply install yeoman, and inside the project folder type

yo ./generators/component

And follow the on-screen instructions.

@langdonx - if you get a chance, you're welcome to take it for a spin

[langdonx]

This is great! I was able to create a test component. The only change I'd say that should definitely be made is to use backticks in component-name-demo.md for the default value. Is the escaping necessary there too, I wonder?

I don't have any experience with Yeoman, but is there no way for it to modify library.module.js, docs.module.js, and docs.html or to at least call to some external .js file that can do it? It shouldn't be too hard to script those changes. The other alternative is to write a babel plugin that generates the module based on the all the sub-directories (I do have experience with this).

[langdonx]

Ah, component-name-demo.md also needs the ngbs- prefix on the first line.

## ngbs-<%- componentName %>

[IdanCo]

Thanks! fixed issues.

I do wish yeoman could change the existing files. Unfortunately yeoman recommends other libraries for this parts, or even some manual node.js. I don't have any experience with that, so i'll be happy for help if it's up your alley - no pressure. It's not blocking me from merging.

The babel option could be nice, but i'm reluctant to set dependencies during build and not hard-coded. I feel it obscures the app structure.

[langdonx]

Brittle, but functional:

• Create ./generators/helper.js, from this:

  • https://gist.github.com/langdonx/05aa4d4980e254a9ae5921055d8c1aba

• Modify ./generators/component/index.js:

  [line 03] const helper = require('../helper');
  ...
  [line 37] helper.addComponentToModule('./src/library/library.module.js', 'Module', '', '', this.props.componentName, this.props.camelName, this.props.capitalName);

• Modify ./generators/docs/index.js:

  [line 03] const helper = require('../helper');
  ...
  [line 44] helper.addComponentToModule('./src/docs/docs.module.js', 'Demo', 'demos/', '-demo', this.props.componentName, this.props.camelName, this.props.capitalName);
  [line 45] helper.addComponentToDemoHtml(this.props.componentName, this.props.camelName, this.props.capitalName);

And then just remove the reminders in the this.log statements.

It's brittle because there's no error checking and it expects specific line breaks and indentation. We could make more liberal use of regular expressions to make it less brittle, but it might be OK for now. I'm not sure how to throw errors from Yeoman though, if we were to add error checking.