generator-spock

generator-spock

Installation

First, install Yeoman and generator-spock using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-spock

Available Generators

• Action
• Component
• Reducer
• Selector
• Story

Options

All generators take these options:

• destinationFolder: where to create the file, defaults to current directory
• moduleName: the name of what you want to create, e.g.: MyComponent, reducer, CartActions, etc
• filename: unless specified the filename is the module name. You don't need to pass the extension

Action Generator

yo spock:action

Actions example output:

/**
 * ShoppingCart Actions
 */

//  Action Types

// Action Creators

// Async Actions

Component Generator

yo spock:component

Options: class, functional, connected, native, class typescript, functional typescript

Class option example output:

/**
 * ShoppingCart
 */
import React from 'react';

export default class ShoppingCart extends React.Component {
    render() {
        return (
            <div className="shopping-cart">
                ShoppingCart component
            </div>
        );
    }
}

Functional option example output:

/**
 * ShoppingCart
 */
import React from 'react';

const ShoppingCart = () => {
    return (
        <div className="shopping-cart">
            ShoppingCart component
        </div>
    );
};

export default ShoppingCart;

Connected option example output:

/**
 * ShoppingCart
 */
import React from 'react';
import { connect } from 'react-redux';
import ShoppingCart from './ShoppingCart';

const makeMapToStateProps = (state) => ({})

const mapDispatchToProps = (dispath) => ({});

export default connect(makeMapToStateProps, mapDispatchToProps)(ShoppingCart);

Functional Native option example output:

/**
 * ShoppingCart
 */
import React from 'react';
import { View } from 'react-native';

const ShoppingCart = () => {
    return (
        <View>
            ShoppingCart component
        </View>
    );
};

export default ShoppingCart;

Class Typescript option example output:

/**
 * ShoppingCart
 */
import * as React from 'react';

interface Props {

}

export default class ShoppingCart extends React.Component<Props, {}> {
    render() {
        return (
            <div className="shopping-cart">
                ShoppingCart component
            </div>
        );
    }
}

Functional Typescript option example output:

/**
 * ShoppingCart
 */
import * as React from 'react';

interface Props {

}

const ShoppingCart: React.FC = (props: Props) => {
    return (
        <div className="shopping-cart">
            ShoppingCart component
        </div>
    );
};

export default ShoppingCart;

Reducer Generator

yo spock:reducer

The reducer generator also supports typescript. The only difference will be the file extension.

Options: page, module

Page option example output:

/**
* ShoppingCart Reducer
*/
import { combineReducers } from 'redux';

export default combineReducers({

});

Module option example output:

/**
 * ShoppingCart Reducer
 */
export default (state = {}, action) => {
    switch (action.type) {
        default:
            return state;
    }
};

Selector Generator

yo spock:selector

The selector generator also supports typescript. The only difference will be the file extension.

Example output:

/**
 * ShoppingCart Selectors
 */
import { createSelector } from 'reselect';

const rootSelector = state => state;

export const sampleSelector = createSelector(
    [rootSelector],
    state => state
);

Story Generator

yo spock:story

Example output

/**
 * ShoppingCart Stories
 */
import React from 'react';
import { storiesOf } from '@storybook/react';

const stories = storiesOf('ShoppingCart', module);

stories.add('ShoppingCart', () => (
    <div>
        ShoppingCart
    </div>
));

Example typescript output

/**
 * ShoppingCart Stories
 */
import * as React from 'react';
import { storiesOf } from '@storybook/react';

const stories = storiesOf('ShoppingCart', module);

stories.add('ShoppingCart', () => (
    <div>
        ShoppingCart
    </div>
));

License

MIT © Rafael Rozon