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

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

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.

d3dc / react-flying-saucer Goto Github PK