Arda
Meta-Flux framework for real world.
$ npm install arda --save
Changelog
- v0.16: Drop React < v15
Concept
Today's Flux is weak at scene transitions. Arda make it simple by router
and context
(chunk of flux).
Context has Flux features and its stack is very simple.
- Dispatcher is just EventEmitter
- View is just React.Component (with mixin)
- Store should be covered by typesafe steps with promise
I need to develop to make my company's react project simple. Arda is started from extraction of my works and well dogfooded. Thx Increments Inc.
Goals
- Transition with Promise
- Loose coupling and testable
- TypeScript, CoffeeScript, and ES6 friendly
- Protect mutable state and make it atomic.
Intro
Context, it extends way of react, is just one flux loop and has data flow, Props => State => ComponentProps
simple example
windowReact = ;var Arda = ;var Clicker = React; Context { return Clicker; } { return cnt: 0; } { return cnt: statecnt; } { super; ; ; }; window;
Transition
Arda.Router has pushContext
, popContext
and replaceContext
and return promise object.
(coffeescript)
router = ArdaDefaultLayoutdocumentbodyrouterpushContextMainContext # Main then => routerpushContextSubContext # Main, Sub then => routerpushContextMainContext # Main, Sub, Main then => routerpopContext # Main, Sub then => routerreplaceContextMainContext # Main, Main then => consolelog routerhistory
pushContext
and replaceContext
's second argument is to be context.props as immutable object.
LifeCycle
(coffeescript)
= subscribe 'context:created'-> consolelog 'created' subscribe 'context:started'-> consolelog 'started' subscribe 'context:paused'-> consolelog 'paused' subscribe 'context:resumed'-> consolelog 'resumed' subscribe 'context:disposed'-> consolelog 'disposed' component: MyComponent subscribers: subscriber
static subscribers
is automatic delegator on instantiate.
DispatcherButton
This is just utility ReactElement.
(coffeescript)
ardaReactcreateClass mixins: Ardamixin : -> ReactcreateElement 'div' ReactcreateElement DispatcherButton event: 'foo-event' args: 'foo-id-12345' 'foo' # => button foo ReactcreateElement DispatcherButton event: 'foo-event' args: 'foo-id-**' className: 'custome-button' ReactcreateElement 'span''text' # => span.custome-button > span text
with TypeScript
To achive purpose to make mutable state typesafe, Arda with TypeScript is better than other AltJS.
interface Props firstName: string; lastName: string;interface State age: number;interface ComponentProps greeting: string; Context<Props State ComponentProps> { return React; } { // Can use promise (State | Promise<State>) return <State> { } } { // Can use promise (ComponentProps | Promise<ComponentProps>) return greeting: 'Hello, '+propsfirstName+', '+stateage+' years old' } var router = ArdaDefaultLayout documentbody;// Unfortunately, initial props by router are not validated yet// If you want, you can create your original router wrapperrouter;
See typescript working example
Or see mizchi's starter projectmizchi-sandbox/arda-starter-project
Custom Layout (Advanced)
Arda provide default layout to use. It can resolve most cases.
But occasionally you need custom layout.
example.
const Layout = React // use it!const router = Layout documentbody;
Custom layout is required some implementations.
- implement contextTypes.shared
- implement childContextTypes.ctx
- implement getChildContext() to return contextTypes.shared
- implement getInitialState() to fill contextTypes.
- optional: render initial case and use context propeties
This implement resolve dispatch mixin behaviour.
Perhaps you can resolve by Copy and Paste and edit manually.
Custom Renderer (Advanced)
Initialize in node.js to use custom renderer.
const React = const Arda = React;const render from '@mizchi/react-blessed'; // you should prepare custom layout for its environment// and function to get root component// (el: ReactElement) => ReactComponentconst router = Layout { const screen = ; screen; return screen_component;};
custom layout hs to fill contextTypes specs. See example with react-blessed
Dependencies
- React v0.14.0-beta3 >=
- Promise or its poryfill
API
See detail at index.d.ts
LICENSE
MIT