The jumpsuit from stephensong

Join the chat at https://gitter.im/jumpsuit/jumpsuit

Jumpsuit is a powerful and extremely efficient Front-end framework & CLI. It is the fastest way to write scalable react/redux apps with the least overhead.

No boilerplate
Dedicated build system
Scaffolding tools
Minimal API
Simple and scalable state management based on redux

Installation

Install from NPM

# CLI
$ npm install jumpsuit -g

# Framework
$ npm install jumpsuit --save

Quick start

# Create a new project
$ jumpsuit new myProjectName && cd myProjectName
# Watch for changes
$ jumpsuit watch
# View your project
$ open localhost:8000

Examples

Todo List

Counter

<html>
<head>
  <title>Jumpsuit Example</title>
</head>
<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>

// Yep, that's all you have to import
import { Render, State, Component } from 'jumpsuit'

// Create a state and with some actions
const CounterState = State('counter', {

  // Initial State
  initial: { count: 0 },

  // Actions
  increment (state, payload) {
    return { count: ++state.count }
  },
  decrement (state, payload) {
    return { count: --state.count }
  },
})

// Create a component
const Counter = Component({
  render() {
    return (
      <div>
        <h1>{ this.props.counter.count }</h1>
        <Button onClick={ this.increment }>Increment</Button>
        <Button onClick={ this.decrement }>Decrement</Button>
      </div>
    )
  },
  increment(){
    // Dispatch state actions
    CounterState.increment()
  },
  decrement(){
    // Dispatch state actions
    CounterState.decrement()
  },

}, (state) => ({
  // Subscribe to the counter state (will be available via this.props.counter)
  counter: state.counter
}))

// Render your app!
Render(CounterState, <Counter/>)

API

Component (config, stateMappingFn)

Creates a new simple or stateful component.
Parameters
- config Object
  - A react-class config
- stateMappingFn(state)
  - An optional function that subscribes the component to the state
  - Must return an object, which will be available via the component's props
Returns
- React Component

Simple Component

  import { Component } from 'jumpsuit'

  const SayHello = Component({
    render() {
      return (
        <div>
          <Button onClick={ this.sayHello }>Say Hello</Button>
        </div>
      )
    },
    sayHello(){
      console.log('Hello!')
    },
  })

Stateful Component

  import { Component } from 'jumpsuit'

  const Counter = Component({
    render() {
      return (
        <div>
          Count: { this.props.count }
        </div>
      )
    }
  // Subscribe to the count property on the count state
  }, (state) => {
    return {
      count: state.counter.count
    }
  })

State (name, config)

Creates a new state instance
Parameters
- name String
  - A unique name for this state
- config Object
  - initial
    - An object or value representing the initial properties for this state
  - ...actionName(state, payload)
    - Actions (functions) that transform your your current state. They receive the current state as the first parameter and any payload used by the caller as the second

Returns

State Reducer function - can be used directly in the Render method, or combined with other states using State.combine. It also has these these prototype methods:
- .getState()
  - Returns the current state of the instance
- .dispatch()
  - The underlying redux dispatcher

  import { State } from 'jumpsuit'

  const CounterState = State({
    initial: { count: 0 },
    increment (state, payload) {
      return { count: ++state.count }
    },
    set (state, payload) {
      return { count: payload }
    },
    reset (state) {
      return { count: 0 }
    }
  })

  // Call the methods normally. No action creators or dispatch required.
  CounterState.increment()
  // CounterState.getState() === { count: 1 }

  CounterState.set(5)
  // CounterState.getState() === { count: 5 }

  CounterState.reset()
  // CounterState.getState() === { count: 0 }

Render (state, component)

Renders your app to div#app

Parameters

state or {states}
- A single state or state combining object. If passing a an object, the property names must use the state name they correspond to.
component
- The root Jumpsuit/React Component of your app

Single State

  import { Render } from 'jumpsuit'

  import Counter from './containers/counter'
  import CounterState from './states/counter'

  Render(CounterState, <Counter/>)

Combined State

  import { Render } from 'jumpsuit'

  import App from './containers/app'

  import CounterState from './states/counter'
  import TimerState from './states/timer'

  const state = {
    counter: CounterState, // CounterState's name is 'counter'
    timer: TimerState // TimerState's name is 'timer'
  }

  Render(state, <App/>)

Router

Jumpsuit's built-in router

  import { Render, Router, IndexRoute, Route } from 'jumpsuit'

  Render(state, (
    <Router>
      <IndexRoute component={ Home }/>
      <Route path="/counter" component={ Counter }/>
    </Router>
  ))

