Component Generator

One of the very powerful concepts when component-izing your user interface is the ability to compose multiple components together, rendering the same UI in multiple places. As you break things apart, you'll likely need to define multiple components besides the one that is generated for you.

Usage

This generator only takes a single argument: the name of the component to create

yo skatejs:component my-new-component

This will do a number of things:

1. Generate a new component file (src/components/my-new-component/component.js)
2. Generate a new scoped, Sass stylesheet for that component (src/components/my-new-component/style.scss)
3. Generate a test for for the component (test/component/my-new-component-test.js)
4. Import the new component into your src/index.js file and define it.

That last part is where things get a little tricky; see below for more details.

Automatically Defining Components

Part of Webpack's power is the fact that, instead of pointing the tool at a directory to assemble, you instead give it a single entry file; everything that is imported from that file (and from those files, etc) are built into your output. This makes it easy to determine why a package is part of your application, and ensures that only things that are actually being used will be present.

This does have a tiny downside, though; you need to import this new component that you just made!

Thankfully, I can take care of that for you. You will be prompted before any changes to your files are made, though, and can easily see the difference between the before/after and choose to refuse the changes if you're not comfortable with the tool doing it automatically. As you can see in the GIF above, two new lines are provided; importing and then defining the new component. It will not be included in your package if those are not present, so if you decide not to allow the generator to modify your files, you will need to do those steps yourself.

Note: I don't like the fact that all of the lines end up bunched together. Unfortunately, I can't really control this; all I can do is modify the AST that recast provides. If I figure out how to make these files prettier in the future, I definitely will. You can always add some whitespace yourself to keep things nice and clean.