Reworking linter

Author: Zhincore

README.md

@@ -11,6 +11,13 @@ The missile knows where it is at all times. It knows this, because it has a debu
 - [`gitbook/` - GitBook integration](#gitbook-integration)
 - [`web/` - the main implementation](#web)
 
+## Deployment
+
+> TODO: A guide + separate the content yaml from the code
+
+You're more than welcome to fork this project for your own use.
+This repository is setup to be automatically deployed to GitHub Pages for every change made on the main branch.
+
 ## Development
 
 This project uses `pnpm`, run `pnpm i` to install dependencies for all sub-projects.
@@ -30,7 +37,7 @@ Refreshing the browser seems to be manual though.
 #### Releasing
 
 To release the integration to the org:
-0. 
+
 1. run `pnpm run publish` (**NOT** ~~`pnpm publish`~~)
 
 ### Web

web/src/lib/content.ts

@@ -1,5 +1,4 @@
 import contentRaw from "$content/guide.yaml";
-import YAML from "yaml";
 
 export const CONTENT = contentRaw as Content;
 
@@ -11,63 +10,3 @@ export interface Step {
 }
 
 export type Content = Record<string, Step>;
-
-// TODO: An editor/validator that would use this?
-/** Validates content and returns an error or undefined. */
-export function getContentError(content: string): string | undefined {
-  let data: Content;
-
-  try {
-    data = YAML.parse(content);
-  } catch (e) {
-    // Return yaml error as string
-    if (e instanceof YAML.YAMLError) {
-      return e.message;
-    }
-    // re-throw anything else
-    throw e;
-  }
-
-  try {
-    validateData(data);
-  } catch (e) {
-    if (typeof e === "string") return e;
-    throw e;
-  }
-}
-
-function validateData(data: Content) {
-  if (typeof data !== "object" || Array.isArray(data)) {
-    throw "Content must be object!";
-  }
-
-  if (!ensure(data, "start")) throw 'Missing "start" step!';
-
-  // validate steps
-  for (const [name, step] of Object.entries(data)) {
-    if (!("title" in step) || !step.title) {
-      throw `Step '${name}' is missing a title!`;
-    }
-
-    // validate each option if any
-    if ("options" in step && step.options) {
-      for (let i = 0; i < step.options.length; i++) {
-        const option = step.options[i];
-
-        if (!ensure(option, "label")) {
-          throw `Option ${i} of step '${name}' is missing a label!`;
-        }
-        if (!ensure(option, "target")) {
-          throw `Option ${i} ('${option.label}') of step '${name}' is missing a target!`;
-        }
-        if (!ensure(data, option.target)) {
-          throw `Option ${i} ('${option.label}') of step '${name}' is targeting step '${option.target}', which does not exist!`;
-        }
-      }
-    }
-  }
-}
-
-function ensure(container: Record<string, unknown>, what: string) {
-  return what in container && !!container[what];
-}

web/src/modes/editor/CodeMirror.tsx

@@ -11,6 +11,7 @@ export interface CodeMirrorProps {
   initialContent?: string;
   showStep?: string;
   onChange?: (content: string) => void;
+  onParsed?: (content: unknown) => void;
 }
 
 export function CodeMirror(props: CodeMirrorProps) {
@@ -20,7 +21,7 @@ export function CodeMirror(props: CodeMirrorProps) {
       basicSetup,
       oneDark,
       yaml(),
-      customLinter,
+      customLinter((c) => props.onParsed?.(c[0])),
       lintGutter(),
       keymap.of([indentWithTab]),
       ViewPlugin.define((view) => ({

web/src/modes/editor/Editor.tsx

@@ -7,33 +7,52 @@ import {
   Suspense,
   createMemo,
 } from "solid-js";
-import YAML from "yaml";
 import { contentToMermaid } from "../graph/mermaid";
 import { Button } from "$components/Button";
+import { download } from "./util";
+import { createScheduled, debounce } from "@solid-primitives/scheduled";
+import { Content, CONTENT } from "$lib/content";
 
 import "./editor.css";
-import { download } from "./util";
 
 const Mermaid = lazy(() =>
   import("../graph/Mermaid").then((m) => ({ default: m.Mermaid }))
 );
 
 export function Editor() {
   const [showStep, setShowStep] = createSignal<string>();
-  const [content, setContent] = createSignal(contentRaw);
-  const mermaid = createMemo(() => contentToMermaid(YAML.parse(content())));
+  const [content, setContent] = createSignal(CONTENT);
+
+  let rawContent = contentRaw;
+
+  // Update mermaid with a debounce
+  const scheduled = createScheduled((fn) => debounce(fn, 1000));
+  const deferredContent = createMemo<Content>((p) => {
+    const value = content();
+    return scheduled() ? value : p;
+  }, content());
+
+  const mermaid = createMemo<string>((last) => {
+    try {
+      return contentToMermaid(deferredContent());
+    } catch (e) {
+      if (import.meta.env.DEV) console.error(e);
+      return last;
+    }
+  }, "");
 
   return (
     <div id="editor" class="full-window">
       <CodeMirror
-        initialContent={content()}
-        onChange={setContent}
+        initialContent={contentRaw}
+        onChange={(c) => (rawContent = c)}
+        onParsed={setContent}
         showStep={showStep()}
       />
 
       <div class="full-window">
         <div class="toolbar">
-          <Button onClick={() => download("guide.yaml", content())}>
+          <Button onClick={() => download("guide.yaml", rawContent)}>
             Download YAML
           </Button>
           <Button