@place-framework/place-block-image 1.0.2 → 1.0.4

package/dist/react/PlaceBlockImage.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),E="image-",o={LAZY:"lazy",LOADED:"loaded",WRAPPER_SUFFIX:"wrapper"},I=e=>e.replace(/^https?:\/\/[^/]+/,"").replace(/^[/\\]+/,"").replace(/\.[^/.]+$/,"").toLowerCase().replace(/[^a-z0-9/-]/g,"-").replace(/\//g,"-").replace(/-+/g,"-").replace(/^-|-$/g,"");function d(e,t){return t?e.replace(new RegExp(`^${t.replace(/\//g,"\\/")}\\/?`),""):e}function L(e,t,n){return e?`${t}${I(d(e,n))}`:""}function P(e,t,n,r=""){return[`${t}${o.WRAPPER_SUFFIX}`,L(e,t,n),r].filter(Boolean).join(" ")}function v(e,t){return e?t?`${o.LAZY} ${o.LOADED}`:o.LAZY:""}function R(e,t,n=.1){const r=new IntersectionObserver(s=>{s.forEach(c=>{c.isIntersecting&&(t(),r.unobserve(c.target))})},{threshold:n});return r.observe(e),r}const i=({src:e,alt:t,imagePrefix:n=E,lazy:r=!1,className:s="",...c})=>{const u=a.useRef(null),[g,p]=a.useState(r?"":e),[l,f]=a.useState(!r),_=typeof __PLUGIN_ASSET_PATH__<"u"?__PLUGIN_ASSET_PATH__:"";a.useEffect(()=>{if(!r||l||!u.current)return;const S=R(u.current,()=>{p(e),f(!0)});return()=>S.disconnect()},[e,r,l]);const m=P(e,n,_,s),A=v(r,l);return a.createElement("picture",{className:m},a.createElement("img",{ref:u,src:g,alt:t,className:A,...c}))};exports.PlaceBlockImage=i;exports.default=i;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react");c=s(c);var l=`image-`,u={LAZY:`lazy`,LOADED:`loaded`,WRAPPER_SUFFIX:`wrapper`},d=e=>e.replace(/^https?:\/\/[^/]+/,``).replace(/^[/\\]+/,``).replace(/\.[^/.]+$/,``).toLowerCase().replace(/[^a-z0-9/-]/g,`-`).replace(/\//g,`-`).replace(/-+/g,`-`).replace(/^-|-$/g,``);function f(e,t){return t?e.replace(RegExp(`^${t.replace(/\//g,`\\/`)}\\/?`),``):e}function p(e,t,n){return e?`${t}${d(f(e,n))}`:``}function m(e,t,n,r=``){return[`${t}${u.WRAPPER_SUFFIX}`,p(e,t,n),r].filter(Boolean).join(` `)}function h(e,t){return e?t?`${u.LAZY} ${u.LOADED}`:u.LAZY:``}function g(e,t,n=.1){let r=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&(t(),r.unobserve(e.target))})},{threshold:n});return r.observe(e),r}var _=({src:e,alt:t,imagePrefix:n=l,lazy:r=!1,className:i=``,...a})=>{let o=(0,c.useRef)(null),[s,u]=(0,c.useState)(r?``:e),[d,f]=(0,c.useState)(!r),p=typeof __PLUGIN_ASSET_PATH__<`u`?__PLUGIN_ASSET_PATH__:``;(0,c.useEffect)(()=>{if(!r||d||!o.current)return;let t=g(o.current,()=>{u(e),f(!0)});return()=>t.disconnect()},[e,r,d]);let _=m(e,n,p,i),v=h(r,d);return c.default.createElement(`picture`,{className:_},c.default.createElement(`img`,{ref:o,src:s,alt:t,className:v,...a}))};exports.PlaceBlockImage=_,exports.default=_;

package/dist/react/PlaceBlockImage.js

@@ -1,67 +1,57 @@
-import l, { useRef as I, useState as i, useEffect as L } from "react";
-const S = "image-", c = {
-  // Lazy loading states
-  LAZY: "lazy",
-  LOADED: "loaded",
-  // Suffix appended to imagePrefix to form the wrapper class (e.g. 'image-wrapper')
-  WRAPPER_SUFFIX: "wrapper"
-}, P = (e) => e.replace(/^https?:\/\/[^/]+/, "").replace(/^[/\\]+/, "").replace(/\.[^/.]+$/, "").toLowerCase().replace(/[^a-z0-9/-]/g, "-").replace(/\//g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
-function d(e, t) {
-  return t ? e.replace(new RegExp(`^${t.replace(/\//g, "\\/")}\\/?`), "") : e;
+import e, { useEffect as t, useRef as n, useState as r } from "react";
+//#region src/constants/index.ts
+var i = "image-", a = {
+	LAZY: "lazy",
+	LOADED: "loaded",
+	WRAPPER_SUFFIX: "wrapper"
+}, o = (e) => e.replace(/^https?:\/\/[^/]+/, "").replace(/^[/\\]+/, "").replace(/\.[^/.]+$/, "").toLowerCase().replace(/[^a-z0-9/-]/g, "-").replace(/\//g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+function s(e, t) {
+	return t ? e.replace(RegExp(`^${t.replace(/\//g, "\\/")}\\/?`), "") : e;
 }
-function R(e, t, n) {
-  return e ? `${t}${P(d(e, n))}` : "";
+function c(e, t, n) {
+	return e ? `${t}${o(s(e, n))}` : "";
 }
-function $(e, t, n, r = "") {
-  return [
-    `${t}${c.WRAPPER_SUFFIX}`,
-    R(e, t, n),
-    r
-  ].filter(Boolean).join(" ");
+function l(e, t, n, r = "") {
+	return [
+		`${t}${a.WRAPPER_SUFFIX}`,
+		c(e, t, n),
+		r
+	].filter(Boolean).join(" ");
 }
-function v(e, t) {
-  return e ? t ? `${c.LAZY} ${c.LOADED}` : c.LAZY : "";
+function u(e, t) {
+	return e ? t ? `${a.LAZY} ${a.LOADED}` : a.LAZY : "";
 }
-function C(e, t, n = 0.1) {
-  const r = new IntersectionObserver(
-    (a) => {
-      a.forEach((s) => {
-        s.isIntersecting && (t(), r.unobserve(s.target));
-      });
-    },
-    { threshold: n }
-  );
-  return r.observe(e), r;
+function d(e, t, n = .1) {
+	let r = new IntersectionObserver((e) => {
+		e.forEach((e) => {
+			e.isIntersecting && (t(), r.unobserve(e.target));
+		});
+	}, { threshold: n });
+	return r.observe(e), r;
 }
-const b = ({
-  src: e,
-  alt: t,
-  imagePrefix: n = S,
-  lazy: r = !1,
-  className: a = "",
-  ...s
-}) => {
-  const o = I(null), [p, f] = i(r ? "" : e), [u, g] = i(!r), m = typeof __PLUGIN_ASSET_PATH__ < "u" ? __PLUGIN_ASSET_PATH__ : "";
-  L(() => {
-    if (!r || u || !o.current) return;
-    const E = C(o.current, () => {
-      f(e), g(!0);
-    });
-    return () => E.disconnect();
-  }, [e, r, u]);
-  const _ = $(e, n, m, a), A = v(r, u);
-  return /* @__PURE__ */ l.createElement("picture", { className: _ }, /* @__PURE__ */ l.createElement(
-    "img",
-    {
-      ref: o,
-      src: p,
-      alt: t,
-      className: A,
-      ...s
-    }
-  ));
-};
-export {
-  b as PlaceBlockImage,
-  b as default
+//#endregion
+//#region src/react/PlaceBlockImage.tsx
+var f = ({ src: a, alt: o, imagePrefix: s = i, lazy: c = !1, className: f = "", ...p }) => {
+	let m = n(null), [h, g] = r(c ? "" : a), [_, v] = r(!c), y = typeof __PLUGIN_ASSET_PATH__ < "u" ? __PLUGIN_ASSET_PATH__ : "";
+	t(() => {
+		if (!c || _ || !m.current) return;
+		let e = d(m.current, () => {
+			g(a), v(!0);
+		});
+		return () => e.disconnect();
+	}, [
+		a,
+		c,
+		_
+	]);
+	let b = l(a, s, y, f), x = u(c, _);
+	return /* @__PURE__ */ e.createElement("picture", { className: b }, /* @__PURE__ */ e.createElement("img", {
+		ref: m,
+		src: h,
+		alt: o,
+		className: x,
+		...p
+	}));
 };
+//#endregion
+export { f as PlaceBlockImage, f as default };

package/dist/vue/PlaceBlockImage.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),d="image-",i={LAZY:"lazy",LOADED:"loaded",WRAPPER_SUFFIX:"wrapper"},A=r=>r.replace(/^https?:\/\/[^/]+/,"").replace(/^[/\\]+/,"").replace(/\.[^/.]+$/,"").toLowerCase().replace(/[^a-z0-9/-]/g,"-").replace(/\//g,"-").replace(/-+/g,"-").replace(/^-|-$/g,"");function y(r,a){return a?r.replace(new RegExp(`^${a.replace(/\//g,"\\/")}\\/?`),""):r}function L(r,a,t){return r?`${a}${A(y(r,t))}`:""}function P(r,a,t,s=""){return[`${a}${i.WRAPPER_SUFFIX}`,L(r,a,t),s].filter(Boolean).join(" ")}function E(r,a){return r?a?`${i.LAZY} ${i.LOADED}`:i.LAZY:""}function S(r,a,t=.1){const s=new IntersectionObserver(l=>{l.forEach(n=>{n.isIntersecting&&(a(),s.unobserve(n.target))})},{threshold:t});return s.observe(r),s}const z=["src","alt"],I=e.defineComponent({inheritAttrs:!1,__name:"PlaceBlockImage",props:{src:{type:String,required:!0},alt:{type:String,required:!0},imagePrefix:{type:String,default:()=>d},lazy:{type:Boolean,default:!1}},setup(r){const a=e.useAttrs(),t=r,s=e.computed(()=>{const{class:o,...g}=a;return g}),l=e.ref(null),n=e.ref(t.lazy?"":t.src),c=e.ref(!t.lazy);let u=null;const m=typeof __PLUGIN_ASSET_PATH__<"u"?__PLUGIN_ASSET_PATH__:"",_=e.computed(()=>P(t.src,t.imagePrefix,m)),v=e.computed(()=>E(t.lazy,c.value)),f=()=>{!t.lazy||c.value||!l.value||(u=S(l.value,()=>{n.value=t.src,c.value=!0}))},p=()=>{u&&(u.disconnect(),u=null)};return e.onMounted(()=>{f()}),e.onUnmounted(()=>{p()}),e.watch(()=>t.src,o=>{t.lazy?c.value||(p(),f()):n.value=o}),e.watch(c,o=>{o&&(n.value=t.src,p())}),(o,g)=>(e.openBlock(),e.createElementBlock("picture",{class:e.normalizeClass([_.value,e.unref(a).class])},[e.createElementVNode("img",e.mergeProps({ref_key:"imgRef",ref:l,src:n.value,alt:r.alt,class:v.value},s.value),null,16,z)],2))}});module.exports=I;
+let e=require("vue");var t=`image-`,n={LAZY:`lazy`,LOADED:`loaded`,WRAPPER_SUFFIX:`wrapper`},r=e=>e.replace(/^https?:\/\/[^/]+/,``).replace(/^[/\\]+/,``).replace(/\.[^/.]+$/,``).toLowerCase().replace(/[^a-z0-9/-]/g,`-`).replace(/\//g,`-`).replace(/-+/g,`-`).replace(/^-|-$/g,``);function i(e,t){return t?e.replace(RegExp(`^${t.replace(/\//g,`\\/`)}\\/?`),``):e}function a(e,t,n){return e?`${t}${r(i(e,n))}`:``}function o(e,t,r,i=``){return[`${t}${n.WRAPPER_SUFFIX}`,a(e,t,r),i].filter(Boolean).join(` `)}function s(e,t){return e?t?`${n.LAZY} ${n.LOADED}`:n.LAZY:``}function c(e,t,n=.1){let r=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&(t(),r.unobserve(e.target))})},{threshold:n});return r.observe(e),r}var l=[`src`,`alt`],u=(0,e.defineComponent)({inheritAttrs:!1,__name:`PlaceBlockImage`,props:{src:{type:String,required:!0},alt:{type:String,required:!0},imagePrefix:{type:String,default:()=>t},lazy:{type:Boolean,default:!1}},setup(t){let n=(0,e.useAttrs)(),r=t,i=(0,e.computed)(()=>{let{class:e,...t}=n;return t}),a=(0,e.ref)(null),u=(0,e.ref)(r.lazy?``:r.src),d=(0,e.ref)(!r.lazy),f=null,p=typeof __PLUGIN_ASSET_PATH__<`u`?__PLUGIN_ASSET_PATH__:``,m=(0,e.computed)(()=>o(r.src,r.imagePrefix,p)),h=(0,e.computed)(()=>s(r.lazy,d.value)),g=()=>{!r.lazy||d.value||!a.value||(f=c(a.value,()=>{u.value=r.src,d.value=!0}))},_=()=>{f&&=(f.disconnect(),null)};return(0,e.onMounted)(()=>{g()}),(0,e.onUnmounted)(()=>{_()}),(0,e.watch)(()=>r.src,e=>{r.lazy?d.value||(_(),g()):u.value=e}),(0,e.watch)(d,e=>{e&&(u.value=r.src,_())}),(r,o)=>((0,e.openBlock)(),(0,e.createElementBlock)(`picture`,{class:(0,e.normalizeClass)([m.value,(0,e.unref)(n).class])},[(0,e.createElementVNode)(`img`,(0,e.mergeProps)({ref_key:`imgRef`,ref:a,src:u.value,alt:t.alt,class:h.value},i.value),null,16,l)],2))}});module.exports=u;

package/dist/vue/PlaceBlockImage.js

@@ -1,83 +1,84 @@
-import { defineComponent as y, useAttrs as L, computed as p, ref as f, onMounted as P, onUnmounted as E, watch as _, openBlock as S, createElementBlock as z, normalizeClass as I, unref as C, createElementVNode as $, mergeProps as h } from "vue";
-const R = "image-", u = {
-  // Lazy loading states
-  LAZY: "lazy",
-  LOADED: "loaded",
-  // Suffix appended to imagePrefix to form the wrapper class (e.g. 'image-wrapper')
-  WRAPPER_SUFFIX: "wrapper"
-}, b = (t) => t.replace(/^https?:\/\/[^/]+/, "").replace(/^[/\\]+/, "").replace(/\.[^/.]+$/, "").toLowerCase().replace(/[^a-z0-9/-]/g, "-").replace(/\//g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
-function w(t, r) {
-  return r ? t.replace(new RegExp(`^${r.replace(/\//g, "\\/")}\\/?`), "") : t;
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeProps as i, normalizeClass as a, onMounted as o, onUnmounted as s, openBlock as c, ref as l, unref as u, useAttrs as d, watch as f } from "vue";
+//#region src/constants/index.ts
+var p = "image-", m = {
+	LAZY: "lazy",
+	LOADED: "loaded",
+	WRAPPER_SUFFIX: "wrapper"
+}, h = (e) => e.replace(/^https?:\/\/[^/]+/, "").replace(/^[/\\]+/, "").replace(/\.[^/.]+$/, "").toLowerCase().replace(/[^a-z0-9/-]/g, "-").replace(/\//g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+function g(e, t) {
+	return t ? e.replace(RegExp(`^${t.replace(/\//g, "\\/")}\\/?`), "") : e;
 }
-function N(t, r, e) {
-  return t ? `${r}${b(w(t, e))}` : "";
+function _(e, t, n) {
+	return e ? `${t}${h(g(e, n))}` : "";
 }
-function B(t, r, e, a = "") {
-  return [
-    `${r}${u.WRAPPER_SUFFIX}`,
-    N(t, r, e),
-    a
-  ].filter(Boolean).join(" ");
+function v(e, t, n, r = "") {
+	return [
+		`${t}${m.WRAPPER_SUFFIX}`,
+		_(e, t, n),
+		r
+	].filter(Boolean).join(" ");
 }
-function F(t, r) {
-  return t ? r ? `${u.LAZY} ${u.LOADED}` : u.LAZY : "";
+function y(e, t) {
+	return e ? t ? `${m.LAZY} ${m.LOADED}` : m.LAZY : "";
 }
-function O(t, r, e = 0.1) {
-  const a = new IntersectionObserver(
-    (s) => {
-      s.forEach((n) => {
-        n.isIntersecting && (r(), a.unobserve(n.target));
-      });
-    },
-    { threshold: e }
-  );
-  return a.observe(t), a;
+function b(e, t, n = .1) {
+	let r = new IntersectionObserver((e) => {
+		e.forEach((e) => {
+			e.isIntersecting && (t(), r.unobserve(e.target));
+		});
+	}, { threshold: n });
+	return r.observe(e), r;
 }
-const U = ["src", "alt"], x = /* @__PURE__ */ y({
-  inheritAttrs: !1,
-  __name: "PlaceBlockImage",
-  props: {
-    src: { type: String, required: !0 },
-    alt: { type: String, required: !0 },
-    imagePrefix: { type: String, default: () => R },
-    lazy: { type: Boolean, default: !1 }
-  },
-  setup(t) {
-    const r = L(), e = t, a = p(() => {
-      const { class: c, ...m } = r;
-      return m;
-    }), s = f(null), n = f(e.lazy ? "" : e.src), l = f(!e.lazy);
-    let o = null;
-    const v = typeof __PLUGIN_ASSET_PATH__ < "u" ? __PLUGIN_ASSET_PATH__ : "", d = p(
-      () => B(e.src, e.imagePrefix, v)
-    ), A = p(() => F(e.lazy, l.value)), g = () => {
-      !e.lazy || l.value || !s.value || (o = O(s.value, () => {
-        n.value = e.src, l.value = !0;
-      }));
-    }, i = () => {
-      o && (o.disconnect(), o = null);
-    };
-    return P(() => {
-      g();
-    }), E(() => {
-      i();
-    }), _(() => e.src, (c) => {
-      e.lazy ? l.value || (i(), g()) : n.value = c;
-    }), _(l, (c) => {
-      c && (n.value = e.src, i());
-    }), (c, m) => (S(), z("picture", {
-      class: I([d.value, C(r).class])
-    }, [
-      $("img", h({
-        ref_key: "imgRef",
-        ref: s,
-        src: n.value,
-        alt: t.alt,
-        class: A.value
-      }, a.value), null, 16, U)
-    ], 2));
-  }
+//#endregion
+//#region src/vue/PlaceBlockImage.vue?vue&type=script&setup=true&lang.ts
+var x = ["src", "alt"], S = /* @__PURE__ */ r({
+	inheritAttrs: !1,
+	__name: "PlaceBlockImage",
+	props: {
+		src: {
+			type: String,
+			required: !0
+		},
+		alt: {
+			type: String,
+			required: !0
+		},
+		imagePrefix: {
+			type: String,
+			default: () => p
+		},
+		lazy: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(r) {
+		let p = d(), m = r, h = e(() => {
+			let { class: e, ...t } = p;
+			return t;
+		}), g = l(null), _ = l(m.lazy ? "" : m.src), S = l(!m.lazy), C = null, w = typeof __PLUGIN_ASSET_PATH__ < "u" ? __PLUGIN_ASSET_PATH__ : "", T = e(() => v(m.src, m.imagePrefix, w)), E = e(() => y(m.lazy, S.value)), D = () => {
+			!m.lazy || S.value || !g.value || (C = b(g.value, () => {
+				_.value = m.src, S.value = !0;
+			}));
+		}, O = () => {
+			C &&= (C.disconnect(), null);
+		};
+		return o(() => {
+			D();
+		}), s(() => {
+			O();
+		}), f(() => m.src, (e) => {
+			m.lazy ? S.value || (O(), D()) : _.value = e;
+		}), f(S, (e) => {
+			e && (_.value = m.src, O());
+		}), (e, o) => (c(), t("picture", { class: a([T.value, u(p).class]) }, [n("img", i({
+			ref_key: "imgRef",
+			ref: g,
+			src: _.value,
+			alt: r.alt,
+			class: E.value
+		}, h.value), null, 16, x)], 2));
+	}
 });
-export {
-  x as default
-};
+//#endregion
+export { S as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@place-framework/place-block-image",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A utility package for generating CSS custom properties from image dimensions to prevent layout shift",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -48,9 +48,9 @@
     "@types/glob": "^8.1.0",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^6.0.7",
     "typescript": "^5.0.0",
-    "vite": "^5.4.21"
+    "vite": "^8.0.16"
   },
   "dependencies": {
     "glob": "^10.0.0",