@bentoo/react-lazy 0.2.1 → 1.0.0

package/dist/index.es.js

@@ -0,0 +1,416 @@
+import oe, { useRef as C, useState as L, useEffect as I, Suspense as ae } from "react";
+var S = { exports: {} }, T = {};
+var M;
+function se() {
+  if (M) return T;
+  M = 1;
+  var t = /* @__PURE__ */ Symbol.for("react.transitional.element"), s = /* @__PURE__ */ Symbol.for("react.fragment");
+  function i(u, n, o) {
+    var c = null;
+    if (o !== void 0 && (c = "" + o), n.key !== void 0 && (c = "" + n.key), "key" in n) {
+      o = {};
+      for (var l in n)
+        l !== "key" && (o[l] = n[l]);
+    } else o = n;
+    return n = o.ref, {
+      $$typeof: t,
+      type: u,
+      key: c,
+      ref: n !== void 0 ? n : null,
+      props: o
+    };
+  }
+  return T.Fragment = s, T.jsx = i, T.jsxs = i, T;
+}
+var k = {};
+var q;
+function ue() {
+  return q || (q = 1, process.env.NODE_ENV !== "production" && (function() {
+    function t(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === re ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case A:
+          return "Fragment";
+        case G:
+          return "Profiler";
+        case V:
+          return "StrictMode";
+        case Z:
+          return "Suspense";
+        case Q:
+          return "SuspenseList";
+        case ee:
+          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 w:
+            return "Portal";
+          case B:
+            return e.displayName || "Context";
+          case X:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case H:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case K:
+            return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
+          case O:
+            r = e._payload, e = e._init;
+            try {
+              return t(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function s(e) {
+      return "" + e;
+    }
+    function i(e) {
+      try {
+        s(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var a = r.error, f = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return a.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          f
+        ), s(e);
+      }
+    }
+    function u(e) {
+      if (e === A) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === O)
+        return "<...>";
+      try {
+        var r = t(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function n() {
+      var e = g.A;
+      return e === null ? null : e.getOwner();
+    }
+    function o() {
+      return Error("react-stack-top-frame");
+    }
+    function c(e) {
+      if ($.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function l(e, r) {
+      function a() {
+        F || (F = !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
+        ));
+      }
+      a.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: a,
+        configurable: !0
+      });
+    }
+    function m() {
+      var e = t(this.type);
+      return z[e] || (z[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 v(e, r, a, f, j, P) {
+      var d = a.ref;
+      return e = {
+        $$typeof: R,
+        type: e,
+        key: r,
+        props: a,
+        _owner: f
+      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: m
+      }) : 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: j
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: P
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function y(e, r, a, f, j, P) {
+      var d = r.children;
+      if (d !== void 0)
+        if (f)
+          if (te(d)) {
+            for (f = 0; f < d.length; f++)
+              x(d[f]);
+            Object.freeze && Object.freeze(d);
+          } 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 x(d);
+      if ($.call(r, "key")) {
+        d = t(e);
+        var p = Object.keys(r).filter(function(ne) {
+          return ne !== "key";
+        });
+        f = 0 < p.length ? "{key: someKey, " + p.join(": ..., ") + ": ...}" : "{key: someKey}", U[d + f] || (p = 0 < p.length ? "{" + p.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} />`,
+          f,
+          d,
+          p,
+          d
+        ), U[d + f] = !0);
+      }
+      if (d = null, a !== void 0 && (i(a), d = "" + a), c(r) && (i(r.key), d = "" + r.key), "key" in r) {
+        a = {};
+        for (var N in r)
+          N !== "key" && (a[N] = r[N]);
+      } else a = r;
+      return d && l(
+        a,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), v(
+        e,
+        d,
+        a,
+        n(),
+        j,
+        P
+      );
+    }
+    function x(e) {
+      _(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === O && (e._payload.status === "fulfilled" ? _(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function _(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === R;
+    }
+    var b = oe, R = /* @__PURE__ */ Symbol.for("react.transitional.element"), w = /* @__PURE__ */ Symbol.for("react.portal"), A = /* @__PURE__ */ Symbol.for("react.fragment"), V = /* @__PURE__ */ Symbol.for("react.strict_mode"), G = /* @__PURE__ */ Symbol.for("react.profiler"), X = /* @__PURE__ */ Symbol.for("react.consumer"), B = /* @__PURE__ */ Symbol.for("react.context"), H = /* @__PURE__ */ Symbol.for("react.forward_ref"), Z = /* @__PURE__ */ Symbol.for("react.suspense"), Q = /* @__PURE__ */ Symbol.for("react.suspense_list"), K = /* @__PURE__ */ Symbol.for("react.memo"), O = /* @__PURE__ */ Symbol.for("react.lazy"), ee = /* @__PURE__ */ Symbol.for("react.activity"), re = /* @__PURE__ */ Symbol.for("react.client.reference"), g = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, te = Array.isArray, h = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    b = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var F, z = {}, D = b.react_stack_bottom_frame.bind(
+      b,
+      o
+    )(), W = h(u(o)), U = {};
+    k.Fragment = A, k.jsx = function(e, r, a) {
+      var f = 1e4 > g.recentlyCreatedOwnerStacks++;
+      return y(
+        e,
+        r,
+        a,
+        !1,
+        f ? Error("react-stack-top-frame") : D,
+        f ? h(u(e)) : W
+      );
+    }, k.jsxs = function(e, r, a) {
+      var f = 1e4 > g.recentlyCreatedOwnerStacks++;
+      return y(
+        e,
+        r,
+        a,
+        !0,
+        f ? Error("react-stack-top-frame") : D,
+        f ? h(u(e)) : W
+      );
+    };
+  })()), k;
+}
+var J;
+function le() {
+  return J || (J = 1, process.env.NODE_ENV === "production" ? S.exports = se() : S.exports = ue()), S.exports;
+}
+var E = le();
+const Y = ({
+  root: t = null,
+  rootMargin: s = "0px",
+  threshold: i = 0.1,
+  triggerOnce: u = !0
+}) => {
+  const n = C(null), [o, c] = L(!1);
+  return I(() => {
+    const l = n.current;
+    if (!l) return;
+    const m = new IntersectionObserver(([v]) => {
+      v.isIntersecting ? (c(!0), u && m.unobserve(v.target)) : u || c(!1);
+    }, { root: t, rootMargin: s, threshold: i });
+    return m.observe(l), () => {
+      m.unobserve(l), m.disconnect();
+    };
+  }, [t, s, i, u]), { ref: n, visible: o };
+}, fe = ({
+  onVisible: t,
+  root: s = null,
+  rootMargin: i = "0px",
+  threshold: u = 0.1,
+  triggerOnce: n = !0
+}) => {
+  const o = C(null), c = C(!1);
+  return I(() => {
+    const l = o.current;
+    if (!l) return;
+    const m = new IntersectionObserver(([v]) => {
+      v.isIntersecting && ((!c.current || !n) && (t(), c.current = !0), n && m.unobserve(v.target));
+    }, { root: s, rootMargin: i, threshold: u });
+    return m.observe(l), () => {
+      m.unobserve(l), m.disconnect();
+    };
+  }, [t, s, i, u, n]), { ref: o };
+};
+function de({
+  children: t,
+  fallback: s = null,
+  className: i,
+  style: u,
+  root: n,
+  rootMargin: o,
+  threshold: c,
+  triggerOnce: l
+}) {
+  const { ref: m, visible: v } = Y({ root: n, rootMargin: o, threshold: c, triggerOnce: l });
+  return /* @__PURE__ */ E.jsx("div", { ref: m, className: i, style: u, children: v ? t : s });
+}
+function me({
+  children: t,
+  fallback: s = null
+}) {
+  const { ref: i, visible: u } = Y({});
+  return /* @__PURE__ */ E.jsx("div", { ref: i, children: u && /* @__PURE__ */ E.jsx(ae, { fallback: s, children: t }) });
+}
+const ie = ({ src: t, visible: s }) => {
+  const [i, u] = L(!1), [n, o] = L(!1);
+  function c() {
+    o(!0);
+  }
+  return I(() => {
+    if (!s || !t) return;
+    const l = new Image();
+    l.src = t, l.onload = () => {
+      u(!0);
+    };
+  }, [s, t]), {
+    handleLoad: c,
+    loaded: n,
+    shouldLoad: i
+  };
+};
+function ve({
+  src: t,
+  alt: s,
+  placeholder: i,
+  blur: u = !1,
+  fadeInDuration: n = 300,
+  width: o,
+  height: c,
+  style: l,
+  ImageComponent: m = "img",
+  ...v
+}) {
+  const { ref: y, visible: x } = Y({}), { loaded: _, handleLoad: b, shouldLoad: R } = ie({ src: t, visible: x }), w = m !== "img";
+  return /* @__PURE__ */ E.jsxs("div", { style: {
+    position: "relative",
+    overflow: "hidden",
+    width: o,
+    height: c
+  }, children: [
+    i && !_ && /* @__PURE__ */ E.jsx(
+      "img",
+      {
+        src: i,
+        alt: s,
+        "aria-hidden": !0,
+        style: {
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          filter: u ? "blur(20px)" : "none",
+          transform: u ? "scale(1.1)" : void 0
+        }
+      }
+    ),
+    w ? /* @__PURE__ */ E.jsx(
+      m,
+      {
+        src: R ? t : "",
+        alt: s,
+        width: o,
+        height: c,
+        onLoad: b,
+        style: {
+          opacity: _ ? 1 : 0,
+          transition: `opacity ${n}ms ease`,
+          ...l
+        },
+        ...v
+      }
+    ) : /* @__PURE__ */ E.jsx(
+      "img",
+      {
+        ref: y,
+        src: R ? t : void 0,
+        alt: s,
+        loading: "lazy",
+        width: o,
+        height: c,
+        onLoad: b,
+        style: {
+          opacity: _ ? 1 : 0,
+          transition: `opacity ${n}ms ease`,
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          display: "block",
+          ...l
+        },
+        ...v
+      }
+    )
+  ] });
+}
+export {
+  de as LazyComponent,
+  ve as LazyImage,
+  me as LazySuspense,
+  Y as useLazy,
+  fe as useLazyCallback
+};

package/package.json

@@ -1,49 +1,64 @@
 {
   "name": "@bentoo/react-lazy",
-  "author": {
-    "name": "Manuel Bento",
-    "email": "manuelbentomb.223@hotmail.com"
-  },
+  "version": "1.0.0",
   "private": false,
-  "version": "0.2.1",
   "type": "module",
-  "module": "./dist/index.js",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "/dist"
+    "dist"
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
     }
   },
   "scripts": {
-    "build": "tsc && vite build",
-    "lint": "eslint ."
+    "build:ts": "tsc --emitDeclarationOnly",
+    "build:esm": "vite build --config vite.config.ts",
+    "build": "npm run build:ts && npm run build:esm",
+    "lint": "eslint . --ext .ts,.tsx",
+    "publish:one": "npm run build && npm publish --access public",
+    "publish:confirm": "npm run build && node scripts/publish.js"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/node": "^25.3.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^10.0.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
   },
+  "keywords": [
+    "react",
+    "nextjs",
+    "lazy-loading",
+    "react-lazy",
+    "react-lazy-load"
+  ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/manuelbento19/react-lazy.git"
+    "url": "git+https://github.com/manuelbento19/react-lazy.git"
   },
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "vite-plugin-dts": "^4.2.1"
+  "bugs": {
+    "url": "https://github.com/manuelbento19/react-lazy/issues"
   },
-  "devDependencies": {
-    "@eslint/js": "^9.9.0",
-    "@types/node": "^22.5.5",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.9.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "globals": "^15.9.0",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.1"
-  }
-}
+  "homepage": "https://github.com/manuelbento19/react-lazy#readme",
+  "author": {
+    "name": "Manuel Bento",
+    "email": "manuelbentomb.223@hotmail.com"
+  },
+  "license": "MIT",
+  "sideEffects": false
+}