react-flying-saucer 🛸

The 👾 aren't in the bikeshed.

 

 

A simple framework built on top of create-react-app for scalable single-page apps with functional react.

Tries to get out of the way by using only next generation JavaScript features and React spacedust.

features:

• 🔗 Compose feature modules as declarative React components

• 🔩 Build functional pipelines with opinionated syntax from babel-preset-techno-babel.

• 📬 Models provide a bite-size abstraction for redux and keep rendering fast with first-class selectors

• 🧱 Write business logic and data sources as plain modules and let dependency injection handle the rest

• 🔋 Batteries included!

  suspense	scoped route trees	dynamic models
  error boundaries	enhanced routing components	shorthand redux bindings
  contextual constants	composable view side-effects	automatic react import

 

 

---

Quick Start

• $npx create-react-flying-saucer app
• $cd app
• $yarn start

---

 

 

Whats in the Box?

react-flying-saucer proposes two declarative react primitives to build your app with. It abstracts outside effects (navigation) and redux state to an "app" container provided by a Mothership. Using React semantics, the mothership declaratively lists the Features that modify and listen to this context - preserving redux state scoping and feature component lazy loading.

<Mothership>
    <FormsProvider>
        <Dashboard path="/dash">
            <GlobalStats />
            <TimerBar />
        </Dashboard>
        <Account
            path="/"
            loggedInView="Dashboard"
        />
    </FormsProvider>
</Mothership>

Simple API

• Mothership
• Features
  • RematchModel
  • FlyingSaucerView

 

• history bindings
• context bindings
• redux bindings

One-touch bootstrap or migrate

• run the latest create-react-app and add react-flying-saucer

$ npx create-react-flying-saucer <project>

• add react-flying-saucer to an existing app bootstrapped with create-react-app

$ cd <project>
$ npx migrate-react-flying-saucer

import aliases

One flying saucer, Two flying saucers

@

A link to the source root of your project.

@@

re-exports everything you need for creating and mounting a feature fleet.

import { $$ } from '@@'
import Sidebar from '@/features/sidebar'

dot files

react-flying-saucer respects any .babelrc and .eslintrc configuration files. Any additional configuration your project needs can be added directly to these files.

 

 

---

Examples

• TodoMVC
• Nesting Features

More Reading

• API
• [WIP]getting started
• [WIP]standalone mothership

Packages

• bundle-react-flying-saucer
  • package a flying saucer app as NPM ready CJS and ESM!
• create-react-flying-saucer
  • create a create-react-app app and then codemod it to outerspace!
• react-flying-saucer
  • npm scripts for a react experience that's out of this world!
• react-mothership
  • react primitives for building stellar apps!

Typescript when?!

As soon as @rematch/rematch fixes its core typings.