0.1.4 • Published 7 years ago
x-task v0.1.4
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);