Skip to content

Commit 218c26e

Browse files
author
minwe
committed
[+] add React pure function component template, resolves #5 (@Nek)
1 parent e919cc7 commit 218c26e

File tree

4 files changed

+177
-61
lines changed

4 files changed

+177
-61
lines changed

‎README.md

Lines changed: 61 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -37,65 +37,106 @@ For example, to create a new React class, type `rcc` and press `Tab` or press `C
3737
**Documentation of available snippets:**
3838

3939
<!--DOC_START-->
40-
### `rcc`
40+
### `rcls`
4141

4242
```js
4343
import React, {
44+
Component,
4445
PropTypes,
4546
} from 'react';
4647

47-
const $class$ = React.createClass({
48+
class $COMPONENT$ extends Component {
4849
render() {
4950
return (
5051
<div>$END$</div>
5152
);
5253
}
53-
});
54+
}
55+
56+
$COMPONENT$.propTypes = {};
57+
$COMPONENT$.defaultProps = {};
5458

55-
export default $class$;
59+
export default $COMPONENT$;
5660

5761
```
5862

59-
### `rcc5`
63+
### `rpfc`
64+
65+
```js
66+
import React, {
67+
PropTypes,
68+
} from 'react';
69+
70+
const $COMPONENT$ = ($PARAMETER$) => {
71+
return (
72+
<div>$END$</div>
73+
);
74+
};
75+
76+
$COMPONENT$.propTypes = {};
77+
$COMPONENT$.defaultProps = {};
78+
79+
export default $COMPONENT$;
80+
81+
```
82+
83+
### `rpfc5`
6084

6185
```js
6286
'use strict';
6387

6488
var React = require('react');
6589
var PropTypes = React.PropTypes;
6690

67-
var $class$ = React.createClass({
68-
render: function() {
69-
return (
70-
<div>$END$</div>
71-
);
72-
}
73-
});
91+
function $COMPONENT$($PARAMETER$) {
92+
return (
93+
<div>$END$</div>
94+
);
95+
}
7496

75-
module.exports = $class$;
97+
$COMPONENT$.propTypes = {};
98+
$COMPONENT$.defaultProps = {};
99+
100+
module.exports = $COMPONENT$;
76101

77102
```
78103

79-
### `rcls`
104+
### `rcc`
80105

81106
```js
82107
import React, {
83-
Component,
84108
PropTypes,
85109
} from 'react';
86110

87-
class $class$ extends Component {
111+
const $COMPONENT$ = React.createClass({
88112
render() {
89113
return (
90114
<div>$END$</div>
91115
);
92116
}
93-
}
117+
});
118+
119+
export default $COMPONENT$;
94120

95-
$class$.propTypes = {};
96-
$class$.defaultProps = {};
121+
```
122+
123+
### `rcc5`
124+
125+
```js
126+
'use strict';
127+
128+
var React = require('react');
129+
var PropTypes = React.PropTypes;
130+
131+
var $COMPONENT$ = React.createClass({
132+
render: function() {
133+
return (
134+
<div>$END$</div>
135+
);
136+
}
137+
});
97138

98-
export default $class$;
139+
module.exports = $COMPONENT$;
99140

