50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
|
|
|
|
export interface LabEvent {
|
|
id: number;
|
|
message: string;
|
|
time: string;
|
|
}
|
|
|
|
let instanceSequence = 0;
|
|
let eventSequence = 0;
|
|
|
|
export const labEvents = reactive<LabEvent[]>([]);
|
|
|
|
export function recordLabEvent(message: string) {
|
|
labEvents.unshift({
|
|
id: ++eventSequence,
|
|
message,
|
|
time: new Date().toLocaleTimeString([], {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
}),
|
|
});
|
|
if (labEvents.length > 18) labEvents.length = 18;
|
|
}
|
|
|
|
/**
|
|
* Give every Vue setup execution a visible identity. A scene-edge collapse
|
|
* and a forward push both retain the ID. A committed back only unmounts the
|
|
* entry being popped, then reveals the exact previous instance.
|
|
*/
|
|
export function useDemoInstance(label: string) {
|
|
const instance = `${label.slice(0, 2).toUpperCase()}-${String(
|
|
++instanceSequence,
|
|
).padStart(2, "0")}`;
|
|
const status = ref("created");
|
|
recordLabEvent(`${instance} created`);
|
|
|
|
onMounted(() => {
|
|
status.value = "mounted";
|
|
recordLabEvent(`${instance} mounted`);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
status.value = "unmounting";
|
|
recordLabEvent(`${instance} unmounted`);
|
|
});
|
|
|
|
return { instance, status };
|
|
}
|