Static Next CLI

Just a helper for module scaffolding.

Introduction

Naming Scheme

A "module" in Static Next contains at least 3 files:

• Module's style file, e.g. foo.less
• Module's markup for use in prototype pages, e.g. foo.njk
• Module's (entry) JavaScript file, e.g. foo.js

There should also be a unit-test file for the module, e.g. foo.test.js.

By convention modules have also a naming scheme:

• A module's "name" begins with letter, all lower-case, no hyphen, e.g. foo or myawesomemodule
• Files are kept in a directory same as module name with mod- prefix, e.g. mod-foo or mod-myawesomemodule
• Module's class has same name but in Pascal case, e.g. Foo or MyAwesomeModule

To sum up, a module named foobar would be structured as following:

mod-foobar
├── foobar.js
├── foobar.less
└── foobar.njk

JavaScript

The module's entry JS implements the basis Module class so there is a minimal boilerplate code:

import Module from '@cad/static-next-lib/js/base/module';
import {DOM} from '@cad/static-next-lib/js/services/dom';

export default class FooBar extends Module {
  static attachTo(root) {
    return new FooBar(root);
  }

  getDefaultFoundation() {
    return null;
  }

  constructor(...args) {
    super(...args);
    this.name_ = 'foobar';
    this.dom_ = DOM.instance;
  }

  start() {}
}

Besides, module's entry JS file must also be added to Rollup's input parameter for code spilitting.

As seen above, when start writing a module there is some scaffolding work, copy paste etc. This CLI tool is created to make these procedures easier.

Usage

This CLI works only together with Static Next seed project.

Installation

npm i -D @cad/static-next-cli

Creating New Module

1. In project root run npx newmod
2. Enter module's class name (must in Pascal case e.g. FooBar)
3. Module files (Njk, LESS, JS and test) will then be generated
4. Module's entry JS will also be added to a config file for code splitting build