PixelOven.Generate

This addon features an interactive CLI for generating common project files. The goal of this addon is to reduce the need for repeative boilerplating usually required by developers. Creating new apps, packages, or components within your project doesn't have to be a chore, we've provided generators to lend a hand.

Note: This section is a work in progress and should contain basic information for creating and working with generators

Installation

Note the current version of this extension only supports react as that is the primary use case for PixelOven. Though our ultimate goal is to provide a more general development platform we want to first nail this subset before conquering others.

To install this addon simply run the following with NPM

npm install --save-dev @pixeloven/cli-addon-generators

or yarn

yarn add --dev @pixeloven/cli-addon-generators

API Reference

Argument	Description
generate	CLI entry point for interactive project generators.

All arguments and options for this addon are optional. The entire CLI is interactive and provides a more traditional experience for convenience.

Argument	Required	Default	Description
<type>	No	null	Shortcuts the first part of the interactive menu.

As mentioned above these types are optional and simply shortcut the first part of the interactive menu. The below types have a a 1:1 relationship with the first part of the interactive menu.

Argument	Description
app	Starts the interactive menu for creating a new App.
component	Starts the interactive menu for generating a React component.
package	Starts the interactive menu for creating a new Package.

Usage

Providing a type to generate is entirely optional. This argument is provided to help shortcuts the menu for a slightly more customized experience.

yarn run pixeloven generate <type[optional]>

To run the full interactive CLI simply run the following.

yarn run pixeloven generate

Finally, here is an example of how you might use these shortcuts to start the component generator.

yarn run pixeloven generate component

Details

The generators are somewhat opinionated and make a few assumptions about the organization of your project. See the instructions for each individual generator below for specifics.

Components

1. To create a new component, run the generate command from the root of the host app or package and choose Component from the selection menu.
2. Choose the appropriate atomic type for your component. Refer to the component docs to learn more about atomic design and how it's implemented in Pixeloven.
3. Choose the format of the component, we recommend Functional components if you're using React 16.4.x or later.
4. Choose to manage state within your component. If you're unsure, choose N. It's easy enough to add this later if necessary.
5. Choose to include styles with your component. If you're unsure, choose N. It's easy enough to add this later if necessary.
6. Enter a component name following the naming conventions in the contributing docs.
7. Enter a short description of what your component does. You can expand on the description in the component README.
8. Enter a namespace for the component if necessary. These are slightly different from app and package namespaces as they're not use for publishing. These namespaces are used to group the components within each app and package within your project. For example of the components within our packages use a packages/package-name namespace format.

Congrats, your brand new component is ready and waiting for you in /src/components under the directory that matches the atomic type you chose above, cd into it to get started and view the component docs to learn more.

Packages

1. To start a new package, run the generate command from the root of your project and choose Package from the selection menu.
2. Enter a package name following the naming conventions in the contributing docs.
3. Enter a namespace for the package if necessary. Namespaces are useful to discern packages of similar names across registries like NPM. For example all Pixeloven packages are prefixed with a @pixeloven namespace.
4. Enter a short description of what your package does. This will be used in the package.json manifest so keep it short. You can expand on the description in the package README.
5. Enter a license type. This is intentionally left open, there are too many license types available, but we suggest MIT for its comprehensive coverage and standard use across the open source community.
6. Enter an author name. For projects within a large organization you'll typically want to use the name of the organization or managing team.
7. Enter an email address for the author. If you publish your project to a public repo this will be public, you've been warned.
8. Enter a private registry if necessary. If your organization publishes to enterprise NPM or GitHhub packages enter the registry url.
9. Enter an initial publishing version. We typically use 0.0.1 and let Lerna forward the versions as necessary.

Congrats, your brand new package is ready and waiting for you in the /packages directory, cd into it to get started and view the packages docs to learn more.

Applications

1. To start a new app, run the generate command from the root of your project and choose App from the selection menu.
2. Enter an app name following the naming conventions in the contributing docs.
3. Enter a namespace for the app if necessary. Namespaces are useful to discern apps of similar names across registries like NPM. For example all Pixeloven apps are prefixed with a @pixeloven namespace.
4. Enter a short description of what your app does. This will be used in the package.json manifest so keep it short. You can expand on the description in the app README.
5. Enter a license type. This is intentionally left open, there are too many license types available, but we suggest MIT for its comprehensive coverage and standard use across the open source community.
6. Enter an author name. For projects within a large organization you'll typically want to use the name of the organization or managing team.
7. Enter an email address for the author. If you publish your project to a public repo this will be public, you've been warned.
8. Enter a private registry if necessary. If your organization publishes to enterprise NPM or GitHhub packages enter the registry url.
9. Enter an initial publishing version. We typically use 0.0.1 and let Lerna forward the versions as necessary.

Congrats, your brand new app is ready and waiting for you in the /apps directory, cd into it to get started and view the app docs to learn more.