Using Observable for software engineering, programming language and user interface research.
render(htm`<svg width=100 height=100>
<circle cx=50 cy=50 r=50 fill=#673ab8 />
<text fill=white font-size=60 x=30 y=70 font-family="Helvetica,Arial">P.</text></svg>`)
render(
html.div(
html.p("To use preact:"),
html.ul(
html.li("Use the ", html.code("html"), " or ", html.code("svg"), " functions to create virtual nodes"),
html.li("Use the ", html.code("render"), " function to render your virtual nodes into a container, or the document itself by default"))))
render(
svg.svg({width:300,height:300,viewBox:"0 0 600 600"},
svg.circle({cx:200,cy:400,r:200,fill:"red", opacity:0.5}),
svg.circle({cx:300,cy:200,r:200,fill:"green", opacity:0.5}),
svg.circle({cx:400,cy:400,r:200,fill:"blue", opacity:0.5})))
Counter = (props,dispatch) => {
const {count} = props
return html.div("Counter: ", count, " ", html.button({onclick:_=>dispatch("inc")}, "+"))
}
stateful(Counter, CounterController, state => {mutable CounterState = state})(CounterState)
render((()=>{
const [count, setCount] = useState(0);
return html.div("Counter: ", count, " ", html.button({onclick:_=>setCount(count+1)}, "+"))
})(), "stateful")
stateful = (component,controller,updater)=>{
var rev = undefined;
var cached = undefined;
var root = document.createElement("div")
const renderer = (state)=> {
state.rev = state.rev || 0;
if (!state || rev !== state.rev) {
cached = component(state, (...args) => updater(controller(state, ...args)||state))
}
render(cached, root);
return root;
}
return renderer;
}
isAttributes = attr => attr instanceof Object && (!(attr instanceof Array)) && (!(attr.props))
PreactVersion = "10.10.2"
useState = preact.useState
htm = (await require("htm@1/dist/htm.js")).bind(preact.createElement)
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.
