repos / starfx

README.md

 1![starfx](./docs/static/logo.svg)
 2
 3# starfx
 4
 5A micro-mvc framework for react apps.
 6
 7If we think in terms of MVC, if `react` is the **View**, then `starfx` is the
 8**Model** and **Controller**.
 9
10[Get started](https://starfx.bower.sh)
11
12Features:
13
14- A powerful middleware system to fetch API data
15- An immutable and reactive data store
16- A task tree side-effect system for handling complex business logic using
17  structured concurrency
18- React integration
19
20```tsx
21import { createApi, createSchema, createStore, mdw, timer } from "starfx";
22import { Provider, useCache } from "starfx/react";
23
24const [schema, initialState] = createSchema();
25const store = createStore({ initialState });
26
27const api = createApi();
28// mdw = middleware
29api.use(mdw.api({ schema }));
30api.use(api.routes());
31api.use(mdw.fetch({ baseUrl: "https://api.github.com" }));
32
33const fetchRepo = api.get(
34  "/repos/neurosnap/starfx",
35  { supervisor: timer() },
36  api.cache(),
37);
38
39store.run(api.bootup);
40
41function App() {
42  return (
43    <Provider schema={schema} store={store}>
44      <Example />
45    </Provider>
46  );
47}
48
49function Example() {
50  const { isInitialLoading, isError, message, data } = useCache(fetchRepo());
51
52  if (isInitialLoading) return "Loading ...";
53
54  if (isError) return `An error has occurred: ${message}`;
55
56  return (
57    <div>
58      <h1>{data.name}</h1>
59      <p>{data.description}</p>
60      <strong>👀 {data.subscribers_count}</strong>{" "}
61      <strong>✨ {data.stargazers_count}</strong>{" "}
62      <strong>🍴 {data.forks_count}</strong>
63    </div>
64  );
65}
66```