feat: playground

docs/specification/characters_letters_digits.md

@@ -1,7 +1,7 @@
-There are a few predefined rules that could not easily be written as valid
-EBNF or are used multiple times and therefor defined here to avoid repeating
-them. The EBNF rules for the identifiers `unicode_*` are written within
-comments as there is no real way to define them otherways.
+There are a few predefined rules that could not easily be written as valid EBNF
+or are used multiple times and therefor defined here to avoid repeating them.
+The EBNF rules for the identifiers `unicode_*` are written within comments as
+there is no real way to define them otherways.
 
 ```EBNF
 unicode_any       = // any Unicode code point

docs/specification/expressions.md

@@ -1,16 +1,16 @@
-An expression in _Whistle_ evaluates to a value, this could be through either [binary](#binary) or
-[unary expressions](#unary), or the special [conditional expression](#conditional).
+An expression in _Whistle_ evaluates to a value, this could be through either
+[binary](#binary) or [unary expressions](#unary), or the special
+[conditional expression](#conditional).
 
-> In the future, once [PR #21](https://github.com/whistle-lang/whistle/pull/21) gets merged, there
-> will be a new type of expression: that of the array slice and index accessors.
+> In the future, once [PR #21](https://github.com/whistle-lang/whistle/pull/21)
+> gets merged, there will be a new type of expression: that of the array slice
+> and index accessors.
 
 ## Unary
 
 A unary expression can be one of two things, either a primary or an operation.
-
-### Primary
-
-> TODO, Probably move this to a new file
+Due to the complexity and many different types of primary expressions the
+specification for them can be found [here](./primary_expressions).
 
 ### Operation
 

docs/specification/literals.md

@@ -1,8 +1,8 @@
-Literals are one of the essential parts of any program, they express values and one of the possible
-building blocks of an [expression](./expressions).
+Literals are one of the essential parts of any program, they express values and
+one of the possible building blocks of an [expression](./expressions).
 
-In _Whistle_ there are six literal types: booleans, integers, floats, characters, strings and the
-none literal.
+In _Whistle_ there are six literal types: booleans, integers, floats,
+characters, strings and the none literal.
 
 ```EBNF
 literal = bool_literal
@@ -15,18 +15,19 @@ literal = bool_literal
 
 ## Booleans
 
-Booleans represent a true or false value, it does this through the keywords `true` and `false`.
+Booleans represent a true or false value, it does this through the keywords
+`true` and `false`.
 
 ```EBNF
 bool_literal = "true" | "false"
 ```
 
 ## Integers
 
