@ienlab/react-library 0.4.0 → 0.4.3

package/dist/components/index.d.ts

@@ -1,2 +1,2 @@
-export {};
+export * from './image';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/my-library.es.js

@@ -1,50 +1,98 @@
-import { collection as e, documentId as t, getDoc as n, getDocs as r, onSnapshot as i, query as a, serverTimestamp as o, where as s } from "firebase/firestore";
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { collection, documentId, getDoc, getDocs, onSnapshot, query, serverTimestamp, where } from "firebase/firestore";
+//#region src/components/image.tsx
+function CrossfadeImage({ placeholder, src, onLoadError, ...imgProps }) {
+	const [isLoaded, setIsLoaded] = useState(() => {
+		if (typeof window === "undefined" || !src) return false;
+		const img = new Image();
+		img.src = src;
+		return img.complete && img.naturalWidth > 0;
+	});
+	const [prevSrc, setPrevSrc] = useState(src);
+	if (prevSrc !== src) {
+		setPrevSrc(src);
+		setIsLoaded(false);
+	}
+	useEffect(() => {
+		if (!src) return;
+		const img = new Image();
+		img.src = src;
+		img.onload = () => setIsLoaded(true);
+		img.onerror = (e) => {
+			if (onLoadError) onLoadError(e);
+			else console.error("CrossfadeImage: Failed to load image", src);
+		};
+		if (img.complete && img.naturalWidth > 0) img.onload(new Event("load"));
+		return () => {
+			img.onload = null;
+			img.onerror = null;
+		};
+	}, [src, onLoadError]);
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isLoaded && src ? /* @__PURE__ */ jsx(motion.img, {
+		src,
+		...imgProps,
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		style: { ...imgProps.style }
+	}, "loaded-image") : /* @__PURE__ */ jsx(motion.div, {
+		initial: { opacity: 1 },
+		transition: { duration: .3 },
+		style: { ...imgProps.style },
+		children: placeholder ?? /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-sidebar" })
+	}, "placeholder") });
+}
+//#endregion
 //#region src/utils/firestore.ts
-function c(e) {
+function snapshotToData(snapshot) {
 	return {
-		...e.data(),
-		id: e.id
+		...snapshot.data(),
+		id: snapshot.id
 	};
 }
-async function l(n, i, o, c, l) {
-	let u = l.filter((e) => !!(e && !c.has(e.path)));
-	for (let l = 0; l < u.length; l += 30) {
-		let d = u.slice(l, l + 30);
-		(await r(a(e(n, i), s(t(), "in", d.map((e) => e.id))))).forEach((e) => {
-			let t = o(e);
-			c.set(e.ref.path, t);
+async function fetchItems(firestore, colName, changeMethod, cache, referenceArray) {
+	const missingRefs = referenceArray.filter((ref) => Boolean(ref && !cache.has(ref.path)));
+	const chunkSize = 30;
+	for (let i = 0; i < missingRefs.length; i += chunkSize) {
+		const chunk = missingRefs.slice(i, i + chunkSize);
+		(await getDocs(query(collection(firestore, colName), where(documentId(), "in", chunk.map((ref) => ref.id))))).forEach((snapshot) => {
+			const item = changeMethod(snapshot);
+			cache.set(snapshot.ref.path, item);
 		});
 	}
 }
-async function u(e, t, r) {
-	let i = r.filter((e) => !!(e && !t.has(e.path)));
-	await Promise.all(i.map(async (r) => {
-		let i = e(await n(r));
-		t.set(r.path, i);
+async function fetchItemsByOne(changeMethod, cache, referenceArray) {
+	const missingRefs = referenceArray.filter((ref) => Boolean(ref && !cache.has(ref.path)));
+	await Promise.all(missingRefs.map(async (ref) => {
+		const item = changeMethod(await getDoc(ref));
+		cache.set(ref.path, item);
 	}));
 }
-function d(e, t, n = {}) {
-	let { cache: r = !0, onError: a } = n;
-	return i(e, { includeMetadataChanges: !r }, (e) => {
-		(r || !e.metadata.fromCache) && t(e);
-	}, a);
+function getSnapshots(ref, callback, options = {}) {
+	const { cache = true, onError } = options;
+	return onSnapshot(ref, { includeMetadataChanges: !cache }, (snapshot) => {
+		if (cache || !snapshot.metadata.fromCache) callback(snapshot);
+	}, onError);
 }
 //#endregion
 //#region src/utils/array.ts
-Array.prototype.mapNotNull = function(e) {
-	return this.flatMap((t, n) => {
-		let r = e(t, n);
-		return r == null ? [] : [r];
+Array.prototype.mapNotNull = function(fn) {
+	return this.flatMap((item, index) => {
+		const result = fn(item, index);
+		return result != null ? [result] : [];
 	});
 };
 //#endregion
 //#region src/constant/firestore.ts
-var f = () => ({
-	updateAt: o(),
-	delete: !0
-}), p = () => ({
-	updateAt: o(),
-	delete: !1
+var deleteItem = () => ({
+	"updateAt": serverTimestamp(),
+	"delete": true
+});
+var undeleteItem = () => ({
+	"updateAt": serverTimestamp(),
+	"delete": false
 });
 //#endregion
-export { f as deleteItem, l as fetchItems, u as fetchItemsByOne, d as getSnapshots, c as snapshotToData, p as undeleteItem };
+export { CrossfadeImage, deleteItem, fetchItems, fetchItemsByOne, getSnapshots, snapshotToData, undeleteItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ienlab/react-library",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "My React component library",
   "main": "./dist/my-library.cjs.js",
   "module": "./dist/my-library.es.js",

package/dist/my-library.cjs.js

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`firebase/firestore`);function t(e){return{...e.data(),id:e.id}}async function n(t,n,r,i,a){let o=a.filter(e=>!!(e&&!i.has(e.path)));for(let a=0;a<o.length;a+=30){let s=o.slice(a,a+30);(await(0,e.getDocs)((0,e.query)((0,e.collection)(t,n),(0,e.where)((0,e.documentId)(),`in`,s.map(e=>e.id))))).forEach(e=>{let t=r(e);i.set(e.ref.path,t)})}}async function r(t,n,r){let i=r.filter(e=>!!(e&&!n.has(e.path)));await Promise.all(i.map(async r=>{let i=t(await(0,e.getDoc)(r));n.set(r.path,i)}))}function i(t,n,r={}){let{cache:i=!0,onError:a}=r;return(0,e.onSnapshot)(t,{includeMetadataChanges:!i},e=>{(i||!e.metadata.fromCache)&&n(e)},a)}Array.prototype.mapNotNull=function(e){return this.flatMap((t,n)=>{let r=e(t,n);return r==null?[]:[r]})};var a=()=>({updateAt:(0,e.serverTimestamp)(),delete:!0}),o=()=>({updateAt:(0,e.serverTimestamp)(),delete:!1});exports.deleteItem=a,exports.fetchItems=n,exports.fetchItemsByOne=r,exports.getSnapshots=i,exports.snapshotToData=t,exports.undeleteItem=o;