Skip to content

Instantly share code, notes, and snippets.

@ha404

ha404/snippets.cson

Created Nov 29, 2016
Embed
What would you like to do?
Atom Snippets
# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
# 'Console log':
# 'prefix': 'log'
# 'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# https://atom.io/docs/latest/using-atom-basic-customization#cson
'.source.js':
'cl':
'prefix': 'cl'
'body': 'console.log($1)'
'jsx':
'prefix': 'jsx'
'body': '''
import React, {
PropTypes,
Component,
} from 'react'
import {connect} from 'react-redux'
import {createStructuredSelector} from 'reselect'
import Actions from 'lw-actions'
import {styles} from 'lw-decorators'
import {colors} from 'lw-styles'
@connect(
createStructuredSelector({
${2:storeName}: state => state.data.${2:storeName},
}),
Actions,
(state, actions, props) => {
return {
// TODO: Spread out `state.${2:storeName}` state here.
// TODO: Spread out `actions` here.
...props,
}
},
)
class ${1:MyComponent} extends Component {
static propTypes = {}
static defaultProps = {}
render () {
return (
${3:<div>${4}</div>}
)
}
}
export default ${1:MyComponent}
'''
'actions':
'prefix': 'actions'
'body': '''
// NOTE: Prefix everything (usually with the name of the reducer/store, in
// these examples we'll pretend it's `fooBar`)
import {
// TODO: Prefixed action_types go here (ex: `FOO_BAR_SET_QUERY`)
} from './action_types'
// Sync
// NOTE: Prefixed synchronous actions go here.
// ```
// export function fooBarSetQuery (query) {
// return {
// type: FOO_BAR_SET_QUERY,
// payload: query,
// }
// }
// ```
// Sync - Handlers
// NOTE: Prefixed action handlers go here.
// ```
// export function fooBarHandleBtnClick () {
// return (dispatch, getState) => {
// const state = getState().data.fooBar
// dispatch(fooBarRequestResults(state.query))
// }
// }
// ```
// Async
// NOTE: Prefixed asynchronous actions go here.
// ```
// export function fooBarRequestResults () {
// return (dispatch, getState) => {
// const state = getState().data.fooBar
//
// fetch(state.query)
// .then(
// response => {
// ...
// }
// )
// }
// }
// ```
'''
'reducer':
'prefix': 'reducer'
'body': '''
import {
// NOTE: Prefixed action_types go here (ex: `FOO_BAR_SET_QUERY`)
${2:FOO_BAR_SET_QUERY},
} from 'lw-actions/action_types'
const defaultState = {
// query: '',
}
function ${1:fooBar} (state = defaultState, action) {
switch (action.type) {
case ${2:FOO_BAR_SET_QUERY}: {
return {
...state,
query: action.payload,
}
}
default: {
return state
}
}
}
export default ${1:fooBar}
'''
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment