├── demo.gif
├── proptypes.sublime-snippet
├── defaultprops.sublime-snippet
├── method-render.sublime-snippet
├── redux-mapstatetoprops.sublime-snippet
├── redux-mapdispatchtoprops.sublime-snippet
├── style.sublime-snippet
├── apisauce.sublime-snippet
├── babel-modules-resolver.sublime-snippet
├── reactotron_config.sublime-snippet
├── component.sublime-snippet
├── stateless_component.sublime-snippet
├── redux_index.sublime-snippet
├── stateless_redux_component.sublime-snippet
├── redux_component.sublime-snippet
├── duck.sublime-snippet
├── eslint.sublime-snippet
├── redux_configure_store.sublime-snippet
└── README.md


/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rocketseat/rocketnative-sublime-snippets/HEAD/demo.gif


--------------------------------------------------------------------------------
/proptypes.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | static propTypes = {
 4 |    ${1}
 5 | };
 6 | 
 7 | ]]></content>
 8 |   <tabTrigger>proptypes</tabTrigger>
 9 |   <scope>source.js,source.jsx</scope>
10 |   <description>Create component propTypes</description>
11 | </snippet>
12 | 


--------------------------------------------------------------------------------
/defaultprops.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | static defaultProps = {
 4 |    ${1}
 5 | };
 6 | 
 7 | ]]></content>
 8 |   <tabTrigger>defaultprops</tabTrigger>
 9 |   <scope>source.js,source.jsx</scope>
10 |   <description>Create component defaultProps</description>
11 | </snippet>
12 | 


--------------------------------------------------------------------------------
/method-render.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | render() {
 4 |   return (
 5 |     ${1:<View />}
 6 |   );
 7 | }
 8 | 
 9 | ]]></content>
10 |   <tabTrigger>render</tabTrigger>
11 |   <scope>source.js,source.jsx</scope>
12 |   <description>Create render method</description>
13 | </snippet>
14 | 


--------------------------------------------------------------------------------
/redux-mapstatetoprops.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | const mapStateToProps = state => ({
 4 |   ${1}
 5 | });
 6 | 
 7 | ]]></content>
 8 |   <tabTrigger>mapStateToProps</tabTrigger>
 9 |   <scope>source.js,source.jsx</scope>
10 |   <description>Create redux mapStateToProps</description>
11 | </snippet>
12 | 


--------------------------------------------------------------------------------
/redux-mapdispatchtoprops.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | const mapDispatchToProps = dispatch => ({
 4 |   ${1}
 5 | });
 6 | 
 7 | ]]></content>
 8 |   <tabTrigger>mapDispatchToProps</tabTrigger>
 9 |   <scope>source.js,source.jsx</scope>
10 |   <description>Create redux mapDispatchToProps</description>
11 | </snippet>
12 | 


--------------------------------------------------------------------------------
/style.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import { StyleSheet } from 'react-native';
 4 | 
 5 | const styles = StyleSheet.create({
 6 |   ${1}
 7 | });
 8 | 
 9 | export default styles;
10 | 
11 | ]]></content>
12 |   <tabTrigger>styles</tabTrigger>
13 |   <scope>source.js,source.jsx</scope>
14 |   <description>Create react-native Style file</description>
15 | </snippet>
16 | 


--------------------------------------------------------------------------------
/apisauce.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import { create } from 'apisauce';
 4 | 
 5 | const api = create({
 6 |   baseURL: '${1:http://localhost:3000}',
 7 | });
 8 | 
 9 | export default api;
10 | 
11 | ]]></content>
12 |   <tabTrigger>apisauce</tabTrigger>
13 |   <scope>source.js,source.jsx</scope>
14 |   <description>Create APISauce Config</description>
15 | </snippet>
16 | 


--------------------------------------------------------------------------------
/babel-modules-resolver.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | "plugins": [
 4 |   [
 5 |     "module-resolver",
 6 |     {
 7 |       "root": ["./src"],
 8 |       "extensions": [".js", ".ios.js", ".android.js"]
 9 |     }
10 |   ]
11 | ]
12 | 
13 | ]]></content>
14 |   <tabTrigger>moduleResolver</tabTrigger>
15 |   <scope>source.babelrc,source.json</scope>
16 |   <description>Create Module Resolver config</description>
17 | </snippet>
18 | 


