@alikhalilll/a-skeleton 1.0.0 → 1.1.0

package/dist/index.d.cts

@@ -39,9 +39,12 @@ interface ASkeletonProps {
   /** When true, render the captured skeleton (or `fallback` slot) instead of the default slot. */
   loading: boolean;
   /**
-   * Identifier used to look up + persist the captured shape. Falls back to the
-   * slot's first child component name, then `'anonymous'`. Pass explicitly when
-   * the same component renders different shapes depending on props.
+   * Identifier used to look up + persist the captured shape. Defaults to
+   * `"<slot-fingerprint>:<useId()>"` so every `<ASkeleton>` instance gets its
+   * own cache slot automatically — two `<ASkeleton><UserCard/></ASkeleton>` on
+   * the same page never collide. Pass explicitly when you *want* multiple
+   * instances to share a captured shape (e.g. a list of identical cards), or
+   * when one instance renders different shapes depending on a prop.
    */
   cacheKey?: string;
   /** Max recursion depth during shape capture. Default 6. */
@@ -280,6 +283,7 @@ declare function useShapeProbe(getTarget: () => HTMLElement | null, options: Sha
  * `persist` is enabled. SSR-safe — bypasses `window` access on the server.
  * Rehydrates pre-computed styles for shapes deserialized from older sessions
  * (Object.freeze + style/lineStyles don't survive `JSON.stringify` round-trip).
+ * Drops the entry if it was written by a different schema version.
  */
 declare function getCached(key: string, persist: boolean): CachedShape | undefined;
 /** Store a captured shape. `persist=true` mirrors to `localStorage`. */

package/dist/index.d.ts

@@ -39,9 +39,12 @@ interface ASkeletonProps {
   /** When true, render the captured skeleton (or `fallback` slot) instead of the default slot. */
   loading: boolean;
   /**
-   * Identifier used to look up + persist the captured shape. Falls back to the
-   * slot's first child component name, then `'anonymous'`. Pass explicitly when
-   * the same component renders different shapes depending on props.
+   * Identifier used to look up + persist the captured shape. Defaults to
+   * `"<slot-fingerprint>:<useId()>"` so every `<ASkeleton>` instance gets its
+   * own cache slot automatically — two `<ASkeleton><UserCard/></ASkeleton>` on
+   * the same page never collide. Pass explicitly when you *want* multiple
+   * instances to share a captured shape (e.g. a list of identical cards), or
+   * when one instance renders different shapes depending on a prop.
    */
   cacheKey?: string;
   /** Max recursion depth during shape capture. Default 6. */
@@ -280,6 +283,7 @@ declare function useShapeProbe(getTarget: () => HTMLElement | null, options: Sha
  * `persist` is enabled. SSR-safe — bypasses `window` access on the server.
  * Rehydrates pre-computed styles for shapes deserialized from older sessions
  * (Object.freeze + style/lineStyles don't survive `JSON.stringify` round-trip).
+ * Drops the entry if it was written by a different schema version.
  */
 declare function getCached(key: string, persist: boolean): CachedShape | undefined;
 /** Store a captured shape. `persist=true` mirrors to `localStorage`. */

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Comment, Fragment, Text, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, shallowRef, useSlots, watch } from "vue";
+import { Comment, Fragment, Text, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, shallowRef, useId, useSlots, watch } from "vue";
 //#region ../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
 	var t, f, n = "";
@@ -3652,19 +3652,32 @@ function useShapeProbe(getTarget, options) {
 const memory = /* @__PURE__ */ new Map();
 const STORAGE_PREFIX = "a-skeleton:";
 /**
+* Schema version for persisted entries. Bump whenever the `ShapeNode` /
+* `CachedShape` field set changes so stale localStorage payloads from older
+* releases get dropped on read instead of rehydrating into a wrong layout.
+*/
+const SCHEMA_VERSION = 1;
+/**
 * Lookup a captured shape by key. Reads in-memory first, then `localStorage` if
 * `persist` is enabled. SSR-safe — bypasses `window` access on the server.
 * Rehydrates pre-computed styles for shapes deserialized from older sessions
 * (Object.freeze + style/lineStyles don't survive `JSON.stringify` round-trip).
+* Drops the entry if it was written by a different schema version.
 */
 function getCached(key, persist) {
 	const hit = memory.get(key);
 	if (hit) return hit;
 	if (!persist || typeof window === "undefined") return void 0;
 	try {
-		const raw = window.localStorage.getItem(STORAGE_PREFIX + key);
+		const storageKey = STORAGE_PREFIX + key;
+		const raw = window.localStorage.getItem(storageKey);
 		if (!raw) return void 0;
-		const rehydrated = rehydrateShape(JSON.parse(raw));
+		const parsed = JSON.parse(raw);
+		if (parsed.v !== SCHEMA_VERSION) {
+			window.localStorage.removeItem(storageKey);
+			return;
+		}
+		const rehydrated = rehydrateShape(parsed);
 		memory.set(key, rehydrated);
 		return rehydrated;
 	} catch {
@@ -3677,9 +3690,11 @@ function setCached(key, value, persist) {
 	if (!persist || typeof window === "undefined") return;
 	try {
 		const lean = {
+			v: SCHEMA_VERSION,
 			width: value.width,
 			height: value.height,
-			nodes: leanNodes(value.nodes)
+			nodes: leanNodes(value.nodes),
+			truncated: value.truncated
 		};
 		window.localStorage.setItem(STORAGE_PREFIX + key, JSON.stringify(lean));
 	} catch {}
@@ -3706,7 +3721,7 @@ function clearCached(key) {
 * path stays allocation-free.
 */
 function rehydrateShape(shape) {
-	const nodes = shape.nodes.map((n) => n.style ? n : freezeNodeStyles(n));
+	const nodes = shape.nodes.map((n) => freezeNodeStyles(n));
 	return Object.freeze({
 		nodes: Object.freeze(nodes),
 		width: shape.width,
@@ -4131,7 +4146,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 		__expose();
 		const props = __props;
 		const slots = useSlots();
-		const resolvedKey = computed(() => props.cacheKey ?? fingerprintSlot(slots.default?.()));
+		const instanceId = useId();
+		const resolvedKey = computed(() => props.cacheKey ?? `${fingerprintSlot(slots.default?.())}:${instanceId}`);
+		const warnedKeys = /* @__PURE__ */ new Set();
 		const cached = shallowRef(getCached(resolvedKey.value, props.persist));
 		watch(resolvedKey, (key) => {
 			cached.value = getCached(key, props.persist);
@@ -4144,6 +4161,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 			onCapture: (shape) => {
 				setCached(resolvedKey.value, shape, props.persist);
 				cached.value = shape;
+				if (shape.truncated && !warnedKeys.has(resolvedKey.value)) {
+					warnedKeys.add(resolvedKey.value);
+					console.warn(`[ASkeleton] Capture truncated at maxNodes=${props.maxNodes} for cacheKey="${resolvedKey.value}". The replayed skeleton will be missing nodes. Raise \`max-nodes\` or mark dense subtrees with \`data-skeleton-stop\` to collapse them into a single block.`);
+				}
 			}
 		});
 		const animationClass = computed(() => props.animation === "none" ? null : `a-skel-block--anim-${props.animation}`);
@@ -4165,7 +4186,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 		const __returned__ = {
 			props,
 			slots,
+			instanceId,
 			resolvedKey,
+			warnedKeys,
 			cached,
 			wrapperRef,
 			animationClass,