Add Decodal formatter

site/decodal-site/scripts/prepare-wasm-package.mjs

@@ -34,15 +34,15 @@ deno add jsr:@hare/decodal-wasm
 ## Usage
 
 \`\`\`js
-import init, { evaluateProject } from 'decodal-wasm';
+import init, { evaluateProject, formatSource } from 'decodal-wasm';
 
 await init();
 
-const result = evaluateProject(JSON.stringify({
-  entry: 'main.dcdl',
-  files: {
-    'main.dcdl': 'Server = { port = Int default 8080; };',
-  },
+const formatted = JSON.parse(formatSource('Server={port=Int default 8080;};'));
+console.log(formatted.source);
+
+const result = evaluateProject('main.dcdl', JSON.stringify({
+  'main.dcdl': 'Server = { port = Int default 8080; };',
 }));
 
 console.log(JSON.parse(result));

site/decodal-site/src/lib/docs.js

@@ -20,6 +20,7 @@ export const docs = Object.fromEntries(
 export const nav = [
   { title: 'Introduction', slug: 'introduction' },
   { title: 'Components', slug: 'components' },
+  { title: 'Formatting', slug: 'formatting' },
   {
     title: 'Language Specification',
     slug: 'language',

site/decodal-site/src/pages/playground.astro

@@ -15,6 +15,7 @@ import ManualLayout from '../layouts/ManualLayout.astro';
         </label>
         <button id="load-example" type="button">Load</button>
         <p id="status" class="status">Loading WASM...</p>
+        <button id="format" disabled>Format</button>
         <button id="run" disabled>Run</button>
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-import init, { evaluateProject } from 'decodal-wasm';
+import init, { evaluateProject, formatSource } from 'decodal-wasm';
 import { EditorView, basicSetup } from 'codemirror';
 import { keymap } from '@codemirror/view';
 import { decodal } from 'decodal-codemirror';
@@ -10,6 +10,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 +177,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));
@@ -229,6 +244,7 @@ function compareNodes(a, b) {
 try {
   await init();
   run.disabled = false;
+  formatButton.disabled = false;
   status.textContent = '';
   execute();
 } catch (error) {
@@ -236,6 +252,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;