Draftlog is a great tool for creating rich terminal logging experiences.
However, using it feels kind of imperative when coming from a data-driven frontend world (insofar as you have to decide on your own when to re-apply data and call the draft
function again).
This little code snippet marries Draftlog with the @vue/reactivity
(one of the earlier implementation of the signals pattern in the web development world).
You basically keep using console.draft()
just as before, but you can pass it reactive data which will cause the draft to update automatically when that data changes.
// Set up console.draft()
import './draftlog-vue'
// Get reactive primitives
import { ref, computed } from '@vue/reactivity'
// Get the current time in a reactive way
const date = ref(new Date())
const clock = computed(() => date.value.toLocaleTimeString())
// Update the current date every second
setInterval(() => date.value = new Date(), 1000)
console.draft('Current time:', clock)
Side note: Calling console.draft()
will still return an function which you can use to update the draft. However, you will see yourself doing this way less often.