--------------------------------------------------------------------------------
/reactotron_config.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import Reactotron from 'reactotron-react-native';
 4 | 
 5 | if (__DEV__) {
 6 |   const tron = Reactotron
 7 |     .configure()
 8 |     .useReactNative()
 9 |     .connect();
10 | 
11 |   tron.clear();
12 | 
13 |   console.tron = tron;
14 | }
15 | 
16 | ]]></content>
17 |   <tabTrigger>reactotronconfig</tabTrigger>
18 |   <scope>source.js,source.jsx</scope>
19 |   <description>Create Reactotron Config</description>
20 | </snippet>
21 | 


--------------------------------------------------------------------------------
/component.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | /* Core */
 4 | import React, { Component } from 'react';
 5 | 
 6 | /* Presentational */
 7 | import { View } from 'react-native';
 8 | 
 9 | // import styles from './styles';
10 | 
11 | export default class ${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}} extends Component {
12 |   render() {
13 |     return (
14 |       <View />
15 |     );
16 |   }
17 | }
18 | 
19 | ]]></content>
20 |   <tabTrigger>component</tabTrigger>
21 |   <scope>source.js,source.jsx</scope>
22 |   <description>Create react-native component</description>
23 | </snippet>
24 | 


--------------------------------------------------------------------------------
/stateless_component.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | /* Core */
 4 | import React from 'react';
 5 | 
 6 | /* Presentational */
 7 | import { View } from 'react-native';
 8 | 
 9 | // import styles from './styles';
10 | 
11 | const ${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}} = () => (
12 |   <View />
13 | );
14 | 
15 | export default ${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}};
16 | 
17 | ]]></content>
18 |   <tabTrigger>componentStateless</tabTrigger>
19 |   <scope>source.js,source.jsx</scope>
20 |   <description>Create react-native stateless component</description>
21 | </snippet>
22 | 


--------------------------------------------------------------------------------
/redux_index.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import { combineReducers } from 'redux';
 4 | 
 5 | /* Reducers */
 6 | // import navReducer from 'navigation/reducer';
 7 | 
 8 | import configureStore from './configureStore';
 9 | // import rootSaga from './sagas';
10 | 
11 | export default () => {
12 |   const rootReducer = combineReducers({
13 |     // nav: navReducer,
14 |   });
15 | 
16 |   return configureStore(rootReducer, rootSaga);
17 | };
18 | 
19 | ]]></content>
20 |   <tabTrigger>reduxSetup</tabTrigger>
21 |   <scope>source.js,source.jsx</scope>
22 |   <description>Create Redux Setup file</description>
23 | </snippet>
24 | 


--------------------------------------------------------------------------------
/stateless_redux_component.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | /* Core */
 4 | import React from 'react';
 5 | 
 6 | /* Presentational */
 7 | import { View } from 'react-native';
 8 | 
 9 | /* Redux */
10 | import { connect } from 'react-redux';
11 | 
12 | // import styles from './styles';
13 | 
14 | const ${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}} = () => (
15 |   <View />
16 | );
17 | 
18 | const mapStateToProps = state => ({
19 | 
20 | });
21 | 
22 | const mapDispatchToProps = dispatch => ({
23 | 
24 | });
25 | 
26 | export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}});
27 | 
28 | ]]></content>
29 |   <tabTrigger>reduxComponentStateless</tabTrigger>
30 |   <scope>source.js,source.jsx</scope>
31 |   <description>Create react-native stateless Redux component</description>
32 | </snippet>
33 | 


--------------------------------------------------------------------------------
/redux_component.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | /* Core */
 4 | import React, { Component } from 'react';
 5 | 
 6 | /* Presentational */
 7 | import { View } from 'react-native';
 8 | 
 9 | /* Redux */
