atom.snippets.cson

# JAVASCRIPT
'.source.js, .source.ts, .source.tsx':
  'Require':
    'prefix': 'req'
    'body': 'const ${1:module} = require(\'${1:module}\');'
  'Module Exports':
    'prefix': 'export'
    'body': 'module.exports = $1;'
  'Import':
    'prefix': 'import'
    'body': 'import ${1:module} from \'${1:module}\';'
  'Constant':
    'prefix': 'c'
    'body': 'const $1'
  'Arrows':
    'prefix': 'di'
    'body': '<>'
  'Arrow function':
    'prefix': 'ar'
    'body': '$1 => $2'
  'Function':
    'prefix': 'fn'
    'body': 'function ($1) {$2}'
  'Debug':
    'prefix': 'de'
    'body': '''
    // DEBUG:
    console.log($1);
    '''
  'Promise':
    'prefix': 'promise'
    'body': '''
    new Promise(function (resolve, reject) {
      $1
    });
    '''

  ## JSX
  'JSX element':
    'prefix': 'el'
    'body': '<${1:div}></${1:div}>'
  'JSX element no content':
    'prefix': 'elf'
    'body': '<${1:div} />'
  'JSX div':
    'prefix': 'div'
    'body': '<div>$1</div>'
  'JSX span':
    'prefix': 'span'
    'body': '<span>$1</span>'
  'JSX p':
    'prefix': 'p'
    'body': '<p>$1</p>'
  'Foundation layout':
    'prefix': 'flayout'
    'body': '''
    <Row>
      <Col s={12}>
        $1
      </Col>
    </Row>
    '''
  'Materialize layout':
    'prefix': 'mlayout'
    'body': '''
    <Row>
      <Col s={12}>
        $1
      </Col>
    </Row>
    '''

  ## REACT
  'React imports':
    'prefix': 'rimport'
    'body': '''
    import React, { Component, createFactory } from 'react';
    import PropTypes from 'prop-types';
    import ReactDOM, { render } from 'react-dom';
    import { renderToString, renderToStaticMarkup } from 'react-dom/server';
    '''
  'React component':
    'prefix': 'rcomponent'
    'body': '''
    import React from 'react';
    import PropTypes from 'prop-types';
    import cx from 'classnames';

    export default function ${1:Comp} (props) {

      const { className, children, ...etc } = props;
      const cls = cx('', className);

      return (
        <div className={cls} {...etc}>
          {children}
        </div>
      );
    }

    ${1:Comp}.propTypes = {
      children: PropTypes.any
    };

    ${1:Comp}.defaultProps = {};

    '''
  'React smart component':
    'prefix': 'rsmart'
    'body': '''
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import cx from 'classnames';

    export default class ${1:Comp} extends Component {

      constructor () {
        super(...arguments);
      }

      render () {

        const { className, children, ...etc } = this.props;
        const cls = cx('', className);

        return (
          <div className={cls} {...etc}>
            {children}
          </div>
        );
      }
    }

    ${1:Comp}.propTypes = {};

    ${1:Comp}.defaultProps = {};

    '''
  'React container':
    'prefix': 'rcontainer'
    'body': '''
    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import { withRouter } from 'react-router';

    const mapStateToProps = function () {
      return {};
    };

    const mapDispatchToProps = function () {
      return {};
    };

    class ${1:Comp} extends Component {

      constructor () {
        super(...arguments);
      }

      render () {
        return (
          <div></div>
        );
      }
    }

    export default withRouter(
      connect(mapStateToProps, mapDispatchToProps)(${1:Comp})
    );

    '''
  'React render':
    'prefix': 'rrender'
    'body': '''
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import { Router, browserHistory } from 'react-router';
    import { syncHistoryWithStore } from 'react-router-redux';

    import store from './store';
    import routes from './routes';

    const history = syncHistoryWithStore(browserHistory, store);

    history.listen(location => {
      window.ga && window.ga('send', 'pageview', location.pathname);
    });

    const render = function () {
      const app = (
        <Provider store={store}>
          <Router history={history} routes={routes} />
        </Provider>
      );
      const root = document.querySelector('#app');
      ReactDOM.render(app, root);
    };

    export default render;

    '''
  'React-Redux store':
    'prefix': 'rstore'
    'body': '''
    import { createStore, applyMiddleware, compose } from 'redux';
    import thunk from 'redux-thunk';
    import reducers from 'client/reducers';

    let store;

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

    if (process.env.NODE_ENV === 'production') {
      store = createStore(reducers, applyMiddleware(thunk));
    }
    else {
      store = createStore(
        reducers,
        composeEnhancers(
          applyMiddleware(thunk)
        )
      );
    }

    export default store;

    '''
  'React routes':
    'prefix': 'rroutes'
    'body': '''
    import React from 'react';
    import { Route, IndexRoute, Redirect } from 'react-router';
    import { UserAuthWrapper } from 'redux-auth-wrapper';

    const IsAuth = UserAuthWrapper({
      wrapperDisplayName: 'IsAuth',
      authSelector: state => state.users,
      predicate: users => !!users.login,
      failureRedirectPath: '/',
      allowRedirectBack: true,
    });

    export default (
      <Route path='/' component={require('./containers/App').default}>

        {/* Auth */}
        <IndexRoute component={require('./containers/Login').default} />
        <Route path='logout' component={require('./containers/Logout').default} />

        {/* Dashboard */}
        <Route path='dashboard' component={IsAuth(require('./containers/Dashboard').default)} />

        <Redirect from='*' to='/' />
      </Route>
    );

    '''

  ## Redux
  'Redux reducer':
    'prefix': 'rreducer'
    'body': '''
    import { ACTIONS } from 'client/consts';

    const initial = {};

    export default function reducer (state = initial, { type, payload } = {}) {
      switch (type) {

        case ACTIONS.CHANGE: {
          return { ...state };
        }

        default:
          return state;
      }
    }

    '''
  'Redux action creator sync':
    'prefix': 'raction'
    'body': '''
    export const ${1:change} = (data) => {
      return {
        type: ACTIONS.CHANGE,
        payload: data
      };
    };
    '''
  'Redux action creator async':
    'prefix': 'ractionasync'
    'body': '''
    export const ${1:change} = (data) => (dispatch, getState) => {};
    '''

  ## Testing
  'Testing imports':
    'prefix': 'timport'
    'body': '''
    import chai, { expect, assert } from 'chai';
    import enzyme, { shallow, mount, render } from 'enzyme';
    import chaiEnzyme from 'chai-enzyme';
    import chaiSinon from 'sinon-chai';
    import chaiHttp from 'chai-http';

    chai.use(chaiEnzyme());
    chai.use(chaiSinon);
    chai.use(chaiHttp);

    '''
  'Testing describe':
    'prefix': 'tdes'
    'body': '''
    describe('$1', function () {});
    '''
  'Testing item':
    'prefix': 'titem'
    'body': '''
    it('$1', function () {});
    '''
  'Testing fragment':
    'prefix': 'tfragment'
    'body': '''
    it('$1', function () {
      const actual = false;
      const expected = true;
      expect(actual).to.equal(expected);
    });
    '''

  ## Backbone
  'Backbone View':
    'prefix': 'bview'
    'body': '''
    import _ from 'underscore';
    import Backbone from 'Backbone';
    import src from '../templates/view.html';

    const View = Backbone.View.extend({

      tagName: '',
      className: '',
      template: _.template(src),

      initialize () {},

      render () {},
    });

    export default View;
    '''
  'Backbone Model':
    'prefix': 'bmodel'
    'body': '''
    import _ from 'underscore';
    import Backbone from 'Backbone';

    const Model = Backbone.Model.extend({
      defaults: {
        //
      }
    });

    export default Model;
    '''
  'Backbone Collection':
    'prefix': 'bcollection'
    'body': '''
    import _ from 'underscore';
    import Backbone from 'Backbone';
    import Model from '../models/Model'

    const Collection = Backbone.Collection.extend({
      model: Model
    });

    export default Collection;
    '''

  ## Express
  'Express basic':
    'prefix': 'expbasic'
    'body': '''
    const express = require('express');

    const app = express();
    const port = process.env.PORT || 4000;

    app.use(express.static(`${process.cwd()}/public`));

    app.listen(port, function (err) {
      if (err) throw err;
      console.log(`Server running at http://127.0.0.1:${port}`);
    });

    '''

  ## Webpack
  'Webpack base config':
    'prefix': 'webpackbase'
    'body': '''
    const path = require('path');

    module.exports = {
      entry: {
        'app': './client/index.js'
      },
      output: {
        path: path.resolve(__dirname, './public/js/'),
        filename: '[name].js'
      },
      resolve: {
        modules: [
          './',
          'node_modules'
        ],
      },
      devtool: 'inline-source-map',
      module: {
        rules: [{
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                'react',
                'es2015',
                'stage-1'
              ]
            }
          },
          test: /\.js$/,
          exclude: /(node_modules)/,
        }]
      }
    };

    '''

# SASS
'.source.css.scss':
  'Element':
    'prefix': 'element'
    'body': '<${1:div}></${1:div}>'

# HTML
'.html':
  'Comment':
    'prefix': 'comment'
    'body': '<!-- $1 -->'
  'HTML Template':
    'prefix': 'htmltemplate'
    'body': '''
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>${1:App}</title>
      </head>
      <body>
        ${1:App}
      </body>
    </html>

    '''

  ## Foundation
  'Foundation row':
    'prefix': 'frow'
    'body': '''
    <div class="row">
      <div class="column small-12">
        $1
      </div>
    </div>
    '''