100141
```
101142

‎jetbrains/templates/ReactJS.xml

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<templateSet group="ReactJS">
22
<template
3-
name="rcc"
4-
value="import React, {&#10; PropTypes,&#10;} from &apos;react&apos;;&#10;&#10;const $class$ = React.createClass({&#10; render() {&#10; return (&#10; &lt;div&gt;$END$&lt;/div&gt;&#10; );&#10; }&#10;});&#10;&#10;export default $class$;&#10;"
5-
description="React: Create a React.js component"
3+
name="rcls"
4+
value="import React, {&#10; Component,&#10; PropTypes,&#10;} from &apos;react&apos;;&#10;&#10;class $COMPONENT$ extends Component {&#10; render() {&#10; return (&#10; &lt;div&gt;$END$&lt;/div&gt;&#10; );&#10; }&#10;}&#10;&#10;$COMPONENT$.propTypes = {};&#10;$COMPONENT$.defaultProps = {};&#10;&#10;export default $COMPONENT$;&#10;"
5+
description="React: Create a React ES2015 class"
66
toReformat="true"
77
toShortenFQNames="true">
8-
<variable name="class" expression="complete()" defaultValue="" alwaysStopAt="true" />
8+
<variable name="COMPONENT" expression="fileNameWithoutExtension()" defaultValue="" alwaysStopAt="true" />
99
<context>
1010
<option name="JAVA_SCRIPT" value="true" />
1111
<option name="JS_EXPRESSION" value="true" />
@@ -14,12 +14,42 @@
1414
</context>
1515
</template>
1616
<template
17-
name="rcc5"
18-
value="&apos;use strict&apos;;&#10;&#10;var React = require(&apos;react&apos;);&#10;var PropTypes = React.PropTypes;&#10;&#10;var $class$ = React.createClass({&#10; render: function() {&#10; return (&#10; &lt;div&gt;$END$&lt;/div&gt;&#10; );&#10; }&#10;});&#10;&#10;module.exports = $class$;&#10;"
17+
name="rpfc"
18+
value="import React, {&#10; PropTypes,&#10;} from &apos;react&apos;;&#10;&#10;const $COMPONENT$ = ($PARAMETER$) =&gt; {&#10; return (&#10; &lt;div&gt;$END$&lt;/div&gt;&#10; );&#10;};&#10;&#10;$COMPONENT$.propTypes = {};&#10;$COMPONENT$.defaultProps = {};&#10;&#10;export default $COMPONENT$;&#10;"
19+
description="React: Create a pure function component"
20+
toReformat="true"
21+
toShortenFQNames="true">
22+
<variable name="COMPONENT" expression="fileNameWithoutExtension()" defaultValue="" alwaysStopAt="true" />
23+
<variable name="PARAMETER" expression="" defaultValue="&quot;props&quot;" alwaysStopAt="true" />
24+
<context>
25+
<option name="JAVA_SCRIPT" value="true" />
26+
<option name="JS_EXPRESSION" value="true" />
27+
<option name="JSX_HTML" value="true" />
28+
<option name="JS_STATEMENT" value="true" />
29+
</context>
30+
</template>
31+
<template
32+
name="rpfc5"
33+
value="&apos;use strict&apos;;&#10;&#10;var React = require(&apos;react&apos;);&#10;var PropTypes = React.PropTypes;&#10;&#10;function $COMPONENT$($PARAMETER$) {&#10; return (&#10; &lt;div&gt;$END$&lt;/div&gt;&#10; );&#10;}&#10;&#10;$COMPONENT$.propTypes = {};&#10;$COMPONENT$.defaultProps = {};&#10;&#10;module.exports = $COMPONENT$;&#10;"
34+
description="React: Create a pure function component"
35+
toReformat="true"
36+
toShortenFQNames="true">
37+
<variable name="COMPONENT" expression="fileNameWithoutExtension()" defaultValue="" alwaysStopAt="true" />
38+
<variable name="PARAMETER" expression="" defaultValue="&quot;props&quot;" alwaysStopAt="true" />
39+
<context>
40+
<option name="JAVA_SCRIPT" value="true" />
41+
<option name="JS_EXPRESSION" value="true" />
42+
<option name="JSX_HTML" value="true" />
43+
<option name="JS_STATEMENT" value="true" />
44+
</context>
45+
</template>
46+
<template
47+
name="rcc"
48+
value="import React, {&#10; PropTypes,&#10;} from &apos;react&apos;;&#10;&#10;const $COMPONENT$ = React.createClass({&#10; render() {&#10; return (&#10; &lt;div&gt;$END$&lt;/div&gt;&#10; );&#10; }&#10;});&#10;&#10;export default $COMPONENT$;&#10;"
1949
description="React: Create a React.js component"
2050
toReformat="true"
2151
toShortenFQNames="true">
22-
<variable name="class" expression="complete()" defaultValue="" alwaysStopAt="true" />
52+
<variable name="COMPONENT" expression="fileNameWithoutExtension()" defaultValue="" alwaysStopAt="true" />
2353
<context>
2454
<option name="JAVA_SCRIPT" value="true" />
2555
<option name="JS_EXPRESSION" value="true" />
@@ -28,12 +58,12 @@
2858
</context>
2959
</template>
3060
<template
31-
name="rcls"
32-
value="import React, {&#10; Component,&#10; PropTypes,&#10;} from &apos;react&apos;;&#10;&#10;class $class$ extends Component {&#10; render() {&#10; return (&#10; &lt;div&gt;$END$&lt;/div&gt;&#10; );&#10; }&#10;}&#10;&#10;$class$.propTypes = {};&#10;$class$.defaultProps = {};&#10;&#10;export default $class$;&#10;"
33-
description="React: Create a ES2015 class"
61+
name="rcc5"
62+
value="&apos;use strict&apos;;&#10;&#10;var React = require(&apos;react&apos;);&#10;var PropTypes = React.PropTypes;&#10;&#10;var $COMPONENT$ = React.createClass({&#10; render: function() {&#10; return (&#10; &lt;div&gt;$END$&lt;/div&gt;&#10; );&#10; }&#10;});&#10;&#10;module.exports = $COMPONENT$;&#10;"
63+
description="React: Create a React.js component"
3464
toReformat="true"
3565
toShortenFQNames="true">
36-
<variable name="class" expression="complete()" defaultValue="" alwaysStopAt="true" />
66+
<variable name="COMPONENT" expression="fileNameWithoutExtension()" defaultValue="" alwaysStopAt="true" />
3767
<context>
3868
<option name="JAVA_SCRIPT" value="true" />
3969
<option name="JS_EXPRESSION" value="true" />

‎settings.jar

110 Bytes
Binary file not shown.

‎src/template.yaml

Lines changed: 75 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,74 @@
11
# Create component
2+
3+
# https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#plain-javascript-classes
4+
rcls:
5+
description: Create a React ES2015 class
6+
tpl: |
7+
import React, {
8+
Component,
9+
PropTypes,
10+
} from 'react';
11+
12+
class $COMPONENT$ extends Component {
13+
render() {
14+
return (
15+
<div>$END$</div>
16+
);
17+
}
18+
}
19+
20+
$COMPONENT$.propTypes = {};
21+
$COMPONENT$.defaultProps = {};
22+
23+
export default $COMPONENT$;
24+
25+
variables:
26+
- {name: 'COMPONENT', expression: 'fileNameWithoutExtension()'}
27+
28+
# Pure function component
29+
# @see https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d#.qxyk0j6nc
30+
# @see https://facebook.github.io/react/docs/reusable-components.html#stateless-functions
31+
# @see https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components
32+
rpfc:
33+
description: Create a pure function component
34+
tpl:
35+
next: |
36+
import React, {
37+
PropTypes,
38+
} from 'react';
39+
40+
const $COMPONENT$ = ($PARAMETER$) => {
41+
return (
42+
<div>$END$</div>
43+
);
44+
};
45+
46+
$COMPONENT$.propTypes = {};
47+
$COMPONENT$.defaultProps = {};
48+
49+
export default $COMPONENT$;
50+
51+
es5: |
52+
'use strict';
53+
54+
var React = require('react');
55+
var PropTypes = React.PropTypes;
56+
57+
function $COMPONENT$($PARAMETER$) {
58+
return (
59+
<div>$END$</div>
60+
);
61+
}
62+
63+
$COMPONENT$.propTypes = {};
64+
$COMPONENT$.defaultProps = {};
65+
66+
module.exports = $COMPONENT$;
67+
68+
variables:
69+
- {name: 'COMPONENT', expression: 'fileNameWithoutExtension()'}
70+
- {name: 'PARAMETER', defaultValue: '&quot;props&quot;'}
71+
272
rcc:
373
description: Create a React.js component
474
tpl:
@@ -7,59 +77,34 @@ rcc:
777
PropTypes,
878
} from 'react';
979
10-
const $class$ = React.createClass({
80+
const $COMPONENT$ = React.createClass({
1181
render() {
1282
return (
1383
<div>$END$</div>
1484
);
1585
}
1686
});
1787
18-
export default $class$;
88+
export default $COMPONENT$;
1989
2090
es5: |
2191
'use strict';
2292
2393
var React = require('react');
2494
var PropTypes = React.PropTypes;
2595
26-
var $class$ = React.createClass({
96+
var $COMPONENT$ = React.createClass({
2797
render: function() {
2898
return (
2999
<div>$END$</div>
30100
);
31101
}
32102
});
33103
34-
module.exports = $class$;
35-
36-
variables:
37-
- {name: 'class', expression: 'complete()'}
38-
39-
# https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#plain-javascript-classes
40-
rcls:
41-
description: Create a ES2015 class
42-
tpl: |
43-
import React, {
44-
Component,
45-
PropTypes,
46-
} from 'react';
47-
48-
class $class$ extends Component {
49-
render() {
50-
return (
51-
<div>$END$</div>
52-
);
53-
}
54-
}
55-
56-
$class$.propTypes = {};
57-
$class$.defaultProps = {};
58-
59-
export default $class$;
104+
module.exports = $COMPONENT$;
60105
61106
variables:
62-
- {name: 'class', expression: 'complete()'}
107+
- {name: 'COMPONENT', expression: 'fileNameWithoutExtension()'}
63108

64109
# Import react-dom
65110
rdom:

0 commit comments

Comments
 (0)