Playground

www/client_deps.ts

@@ -1,3 +1,2 @@
-
 export * from "https://raw.githubusercontent.com/load1n9/whistle_bindgen/main/lib.ts";
 export { default as wabt } from "https://esm.sh/[email protected]?target=esnext";

www/components/DocsSidebar.tsx

@@ -15,7 +15,7 @@ export default function DocsSidebar(props: { path: string }) {
 }
 
 const link = `text(gray-900 hover:gray-600)`;
-const linkActive =`text(blue-600 hover:blue-500)`;
+const linkActive = `text(blue-600 hover:blue-500)`;
 
 export function SidebarCategory(props: {
   path: string;

www/components/Loading.tsx

@@ -1,16 +1,14 @@
 // ported from https://github.com/suren-atoyan/monaco-react
 
 const loadingStyles = {
-  display: 'flex',
-  height: '100%',
-  width: '100%',
-  justifyContent: 'center',
-  alignItems: 'center',
+  display: "flex",
+  height: "100%",
+  width: "100%",
+  justifyContent: "center",
+  alignItems: "center",
 };
 
 // deno-lint-ignore no-explicit-any
 export default function Loading({ content }: any) {
-  return (
-    <div style={loadingStyles}>{content}</div>
-  );
-}
+  return <div style={loadingStyles}>{content}</div>;
+}

www/components/MonacoContainer.tsx

@@ -2,24 +2,22 @@
 
 import PropTypes from "https://esm.sh/[email protected]";
 
-
-import Loading from './Loading.tsx';
+import Loading from "./Loading.tsx";
 
 const styles = {
   wrapper: {
-    display: 'flex',
-    position: 'relative',
-    textAlign: 'initial',
+    display: "flex",
+    position: "relative",
+    textAlign: "initial",
   },
   fullWidth: {
-    width: '100%',
+    width: "100%",
   },
   hide: {
-    display: 'none',
+    display: "none",
   },
 };
 
-
 // ** forwardref render functions do not support proptypes or defaultprops **
 // one of the reasons why we use a separate prop for passing ref instead of using forwardref
 
@@ -31,7 +29,7 @@ function MonacoContainer({
   _ref,
   className,
   wrapperProps,
-// deno-lint-ignore no-explicit-any
+  // deno-lint-ignore no-explicit-any
 }: any) {
   return (
     <section style={{ ...styles.wrapper, width, height }} {...wrapperProps}>
@@ -48,7 +46,8 @@ function MonacoContainer({
 MonacoContainer.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  loading: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
+  loading:
+    PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
   isEditorReady: PropTypes.bool.isRequired,
   className: PropTypes.string,
   wrapperProps: PropTypes.object,

www/components/useMonaco.ts

@@ -1,9 +1,9 @@
 // ported from https://github.com/suren-atoyan/monaco-react
 
-import { useState } from 'preact/hooks';
+import { useState } from "preact/hooks";
 import loader from "https://esm.sh/@monaco-editor/[email protected]";
 
-import useMount from './useMount.ts';
+import useMount from "./useMount.ts";
 
 export default function useMonaco() {
   const [monaco, setMonaco] = useState(loader.__getMonacoInstance());

www/components/useMount.ts

@@ -1,6 +1,6 @@
 // ported from https://github.com/suren-atoyan/monaco-react
 
-import { useEffect } from 'preact/hooks';
+import { useEffect } from "preact/hooks";
 
 // deno-lint-ignore no-explicit-any
 export default function useMount(effect: any) {

www/data/playground.ts → www/data/wat_def.ts

@@ -1,174 +1,3 @@
-// deno-lint-ignore-file no-explicit-any
-export const WhistleLanguageDef = {
-  keywords: [
-    "import",
-    "as",
-    "from",
-    "export",
-    "fn",
-    "return",
-    "if",
-    "else",
-    "while",
-    "break",
-    "continue",
-    "var",
-    "val",
-    "none",
-    "for",
-    "in",
-    "match",
-    "type",
-    "struct",
-    "trait",
-  ],
-
-  typeKeywords: [
-    "none",
-    "str",
-    "bool",
-    "i8",
-    "i16",
-    "i32",
-    "i64",
-    "u8",
-    "u16",
-    "u32",
-    "u64",
-    "f32",
-    "f64",
-  ],
-
-  operators: [
-    "&&=",
-    "||=",
-    "&&",
-    "||",
-    "!",
-    "+=",
-    "-=",
-    "*=",
-    "/=",
-    "%=",
-    "**=",
-    "+",
-    "-",
-    "*",
-    "/",
-    "%",
-    "**",
-    "<<=",
-    ">>=",
-    "<<",
-    ">>",
-    "&=",
-    "|=",
-    "^=",
-    "&",
-    "|",
-    "^",
-    "~",
-    "==",
-    "!=",
-    "<=",
-    ">=",
-    "<",
-    ">",
-    "=",
-  ],
-
-  symbols: /[=><!~?:&|+\-*\/\^%]+/,
-
-  escapes:
-    /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
-
-  tokenizer: {
-    root: [
-      [/#\([a-zA-Z]\w*\)/, "annotation"],
-      [/[a-z_$][\w$]*/, {
-        cases: {
-          "@typeKeywords": "keyword",
-          "@keywords": "keyword",
-          "@default": "identifier",
-        },
-      }],
-      [/[A-Z][\w\$]*/, "type.identifier"],
-      { include: "@whitespace" },
-      [/[{}()\[\]]/, "@brackets"],
-      [/[<>](?!@symbols)/, "@brackets"],
-      [/@symbols/, {
-        cases: {
-          "@operators": "operator",
-          "@default": "",
-        },
-      }],
-
-      [/\d*\.\d+([eE][\-+]?\d+)?/, "number.float"],
-      [/0[xX][0-9a-fA-F]+/, "number.hex"],
-      [/\d+/, "number"],
-
-      [/[;,.]/, "delimiter"],
-
-      [/"([^"\\]|\\.)*$/, "string.invalid"],
-      [/"/, { token: "string.quote", bracket: "@open", next: "@string" }],
-
-      [/'[^\\']'/, "string"],
-      [/(')(@escapes)(')/, ["string", "string.escape", "string"]],
-      [/'/, "string.invalid"],
-    ],
-
-    comment: [
-      [/[^\/*]+/, "comment"],
-      [/\/\*/, "comment", "@push"],
-      ["\\*/", "comment", "@pop"],
-      [/[\/*]/, "comment"],
-    ],
-
-    string: [
-      [/[^\\"]+/, "string"],
-      [/@escapes/, "string.escape"],
-      [/\\./, "string.escape.invalid"],
-      [/"/, { token: "string.quote", bracket: "@close", next: "@pop" }],
-    ],
-
-    whitespace: [
-      [/[ \t\r\n]+/, "white"],
-      [/\/\*/, "comment", "@comment"],
-      [/\/\/.*$/, "comment"],
-    ],
-  },
-};
-
-
-export const WatPatterns = {
-  // the default separators except `@$`
-  wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
-  comments: {
-    lineComment: "//",
-    blockComment: ["/*", "*/"],
-  },
-  brackets: [
-    ["{", "}"],
-    ["[", "]"],
-    ["(", ")"],
-  ],
-  autoClosingPairs: [
-    { open: "{", close: "}" },
-    { open: "[", close: "]" },
-    { open: "(", close: ")" },
-    { open: '"', close: '"' },
-    { open: "'", close: "'" },
-  ],
-  surroundingPairs: [
-    { open: "{", close: "}" },
-    { open: "[", close: "]" },
-    { open: "(", close: ")" },
-    { open: '"', close: '"' },
-    { open: "'", close: "'" },
-    { open: "<", close: ">" },
-  ]
-};
-
 export const WatDefinitions = {
   // Set defaultToken to invalid to see what you do not tokenize yet
   // defaultToken: 'invalid',
@@ -328,31 +157,33 @@ export const WatDefinitions = {
     "set_global",
 
     "current_memory",
-    "grow_memory"
+    "grow_memory",
   ],
 
   typeKeywords: [
     "i32",
     "i64",
     "f32",
     "f64",
-    "anyfunc"
+    "anyfunc",
   ],
 
   operators: [
+    // deno-lint-ignore no-explicit-any
   ] as any,
 
   brackets: [
     ["(", ")", "bracket.parenthesis"],
     ["{", "}", "bracket.curly"],
-    ["[", "]", "bracket.square"]
+    ["[", "]", "bracket.square"],
   ],
 
   // we include these common regular expressions
   symbols: /[=><!~?:&|+\-*\/\^%]+/,
 
   // C# style strings
-  escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+  escapes:
+    /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
 
   // The main tokenizer for our languages
   tokenizer: {
@@ -362,8 +193,8 @@ export const WatDefinitions = {
         cases: {
           "@keywords": "keyword",
           "@typeKeywords": "type",
-          "@default": "type.identifier"
-        }
+          "@default": "type.identifier",
+        },
       }],
 
       // numbers
@@ -372,21 +203,22 @@ export const WatDefinitions = {
       // strings
       [/"/, { token: "string.quote", bracket: "@open", next: "@string" }],
 
-      [/[{}()\[\]]/, "@brackets"]
+      [/[{}()\[\]]/, "@brackets"],
+      // deno-lint-ignore no-explicit-any
     ] as any,
 
     comment: [
       [/[^\/*]+/, "comment"],
-      [/\/\*/, "comment", "@push"],    // nested comment
+      [/\/\*/, "comment", "@push"], // nested comment
       ["\\*/", "comment", "@pop"],
-      [/[\/*]/, "comment"]
+      [/[\/*]/, "comment"],
     ],
 
     string: [
       [/[^\\"]+/, "string"],
       [/@escapes/, "string.escape"],
       [/\\./, "string.escape.invalid"],
-      [/"/, { token: "string.quote", bracket: "@close", next: "@pop" }]
+      [/"/, { token: "string.quote", bracket: "@close", next: "@pop" }],
     ],
 
     whitespace: [