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-spockAvailable 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:actionActions example output:
/**
* ShoppingCart Actions
*/
// Action Types
// Action Creators
// Async ActionsComponent Generator
yo spock:componentOptions: 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:reducerThe 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:selectorThe 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:storyExample 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
