react-solid-flow
Version:
[SolidJS](https://www.solidjs.com/docs/latest/api#control-flow)-inspired basic control-flow components and everyday async state hook library for [React](https://reactjs.org/)
272 lines (271 loc) • 7.64 kB
JavaScript
var x = Object.defineProperty;
var J = (e, r, t) => r in e ? x(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
var s = (e, r, t) => (J(e, typeof r != "symbol" ? r + "" : r, t), t);
import i, { isValidElement as A, Fragment as R, Children as U, Component as V, forwardRef as Y, useReducer as O, useRef as C, useCallback as S, useEffect as T } from "react";
import { createPortal as j } from "react-dom";
function E(e) {
return e == null ? null : A(e) ? e : /* @__PURE__ */ i.createElement(i.Fragment, null, e);
}
function W({
children: e,
each: r,
fallback: t = null
}) {
if (!Array.isArray(r) || !r.length || e == null)
return E(t);
if (typeof e != "function")
return /* @__PURE__ */ i.createElement(i.Fragment, null, r.map((o, a) => /* @__PURE__ */ i.createElement(R, { key: a }, e)));
const n = [];
for (let o = 0; o < r.length; o++) {
const a = e(r[o], o);
a != null && (!A(a) || !a.key ? n.push(/* @__PURE__ */ i.createElement(R, { key: o }, a)) : n.push(a));
}
return n.length ? /* @__PURE__ */ i.createElement(i.Fragment, null, n) : E(t);
}
function g(e, ...r) {
return E(typeof e == "function" ? e(...r) : e);
}
function X({
fallback: e = null,
...r
}) {
return r.when ? g(r.children, r.when) : E(e);
}
function Z(e) {
for (const r of U.toArray(e.children))
if (A(r) && r.props.when)
return r;
return E(e.fallback);
}
function $({ when: e, children: r }) {
return e ? g(r, e) : null;
}
class _ extends V {
constructor(t) {
super(t);
s(this, "state", {
error: void 0
});
this.resetError = this.resetError.bind(this);
}
static getDerivedStateFromError(t) {
return { error: t };
}
componentDidCatch(t, n) {
var o, a;
(a = (o = this.props).onCatch) == null || a.call(o, t, n), this.setState({ error: t });
}
resetError() {
this.setState({ error: void 0 });
}
render() {
return this.state.error === void 0 ? this.props.children : typeof this.props.fallback == "function" ? this.props.fallback(this.state.error, this.resetError) : this.props.fallback;
}
}
const q = Y, rr = q(
function({
component: r,
...t
}, n) {
return r ? /* @__PURE__ */ i.createElement(r, { ...t, ref: n }) : null;
}
);
function er({
mount: e,
...r
}) {
const t = e == null || e instanceof Element || e instanceof DocumentFragment ? e : document.querySelector(e);
return t ? j(r.children, t) : null;
}
function tr(e) {
return e.for.loading ? g(e.fallback) : e.for.error != null ? g(e.catch, e.for.error) : g(e.children, e.for.data);
}
class f {
constructor(r, t) {
s(this, "loading");
s(this, "data");
s(this, "error");
/** State name
*
* | state | data | loading | error |
* |:-----------|:-----:|:-------:|:-----:|
* | unresolved | No | No | No |
* | pending | No | Yes | No |
* | ready | Yes | No | No |
* | refreshing | Yes | Yes | No |
* | errored | No | No | Yes |
*/
s(this, "state");
/** last resolved value
*
* This can be useful if you want to show the out-of-date data while the new
* data is loading.
*/
s(this, "latest");
this.data = r == null ? void 0 : r.data, this.error = r == null ? void 0 : r.error, this.loading = !!(r != null && r.loading), this.data !== void 0 ? this.latest = this.data : this.latest = t == null ? void 0 : t.latest, this.state = f.getState(this);
}
static from(r, t) {
const n = r instanceof Promise;
return new f(n ? {
loading: !0
} : {
data: r,
loading: !!t
});
}
/**
* Determine resource-like state, based on its fields values.
*
* | state | data | loading | error |
* |:-----------|:-----:|:-------:|:-----:|
* | unresolved | No | No | No |
* | pending | No | Yes | No* |
* | ready | Yes | No | No |
* | refreshing | Yes | Yes | No* |
* | errored | No* | No | Yes |
*
* Values marked with * are expected to equal the specified value,
* but actually ignored, when determining the status.
*/
static getState(r) {
return r.data !== void 0 && r.loading ? "refreshing" : r.loading ? "pending" : r.error !== void 0 ? "errored" : r.data !== void 0 ? "ready" : "unresolved";
}
}
class nr extends Error {
constructor(t = "The operation was aborted.") {
super(t);
s(this, "name", "AbortError");
s(this, "code", 20);
}
}
class z extends Error {
constructor() {
super(...arguments);
s(this, "name", "NullishError");
}
}
function B(e, r) {
return O(
M,
[e, r],
I
);
}
function I(e) {
const [r, t = !1] = e, n = typeof r == "function" ? r() : r;
return f.from(n, !t);
}
function M(e, r) {
switch (r == null ? void 0 : r.type) {
case "PEND":
return new f({
loading: !0,
error: void 0,
data: e.data
}, e);
case "RESOLVE":
return new f({
...e,
loading: !1,
error: void 0,
data: r.payload
}, e);
case "SYNC-RESULT":
return new f({
loading: !1,
error: void 0,
data: r.payload
}, e);
case "REJECT":
return new f({
loading: !1,
error: r.payload ?? new z(
"resource rejected with a nullish error",
{ cause: r.payload }
),
data: void 0
}, e);
default:
return e;
}
}
function ar(e, r = [], {
initialValue: t,
onCompleted: n,
onError: o,
skipFirstRun: a = !1,
skip: p = !1,
skipFnMemoization: D
} = {}) {
const l = C(), v = C(a), [F, d] = B(t, p || a), N = S((u) => {
var c;
(c = l.current) == null || c.abort(), l.current = new AbortController(), d({ type: "SYNC-RESULT", payload: u });
}, [d]), m = S(
(u, ...c) => {
let y;
const w = l.current;
try {
if (w == null)
throw new Error("resource state error, abort controller is null during the fetch operation");
return y = e(...c, {
signal: w.signal,
refetching: u
}), y instanceof Promise ? L(y) : d({ type: "SYNC-RESULT", payload: y }), y;
} catch (b) {
if (d({ type: "REJECT", payload: b }), u)
throw b;
return;
}
async function L(b) {
d({ type: "PEND" });
try {
const h = await b;
if (w !== l.current)
return;
d({ type: "RESOLVE", payload: h }), n == null || n(h);
} catch (h) {
if (G(h) || w !== l.current)
return;
d({ type: "REJECT", payload: h }), o == null || o(h);
}
}
},
D ? [e] : []
), P = S((...u) => {
var c;
return (c = l.current) == null || c.abort(), l.current = new AbortController(), m(!0, ...u);
}, [m]), k = S((u) => {
var c;
(c = l.current) == null || c.abort(u);
}, []);
return T(() => {
v.current = a, l.current || (l.current = new AbortController());
}, [a]), T(() => {
if (v.current) {
v.current = !1;
return;
}
if (!p)
return m(!1, ...r), () => {
var u;
(u = l.current) == null || u.abort(), l.current = new AbortController();
};
}, [...r, p, m]), [F, { mutate: N, refetch: P, abort: k }];
}
function G(e) {
return e != null && e.name === "AbortError";
}
export {
nr as AbortError,
tr as Await,
rr as Dynamic,
_ as ErrorBoundary,
W as For,
$ as Match,
z as NullishError,
er as Portal,
f as Resource,
X as Show,
Z as Switch,
ar as useResource
};