10 | import { connect } from 'react-redux';
11 | 
12 | // import styles from './styles';
13 | 
14 | class ${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}} extends Component {
15 |   render() {
16 |     return (
17 |       <View />
18 |     );
19 |   }
20 | }
21 | 
22 | const mapStateToProps = state => ({
23 | 
24 | });
25 | 
26 | const mapDispatchToProps = dispatch => ({
27 | 
28 | });
29 | 
30 | export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME/(.+)\..+|.*/$1/:MyComponent}});
31 | 
32 | ]]></content>
33 |   <tabTrigger>reduxComponent</tabTrigger>
34 |   <scope>source.js,source.jsx</scope>
35 |   <description>Create react-native Redux component</description>
36 | </snippet>
37 | 


--------------------------------------------------------------------------------
/duck.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import { createReducer, createActions } from 'reduxsauce';
 4 | import Immutable from 'seamless-immutable';
 5 | 
 6 | /* Types & Action Creators */
 7 | 
 8 | const { Types, Creators } = createActions({
 9 |   // actionType: ['dataPassed'],
10 | });
11 | 
12 | export const ${1:${TM_FILENAME/(^|-|\.js)(.?)|/\U\2\E/g}}Types = Types;
13 | export default Creators;
14 | 
15 | /* Initial State */
16 | 
17 | export const INITIAL_STATE = Immutable({
18 |   // data: [],
19 | });
20 | 
21 | /* Reducers */
22 | 
23 | // export const reducer = state =>
24 | //   state.merge({ data: [] });
25 | 
26 | /* Reducers to types */
27 | 
28 | export const reducer = createReducer(INITIAL_STATE, {
29 |   // [Types.ACTION_TYPE]: reducer,
30 | });
31 | 
32 | ]]></content>
33 |   <tabTrigger>duck</tabTrigger>
34 |   <scope>source.js,source.jsx</scope>
35 |   <description>Create react-native duck module</description>
36 | </snippet>
37 | 


--------------------------------------------------------------------------------
/eslint.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | {
 4 |   "parser": "babel-eslint",
 5 |   "env": {
 6 |     "browser": true,
 7 |     "jest": true
 8 |   },
 9 |   "plugins": [
10 |     "react-native",
11 |     "jsx-a11y",
12 |     "import"
13 |   ],
14 |   "extends": [
15 |     "airbnb",
16 |     "plugin:react-native/all"
17 |   ],
18 |   "rules": {
19 |     "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
20 |     "global-require": "off",
21 |     "no-console": "off",
22 |     "import/prefer-default-export": "off",
23 |     "no-unused-vars": ["error", {"argsIgnorePattern": "^_"}]
24 |   },
25 |   "settings": {
26 |     "import/resolver": {
27 |       "babel-module": {}
28 |     }
29 |   },
30 |   "globals": {
31 |     "__DEV__": true
32 |   }
33 | }
34 | 
35 | ]]></content>
36 |   <tabTrigger>eslint</tabTrigger>
37 |   <scope>source.json</scope>
38 |   <description>Create eslint file config</description>
39 | </snippet>
40 | 


