👀 Reading hidden code
using JSON
Modify x, add and remove elements, and notice that preact maintains its state.
👀 Reading hidden code
"hi!"
"pluto is cool"
232
2
2
12
12
2
21
1
2
👀 Reading hidden code
x = ["hi!", "pluto is cool", 232,2,2,12 ,12,2,21,1,2]
👀 Reading hidden code
HTML("""
<script type="module" id="asdf">
//await new Promise(r => setTimeout(r, 1000))
const { html, render, Component, useEffect, useLayoutEffect, useState, useRef, useMemo, createContext, useContext, } = await import( "https://cdn.jsdelivr.net/npm/htm@3.0.4/preact/standalone.mjs")
const node = this ?? document.createElement("div")
if(this == null){
const Item = ({value}) => {
const [loading, set_loading] = useState(true)
useEffect(() => {
set_loading(true)
const handle = setTimeout(() => {
set_loading(false)
}, 1000)
return () => clearTimeout(handle)
}, [value])
return html`<li>\${loading ?
html`<em>Loading...</em>` :
value
}</li>`
}
const App = () => {
const [state, set_state] = useState(new_state)
node.set_app_state = set_state
return html`<h1>Hello world!</h1>
<ul>\${
state.x.map((x,i) => html`<\${Item} value=\${x} key=\${i}/>`)
}</ul>`;
}
render(html`<\${App}/>`, node);
} else {
node.set_app_state(new_state)
}
return node
</script>
""")
:x
"hi!"
"pluto is cool"
232
2
2
12
12
2
21
1
2
state = Dict(
:x => x
)
👀 Reading hidden code