Vue Reactivity in Notebook
Vue Components in Notebook
import {Vue} from "@unluckyninja/vue"
Vue
view1 = {
const ele = htl.html`<div />` // document.createElement('div')
Vue.createApp({
template: '<p>"Hello, world!"</p>',
}).mount(ele)
return ele
}
view1
mutable time = 0
updateTime = ()=>{
mutable time = Date.now()
}
{
invalidation.then(()=>{
updateTime()
})
return md`Click run button on this cell will trigger it.`
}
time
invalInOtherCell = (text)=>{
invalidation.then(()=>{
updateTime()
})
return text || md`Click run button on this cell will trigger it.`
}
invalInOtherCell(md`Notice \`time\` doesn\'t change if you rerun this cell`)
{
return Generators.observe(notify=>{
notify(md`Click run button on this cell will trigger it.<br> This works in referencing cell`) // value that should be returned by the cell
return ()=>{ updateTime() } // invalidation hook
})
}
time
generatorsInOtherCell = (text)=>{
return Generators.observe(notify=>{
notify(text || md`Click run button on this cell will trigger it.<br> This works in referencing cell`) // value that should be returned by the cell
return ()=>{ updateTime() } // invalidation hook
})
}
generatorsInOtherCell(md`Notice \`time\` changed.`)
time
generatorObject(md`Rerun this cell.`)
generatorObject = (text)=>{
let done = false
return {
next(){
if (done) return {done: true};
done = true;
return {done: false, value: text};
},
return(){
updateTime()
}
}
}
testVueApp('Check your browser console. No matter how many time you run this cell, it should be only one logger at a time')
testVueApp = (text)=>{
const ele = htl.html`<div />`
let app = Vue.createApp({
template: `<p>${text}</p>`,
setup(){
const handle = setInterval(()=>{
console.log('Beep')
}, 1000)
return {
handle
}
},
unmounted(){
console.log('Unmounted!')
clearInterval(this.handle)
}
})
app.mount(ele)
return Generators.observe(notify=>{
notify(ele)
return ()=>{ app.unmount() }
})
}
unocss = import('https://cdn.jsdelivr.net/npm/@unocss/runtime/uno.global.js')
<div class="p-2 bg-blue"><div class="p-2 text-yellow border-solid border-red rounded">123123</div></div>
createVueApp = (componentOptions, callback)=>{
const ele = htl.html`<div />`
let oldInstance = typeof callback === 'function' ? callback() : callback
let app = typeof componentOptions === 'function' ? Vue.createApp(componentOptions(oldInstance)) : Vue.createApp(componentOptions)
app.mount(ele)
return Generators.observe(notify=>{
notify(ele)
return ()=>{ app.unmount() }
})
}
import {toc} from "@nebrius/indented-toc"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
