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"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.