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 addreact-flying-saucer
$ npx create-react-flying-saucer <project>
- add
react-flying-saucer
to an existing app bootstrapped withcreate-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
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.