index.html

<!DOCTYPE html>
<html>

<head>
	<title>haystack-core</title>
	<script src='https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js'></script>
</head>

<body>
	<h3>Loaded haystack core in global 'hs' namespace. Open the developer console and get hacking!</h3>

	<h2>Zinc input</h2>
	<textarea style='width: 800px; height: 500px' id='zinc'></textarea>
	<div>
		<button onclick='parseZinc()'>Parse Zinc</button>
	</div>
	<h2>Hayson output</h2>
	<textarea style='width: 800px; height: 500px' id='output'>
	</textarea>
	<script src="dist/bundle.js"></script>
	<script>
		function parseZinc() {
			// Do this asynchronously to avoid click timeouts in the browser.
			setTimeout(function () {
				const zinc = document.getElementById('zinc').value
				let value
				try {
					value = hs.zinc(zinc)
				}
				catch (err) {
					try {
						value = hs.trio(zinc)
					}
					catch (err2) {
						throw err
					}
				}
				console.log(value)
				document.getElementById('output').value = JSON.stringify(value, null, 2)
				window.grid = window.output = value
			}, 0)
		}

		async function createContext() {
			const resp = await fetch('/spec/core/files/defs.trio')
			const trio = await resp.text()
			const grid = hs.trio(trio)
			window.cx = { namespace: hs.defs(grid) }
		}

		async function fetchDb() {
			const resp = await fetch('/spec/core/files/db.zinc')
			document.getElementById('zinc').innerHTML = await resp.text()
		}

		async function start() {
			await Promise.all([
				createContext(),
				fetchDb()
			])
		}

		start()
	</script>
</body>

</html>