Route

Renders a component at the specified route

  import { Render, Router, Route } from 'jumpsuit'

  import Counter from './components/counter'

  Render(state, (
    <Router>
      <Route path="/counter" component={ Counter }/>
    </Router>
  ))

IndexRoute

Renders a component at the index route of your app

  import { Render, Router, Route } from 'jumpsuit'

  import Home from './components/home'

  Render(state, (
    <Router>
      <IndexRoute component={ Home }/>
    </Router>
  ))

Middleware (...middlewares)

A method for registering middleware into the underlying redux instance

  import { Render, Middleware } from 'jumpsuit'

  const myMiddleware = store => next => action => {
    let result = next(action)
    return result
  }

  Middleware(myMiddleware, ...OtherMiddleWares)

  Render(state, <App/>)

Build System & CLI

CLI Usage

Usage:

    jumpsuit <command> [options]

Commands:

    new [dir] [example]   start a new project at the specified
                          directory using an optional example template

    init [example]        start a new project in the current directory
                          using an optional example template

    watch                 build initial app and wait for file changes
    build                 create a production-ready version of app
    serve                 run the static server

Options:

    -p, --port            specify the port you want to run on
    -h, --host            specify the host you want to run on
    -v, --version         show jumpsuit version number

jumpsuit.config.js

An optional (but recommended) file at your project's root that can contain any of the following customizations:

// Defaults
module.exports = {
  sourceDir: 'src', // Where source files are located
  outputDir: 'dist', // Where your built files will be placed
  assetsDir: 'assets', // Relative to your sourceDir, everything in here is placed in the root of your outputDir directory.

  assetsIgnoreExtensions: [], // If you don't want any files in your assets to copy over, ignore them here. eg ['*.scss']

  entry: 'app.js', // Jumpsuit starts building here, relative to your sourceDir

  prodSourceMaps: true, // Whether we should output sourcemaps in your production builds

  hsr: {
    maxAge: 1000, // Max age for Hot State Replacement
    shouldCatchErrors: true // Should Hot State replacement catch errors?
  },

  server: {
    host: 'localhost', // The host we serve on when watching
    port: 8000, // The port we serve on when watching
  },

  // More customizations available for browserify
  browserify: {
    extensions: ['.js'],
    rebundles: [],
    transforms: [],
    globals: {}
  },

  // Note: By default style hooks are disabled. Standard css files should be placed in your assetsDir

  // Style hooks (see Common CSS Configs for example usage)
  styles: {
    extensions: [], // Extensions of style files in your srcDir that will be watch and passed to the action below on change
    action: null // A debounced function that should return all of your css as a string (supports a promise). Debounced by default by 300ms
  }
}

Common CSS Configs

Stylus

jumpsuit.config.js

var fs = require('fs')
var path = require('path')
var stylus = require('stylus')
var nib = require('nib')

module.exports = {
  styles: {
    extensions: ['.css', '.styl'],
    action: buildStyles
  }
}
var stylusEntry = path.resolve('src/app.styl')

function buildStyles(){
  return new Promise((resolve, reject) => {
    stylus.render(fs.readFileSync(stylusEntry, 'utf8'), {
      'include css': true,
      'hoist atrules': true,
      compress: process.env.NODE_ENV === 'production',
      paths: [path.resolve('src')],
      use: nib()
    }, function(err, css){
      if (err) reject(err)
      resolve(css)
    });
  })
}

Sass

jumpsuit.config.js

var fs = require('fs')
var path = require('path')
var sass = require('node-sass')

module.exports = {
  styles: {
    extensions: ['.css', '.scss'],
    action: buildStyles
  }
}
var sassEntry = path.resolve('src/app.styl')

function buildStyles(){
  return new Promise((resolve, reject) => {
    sass.render({
      file: sassEntry,
      outputStyle: 'compressed'
    }, function(err, res) {
      if (err){
        return reject(err)
      }
      resolve(res.css.toString())
    });
  })
}

Team


Jason Maurer	Tanner Linsley

stephensong / jumpsuit Goto Github PK

jumpsuit's Introduction

Installation

Quick start

Examples

Counter

API

Component (config, stateMappingFn)

State (name, config)

Render (state, component)

Router

Route

IndexRoute

Middleware (...middlewares)

Build System & CLI

CLI Usage

jumpsuit.config.js

Common CSS Configs

Stylus

Sass

Team

License

jumpsuit's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Jobs