-Integers represent a whole number in either binary, octal, decimal or hexadecimal base. Integer
-literals are always positive/unsigned numbers, but this does not mean _Whistle_ only supports
-unsigned integers, instead to use signed integers one would use the [negate](./operators#unary)
-operator.
+Integers represent a whole number in either binary, octal, decimal or
+hexadecimal base. Integer literals are always positive/unsigned numbers, but
+this does not mean _Whistle_ only supports unsigned integers, instead to use
+signed integers one would use the [negate](./operators#unary) operator.
 
 ```EBNF
 int_literal         = int_literal_binary
@@ -41,10 +42,11 @@ int_literal_hex     = "0" , ( "x" | "X" ) , { digit_hex }
 
 ## Floating point numbers
 
-The float literal represents an [ieee754](https://en.wikipedia.org/wiki/IEEE_754) floating point
-number. This number can contain an optional fractional part and or exponent along with the whole
-part. Once again to negate the float literal one would use the [negate](./operators#unary)
-operator.
+The float literal represents an
+[ieee754](https://en.wikipedia.org/wiki/IEEE_754) floating point number. This
+number can contain an optional fractional part and or exponent along with the
+whole part. Once again to negate the float literal one would use the
+[negate](./operators#unary) operator.
 
 ```EBNF
 float_literal  = { digit_decimal } , [ float_decimal ] , [ float_exponent ]
@@ -54,9 +56,10 @@ float_exponent = ( "e" | "E" ) , [ "+" | "-" ] , { digit_decimal }
 
 ## Characters and strings
 
-The character literal represents a single unicode character while a string represents an sequence
-of these unicode characters. There are certain escaped values for things like newlines, tabs and
-null bytes. These escaped values apply for both the inner values of strings and characters.
+The character literal represents a single unicode character while a string
+represents an sequence of these unicode characters. There are certain escaped
+values for things like newlines, tabs and null bytes. These escaped values apply
+for both the inner values of strings and characters.
 
 ```EBNF
 escaped_value  = "\" , (""" | "\" | "r" | "n" | "t" | "0" | "'")

docs/toc.json

@@ -13,7 +13,8 @@
         "title": "Characters, letters and digits"
       },
       "literals": { "title": "Literals" },
-      "expressions": { "title": "Expressions" }
+      "expressions": { "title": "Expressions" },
+      "primary_expressions": { "title": "Primary Expressions" }
     }
   }
 }

www/client_deps.ts

@@ -1,7 +1,23 @@
-export * from "https://raw.githubusercontent.com/lucacasonato/fresh/main/runtime.ts";
 import { IS_BROWSER } from "https://raw.githubusercontent.com/lucacasonato/fresh/main/runtime.ts";
-import { apply, setup, tw } from "https://esm.sh/[email protected]";
+import {
+  apply,
+  Plugin,
+  setup,
+  ThemeConfiguration,
+  tw,
+} from "https://esm.sh/[email protected]";
+import * as config from "./tw_config.ts";
+
+export * as colors from "https://cdn.esm.sh/v73/[email protected]/es2021/colors.js";
+export * from "https://raw.githubusercontent.com/whistle-lang/whistle_deno/master/mod.ts";
+export * from "https://raw.githubusercontent.com/lucacasonato/fresh/main/runtime.ts";
+export { default as wabt } from "https://esm.sh/[email protected]?target=esnext";
+export { default as MonacoEditor } from "https://esm.sh/@monaco-editor/[email protected]?alias=react:@preact/compat,react-dom:@preact/compat";
+export type { Monaco } from "https://esm.sh/@monaco-editor/[email protected]?alias=react:@preact/compat,react-dom:@preact/compat";
+export type { MutableRef } from "https://cdn.esm.sh/v73/[email protected]/hooks/src/index";
 export { apply, setup, tw };
+export type { Plugin, ThemeConfiguration };
+
 if (IS_BROWSER) {
-  setup({});
+  setup(config);
 }

www/components/Footer.tsx

@@ -7,6 +7,10 @@ const LINKS = [
     title: "Source",
     href: "https://github.com/whistle-lang",
   },
+  {
+    title: "Discord",
+    href: "https://discord.gg/hdKxd5x"
+  }
 ];
 
 export default function Footer() {

www/components/Header.tsx

@@ -0,0 +1,15 @@
+/** @jsx h */
+/** @jsxFrag Fragment */
+
+import { h, tw } from "../client_deps.ts";
+import { IconWhistle } from "./Icons.tsx";
+
+export default function Header() {
+  return (
+    <header class={tw`md:mx-auto max-w-screen-lg flex gap-3 justify-between`}>
+      <div class={tw`p-4`}>
+        <IconWhistle />
+      </div>
+    </header>
+  );
+}

www/components/Icons.tsx

@@ -2,42 +2,26 @@
 
 import { h, tw } from "../client_deps.ts";
 
-export function IconMinus() {
+export function IconWhistle() {
   return (
-    <svg
-      class={tw`h-6 w-6`}
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      aria-hidden="true"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M20 12H4"
-      />
-    </svg>
+    <p class={tw`flex items-center`}>
+      <a href="/">
+        <img class={tw`h-12 mx-4`} src="/whistle_horizontal_dark.svg" />
+      </a>
+    </p>
   );
 }
 
-export function IconPlus() {
+export function IconChevron({ ...props }) {
   return (
     <svg
-      class={tw`h-6 w-6`}
+      {...props}
+      viewBox="6 8 12 8"
       xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
+      fill="currentColor"
       aria-hidden="true"
     >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-      />
+      <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path>
     </svg>
   );
 }

www/components/NavigationBar.tsx

@@ -16,10 +16,10 @@ export default function NavigationBar(props: { active: string }) {
       name: "Blog",
       href: "/blog",
     },
-    // {
-    //   name: "Playground",
-    //   href: "/playground",
-    // },
+    {
+      name: "Playground",
+      href: "/playground",
+    },
   ];
 
   return (

www/data/playground.ts

@@ -0,0 +1,139 @@
+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"],
+    ],
+  },
+};

www/fresh.gen.ts

@@ -8,6 +8,8 @@ import * as $2 from "./routes/blog/index.tsx";
 import * as $3 from "./routes/docs/[...slug].tsx";
 import * as $4 from "./routes/gfm.css.ts";
 import * as $5 from "./routes/index.tsx";
+import * as $6 from "./routes/playground.tsx";
+import * as $$0 from "./islands/Playground.tsx";
 
 const manifest = {
   routes: {
@@ -17,8 +19,11 @@ const manifest = {
     "./routes/docs/[...slug].tsx": $3,
     "./routes/gfm.css.ts": $4,
     "./routes/index.tsx": $5,
+    "./routes/playground.tsx": $6,
+  },
+  islands: {
+    "./islands/Playground.tsx": $$0,
   },
-  islands: {},
   baseUrl: import.meta.url,
 };