diff --git a/README.md b/README.md index 321fd82..b0cd6a4 100644 --- a/README.md +++ b/README.md @@ -1,55 +1,116 @@ # es6-react-redux-snippets -This is the best package ever created for ES6, React and Redux +This is the best package ever created for ES6, React and Redux. +Enjoy :D -Here is a table with all available snippets. -**Note:** The _$1_ or _${1:params}_ is the position where the cursor will be when the snippet is triggered, if you see a following number, it means that you can press tab and cursor will move to that space. +## ES6+ Snippets -Enjoy :D +**log → console.log()** +
+![log snippet animation](./docs/log.gif) +**anfn → annonymous function** +
+![annonymous function snippet](./docs/anfn.gif) -## ES6+ Snippets +**nfn→ named function** +
+![named function snippet](./docs/nfn.gif) + +**fn → ES5 fucntion** +
+![ES5 function snippet](./docs/fn.gif) + +**imp → import statement** +
+![import statement snippet](./docs/imp.gif) + +**imd → import statement desctructured** +
+![import statement with destructuring snippet](./docs/imd.gif) + +**ime → import everything as** +
+![import everything snippet](./docs/ime.gif) + +**fof → for of loop** +
+![for of loop snippet](./docs/fof.gif) + +**fin → for in loop** +
+![for in loop snippet](./docs/fin.gif) + +**met → method** +
+![method snippet](./docs/met.gif) + +**seto → setTimeout** +
+![setTimeout snippet](./docs/seto.gif) + +**npro → new Promise** +
+![npro snippet](./docs/npro.gif) + +**catch → catch() with nested annonymous function** +
+![catch method snippet](./docs/catch.gif) + +**then → then() with nested annonymous function** +
+![then function snippet](./docs/then.gif) + +## React Snippets + +**rcc → React Class Based Component** +
+![React component snippet](./docs/rcc.gif) + +**cpwm → | componentWillMount Method** +
+![componentWillMount snippet](./docs/cpwm.gif) + +**cla → | className attribute** +
+![className attribute snippet](./docs/cla.gif) + +## React Redux Snippets -|Prefix|Method| -|-------:|-------| -|`log→`|`console.log(${1:msg})`| -|`anfn→`|`(${1:params}) => { $2 }`| -|`nfn→`|`const ${1:functionName} = (${2:params}) => { $3 }`| -|`fn→`|`function ${1:functionName} (${2:params}) { $3 }`| -|`imp→`|`import ${1:ModuleName} from '${2:Module}';`| -|`imd→`|`import { ${1:destructuredModule} } from '${2:module}'`| -|`ime→`|`import * as ${1:alias} from '${2:module}`| -|`fof→`|`for(let ${1:itemName} of ${2:iterable} { $3 }`| -|`fin→`|`for(let ${1:itemName} in ${2:iterable} { $3 }`| -|`met→`|`${1:methodName} = (${2:params}) => { $3 }`| -|`seto→`|`setTimeOut(($2) => { $3 }, ${1:timeOut});`| -|`npro→`|`new Promise((${1:resolve}, ${2:reject}) => )`| +**rcredux → Renders a React connected component** +
+![React connected component snippet](./docs/rcredux.gif) -## React +**mapSta → mapStateToProps function** +
+![mapStateToProps function snippet](./docs/mapSta.gif) -|Prefix|Method| -|-------:|-------| -|`rcc→`|`import React, { Component } from 'react';`
`export default class ${1:componentName}`
`extends Component {`
`render () {`
`return (`
`
`
` $2`
`
`
`)`
`}`
`}`| -|`cpwm→`| `componentWillMount($1) { $2 }`| -|`rcredux→`| `Renders a React connected component`| +**mapDis → mapDispatchToProps** +
+![mapDispatchToProps function snippet](./docs/mapDis.gif) +## Redux Snippets +**rxconst → creates redux constant** +
+![redux constant snippet](./docs/rxconst.gif) +**rxaction → redux action** +
+![redux action snippet](./docs/rxaction.gif) -## React Redux +**rxreducer → Redux reducer template** +
+![redux reducer snippet](./docs/rxreducer.gif) -|Prefix|Method| -|-------:|-------| -|`rcredux→`|`React component with Redux`| -|`mapSta→`|`mapStateToProps function`| -|`mapDis→`|`mapDispatchToProps constant`| +#### Funding -#Redux +This software is provided to you as open source, free of charge. The time and +effort to develop and maintain this project is dedicated by [@papaponmx](https://twitter.com/papaponmx). +If you (or your employer) benefit from this project, please consider a financial +contribution. Your contribution helps continue the efforts that produce this +and other open source software. -|Prefix|Method| -|-------:|-------| -|`rxconst→`|`export const ${1:constName} = '${1:constName}';`| -|`rxaction→`|`export const ${1:actionName} = ({2:param}) => ({`
`type: ${3:type}`
`payload: ${4:payload}`
`})`| -|`rxreducer→`|`Redux reducer template`| +Funds are accepted via [PayPal](paypal.me/papaponmx) and Bitcoin Cash in this wallet `qqve8s6trj0wxquq24zlpp9u4d6g7zdt7us2tsus67`. Any amount is appreciated. diff --git a/docs/anfn.gif b/docs/anfn.gif new file mode 100644 index 0000000..05be87d Binary files /dev/null and b/docs/anfn.gif differ diff --git a/docs/catch.gif b/docs/catch.gif new file mode 100644 index 0000000..fecbfa5 Binary files /dev/null and b/docs/catch.gif differ diff --git a/docs/cla.gif b/docs/cla.gif new file mode 100644 index 0000000..4113534 Binary files /dev/null and b/docs/cla.gif differ diff --git a/docs/cpwm.gif b/docs/cpwm.gif new file mode 100644 index 0000000..7dcb118 Binary files /dev/null and b/docs/cpwm.gif differ diff --git a/docs/fin.gif b/docs/fin.gif new file mode 100644 index 0000000..1a969e5 Binary files /dev/null and b/docs/fin.gif differ diff --git a/docs/fn.gif b/docs/fn.gif new file mode 100644 index 0000000..daac869 Binary files /dev/null and b/docs/fn.gif differ diff --git a/docs/fof.gif b/docs/fof.gif new file mode 100644 index 0000000..7a30238 Binary files /dev/null and b/docs/fof.gif differ diff --git a/docs/imd.gif b/docs/imd.gif new file mode 100644 index 0000000..567ccdf Binary files /dev/null and b/docs/imd.gif differ diff --git a/docs/ime.gif b/docs/ime.gif new file mode 100644 index 0000000..ba2fb76 Binary files /dev/null and b/docs/ime.gif differ diff --git a/docs/imp.gif b/docs/imp.gif new file mode 100644 index 0000000..3f697dd Binary files /dev/null and b/docs/imp.gif differ diff --git a/docs/log.gif b/docs/log.gif new file mode 100644 index 0000000..c6d2fb4 Binary files /dev/null and b/docs/log.gif differ diff --git a/docs/mapDis.gif b/docs/mapDis.gif new file mode 100644 index 0000000..1f7bbba Binary files /dev/null and b/docs/mapDis.gif differ diff --git a/docs/mapSta.gif b/docs/mapSta.gif new file mode 100644 index 0000000..b748c4e Binary files /dev/null and b/docs/mapSta.gif differ diff --git a/docs/met.gif b/docs/met.gif new file mode 100644 index 0000000..b67fe7f Binary files /dev/null and b/docs/met.gif differ diff --git a/docs/nfn.gif b/docs/nfn.gif new file mode 100644 index 0000000..3a9c5e5 Binary files /dev/null and b/docs/nfn.gif differ diff --git a/docs/npro.gif b/docs/npro.gif new file mode 100644 index 0000000..9983af9 Binary files /dev/null and b/docs/npro.gif differ diff --git a/docs/rcc.gif b/docs/rcc.gif new file mode 100644 index 0000000..89277ba Binary files /dev/null and b/docs/rcc.gif differ diff --git a/docs/rcredux.gif b/docs/rcredux.gif new file mode 100644 index 0000000..876bc9a Binary files /dev/null and b/docs/rcredux.gif differ diff --git a/docs/rxaction.gif b/docs/rxaction.gif new file mode 100644 index 0000000..2e76dce Binary files /dev/null and b/docs/rxaction.gif differ diff --git a/docs/rxconst.gif b/docs/rxconst.gif new file mode 100644 index 0000000..f2c2135 Binary files /dev/null and b/docs/rxconst.gif differ diff --git a/docs/rxreducer.gif b/docs/rxreducer.gif new file mode 100644 index 0000000..bb2caea Binary files /dev/null and b/docs/rxreducer.gif differ diff --git a/docs/seto.gif b/docs/seto.gif new file mode 100644 index 0000000..5cb63c0 Binary files /dev/null and b/docs/seto.gif differ diff --git a/docs/then.gif b/docs/then.gif new file mode 100644 index 0000000..b72d123 Binary files /dev/null and b/docs/then.gif differ diff --git a/package.json b/package.json index 6314131..aeea1d1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "es6-react-redux-snippets", "main": "./lib/es6-react-redux-snippets", - "version": "2.13.0", + "version": "3.9.0", "description": "This is one of the best packages for ES6+, React and Redux packages out there", "keywords": [ "ES6", diff --git a/snippets/snippets.cson b/snippets/snippets.cson index 27cf9a9..9af567d 100644 --- a/snippets/snippets.cson +++ b/snippets/snippets.cson @@ -2,18 +2,18 @@ # You can contact me at https://github.com/papaponmx # https://riosjaime.com or hola@riosjaime.com -# v1.9.0 +# v3.2.0 # JavaScript '.source.js': 'Console log': 'prefix': 'log' - 'body': 'console.log(${1:msg})'; + 'body': 'console.log(${1:msg});'; 'Annonymous function': 'prefix': 'anfn' 'body': """(${1:params}) => { $2 - }""" + };""" 'Named function': 'prefix': 'nfn' 'body': 'const ${1:functionName} = (${2:params}) => { $3 }' @@ -24,27 +24,27 @@ }""" 'Import snippet': 'prefix': 'imp' - 'body': """import ${1:ModuleName} from '${2:Module}';""" + 'body': """import ${2:ModuleName} from '${1:Module}';""" 'Import destructured': 'prefix': 'imd' - 'body': """import { ${1:destructuredModule} } from '${2:module}'""" + 'body': """import { ${1:destructuredModule} } from '${2:module}';""" 'Import Everything': 'prefix': 'ime' - 'body': """import * as ${1:alias} from '${2:module}""" + 'body': """import * as ${2:alias} from '${1:module}';""" 'For of loop': 'prefix': 'fof' - 'body': """ for(let ${1:itemName} of ${2:iterable} { + 'body': """ for(let ${1:itemName} of ${2:iterable}) { ${3} - } + }; """ 'For in loop': 'prefix': 'fin' - 'body': """for(let ${1:itemName} in ${2:iterable} { + 'body': """for(let ${1:itemName} in ${2:iterable}) { $3 }""" 'Method': 'prefix': 'met' - 'body': """ ${1:methodName} = (${2:params}) => { $3 } + 'body': """ ${1:methodName} = (${2:params}) => { $3 }; """ 'setTimeOut function': 'prefix': 'seto' @@ -57,13 +57,13 @@ 'body': 'new Promise((${1:resolve}, ${2:reject}) => );' 'then() with nested annonymous function': 'prefix': 'then' - 'body': """then(( ${1:response} => { + 'body': """then( ${1:response} => { $2 }); """ 'catch() with nested annonymous function': - 'prefix': '.catch' - 'body': """catch(( ${1:error} => { + 'prefix': 'catch' + 'body': """catch( ${1:err} => { $2 }); """ @@ -73,15 +73,16 @@ 'prefix': 'rcc' 'body': """import React, { Component } from 'react'; -export default class ${1:componentName} extends Component { +class ${1:componentName} extends Component { render() { return (
$2
- ) + ); } } +export default ${1:componentName} """ 'componentWillMount method': 'prefix': 'cpwm' @@ -89,6 +90,10 @@ export default class ${1:componentName} extends Component { $2 } """ + 'className attribute': + 'prefix': 'cla' + 'body': """className='$1' + """ # React Redux 'mapStateToProps funtion': 'prefix': 'mapSta' @@ -109,14 +114,14 @@ export default class ${1:componentName} extends Component { import React, { Component } from 'react'; import { connect } from 'react-redux'; -export class ${1:componentName} extends Component { + class ${1:componentName} extends Component { render() { return (
- ) + ); } } @@ -126,7 +131,7 @@ const mapStateToProps = (state) => ({ const mapDispatchToProps = (dispatch) => ({ -}) +}); export default connect(mapStateToProps, mapDispatchToProps)(${1:componentName}); """