hare-playground/frontend/app.js

import {CodeJar} from "./codejar.js"
import hljs from "./highlight.min.js"
import "./htmx.js"

htmx.defineExtension('json-enc', {
    onEvent: function (name, evt) {
        if (name === "htmx:configRequest") {
            evt.detail.headers['Content-Type'] = "application/json";
        }
    },

    encodeParameters : function(xhr, parameters, elt) {
        xhr.overrideMimeType('text/json');
        return (JSON.stringify(parameters));
    }
});

function highlight(editor) {
  editor.textContent = editor.textContent;
  editor.removeAttribute("data-highlighted");
  hljs.highlightElement(editor);
}

function base64ToBytes(base64) {
  const binString = atob(base64);
  return Uint8Array.from(binString, (m) => m.codePointAt(0));
}
function base64Encode(str) {
  return bytesToBase64(new TextEncoder().encode(str));
}

function bytesToBase64(bytes) {
  const binString = Array.from(bytes, (byte) =>
    String.fromCodePoint(byte),
  ).join("");
  return btoa(binString);
}
function base64Decode(bytes) {
  return new TextDecoder().decode(base64ToBytes(bytes));
}

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

function saveToStorage(code) {
  if (code.length) {
    localStorage.setItem("code", code);
  } else {
    localStorage.removeItem("code");
  }
}

let jar = CodeJar(document.querySelector('.editor'), highlight)
jar.onUpdate(debounce(saveToStorage));
const defaultCode = `use fmt;

export fn main() void = {
	const greetings = [
		"Hello, world!",
		"¡Hola Mundo!",
		"Γειά σου Κόσμε!",
		"Привіт, світ!",
		"こんにちは世界！",
	];
	for (let greeting .. greetings) {
		fmt::println(greeting)!;
	};
};`;

let savedCode = localStorage.getItem("code");
if (location.hash) {
  let code = base64Decode(location.hash.substr(1));
  jar.updateCode(code)

} else if (savedCode && savedCode.length) {
  jar.updateCode(savedCode);
} else {
  jar.updateCode(defaultCode);
}

document.getElementById("share-button").onclick = (e) => {
  e.preventDefault();
  let code = document.querySelector('.editor').innerText;
  location.hash = base64Encode(code);

  if (navigator.clipboard) {
    let text = location.href;
    navigator.clipboard.writeText(text).then(function() {
      document.getElementById("status").innerText = "✓ Link copied!"
    }, function(err) {
      document.getElementById("status").innerText = "✓ Link changed. Copy the URL now."
    });
  } else {
    document.getElementById("status").innerText = "✓ Link changed. Copy the URL now."
  }
};

window.getCode = function getCode() {
  return jar.toString();
}

let statusElem = document.getElementById("status");

document.body.addEventListener('htmx:beforeRequest', (event) => {
  let elem = document.getElementById("htmx-indicator");
  elem.style.display = "inline";
});
document.body.addEventListener('htmx:afterRequest', (event) => {
  let elem = document.getElementById("htmx-indicator");
  elem.style.display = "none";
});
document.body.addEventListener('htmx:beforeSwap', (event) => {
  let detail = event.detail;
  if (detail.isError) {
    statusElem.innerText = "✘ Failed";
    return;
  }

  detail.shouldSwap = false;
  statusElem.innerText = "✓ Done";

  let x = detail.xhr;
  let resp = JSON.parse(x.response);

  let output = document.querySelector(".code-output code.stderr");
  output.innerText = resp.stderr;
  output = document.querySelector(".code-output code.stdout");
  output.innerText = resp.stdout;
});