lambda-cli

0.7.0 • Public • Published

λ Lambda npm version

A React Web boilerplate / scaffolding tool used at 111Studio

Install

This will include the lambda command in your PATH.

npm i -g lambda-cli

Available commands

lambda component

Scaffolds a React Component: Creates the component's jsx / less / spec files.

lambda component
 
--or--
 
lambda
then type component in the cli.

lambda serve

Runs a webpack dev server including the following features:

  1. Hot module reloading
  2. Flow type annotations.
  3. ES6 / ES7 transpilation.
  4. Less compilation.
  5. Image file imports.
  6. Font imports.
  7. Crash on Flow type errors.
  8. TODO : Auto import npm packages if not found in the project. Too dirty !
  9. TODO : Global file import resolves. Too dirty !
lambda serve

Project structure / guidelines

Project directory tree

src
├── fonts
├── images
├── js
│   ├── app
│   │   ├── App
│   │   │   ├── App.jsx
│   │   │   ├── App.less
│   │   │   └── App.spec.js
│   │   ├── Footer
│   │   │   ├── Footer.jsx
│   │   │   ├── Footer.less
│   │   │   └── Footer.spec.js
│   │   ├── Header
│   │   │   ├── Header.jsx
│   │   │   ├── Header.less
│   │   │   └── Header.spec.js
│   │   └── SideBar
│   │       ├── SideBar.jsx
│   │       ├── SideBar.less
│   │       └── SideBar.spec.js
│   ├── article
│   │   ├── Article
│   │   │   ├── Article.jsx
│   │   │   ├── Article.less
│   │   │   └── Article.spec.js
│   │   └── ArticleList
│   │       ├── ArticleList.jsx
│   │       ├── ArticleList.less
│   │       └── ArticleList.spec.js
│   ├── comment
│   │   ├── Comment
│   │   │   ├── Comment.jsx
│   │   │   ├── Comment.less
│   │   │   └── Comment.spec.js
│   │   └── CommentList
│   │       ├── CommentList.jsx
│   │       ├── CommentList.less
│   │       └── CommentList.spec.js
│   ├── index.js
│   ├── redux
│   │   ├── action.js
│   │   ├── article.js
│   │   ├── comment.js
│   │   └── store.js
│   ├── routes
│   │   └── Routes.jsx
│   └── views
│       ├── ArticleListView
│       │   ├── ArticleListView.jsx
│       │   ├── ArticleListView.less
│       │   └── ArticleListView.spec.js
│       └── ArticleView
│           ├── ArticleView.jsx
│           ├── ArticleView.less
│           └── ArticleView.spec.js
└── styles
    ├── config.less
    ├── layout.less
    ├── typography.less
    └── variables.less

Less guidelines

Styling components should follow these directives :

  1. All components should have their own less file.
  2. The wrapping dom element of each component should have a className equal to the component's name in kebab-case (All lowercase with - separating words.) ex: MyComponent => my-component
  3. The less styles definitions for the component should be wrapped inside the component's className :
.my-component {
  .some-class {
    foo: "bar"
  }
}

Redux guidelines

All redux actions and reducers are in the .src/js/redux folder. One file per redux entity should be created. The file should include both reducers end action, and export them as reducers and actions.

const INIT_CONFIG = 'INIT_CONFIG';
 
export const actions = {
  initConfig: (config) => {
    return { type: INIT_CONFIG, config };
  }
}
 
export const reducers = {
  config: (state = {}, action) => {
    switch (action.type) {
    case INIT_CONFIG:
      return action.config;
    default:
      return state;
    }
  }
}

The reducers should be referenced in the ./redux/store.js file.

The actions should be referenced in the ./redux/actions.js file.

Type checking with flowtype

Code should be statically typed using flow type

Exemple:

import React from 'react';
 
type Props = {
  meaningOfLife: number
}
 
type AppState = {
  question: string
}
 
class App extends React.Component {
 
  description: 'Main App module for Deep Thought v0.42.0'
 
  props: Props
 
  state: AppState
 
  constructor(props: Props) {
    super(props);
    this.state = {
      question: 'What is the meaning of Life ?'
    }
  }
 
  answer(question: string): number {
    return this.props.meaningOfLife;
  }
 
  render() {
    return (
      <div className="app">
        <h1>{this.state.question}</h1>
        <p><b>Deep Thought ></b> {this.answer(this.state.question)}</p>
      </div>
    );
  }
}
 
export default App;

TODO

  1. Scaffold initial project.
  2. Scaffold Components.
  3. Serve the application for development.
  4. Bootstrap the inital redux setup.
  5. Build the application for production.
  6. Run the test suite.
  7. Improve the cli interface (better help / more granular execution of commands with args).
  8. Build the doc generator.
  9. Build a component telemetry page.
░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░███░░░░░░░░░░░░░░
░░░░░░░░░░██░░░░░░░░░░░░░
░░░░░░░░░░░██░░░░░░░░░░░░
░░░░░░░░░░████░░░░░░░░░░░
░░░░░░░░░██░░██░░░░░░░░░░
░░░░░░░░██░░░░██░░░░░░░░░
░░░░░░░██░░░░░░██░░░░░░░░
░░░░░░██░░░░░░░░███░0.7.0
░░░░░░░░░░░░░░░░░░░░░░░░░

Package Sidebar

Install

npm i lambda-cli

Weekly Downloads

2

Version

0.7.0

License

MIT

Last publish

Collaborators

  • fdidron