Julia WASM as a JS package
The Julia WASM build can be used to execute Julia code from JavaScript! This notebook shows off two use cases!
For more info, see the Julia WASM project and a demo of Pluto running inside WASM.
If you are interested in helping us with WASM development, please get in touch with me or Keno Fischer. If you find WASM interesting and useful, please spread the word!
👀 Reading hidden code
Julia REPL inside your browser
👀 Reading hidden code
3-element Array{Float64,1}:
1.0
1.4142135623730951
1.7320508075688772👀 Reading hidden code
Autograde simple exercises
Without a Julia process!
👀 Reading hidden code
Exercise 5.2
👉 Write an expression that returns true. Given is x = 100
👀 Reading hidden code
Correct!
mini_repl(;
default = "sqrt(x) == 10",
setup_code = "x = 100",
dramatic_timeout = 0.5,
post_process_function_code = quote
result -> if !isa(result, Bool)
"You should return true or false"
elseif result == true
HTML("<div style='padding: 1em; margin: 1em; font-family: system-ui; border-radius: 5px; background: lightgreen;'>
Correct!
</div>")
else
HTML("<div style='padding: 1em; margin: 1em; font-family: system-ui; border-radius: 5px; background: #ffbbbb;'>
Keep working on it!
</div>")
end
end
)
👀 Reading hidden code
👀 Reading hidden code
using HypertextLiteral
👀 Reading hidden code
missingcode
👀 Reading hidden code
mini_repl (generic function with 1 method)function mini_repl(;
default::String = "1 + 1",
setup_code::String = "",
dramatic_timeout::Real = 0,
post_process_function_code::Union{Expr,String} = "identity",
)
@htl("""
<div>
$(wasm_setup)
<textarea style='width: 100%' rows=5></textarea>
<button>Run!</button>
<div class='jl-wasm-output'><marquee>Loading WASM...</marquee></div>
<script>
let div = currentScript.parentElement
let text = div.querySelector("textarea")
let button = div.querySelector("button")
let output_div = div.querySelector(".jl-wasm-output")
text.value = div.value ?? $(default)
let currentValue = text.value
Object.defineProperty(div, 'value', {
get() { return currentValue; },
set(newValue) {
text.value = newValue;
currentValue = newValue
button.click()
},
});
text.addEventListener("input", (e) => {
e.stopPropagation()
})
text.addEventListener("keydown", e => {
let is_mac_keyboard = /Mac/.test(navigator.platform)
let ctrldown = e.ctrlKey || (is_mac_keyboard && e.metaKey)
if(e.key === "Enter" && (e.shiftKey || ctrldown)) {
e.preventDefault()
button.click()
}
});
const pre = (x) => html`<pre><code>\${x}</code></pre>`
let set_output_element = (el) => {
button.disabled = false
button.innerText = "Run!"
output_div.style.opacity = 1
Array.from(output_div.children).forEach(x => x.remove())
output_div.append(el)
}
button.addEventListener("click", async (e) => {
button.disabled = true
button.innerText = "Loading..."
output_div.style.opacity = .5
currentValue = text.value
e.stopPropagation()
div.dispatchEvent(new CustomEvent("input"))
await new Promise(r => setTimeout(r, $(dramatic_timeout) * 1000)) // for dramatic effect
await window.jl_wasm.ready
let ran_code = false
try {
const result_ptr = window.jl_wasm.eval_jl(`
\${$(setup_code)}
___post_process = \${$(string(post_process_function_code))}
___result = begin
\${currentValue}
end
___post_process(___result)
`)
ran_code = true
const html_showable = window.jl_wasm.std.html_showable(result_ptr)
const repred = html_showable ? window.jl_wasm.std.repr_html(result_ptr) : window.jl_wasm.std.repr(result_ptr)
let el = html_showable ?
(new DOMParser()).parseFromString(repred, "text/html")
.body.firstElementChild :
pre(repred)
set_output_element(el)
} catch (e) {
set_output_element(pre(
(ran_code ? "Failed to show object" : "Failed to run code") + e))
}
})
button.click()
</script>
</div>
""")
end
👀 Reading hidden code
10.090909090909092mini_repl(;
setup_code = "x = 999",
default = "x / 99",
)
👀 Reading hidden code
2mybond = @bind code mini_repl()
👀 Reading hidden code
2mybond
👀 Reading hidden code
wasm_setup = @htl("""
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/fonsp/Pluto.jl@1a004af05111894b5ff8916fe82dca320ddb0a1e/frontend/jl_wasm.js"></script>
<!-- <script src="https://fonsp-julia-wasm-build.netlify.app/hello-no-bysyncify.js"></script> -->
<script src="https://keno.github.io/julia-wasm-build/hello-no-bysyncify.js"></script>
""")
👀 Reading hidden code