Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 | 7x 21x 7x 7x 7x 7x 53x 53x 53x 42x 42x 168x 168x 15x 15x 95x 95x 69x 29x 69x 6x 31x 31x 31x 31x 31x 31x 31x 31x 16x 48x 32x 7x 26x 26x 26x 26x 104x 26x 26x 42x 26x 7x 26x 42x 35x 26x 37x 37x 14x 16x 16x 16x 16x 16x 16x 16x 2x 2x 2x 2x 2x 2x 11x 11x 11x 9x 7x 7x | import { effectScope, ref, watch, type DirectiveBinding, type EffectScope, type ObjectDirective, type Ref, type VNode } from "vue";
import { DEFAULT_DELAY, DEFAULT_MIN_DURATION, useDelayedLoading } from "../utils/useDelayedLoading";
import { configForInstance, type LoadingKitConfig } from "../config";
import { resolveSkeletonAppearance } from "./appearance";
export type SkeletonDirectiveValue = boolean | { loading: boolean; delay?: number; minDuration?: number };
export const SKELETONIZE_CLASS = "vslk-skeletonize";
const ANIMATION_CLASSES = ["shimmer", "pulse", "none"].map((a) => `${SKELETONIZE_CLASS}--${a}`);
const VARS = ["--vslk-sk-base", "--vslk-sk-hi", "--vslk-sk-duration"];
const SKELETON_ATTRS = ["inert", "aria-hidden"] as const;
/** Attributes the directive may override (or that SSR may have rendered). */
const MANAGED_ATTRS = ["inert", "aria-hidden", "aria-busy", "data-allow-mismatch"] as const;
interface Resolved {
loading: boolean;
delay: number;
minDuration: number;
}
interface State {
scope: EffectScope;
value: Ref<Resolved>;
config: Ref<LoadingKitConfig>;
shown: Ref<boolean>;
/** What the template itself binds for each managed attribute (null = absent). */
bound: Map<string, string | null>;
/** Attributes currently carrying the directive's (or SSR's) value. */
overridden: Set<string>;
}
const states = new WeakMap<HTMLElement, State>();
/** The config the directive's owning component sees (plugin or provideLoadingConfig). */
function configOf(binding: DirectiveBinding): LoadingKitConfig {
return configForInstance(binding.instance?.$);
}
function resolve(value: SkeletonDirectiveValue, config: LoadingKitConfig): Resolved {
const v = typeof value === "object" && value !== null ? value : { loading: Boolean(value) };
return {
loading: v.loading,
delay: v.delay ?? config.smartLoader?.delay ?? DEFAULT_DELAY,
minDuration: v.minDuration ?? config.smartLoader?.minDuration ?? DEFAULT_MIN_DURATION,
};
}
/* The value to restore is what the TEMPLATE binds (read from the vnode on
every mount/update), never what is in the DOM: after SSR the DOM already
holds the skeleton's own inert/aria-hidden, and a bound value may change
mid-load. */
function boundFrom(vnode: VNode): Map<string, string | null> {
const props = (vnode.props ?? {}) as Record<string, unknown>;
return new Map(
MANAGED_ATTRS.map((name) => {
const v = props[name];
// Mirror Vue: null/undefined remove the attribute, and booleans render
// as "true"/"false", except inert, which Vue sets as a DOM property.
if (v === undefined || v === null) return [name, null];
Iif (name === "inert" && typeof v === "boolean") return [name, v ? "" : null];
return [name, String(v)];
})
);
}
function override(el: HTMLElement, state: State, name: string, value: string) {
state.overridden.add(name);
el.setAttribute(name, value);
}
function release(el: HTMLElement, state: State, name: string) {
if (!state.overridden.delete(name)) return;
const bound = state.bound.get(name) ?? null;
if (bound === null) el.removeAttribute(name);
else el.setAttribute(name, bound);
}
function show(el: HTMLElement, state: State) {
const look = resolveSkeletonAppearance({}, state.config.value.skeleton);
el.classList.remove(...ANIMATION_CLASSES);
el.classList.add(SKELETONIZE_CLASS, `${SKELETONIZE_CLASS}--${look.animation}`);
el.style.setProperty("--vslk-sk-base", look.base);
el.style.setProperty("--vslk-sk-hi", look.highlight);
el.style.setProperty("--vslk-sk-duration", look.duration);
override(el, state, "inert", "");
override(el, state, "aria-hidden", "true");
}
function hide(el: HTMLElement, state: State) {
el.classList.remove(SKELETONIZE_CLASS, ...ANIMATION_CLASSES);
for (const v of VARS) el.style.removeProperty(v);
for (const name of SKELETON_ATTRS) release(el, state, name);
}
/**
* v-skeleton="loading" or v-skeleton="{ loading, delay, minDuration }":
* restyles the element's real content into a skeleton of the same layout
* (see skeletonize.css). Only classes, attributes and CSS variables change.
*/
export const vSkeleton: ObjectDirective<HTMLElement, SkeletonDirectiveValue> = {
mounted(el, binding, vnode) {
const config = ref(configOf(binding)) as Ref<LoadingKitConfig>;
const state: State = {
scope: effectScope(true),
value: ref(resolve(binding.value, config.value)),
config,
shown: ref(false),
bound: boundFrom(vnode),
overridden: new Set(),
};
states.set(el, state);
// Anything SSR rendered that the template doesn't bind is ours to release.
for (const name of MANAGED_ATTRS) {
if (el.hasAttribute(name) && state.bound.get(name) === null) state.overridden.add(name);
}
release(el, state, "data-allow-mismatch"); // only needed during hydration
state.scope.run(() => {
const shown = useDelayedLoading(() => state.value.value.loading, {
delay: () => state.value.value.delay,
minDuration: () => state.value.value.minDuration,
});
watch(
() => state.value.value.loading,
(loading) => (loading ? override(el, state, "aria-busy", "true") : release(el, state, "aria-busy")),
{ immediate: true, flush: "sync" }
);
watch(
shown,
(isShown) => {
state.shown.value = isShown;
if (isShown) show(el, state);
else hide(el, state);
},
{ immediate: true, flush: "sync" }
);
});
},
updated(el, binding, vnode) {
const state = states.get(el);
Iif (!state) return;
state.bound = boundFrom(vnode);
state.config.value = configOf(binding);
state.value.value = resolve(binding.value, state.config.value);
/* Vue may just have re-patched class, style or the aria attributes
(e.g. a :class change mid-load), wiping what the directive set:
re-apply the current state. */
if (state.shown.value) show(el, state);
if (state.value.value.loading) override(el, state, "aria-busy", "true");
},
unmounted(el) {
const state = states.get(el);
Iif (!state) return;
state.scope.stop();
hide(el, state);
release(el, state, "aria-busy");
states.delete(el);
},
/* Directives don't run on the server. With delay 0 (placeholder data),
render the skeleton into the server HTML so fake content never shows,
and let hydration accept the attributes the client then also sets. */
getSSRProps(binding) {
const config = configOf(binding);
const v = resolve(binding.value, config);
if (!v.loading) return {};
if (v.delay > 0) return { "aria-busy": "true" };
const look = resolveSkeletonAppearance({}, config.skeleton);
return {
class: `${SKELETONIZE_CLASS} ${SKELETONIZE_CLASS}--${look.animation}`,
style: { "--vslk-sk-base": look.base, "--vslk-sk-hi": look.highlight, "--vslk-sk-duration": look.duration },
inert: "",
"aria-hidden": "true",
"aria-busy": "true",
"data-allow-mismatch": "class,style,attribute",
};
},
};
|