x-task

Rethink async tasks with JSX and React style.

Write and compose your complex and domain async tasks via components and use common idioms from React community. Works in any modern javascript environment that supports Promise.

Install it

npm install x-task --save

If you want to use jsx syntax

npm install --save-dev babel-plugin-transform-react-jsx

Change default jsx pragma in your .babelrc if you don't use another jsx pragmas (like React, deku, h, etc.)

{
  "plugins": [
      [
          "transform-react-jsx",
          {
              "pragma": "XTask.createTask"
          }
      ]
  ]
}

If you want use it with another jsx libraries, just add it to top of your target file

/** @jsx XTask.createTask */

And modify .babelrc

{
  "plugins": ["transform-react-jsx"]
}

And...

Write your own tasks, sync or async.

  import { Task } from 'x-task';

  class GetUser extends Task {
    do() {
      return fetch(`/api/users/${this.params.id}`);
    }
  }

Compose your tasks with built-in tasks.

import XTask, { Task, components } from 'x-task';
import { GetCurrentUser, GetUser, GetRecommendedUsers } from '...';

const { Merge, Either, Take } = components;

const task = (
  <Merge onResolve={onResolve}>
    <Either predicate={predicate}>
      <GetCurrentUser />
      <GetUser id={id} />
    </Either>
    <Take from="users" count={1}>
      <GetRecommendedUsers />
    </Take>
  </Merge>
);

task.start();

Use powerful React idioms, such HOCs, etc.

import XTask, { Task } from 'x-task';
import SomeTask from './SomeTask';

const withContext = (WrappedComponent) => {
    return class WithContext extends Task {
        getContext() {
            return "context";
        }

        do() {
            return (
                <WrappedComponent
                    {...this.params}
                    getContext={this.getContext.bind(this)}
                />
            );
        }
    };
};

const WrappedChild = withContext(SomeTask);

Full API documentation

Read them here