Add language tools package

site/decodal-site/src/scripts/playground.js

@@ -1,4 +1,5 @@
-import init, { evaluateProject } from 'decodal-wasm';
+import initRuntime, { evaluateProject } from 'decodal-wasm';
+import initTools, { formatSource } from 'decodal-language-tools';
 import { EditorView, basicSetup } from 'codemirror';
 import { keymap } from '@codemirror/view';
 import { decodal } from 'decodal-codemirror';
@@ -10,6 +11,7 @@ const starterProject = playgroundExamples[0];
 const editorHost = document.getElementById('editor');
 const output = document.getElementById('output');
 const run = document.getElementById('run');
+const formatButton = document.getElementById('format');
 const status = document.getElementById('status');
 const fileTree = document.getElementById('file-tree');
 const activeFile = document.getElementById('active-file');
@@ -176,6 +178,20 @@ function execute() {
   output.classList.toggle('error', !result.ok);
 }
 
+function formatActiveFile() {
+  const result = JSON.parse(formatSource(getEditorText()));
+  if (!result.ok) {
+    output.textContent = result.error;
+    output.classList.add('error');
+    return;
+  }
+  setEditorText(result.source);
+  project.files[project.activePath] = result.source;
+  saveProject();
+  output.textContent = 'Formatted.';
+  output.classList.remove('error');
+}
+
 function renderFileTree() {
   const tree = buildTree(Object.keys(project.files).sort());
   fileTree.replaceChildren(renderTreeList(tree.children));
@@ -227,8 +243,9 @@ function compareNodes(a, b) {
 }
 
 try {
-  await init();
+  await Promise.all([initRuntime(), initTools()]);
   run.disabled = false;
+  formatButton.disabled = false;
   status.textContent = '';
   execute();
 } catch (error) {
@@ -236,6 +253,7 @@ try {
 }
 
 run.addEventListener('click', execute);
+formatButton.addEventListener('click', formatActiveFile);
 loadExample.addEventListener('click', () => {
   const example = playgroundExamples.find((item) => item.id === exampleSelect.value);
   if (!example) return;