@yz-dev/react-dynamic-module
Version:
A powerful React component for dynamically loading premium or optional modules from a script URL with dependency injection.
375 lines (374 loc) • 12.5 kB
JavaScript
import k, { useState as H, useEffect as Z } from "react";
import g from "react-dom";
var C = { exports: {} }, S = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var V;
function ce() {
if (V) return S;
V = 1;
var o = Symbol.for("react.transitional.element"), d = Symbol.for("react.fragment");
function i(s, t, f) {
var m = null;
if (f !== void 0 && (m = "" + f), t.key !== void 0 && (m = "" + t.key), "key" in t) {
f = {};
for (var E in t)
E !== "key" && (f[E] = t[E]);
} else f = t;
return t = f.ref, {
$$typeof: o,
type: s,
key: m,
ref: t !== void 0 ? t : null,
props: f
};
}
return S.Fragment = d, S.jsx = i, S.jsxs = i, S;
}
var P = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var X;
function ue() {
return X || (X = 1, process.env.NODE_ENV !== "production" && function() {
function o(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === oe ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case j:
return "Fragment";
case A:
return "Profiler";
case T:
return "StrictMode";
case ee:
return "Suspense";
case re:
return "SuspenseList";
case ne:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case p:
return "Portal";
case Q:
return (e.displayName || "Context") + ".Provider";
case y:
return (e._context.displayName || "Context") + ".Consumer";
case K:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case te:
return r = e.displayName || null, r !== null ? r : o(e.type) || "Memo";
case G:
r = e._payload, e = e._init;
try {
return o(e(r));
} catch {
}
}
return null;
}
function d(e) {
return "" + e;
}
function i(e) {
try {
d(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var n = r.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return n.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
u
), d(e);
}
}
function s(e) {
if (e === j) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === G)
return "<...>";
try {
var r = o(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function t() {
var e = N.A;
return e === null ? null : e.getOwner();
}
function f() {
return Error("react-stack-top-frame");
}
function m(e) {
if (U.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function E(e, r) {
function n() {
L || (L = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
r
));
}
n.isReactWarning = !0, Object.defineProperty(e, "key", {
get: n,
configurable: !0
});
}
function a() {
var e = o(this.type);
return W[e] || (W[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function h(e, r, n, u, v, b, M, Y) {
return n = b.ref, e = {
$$typeof: _,
type: e,
key: r,
props: b,
_owner: v
}, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: a
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: M
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: Y
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function w(e, r, n, u, v, b, M, Y) {
var l = r.children;
if (l !== void 0)
if (u)
if (ae(l)) {
for (u = 0; u < l.length; u++)
R(l[u]);
Object.freeze && Object.freeze(l);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else R(l);
if (U.call(r, "key")) {
l = o(e);
var O = Object.keys(r).filter(function(se) {
return se !== "key";
});
u = 0 < O.length ? "{key: someKey, " + O.join(": ..., ") + ": ...}" : "{key: someKey}", z[l + u] || (O = 0 < O.length ? "{" + O.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
u,
l,
O,
l
), z[l + u] = !0);
}
if (l = null, n !== void 0 && (i(n), l = "" + n), m(r) && (i(r.key), l = "" + r.key), "key" in r) {
n = {};
for (var D in r)
D !== "key" && (n[D] = r[D]);
} else n = r;
return l && E(
n,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), h(
e,
l,
b,
v,
t(),
n,
M,
Y
);
}
function R(e) {
typeof e == "object" && e !== null && e.$$typeof === _ && e._store && (e._store.validated = 1);
}
var c = k, _ = Symbol.for("react.transitional.element"), p = Symbol.for("react.portal"), j = Symbol.for("react.fragment"), T = Symbol.for("react.strict_mode"), A = Symbol.for("react.profiler"), y = Symbol.for("react.consumer"), Q = Symbol.for("react.context"), K = Symbol.for("react.forward_ref"), ee = Symbol.for("react.suspense"), re = Symbol.for("react.suspense_list"), te = Symbol.for("react.memo"), G = Symbol.for("react.lazy"), ne = Symbol.for("react.activity"), oe = Symbol.for("react.client.reference"), N = c.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, ae = Array.isArray, $ = console.createTask ? console.createTask : function() {
return null;
};
c = {
react_stack_bottom_frame: function(e) {
return e();
}
};
var L, W = {}, J = c.react_stack_bottom_frame.bind(
c,
f
)(), q = $(s(f)), z = {};
P.Fragment = j, P.jsx = function(e, r, n, u, v) {
var b = 1e4 > N.recentlyCreatedOwnerStacks++;
return w(
e,
r,
n,
!1,
u,
v,
b ? Error("react-stack-top-frame") : J,
b ? $(s(e)) : q
);
}, P.jsxs = function(e, r, n, u, v) {
var b = 1e4 > N.recentlyCreatedOwnerStacks++;
return w(
e,
r,
n,
!0,
u,
v,
b ? Error("react-stack-top-frame") : J,
b ? $(s(e)) : q
);
};
}()), P;
}
var B;
function le() {
return B || (B = 1, process.env.NODE_ENV === "production" ? C.exports = ce() : C.exports = ue()), C.exports;
}
var x = le();
const F = /* @__PURE__ */ new Map(), de = (o) => {
const {
import: d,
from: i,
src: s,
loadingUi: t = null,
errorUi: f = null,
dependencies: m = {},
...E
} = o;
F.has(s) || F.set(s, { status: "pending", promise: null, Component: null });
const a = F.get(s), [h, w] = H(a.status);
return Z(() => {
a.status === "pending" && (a.status = "loading", w("loading"), a.promise = (async () => {
try {
const R = await fetch(s);
if (!R.ok || R.headers.get("content-type")?.includes("text/html"))
throw new Error(`Module not found at ${s}`);
await new Promise((p, j) => {
const T = document.createElement("script");
T.src = s, T.async = !0, T.onload = () => p(), T.onerror = (y) => j(y);
const A = { React: k, ReactDOM: g, ...m };
Object.keys(A).forEach((y) => {
window[y] = A[y];
}), document.body.appendChild(T);
});
const c = window[i], _ = { React: k, ReactDOM: g, ...m };
if (Object.keys(_).forEach((p) => {
delete window[p];
}), c && typeof c[d] == "function")
a.Component = c[d], a.status = "success";
else
throw new Error(`Module loaded, but export '${d}' not found on 'window.${i}'.`);
} catch (R) {
o.onError && o.onError(R), a.status = "failure";
const c = { React: k, ReactDOM: g, ...m };
Object.keys(c).forEach((_) => {
delete window[_];
});
}
})(), a.promise.finally(() => {
w(a.status);
}));
}, [s, i, d, m]), h === "success" && a.Component ? /* @__PURE__ */ x.jsx(a.Component, { ...E }) : h === "failure" ? /* @__PURE__ */ x.jsx(x.Fragment, { children: f }) : /* @__PURE__ */ x.jsx(x.Fragment, { children: t });
}, I = /* @__PURE__ */ new Map(), me = ({
src: o,
from: d,
import: i,
dependencies: s = {}
}) => {
I.has(o) || I.set(o, { status: "checking", promise: null, Component: null });
const t = I.get(o), [f, m] = H(t.status);
return Z(() => {
t.status === "checking" && (t.status = "loading", m("loading"), t.promise = (async () => {
try {
const E = await fetch(o);
if (!E.ok || E.headers.get("content-type")?.includes("text/html"))
throw new Error(`Module not found at ${o}`);
await new Promise((w, R) => {
const c = document.createElement("script");
c.src = o, c.async = !0, c.onload = () => w(), c.onerror = (p) => R(p);
const _ = { React: k, ReactDOM: g, ...s };
Object.keys(_).forEach((p) => {
window[p] = _[p];
}), document.body.appendChild(c);
});
const a = window[d], h = { React: k, ReactDOM: g, ...s };
if (Object.keys(h).forEach((w) => {
delete window[w];
}), a && typeof a[i] == "function")
t.Component = a[i], t.status = "available";
else
throw new Error(`Module loaded, but export '${i}' not found on 'window.${d}'.`);
} catch (E) {
console.warn(`[useDynamicModule] Could not load module from ${o}:`, E.message), t.status = "unavailable";
const a = { React: k, ReactDOM: g, ...s };
Object.keys(a).forEach((h) => {
delete window[h];
});
}
})(), t.promise.finally(() => {
m(t.status);
}));
}, [o, d, i, s]), {
status: f,
as: t.Component
};
};
export {
de as DynamicModule,
me as useDynamicModule
};