Merge pull request #359 from sei40kr/react-redux-snippets

Improvements and fixes for React & Redux snippets

snippets/rjsx-mode/.yas-setup.el

@@ -0,0 +1,21 @@
+;;; .yas-setup.el --- Yasnippet helper functions for JSX snippets
+
+;;; Commentary:
+
+;;; Code:
+
+(require 'yasnippet)
+(require 's)
+
+(defun yas-jsx-get-class-name-by-file-name ()
+  "Return name of class-like construct by `file-name'."
+  (if buffer-file-name
+      (let ((class-name (file-name-nondirectory
+                         (file-name-sans-extension buffer-file-name))))
+        (if (equal class-name "index")
+            (file-name-nondirectory
+             (directory-file-name (file-name-directory buffer-file-name)))
+          class-name))
+    ""))
+
+;;; .yas-setup.el ends here

snippets/rjsx-mode/React-Native/rnc

@@ -8,11 +8,11 @@
 import React, { Component } from 'react'
 import { Text, View } from 'react-native'
 
-export default class ${1:${TM_FILENAME_BASE}} extends Component {
+export default class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends Component {
   render() {
     return (
       <View>
-        <Text> ${2:textInComponent} </Text>
+        <Text>${2:textInComponent}</Text>
       </View>
     )
   }

snippets/rjsx-mode/React-Native/rnce

@@ -8,14 +8,14 @@
 import React, { Component } from 'react'
 import { Text, View } from 'react-native'
 
-export class ${1:${TM_FILENAME_BASE}} extends Component {
+export class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends Component {
   render() {
     return (
       <View>
-        <Text> ${2:textInComponent} </Text>
+        <Text>${2:textInComponent}</Text>
       </View>
     )
   }
 }
 
-export default ${1:${TM_FILENAME_BASE}}
+export default $1

snippets/rjsx-mode/React-Native/rncs

@@ -8,11 +8,11 @@
 import React, { Component } from 'react'
 import { Text, StyleSheet, View } from 'react-native'
 
-export default class ${1:${TM_FILENAME_BASE}} extends Component {
+export default class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends Component {
   render() {
     return (
       <View>
-        <Text> ${2:textInComponent} </Text>
+        <Text>${2:textInComponent}</Text>
       </View>
     )
   }

snippets/rjsx-mode/React-Native/rnpc

@@ -8,11 +8,11 @@
 import React, { PureComponent } from 'react'
 import { Text, View } from 'react-native'
 
-export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {
+export default class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends PureComponent {
   render() {
     return (
       <View>
-        <Text> ${2:textInComponent} </Text>
+        <Text>${2:textInComponent}</Text>
       </View>
     )
   }

snippets/rjsx-mode/React-Native/rnpce

@@ -8,14 +8,14 @@
 import React, { PureComponent } from 'react'
 import { Text, View } from 'react-native'
 
-export class ${1:${TM_FILENAME_BASE}} extends PureComponent {
+export class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends PureComponent {
   render() {
     return (
       <View>
-        <Text> ${2:textInComponent} </Text>
+        <Text>${2:textInComponent}</Text>
       </View>
     )
   }
 }
 
-export default ${1:${TM_FILENAME_BASE}}
+export default $1

snippets/rjsx-mode/React/cdm

@@ -5,6 +5,6 @@
 # key: cdm
 # --
 
-componentDidMount = () => {
+componentDidMount() {
   $0
 }

snippets/rjsx-mode/React/cdup

@@ -5,6 +5,6 @@
 # key: cdup
 # --
 
-componentDidUpdate = (prevProps, prevState) => {
+componentDidUpdate(prevProps, prevState, snapshot) {
   $0
 }

snippets/rjsx-mode/React/cwm

@@ -1,10 +0,0 @@
-# -*- mode: snippet -*-
-# uuid: dba0d644-e837-40ad-8082-bbe583fa444f
-# contributor: Jimmy Yuen Ho Wong <wyuenho@gmail.com>
-# name: componentWillMount
-# key: cwm
-# --
-
-componentWillMount = () => {
-  $0
-}

snippets/rjsx-mode/React/cwr

@@ -1,10 +0,0 @@
-# -*- mode: snippet -*-
-# uuid: 59e0e0d0-6efb-475f-a482-3d76f2f561a0
-# contributor: Jimmy Yuen Ho Wong <wyuenho@gmail.com>
-# name: componentWillReceiveProps
-# key: cwr
-# --
-
-componentWillReceiveProps = (nextProps) => {
-  $0
-}

snippets/rjsx-mode/React/cwun

@@ -5,6 +5,6 @@
 # key: cwun
 # --
 
-componentWillUnmount = () => {
+componentWillUnmount() {
   $0
 }

snippets/rjsx-mode/React/cwup

@@ -1,10 +0,0 @@
-# -*- mode: snippet -*-
-# uuid: cd9a8917-1ad1-4de8-a382-cdf0c2e72943
-# contributor: Jimmy Yuen Ho Wong <wyuenho@gmail.com>
-# name: componentWillUpdate
-# key: cwup
-# --
-
-componentWillUpdate = (nextProps, nextState) => {
-  $0
-}

snippets/rjsx-mode/React/gdsfp

@@ -5,6 +5,6 @@
 # key: gdsfp
 # --
 
-static getDerivedStateFromProps(props, state) {
-  ${1}
+static getDerivedStateFromProps(nextProps, prevState) {
+  $0
 }

snippets/rjsx-mode/React/gsbu

@@ -5,6 +5,6 @@
 # key: gsbu
 # --
 
-getSnapshotBeforeUpdate = (prevProps, prevState) => {
+getSnapshotBeforeUpdate(prevProps, prevState) {
   $0
 }

snippets/rjsx-mode/React/rafc

@@ -7,7 +7,7 @@
 
 import React from 'react'
 
-const ${1:${TM_FILENAME_BASE}} = () => {
+const ${1:`(yas-jsx-get-class-name-by-file-name)`} = (props) => {
   return (
     <div>
       $0
@@ -15,4 +15,4 @@ const ${1:${TM_FILENAME_BASE}} = () => {
   )
 }
 
-export default ${1:${TM_FILENAME_BASE}}
+export default $1

snippets/rjsx-mode/React/rafce

@@ -7,7 +7,7 @@
 
 import React from 'react'
 
-const ${1:${TM_FILENAME_BASE}} = () => {
+const ${1:`(yas-jsx-get-class-name-by-file-name)`} = (props) => {
   return (
     <div>
       $0
@@ -15,4 +15,4 @@ const ${1:${TM_FILENAME_BASE}} = () => {
   )
 }
 
-export default ${1:${TM_FILENAME_BASE}}
+export default $1

snippets/rjsx-mode/React/rafcp

@@ -8,7 +8,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const ${1:${TM_FILENAME_BASE}} = props => {
+const ${1:`(yas-jsx-get-class-name-by-file-name)`} = (props) => {
   return (
     <div>
       $0
@@ -16,8 +16,8 @@ const ${1:${TM_FILENAME_BASE}} = props => {
   )
 }
 
-${1:${TM_FILENAME_BASE}}.propTypes = {
+$1.propTypes = {
 
 }
 
-export default ${1:${TM_FILENAME_BASE}}
+export default $1

snippets/rjsx-mode/React/rcc

@@ -7,7 +7,7 @@
 
 import React, { Component } from 'react'
 
-export default class ${1:${TM_FILENAME_BASE}} extends Component {
+export default class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends Component {
   render() {
     return (
       <div>

snippets/rjsx-mode/React/rccp

@@ -8,7 +8,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-export default class ${1:${TM_FILENAME_BASE}} extends Component {
+export default class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends Component {
   static propTypes = {
     ${2:prop}: ${3:PropTypes}
   }

snippets/rjsx-mode/React/rce

@@ -7,7 +7,7 @@
 
 import React, { Component } from 'react'
 
-export class ${1:${TM_FILENAME_BASE}} extends Component {
+export class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends Component {
   render() {
     return (
       <div>
@@ -17,4 +17,4 @@ export class ${1:${TM_FILENAME_BASE}} extends Component {
   }
 }
 
-export default ${1:${TM_FILENAME_BASE}}
+export default $1

snippets/rjsx-mode/React/rcep

@@ -8,7 +8,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-export class ${1:${TM_FILENAME_BASE}} extends Component {
+export class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends Component {
   static propTypes = {
 
   }
@@ -22,4 +22,4 @@ export class ${1:${TM_FILENAME_BASE}} extends Component {
   }
 }
 
-export default ${1:${TM_FILENAME_BASE}}
+export default $1

snippets/rjsx-mode/React/rfc

@@ -1,16 +0,0 @@
-# -*- mode: snippet -*-
-# uuid: 65bc7baa-3368-4398-a208-fb1d92694183
-# contributor: Jimmy Yuen Ho Wong <wyuenho@gmail.com>
-# name: reactFunctionalComponent
-# key: rfc
-# --
-
-import React from 'react'
-
-export default function ${1:${TM_FILENAME_BASE}}() {
-  return (
-    <div>
-      $0
-    </div>
-  )
-}

snippets/rjsx-mode/React/rfce

@@ -1,18 +0,0 @@
-# -*- mode: snippet -*-
-# uuid: 48f9521a-2b4e-4f71-850e-ecd47261a7a6
-# contributor: Jimmy Yuen Ho Wong <wyuenho@gmail.com>
-# name: reactFunctionalExportComponent
-# key: rfce
-# --
-
-import React from 'react'
-
-function ${1:${TM_FILENAME_BASE}}() {
-  return (
-    <div>
-      $0
-    </div>
-  )
-}
-
-export default ${1:${TM_FILENAME_BASE}}

snippets/rjsx-mode/React/rfcp

@@ -1,23 +0,0 @@
-# -*- mode: snippet -*-
-# uuid: f24b6de3-135e-4da0-81d9-0f479f3b11dd
-# contributor: Jimmy Yuen Ho Wong <wyuenho@gmail.com>
-# name: reactFunctionalComponentWithPropTypes
-# key: rfcp
-# --
-
-import React from 'react'
-import PropTypes from 'prop-types'
-
-function ${1:${TM_FILENAME_BASE}}(props) {
-  return (
-    <div>
-      $0
-    </div>
-  )
-}
-
-${1:${TM_FILENAME_BASE}}.propTypes = {
-
-}
-
-export default ${1:${TM_FILENAME_BASE}}

snippets/rjsx-mode/React/rmc

@@ -7,10 +7,8 @@
 
 import React, { memo } from 'react'
 
-export default memo(function ${1:${TM_FILENAME_BASE}}() {
-  return (
-    <div>
-      $0
-    </div>
-  )
-})
+export default memo((props) => (
+  <div>
+    $0
+  </div>
+))

snippets/rjsx-mode/React/rmcp

@@ -8,16 +8,14 @@
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 
-const ${1:${TM_FILENAME_BASE}} = memo(function ${1:${TM_FILENAME_BASE}}(props) {
-  return (
-    <div>
-      $0
-    </div>
-  )
-})
+const ${1:`(yas-jsx-get-class-name-by-file-name)`} = memo((props) => (
+  <div>
+    $0
+  </div>
+))
 
-${1:${TM_FILENAME_BASE}}.propTypes = {
+$1.propTypes = {
 
 }
 
-export default ${1:${TM_FILENAME_BASE}}
+export default $1

snippets/rjsx-mode/React/rpc

@@ -7,7 +7,7 @@
 
 import React, { PureComponent } from 'react'
 
-export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {
+export default class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends PureComponent {
   render() {
     return (
       <div>

snippets/rjsx-mode/React/rpce

@@ -7,7 +7,7 @@
 
 import React, { PureComponent } from 'react'
 
-export class ${1:${TM_FILENAME_BASE}} extends PureComponent {
+export class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends PureComponent {
   render() {
     return (
       <div>
@@ -17,4 +17,4 @@ export class ${1:${TM_FILENAME_BASE}} extends PureComponent {
   }
 }
 
-export default ${1:$TM_FILENAME_BASE}
+export default $1

snippets/rjsx-mode/React/rpcp

@@ -8,7 +8,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 
-export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {
+export default class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends PureComponent {
   static propTypes = {
 
   }

snippets/rjsx-mode/React/scu

@@ -5,6 +5,6 @@
 # key: scu
 # --
 
-shouldComponentUpdate = (nextProps, nextState) => {
+shouldComponentUpdate(nextProps, nextState) {
   $0
 }

snippets/rjsx-mode/Redux/hocredux

@@ -9,16 +9,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
-export const mapStateToProps = state => ({
-
-})
-
-export const mapDispatchToProps = {
- 
-}
-
 export const ${1:hocComponentName} = (WrappedComponent) => {
-  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />
+  const hocComponent = (props) => <WrappedComponent {...props} />
 
   hocComponent.propTypes = {
   }
@@ -26,4 +18,12 @@ export const ${1:hocComponentName} = (WrappedComponent) => {
   return hocComponent
 }
 
+const mapStateToProps = (state, ownProps) => ({
+
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+
+})
+
 export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))

snippets/rjsx-mode/Redux/rcredux

@@ -9,7 +9,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
-export class ${1:${TM_FILENAME_BASE}} extends Component {
+export class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends Component {
   static propTypes = {
     ${2:prop}: ${3:PropTypes}
   }
@@ -23,12 +23,12 @@ export class ${1:${TM_FILENAME_BASE}} extends Component {
   }
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state, ownProps) => ({
   
 })
 
-const mapDispatchToProps = {
+const mapDispatchToProps = (dispatch, ownProps) => ({
   
-}
+})
 
-export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})
+export default connect(mapStateToProps, mapDispatchToProps)($1)

snippets/rjsx-mode/Redux/reduxmap

@@ -5,10 +5,16 @@
 # key: reduxmap
 # --
 
-const mapStateToProps = (state) => ({
-  ${1}
+const mapStateToProps = (state, ownProps) => ({
+
 })
 
-const mapDispatchToProps = {
-  
-}
+const mapDispatchToProps = (dispatch, ownProps) => ({
+
+})
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => ({
+  ...ownProps,
+  ...dispatchProps,
+  ...stateProps,
+})

snippets/rjsx-mode/Redux/rncredux

@@ -10,7 +10,7 @@ import { View, Text } from 'react-native'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
-export class ${1:${TM_FILENAME_BASE}} extends Component {
+export class ${1:`(yas-jsx-get-class-name-by-file-name)`} extends Component {
   static propTypes = {
     ${2:prop}: ${3:PropTypes}
   }
@@ -18,18 +18,18 @@ export class ${1:${TM_FILENAME_BASE}} extends Component {
   render() {
     return (
       <View>
-        <Text> ${2:textInComponent} </Text>
+        <Text>${2:textInComponent}</Text>
       </View>
     )
   }
 }
 
-const mapStateToProps = (state) => ({
-  
+const mapStateToProps = (state, ownProps) => ({
+
 })
 
-const mapDispatchToProps = {
-  
-}
+const mapDispatchToProps = (dispatch, ownProps) => ({
 
-export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)($1)

snippets/rjsx-mode/Redux/rxaction

@@ -6,6 +6,6 @@
 # --
 
 export const ${1:actionName} = (payload) => ({
-  type: ${3:type},
+  type: ${1:$((upcase (s-snake-case yas-text)))},
   payload
 })

snippets/rjsx-mode/Redux/rxreducer

@@ -11,11 +11,10 @@ const initialState = {
 
 export default (state = initialState, { type, payload }) => {
   switch (type) {
+    case ${1:typeName}:
+      return { ...state, ...payload }
 
-  case ${1:typeName}:
-    return { ...state, ...payload }
-
-  default:
-    return state
+    default:
+      return state
   }
 }

yasnippet-snippets.el

@@ -5,7 +5,7 @@
 ;; Author: Andrea Crotti <andrea.crotti.0@gmail.com>
 ;; Keywords: snippets
 ;; Version: 0.2
-;; Package-Requires: ((yasnippet "0.8.0"))
+;; Package-Requires: ((yasnippet "0.8.0") (s "1.12.0"))
 ;; Keywords: convenience, snippets
 
 ;;; Commentary: