|
| 1 | +// The Playground page, docs/playground/index.md: formats the code on the left into the pane on the right, in the |
| 2 | +// browser. The formatter is a WebAssembly module, open-java-format.js and open-java-format.js.wasm, which the build |
| 3 | +// puts next to the page; it is the one the release named by ojf_version carries. |
| 4 | +// |
| 5 | +// Loaded on every page through extra_javascript, and it does nothing on a page without #playground. The site |
| 6 | +// navigates without reloading (navigation.instant), so the page is set up on every arrival through document$, |
| 7 | +// while the module, which defines globals, is loaded once per visit. |
| 8 | + |
| 9 | +(function () { |
| 10 | + "use strict"; |
| 11 | + |
| 12 | + // The smallest module with a WebAssembly GC type, a struct of one i8: what browsers without GC reject. |
| 13 | + const WASM_GC_PROBE = new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0, 1, 5, 1, 95, 1, 120, 0]); |
| 14 | + |
| 15 | + // Settles with globalThis.openJavaFormat, or rejects with "missing" when the site has no module, or the error. |
| 16 | + let module = null; |
| 17 | + |
| 18 | + function supportsWasmGc() { |
| 19 | + try { |
| 20 | + return typeof WebAssembly === "object" && WebAssembly.validate(WASM_GC_PROBE); |
| 21 | + } catch { |
| 22 | + return false; |
| 23 | + } |
| 24 | + } |
| 25 | + |
| 26 | + function loadModule(wrapperUrl) { |
| 27 | + if (module === null) { |
| 28 | + module = new Promise((resolve, reject) => { |
| 29 | + const script = document.createElement("script"); |
| 30 | + script.src = wrapperUrl; |
| 31 | + script.onload = resolve; |
| 32 | + script.onerror = () => { |
| 33 | + // Not there at all is the release without a module; anything else is a failed download. |
| 34 | + fetch(wrapperUrl, { method: "HEAD" }).then( |
| 35 | + (response) => reject(response.status === 404 ? "missing" : new Error(`HTTP ${response.status}`)), |
| 36 | + reject, |
| 37 | + ); |
| 38 | + }; |
| 39 | + document.head.append(script); |
| 40 | + }) |
| 41 | + .then(() => { |
| 42 | + // The wrapper does not start the module by itself (-H:-AutoRunVM): GraalVM.run settles once it has. |
| 43 | + const config = new GraalVM.Config(); |
| 44 | + config.wasm_path = `${wrapperUrl}.wasm`; |
| 45 | + return GraalVM.run([], config); |
| 46 | + }) |
| 47 | + .then(() => globalThis.openJavaFormat); |
| 48 | + // A failed load is tried again on the next visit to the page; "missing" stays missing until a reload. |
| 49 | + module.catch((error) => { |
| 50 | + if (error !== "missing") { |
| 51 | + module = null; |
| 52 | + } |
| 53 | + }); |
| 54 | + } |
| 55 | + return module; |
| 56 | + } |
| 57 | + |
| 58 | + function setUp(root) { |
| 59 | + const source = root.querySelector("#ojf-source"); |
| 60 | + const output = root.querySelector("#ojf-output"); |
| 61 | + const button = root.querySelector("#ojf-format"); |
| 62 | + const copy = root.querySelector("#ojf-copy"); |
| 63 | + |
| 64 | + const show = (state) => { |
| 65 | + root.dataset.state = state; |
| 66 | + for (const message of root.querySelectorAll(".ojf-playground__status [data-state]")) { |
| 67 | + message.hidden = message.dataset.state !== state; |
| 68 | + } |
| 69 | + }; |
| 70 | + |
| 71 | + // "macOS" from userAgentData, "MacIntel" or "iPhone" from the older navigator.platform. |
| 72 | + if (/mac|iphone|ipad/i.test(navigator.userAgentData?.platform ?? navigator.platform)) { |
| 73 | + root.querySelector("#ojf-modifier").textContent = "⌘"; |
| 74 | + } |
| 75 | + |
| 76 | + if (!supportsWasmGc()) { |
| 77 | + show("unsupported"); |
| 78 | + return; |
| 79 | + } |
| 80 | + |
| 81 | + show("loading"); |
| 82 | + loadModule(new URL("open-java-format.js", document.location.href).href).then( |
| 83 | + (openJavaFormat) => { |
| 84 | + const format = () => { |
| 85 | + const started = performance.now(); |
| 86 | + const result = openJavaFormat.format(source.value); |
| 87 | + const millis = performance.now() - started; |
| 88 | + output.value = result.ok ? result.output : result.error; |
| 89 | + output.classList.toggle("ojf-playground__output--error", !result.ok); |
| 90 | + copy.hidden = !result.ok; |
| 91 | + if (result.ok) { |
| 92 | + root.querySelector("[data-millis]").textContent = Math.max(1, Math.round(millis)).toString(); |
| 93 | + show("formatted"); |
| 94 | + } else { |
| 95 | + // A diagnostic starts with line:column; anything else is an exception from the formatter. |
| 96 | + show(/^\d+:\d+: /.test(result.error) ? "error" : "bug"); |
| 97 | + } |
| 98 | + }; |
| 99 | + button.addEventListener("click", format); |
| 100 | + source.addEventListener("keydown", (event) => { |
| 101 | + if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) { |
| 102 | + event.preventDefault(); |
| 103 | + format(); |
| 104 | + } |
| 105 | + }); |
| 106 | + copy.addEventListener("click", () => { |
| 107 | + navigator.clipboard.writeText(output.value).then(() => { |
| 108 | + copy.textContent = "Copied"; |
| 109 | + setTimeout(() => (copy.textContent = "Copy"), 1500); |
| 110 | + }); |
| 111 | + }); |
| 112 | + button.disabled = false; |
| 113 | + show("ready"); |
| 114 | + }, |
| 115 | + (error) => { |
| 116 | + if (error !== "missing") { |
| 117 | + console.error("open-java-format did not load", error); |
| 118 | + } |
| 119 | + show(error === "missing" ? "missing" : "failed"); |
| 120 | + }, |
| 121 | + ); |
| 122 | + } |
| 123 | + |
| 124 | + document$.subscribe(() => { |
| 125 | + const root = document.getElementById("playground"); |
| 126 | + if (root !== null) { |
| 127 | + setUp(root); |
| 128 | + } |
| 129 | + }); |
| 130 | +})(); |
0 commit comments