Riot 4 Boilerplate

Starting point for working with Riot 4. This boilerplate comes with:

• SASS boilerplate based on Milligram IO
• BiancoJS
• AnimeJS
• Fontawesome 5
• AxiosJS
• Final Form + Riot Final Form
• Riot Meiosis
• Riot Route
• Webpack Hot reloading
• Jest

Table of Contents

• Usage
• Shortcuts
• Structure
  • State Management
  • Router
  • Components
  • Actions
  • SASS Structure
  • Tests
• TODO

Usage

git clone https://github.com/damusix/riot-4-boilerplate
cd riot-4-boilerplate
npm install
npm start
open http://localhost:3000

Build assets into public/ folder:

npm run build

Shortcuts

• ~/*
  • src/*
• +/*
  • src/shared/*
• @/*
  • src/components/*
• #/*
  • src/utils/*

// "~" is "./src"
import Store from "~/store"

// "+" is "./src/shared"
import Alerts from "+/alerts/Alerts"

// "@" is "./src/components"
import TestStuff from "@/test.riot";

// "#" is "./src/utils"
import KeyCodes from "#/keycodes";

Structure

State Management

State is initialized in src/store.js and uses riot-meiosis.

Router

Router is based on riot route (dev branch).

Forms and Form Management

Forms can be handled using final-form with riot-final-form. And example is shown in src/components/someForm.riot. Check out Riot Final Form readme for more information on how to use it.

Components

Componets are declared as folders inside of src/components/ and, when relevant, should contain the following main items:

• style.sass
• actions.js
• component.riot

The convention this implementation is following is as follows:

• Keep all things related to the component inside the component folder, including styles and actions
• Register components in src/components/index.js
  • If there ever is a component group that clutters src/component/index.js, then a more appropriate flow would be to use register inside that component's index.js.
  • See src/components/users for an example

Actions

Actions are created on a per-component basis (if necessary) and simply read state or push to state stream.

SASS Structure

└── src
    ├── _vars.sass
    ├── app.sass
    ├── base
    │   ├── base.sass
    │   ├── buttons.sass
    │   ├── code.sass
    │   ├── forms.sass
    │   ├── grid.sass
    │   ├── index.sass
    │   ├── spacing.sass
    │   ├── typography.sass
    │   └── utils.sass
    ├── components
    │   ├── example
    │   │   └── style.sass
    │   ├── index.sass
    ├── mixins
    │   ├── button.sass
    │   ├── columns.sass
    └── └── index.sass

Base styles belong in src/base and are declared inside of src/base/index.sass. This keeps the main src/app.sass small, and declarations scoped to base folder.

Mixins belong in src/mixins folder and are declared inside src/mixins/index.sass for the same reasons.

Components' styles are stored in src/components/{componentName}/style.sass. This keeps all the component's styles in 1 place and maintains a separation of concerns. Those files are brought into src/components/index.sass.

Tests

Test with Jest using jsdom. See src/__tests__/store.js for an example of module tests and src/components/__tests__/test.riot.js for an example of component tests.

TODO

• Router mechanism
• Form states
• Button states
• Setup tests
• Write tests for current workflow
• Improve documentation
• Create site