--------------------------------------------------------------------------------
/redux_configure_store.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import { createStore, applyMiddleware, compose } from 'redux';
 4 | 
 5 | export default (rootReducer) => {
 6 |   const middleware = [];
 7 |   const enhancers = [];
 8 | 
 9 |   /* Saga */
10 |   // const sagaMonitor = __DEV__ ? console.tron.createSagaMonitor() : null;
11 |   // const sagaMiddleware = createSagaMiddleware({ sagaMonitor });
12 |   // middleware.push(sagaMiddleware);
13 | 
14 |   enhancers.push(applyMiddleware(...middleware));
15 | 
16 |   /* Store */
17 |   const createAppropriateStore = __DEV__ ? console.tron.createStore : createStore;
18 |   const store = createAppropriateStore(rootReducer, compose(...enhancers));
19 | 
20 |   /* Run Saga */
21 |   // sagaMiddleware.run(rootSaga);
22 | 
23 |   return store;
24 | };
25 | 
26 | ]]></content>
27 |   <tabTrigger>configureStore</tabTrigger>
28 |   <scope>source.js,source.jsx</scope>
29 |   <description>Create configureStore file</description>
30 | </snippet>
31 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | <div align="center">
  4 |     <h1 align="center">DEPRECATED</h1>
  5 |     <p align="center">
  6 |         🚨 Hey, this repository is DEPRECATED and will no longer be actively maintained!
  7 |     </p>
  8 | </div>
  9 | 
 10 | 
 11 | <br />
 12 | <br />
 13 | <br />
 14 | <br />
 15 | <br />
 16 | 
 17 | ## RocketNative Snippets
 18 | 
 19 | React Native code snippets for Sublime Text
 20 | 
 21 | ## Summary
 22 | 
 23 | - [Installation](#installation)
 24 | - [Usage](#usage)
 25 |     - [Component](#component)
 26 |     - [ESLint](#eslint)
 27 |     - [Redux](#redux)
 28 |     - [Reactotron](#reactotron)
 29 |     - [Babel](#babel)
 30 |     - [Apisauce](#apisauce)
 31 | 
 32 | ![Demo](https://raw.githubusercontent.com/diego3g/rocketnative-sublime-snippets/master/demo.gif)
 33 | 
 34 | ### Installation
 35 | To install through [Package Control](http://wbond.net/sublime_packages/package_control),
 36 | search for **RocketNative Snippets**. If you still don't have Package Control in Sublime Text, [go get it](http://wbond.net/sublime_packages/package_control/installation).
 37 | It's pure awesomeness.
 38 | 
 39 | ## Usage
 40 | ### Component
 41 | #### [component] - Create react-native component
 42 | ```javascript
 43 | /* Core */
 44 | import React, { Component } from 'react';
 45 | 
 46 | /* Presentational */
 47 | import { View } from 'react-native';
 48 | 
 49 | // import styles from './styles';
 50 | 
 51 | export default class MyComponent extends Component {
 52 |   render() {
 53 |     return (
 54 |       <View />
 55 |     );
 56 |   }
 57 | }
 58 | ```
 59 | 
 60 | #### [proptypes] - Create component propTypes
 61 | ```javascript
 62 | static propTypes = {
 63 | 
 64 | };
 65 | ```
 66 | 
 67 | #### [defaultprops] - Create component defaultProps
 68 | ```javascript
 69 | static defaultProps = {
 70 | 
 71 | };
 72 | ```
 73 | 
 74 | #### [render] - Create render method
 75 | ```javascript
 76 | render() {
 77 |   return (
 78 |     <View />
 79 |   );
 80 | }
 81 | ```
 82 | 
 83 | ### ESLint
 84 | #### [eslint] - Create eslint file config
 85 | ```json
 86 | {
 87 |   "parser": "babel-eslint",
 88 |   "env": {
 89 |     "browser": true,
 90 |     "jest": true
 91 |   },
 92 |   "plugins": [
 93 |     "react-native",
 94 |     "jsx-a11y",
 95 |     "import"
 96 |   ],
 97 |   "extends": [
 98 |     "airbnb",
 99 |     "plugin:react-native/all"
100 |   ],
101 |   "rules": {
102 |     "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
103 |     "global-require": "off",
104 |     "no-console": "off",
105 |     "import/prefer-default-export": "off",
106 |     "no-unused-vars": ["error", {"argsIgnorePattern": "^_"}]
107 |   },
108 |   "settings": {
109 |     "import/resolver": {
110 |       "babel-module": {}
111 |     }
112 |   },
113 |   "globals": {
114 |     "__DEV__": true
115 |   }
116 | }
117 | ```
118 | 
119 | ### Redux
120 | #### [reduxSetup] - Create Redux Setup file
121 | ```javascript
122 | import { combineReducers } from 'redux';
123 | 
124 | /* Reducers */
125 | // import navReducer from 'navigation/reducer';
126 | 
127 | import configureStore from './configureStore';
128 | // import rootSaga from './sagas';
129 | 
130 | export default () => {
131 |   const rootReducer = combineReducers({
132 |     // nav: navReducer,
133 |   });
134 | 
135 |   return configureStore(rootReducer, rootSaga);
136 | };
137 | ```
138 | 
139 | #### [configureStore] - Create configureStore file
140 | ```javascript
141 | import { createStore, applyMiddleware, compose } from 'redux';
142 | 
143 | export default (rootReducer) => {
144 |   const middleware = [];
145 |   const enhancers = [];
146 | 
147 |   /* Saga */
148 |   // const sagaMonitor = __DEV__ ? console.tron.createSagaMonitor() : null;
149 |   // const sagaMiddleware = createSagaMiddleware({ sagaMonitor });
150 |   // middleware.push(sagaMiddleware);
151 | 
152 |   enhancers.push(applyMiddleware(...middleware));
153 | 
154 |   /* Store */
155 |   const createAppropriateStore = __DEV__ ? console.tron.createStore : createStore;
156 |   const store = createAppropriateStore(rootReducer, compose(...enhancers));
157 | 
158 |   /* Run Saga */
159 |   // sagaMiddleware.run(rootSaga);
160 | 
161 |   return store;
162 | };
163 | ```
164 | 
165 | #### [reduxComponent] - Create react-native Redux component
166 | ```javascript
167 | /* Core */
168 | import React, { Component } from 'react';
169 | 
170 | /* Presentational */
171 | import { View } from 'react-native';
172 | 
173 | /* Redux */
174 | import { connect } from 'react-redux';
175 | 
176 | // import styles from './styles';
177 | 
178 | class  extends Component {
179 |   render() {
180 |     return (
181 |       <View />
182 |     );
183 |   }
184 | }
185 | 
186 | const mapStateToProps = state => ({
187 | 
188 | });
189 | 
190 | const mapDispatchToProps = dispatch => ({
191 | 
192 | });
193 | 
194 | export default connect(mapStateToProps, mapDispatchToProps)();
195 | ```
196 | 
197 | #### [mapStateToProps] - Create redux mapStateToProps
198 | ```javascript
199 | const mapStateToProps = state => ({
200 | 
201 | });
202 | ```
203 | 
204 | #### [mapDispatchToProps] - Create redux mapDispatchToProps
205 | ```javascript
206 | const mapDispatchToProps = dispatch => ({
207 | 
208 | });
209 | ```
210 | 
211 | #### [duck] - Create react-native duck module
212 | ```javascript
213 | import { createReducer, createActions } from 'reduxsauce';
214 | import Immutable from 'seamless-immutable';
215 | 
216 | /* Types & Action Creators */
217 | 
218 | const { Types, Creators } = createActions({
219 |   // actionType: ['dataPassed'],
220 | });
221 | 
222 | export const TesteTypes = Types;
223 | export default Creators;
224 | 
225 | /* Initial State */
226 | 
227 | export const INITIAL_STATE = Immutable({
228 |   // data: [],
229 | });
230 | 
231 | /* Reducers */
232 | 
233 | // export const reducer = state =>
234 | //   state.merge({ data: [] });
235 | 
236 | /* Reducers to types */
237 | 
238 | export const reducer = createReducer(INITIAL_STATE, {
239 |   // [Types.ACTION_TYPE]: reducer,
240 | });
241 | ```
242 | 
243 | ### Reactotron
244 | #### [reactotronconfig] - Create Reactotron Config
245 | ```javascript
246 | import Reactotron from 'reactotron-react-native';
247 | 
248 | if (__DEV__) {
249 |   const tron = Reactotron
250 |     .configure()
251 |     .useReactNative()
252 |     .connect();
253 | 
254 |   tron.clear();
255 | 
256 |   console.tron = tron;
257 | }
258 | ```
259 | 
260 | ### Babel
261 | #### [moduleResolver] - Create Module Resolver config
262 | ```json
263 | "plugins": [
264 |   [
265 |     "module-resolver",
266 |     {
267 |       "root": ["./src"],
268 |       "extensions": [".js", ".ios.js", ".android.js"]
269 |     }
270 |   ]
271 | ]
272 | ```
273 | 
274 | ### Apisauce
275 | #### [apisauce] - Create APISauce Config
276 | ```javascript
277 | import { create } from 'apisauce';
278 | 
279 | const api = create({
280 |   baseURL: 'http://localhost:3000',
281 | });
282 | 
283 | export default api;
284 | ```
285 | 


--------------------------------------------------------------------------------