From a891ff6bbff02c650f3fcd27ff1441ae1f4809f2 Mon Sep 17 00:00:00 2001 From: Le Tien Tai Date: Wed, 7 Sep 2016 23:47:37 +0700 Subject: [PATCH 1/6] Remove the function keywords. Upper case first letter in some description --- UltiSnips/javascript.snippets | 60 +++++++++++++++++------------------ 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/UltiSnips/javascript.snippets b/UltiSnips/javascript.snippets index 7584b2c..3cd8e73 100644 --- a/UltiSnips/javascript.snippets +++ b/UltiSnips/javascript.snippets @@ -6,38 +6,38 @@ snippet cs "React.addons.classSet" b var cx = React.addons.classSet; endsnippet -snippet cdm "component did mount" b -componentDidMount: function() { +snippet cdm "Component did mount" b +componentDidMount() { ${1} },$0 endsnippet -snippet cdup "component did update" b -componentDidUpdate: function(prevProps, prevState) { +snippet cdup "Component did update" b +componentDidUpdate(prevProps, prevState) { ${1} },$0 endsnippet -snippet cwm "component will mount" b -componentWillMount: function() { +snippet cwm "Component will mount" b +componentWillMount() { ${1} },$0 endsnippet -snippet cwr "component will receive props" b -componentWillReceiveProps: function(nextProps) { +snippet cwr "Component will receive props" b +componentWillReceiveProps(nextProps) { ${1} },$0 endsnippet -snippet cwun "component will unmount" b -componentWillUnmount: function() { +snippet cwun "Component will unmount" b +componentWillUnmount() { ${1} },$0 endsnippet -snippet cwu "component will update" b -componentWillUpdate: function(nextProps, nextState) { +snippet cwu "Component will update" b +componentWillUpdate(nextProps, nextState) { ${1} },$0 endsnippet @@ -48,31 +48,31 @@ cx({ }); endsnippet -snippet fup +snippet fup "Force update" forceUpdate(${1:callback}); endsnippet -snippet gdp "get default props" b -getDefaultProps: function() { +snippet gdp "Get default props" b +getDefaultProps() { return { ${1} }; },$0 endsnippet -snippet gis "get initial state" b -getInitialState: function() { +snippet gis "Get initial state" b +getInitialState() { return { ${1}: ${2} }; },$0 endsnippet -snippet ism "is mounted" +snippet ism "Is mounted" isMounted() endsnippet -snippet jsx "define jsx dom" b +snippet jsx "Define jsx dom" b /** * @jsx React.DOM */ @@ -81,7 +81,7 @@ var React = require('react'); } var ${2:ClassName} = React.createClass({ -render: function() { +render() { return ( ${VISUAL}$4 ); @@ -98,10 +98,10 @@ propTypes: { }, endsnippet -snippet rcc "create class/component" b +snippet rcc "Create React.Component" b var ${1:ClassName} = React.createClass({ -render: function() { +render() { return ( ${VISUAL}$2 ); @@ -111,34 +111,34 @@ render: function() { $0 endsnippet -snippet ren -render: function() { +snippet ren "render" +render() { return ( ${1:
} ); }$0 endsnippet -snippet sst "set state" b +snippet sst "Set state" b this.setState({ ${1}: ${2} });$0 endsnippet -snippet scu "should component update" -shouldComponentUpdate: function(nextProps, nextState) { +snippet scu "Should component update" +shouldComponentUpdate(nextProps, nextState) { ${1} },$0 endsnippet -snippet props "get property" i +snippet props "Get property" i this.props.${1} endsnippet -snippet state "get state" i +snippet state "Get state" i this.state.${1} endsnippet -snippet trp +snippet trp "Transfer props to" this.transferPropsTo(${VISUAL}$0); endsnippet From 7f93d10b825c3850077c69c05e2d3094c3c69006 Mon Sep 17 00:00:00 2001 From: Le Tien Tai Date: Wed, 7 Sep 2016 23:53:31 +0700 Subject: [PATCH 2/6] Remove the commas and semicolons as the end of function snippets --- UltiSnips/javascript.snippets | 36 +++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/UltiSnips/javascript.snippets b/UltiSnips/javascript.snippets index 3cd8e73..d1183ba 100644 --- a/UltiSnips/javascript.snippets +++ b/UltiSnips/javascript.snippets @@ -9,37 +9,37 @@ endsnippet snippet cdm "Component did mount" b componentDidMount() { ${1} -},$0 +}$0 endsnippet snippet cdup "Component did update" b componentDidUpdate(prevProps, prevState) { ${1} -},$0 +}$0 endsnippet snippet cwm "Component will mount" b componentWillMount() { ${1} -},$0 +}$0 endsnippet snippet cwr "Component will receive props" b componentWillReceiveProps(nextProps) { ${1} -},$0 +}$0 endsnippet snippet cwun "Component will unmount" b componentWillUnmount() { ${1} -},$0 +}$0 endsnippet snippet cwu "Component will update" b componentWillUpdate(nextProps, nextState) { ${1} -},$0 +}$0 endsnippet snippet cx @@ -49,23 +49,23 @@ cx({ endsnippet snippet fup "Force update" -forceUpdate(${1:callback}); +forceUpdate(${1:callback}) endsnippet snippet gdp "Get default props" b getDefaultProps() { return { ${1} - }; -},$0 + } +}$0 endsnippet snippet gis "Get initial state" b getInitialState() { return { ${1}: ${2} - }; -},$0 + } +}$0 endsnippet snippet ism "Is mounted" @@ -95,7 +95,7 @@ endsnippet snippet pt "propTypes" b propTypes: { ${1}: React.PropTypes.${2:string} -}, +} endsnippet snippet rcc "Create React.Component" b @@ -104,10 +104,10 @@ var ${1:ClassName} = React.createClass({ render() { return ( ${VISUAL}$2 - ); + ) } -}); +}) $0 endsnippet @@ -115,20 +115,20 @@ snippet ren "render" render() { return ( ${1:
} - ); + ) }$0 endsnippet snippet sst "Set state" b this.setState({ ${1}: ${2} -});$0 +})$0 endsnippet snippet scu "Should component update" shouldComponentUpdate(nextProps, nextState) { ${1} -},$0 +}$0 endsnippet snippet props "Get property" i @@ -140,5 +140,5 @@ this.state.${1} endsnippet snippet trp "Transfer props to" -this.transferPropsTo(${VISUAL}$0); +this.transferPropsTo(${VISUAL}$0) endsnippet From aba0b6c9ff8a4d361b60b8dee41680972d784ac5 Mon Sep 17 00:00:00 2001 From: Le Tien Tai Date: Thu, 8 Sep 2016 00:17:50 +0700 Subject: [PATCH 3/6] Add constructor snippet --- UltiSnips/javascript.snippets | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/UltiSnips/javascript.snippets b/UltiSnips/javascript.snippets index d1183ba..64b516f 100644 --- a/UltiSnips/javascript.snippets +++ b/UltiSnips/javascript.snippets @@ -142,3 +142,15 @@ endsnippet snippet trp "Transfer props to" this.transferPropsTo(${VISUAL}$0) endsnippet + +# This snippet will only works if the keyword 'con' is the first word of line +snippet con "Constructor for React.Component" b +constructor(props, context) { + super(props, context) + + this.state = { + $1: $2 + } +}$0 + +endsnippet From 3be08bbf4b650265d9410b847d669f237f61eb8a Mon Sep 17 00:00:00 2001 From: Le Tien Tai Date: Thu, 8 Sep 2016 00:23:55 +0700 Subject: [PATCH 4/6] Change to es6 import. Add snippet for js class --- UltiSnips/javascript.snippets | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/UltiSnips/javascript.snippets b/UltiSnips/javascript.snippets index 64b516f..50967bb 100644 --- a/UltiSnips/javascript.snippets +++ b/UltiSnips/javascript.snippets @@ -77,9 +77,9 @@ snippet jsx "Define jsx dom" b * @jsx React.DOM */ -var React = require('react'); -} -var ${2:ClassName} = React.createClass({ +import React from 'react'; + +let ${2:ClassName} = React.createClass({ render() { return ( @@ -98,8 +98,8 @@ propTypes: { } endsnippet -snippet rcc "Create React.Component" b -var ${1:ClassName} = React.createClass({ +snippet rcc "React.createClass" b +let ${1:ClassName} = React.createClass({ render() { return ( @@ -111,6 +111,16 @@ render() { $0 endsnippet +snippet rcx "Extends React.Component" b +class ${1:ClassName} extends React.Component { + render(){ + return ( + $2 + ) + } +} +endsnippet + snippet ren "render" render() { return ( From b575d4c9117b97804f24f83e322eb54a433eff59 Mon Sep 17 00:00:00 2001 From: Le Tien Tai Date: Thu, 8 Sep 2016 00:25:03 +0700 Subject: [PATCH 5/6] Remove react-classset since it has been deprecated --- UltiSnips/javascript.snippets | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/UltiSnips/javascript.snippets b/UltiSnips/javascript.snippets index 50967bb..7355e9e 100644 --- a/UltiSnips/javascript.snippets +++ b/UltiSnips/javascript.snippets @@ -2,10 +2,6 @@ # React snippets # -snippet cs "React.addons.classSet" b -var cx = React.addons.classSet; -endsnippet - snippet cdm "Component did mount" b componentDidMount() { ${1} @@ -42,12 +38,6 @@ componentWillUpdate(nextProps, nextState) { }$0 endsnippet -snippet cx -cx({ - ${1}: ${2} -}); -endsnippet - snippet fup "Force update" forceUpdate(${1:callback}) endsnippet From dc974c1c93dbdd3761f343f557070159ccdc34d8 Mon Sep 17 00:00:00 2001 From: Le Tien Tai Date: Thu, 8 Sep 2016 00:45:16 +0700 Subject: [PATCH 6/6] Update readme --- README.md | 74 +++++++++++++++++++++++++++---------------------------- 1 file changed, 36 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index fe37786..cc193bc 100644 --- a/README.md +++ b/README.md @@ -1,51 +1,30 @@ vim-react-snippets ================== -A set of snippets for Vim to work with Facebook's [React](http://facebook.github.io/react/) library. +A set of snippets for Vim to work with Facebook's +[React](http://facebook.github.io/react/) library. This fork change the snippet +syntax to ES6. Remove semicolon and comma. I also remove snippets related to +[react-classset](https://github.com/petehunt/react-classset) as it is deprecated now. -A direct port of the awesome snippets from -[jgebhardt/sublime-react](https://github.com/jgebhardt/sublime-react). +Require [UltiSnips](https://github.com/SirVer/ultisnips). +I only update the `UltiSnips` version. Pull requests for +[vim-snipmate](https://github.com/garbas/vim-snipmate) version are welcome. -Requires [vim-snipmate](https://github.com/garbas/vim-snipmate) or [Ultisnips](https://github.com/SirVer/ultisnips). Installation ============ -Use your preferred Vim plugin installation method. -I like [Vundle](http://github.com/gmarik/vundle), but other options like -[pathogen](https://github.com/tpope/vim-pathogen) should work fine as well. +Use your preferred Vim plugin installation method. For me, I like +[vim-plug](https://github.com/junegunn/vim-plug). If you also using `vim-plug`, +put the following into your `.vimrc`. -####SnipMate +````vimrc +Plug 'SirVer/ultisnips' -If you're using Vundle, and you don't currently have SnipMate, you will need to -add the following to your `.vimrc` (taken from the [SnipMate README](https://github.com/garbas/vim-snipmate/blob/master/README.md)): - -``` -" vim-react-snippets: -Bundle "justinj/vim-react-snippets" - -" SnipMate and its dependencies: -Bundle "MarcWeber/vim-addon-mw-utils" -Bundle "tomtom/tlib_vim" -Bundle "garbas/vim-snipmate" - -" Other sets of snippets (optional): -Bundle "honza/vim-snippets" -``` -####Ultisnips - -If you prefer to use `vim-react-snippets` with `Ultisnips`, put this in your .vimrc -to install using Vundle +" Currently, es6 version of snippets is available in es6 branch only +Plug 'letientai299/vim-react-snippets', { 'branch': 'es6' } -```` -" vim-react-snippets: -Bundle "justinj/vim-react-snippets" - -" Ultisnips -Bundle "SirVer/ultisnips" - -" Other sets of snippets (optional): -Bundle "honza/vim-snippets" +Plug 'honza/vim-snippets' "optional ```` Usage @@ -61,12 +40,31 @@ gdp expanding to ``` -getDefaultProps: function() { +getDefaultProps() { return { }; }, ``` +Another example: + +``` +rcx +``` + +Expanding to + +``` +class ClassName extends React.Component { + render(){ + return ( + + ) + } +} +``` + And a bunch of others! -Check `snippets/javascript.snippets` to see the full list. + +Check `./UltiSnips/javascript.snippets` to see the full list.