Feat/add zig wasm

docs/docs/languages/zig-wasm.mdx

@@ -0,0 +1,107 @@
+# Zig (Wasm)
+
+Zig is a general-purpose programming language and toolchain for maintaining robust, optimal, and reusable software.
+
+In LiveCodes, Zig runs in the browser using WebAssembly with a WASI-compatible runtime environment.
+
+## Usage
+
+Demo:
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+export const zigConfig = {
+  activeEditor: 'script',
+  script: {
+    language: 'zig-wasm',
+    content: `const std = @import("std");\n
+pub fn main() !void {
+    const stdout = std.io.getStdOut().writer();\n
+    const sorted_array = [_]i32{ 1, 3, 5, 7, 9, 11, 13, 15 };
+    const item_to_search: i32 = 7;\n
+    const result = binarySearch(i32, &sorted_array, item_to_search);\n
+    if (result == -1) {
+        try stdout.print("Result: Item not found in the array.\\n", .{});
+    } else {
+        try stdout.print("Result: Item found at index -> {}\\n", .{result});
+    }
+}\n
+fn binarySearch(comptime T: type, arr: []const T, item: T) i32 {
+    var left: usize = 0;
+    var right: usize = arr.len;\n
+    while (left < right) {
+        const mid = left + (right - left) / 2;\n
+        if (arr[mid] == item) {
+            return @intCast(mid);
+        }\n
+        if (arr[mid] > item) {
+            right = mid;
+        } else {
+            left = mid + 1;
+        }
+    }\n
+    return -1;
+}`,
+  },
+  mode: 'simple',
+  editor: 'auto',
+  tools: {
+    status: 'full',
+  },
+};
+
+<LiveCodes config={zigConfig}></LiveCodes>
+
+### Communication with JavaScript
+
+The Zig code runs in the context of the result page. A few helper properties and methods are available in the browser global `livecodes.zig` object:
+
+- `livecodes.zig.input`: The initial standard input passed to the Zig code.
+- `livecodes.zig.loaded`: A promise that resolves when the Zig environment (WebAssembly runtime) is fully loaded (and rejects if it fails to load). Other helpers should be used after this promise resolves.
+- `livecodes.zig.output`: The standard output from the Zig code execution.
+- `livecodes.zig.run`: A function that runs the Zig code with new input. This function takes a string as input and returns a promise that resolves with an object containing the `output`, `error`, and `exitCode` properties.
+
+Example:
+
+<LiveCodes template="zig-wasm" params={{ activeEditor: 'markup' }} height="80vh"></LiveCodes>
+
+## Language Info
+
+### Name
+
+`zig-wasm`
+
+### Aliases / Extensions
+
+`zig`, `zig-wasm`
+
+### Editor
+
+`script`
+
+## Compiler
+
+Zig compiler in WebAssembly.
+
+### Version
+
+Zig 0.14.0
+
+## Code Formatting
+
+Code formatting is not currently available for Zig.
+
+## Live Reload
+
+By default, new code changes are sent to the result page for re-evaluation without a full page reload, avoiding the need to reinitialize the Zig WebAssembly environment. This behavior can be disabled by adding the code comment `// __livecodes_reload__` to the Zig code, which forces a full page reload.
+
+This comment can be added in the `hiddenContent` property of the editor for embedded playgrounds.
+
+## Starter Template
+
+https://livecodes.io/?template=zig-wasm
+
+## Links
+
+- [Zig](https://ziglang.org/)
+- [Zig documentation](https://ziglang.org/documentation/master/index.html)
+

docs/src/components/LanguageSliders.tsx

@@ -110,6 +110,7 @@ export default function Sliders() {
       { name: 'prolog', title: 'Prolog' },
       { name: 'minizinc', title: 'MiniZinc' },
       { name: 'blockly', title: 'Blockly' },
+      { name: 'zig-wasm', title: 'Zig (Wasm)' },
     ],
   };
   const slides = ['markup', 'style', 'script'];

docs/src/components/TemplateList.tsx

@@ -71,6 +71,7 @@ const templates = [
   { name: 'minizinc', title: 'MiniZinc Starter', thumbnail: 'minizinc.png' },
   { name: 'blockly', title: 'Blockly Starter', thumbnail: 'blockly.svg' },
   { name: 'diagrams', title: 'Diagrams Starter', thumbnail: 'diagrams.svg' },
+  { name: 'zig-wasm', title: 'Zig (Wasm) Starter', thumbnail: 'zig.svg' },
 ];
 
 export default function TemplateList() {

functions/vendors/templates.js

@@ -46,6 +46,7 @@ export const starterTemplates = {
   "php-wasm": "PHP (Wasm) Starter",
   "cpp": "C++ Starter",
   "cpp-wasm": "C++ (Wasm) Starter",
+  "zig-wasm": "Zig (Wasm) Starter",
   "java": "Java Starter",
   "csharp-wasm": "C# (Wasm) Starter",
   "fsharp": "F# Starter",

scripts/build.js

@@ -230,6 +230,7 @@ const iifeBuild = () =>
       'languages/cpp-wasm/lang-cpp-wasm-script.ts',
       'languages/go-wasm/lang-go-wasm-script.ts',
       'languages/csharp-wasm/lang-csharp-wasm-script.ts',
+      'languages/zig-wasm/lang-zig-wasm-script.ts',
       'languages/dot/lang-dot-compiler.ts',
       'languages/ejs/lang-ejs-compiler.ts',
       'languages/eta/lang-eta-compiler.ts',

server/php/inc/starter-templates.json

@@ -46,6 +46,7 @@
   "php-wasm": "PHP (Wasm) Starter",
   "cpp": "C++ Starter",
   "cpp-wasm": "C++ (Wasm) Starter",
+  "zig-wasm": "Zig (Wasm) Starter",
   "java": "Java Starter",
   "csharp-wasm": "C# (Wasm) Starter",
   "fsharp": "F# Starter",

src/livecodes/UI/command-menu-actions.ts

@@ -302,6 +302,7 @@ export const getCommandMenuActions = ({
         'php-wasm',
         'cpp',
         'cpp-wasm',
+        'zig-wasm',
         'java',
         'csharp-wasm',
         'fsharp',

src/livecodes/editor/monaco/monaco.ts

@@ -240,8 +240,9 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   const loadMonacoLanguage = async (lang: Language) => {
     const langSupport = getLanguageSpecs(lang)?.editorSupport?.monaco?.languageSupport;
-    if (langSupport && !loadedLanguages.has(lang)) {
-      loadedLanguages.add(lang);
+    const mappedLanguage = mapLanguage(lang, 'monaco');
+    if (langSupport && !loadedLanguages.has(mappedLanguage)) {
+      loadedLanguages.add(mappedLanguage);
       const loadLanguage =
         typeof langSupport === 'string'
           ? (await import(langSupport)).default

src/livecodes/html/language-info.html

@@ -341,6 +341,39 @@ <h3 data-i18n="language-info:csharpWasm.name">C# (Wasm)</h3>
     </li>
   </ul>
 </section>
+
+<section data-lang="zig-wasm">
+  <h3 data-i18n="language-info:zigWasm.name">Zig (Wasm)</h3>
+  <div data-i18n="language-info:zigWasm.desc" data-i18n-prop="innerHTML">
+    Zig compiler running on WebAssembly.
+  </div>
+  <ul data-i18n="language-info:zigWasm.link" data-i18n-prop="innerHTML">
+    <li>
+      <a href="https://ziglang.org/" target="_blank" rel="noopener">Zig website</a>
+    </li>
+    <li>
+      <a href="https://ziglang.org/documentation/master/" target="_blank" rel="noopener"
+        >Zig language documentation</a
+      >
+    </li>
+    <li>
+      <a href="https://learnxinyminutes.com/docs/zig/" target="_blank" rel="noopener"
+        >Learn X in Y minutes, where X=Zig</a
+      >
+    </li>
+    <li>
+      <a href="{{DOCS_BASE_URL}}languages/zig-wasm" target="_blank" rel="noopener"
+        >LiveCodes Documentation</a
+      >
+    </li>
+    <li>
+      <a href="?template=zig-wasm" class="button" target="_parent" data-template="zig-wasm"
+        >Load starter template</a
+      >
+    </li>
+  </ul>
+</section>
+
 <section data-lang="diagrams">
   <h3 data-i18n="language-info:diagrams.name">Diagrams</h3>
   <div data-i18n="language-info:diagrams.desc1" class="description warn">(Experimental)</div>

src/livecodes/i18n/locales/en/language-info.lokalise.json

@@ -1071,5 +1071,17 @@
   "wat.name": {
     "notes": "",
     "translation": "WebAssembly Text Format"
+  },
+  "zigWasm.desc": {
+    "notes": "",
+    "translation": "Zig compiler running on WebAssembly."
+  },
+  "zigWasm.link": {
+    "notes": "### <tag-1> ###\n<li  />\n\n### <tag-2> ###\n<a href=\"https://ziglang.org/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-3> ###\n<li  />\n\n### <tag-4> ###\n<a href=\"https://ziglang.org/documentation/master/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-5> ###\n<li  />\n\n### <tag-6> ###\n<a href=\"https://learnxinyminutes.com/docs/zig/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-7> ###\n<li  />\n\n### <tag-8> ###\n<a href=\"{{DOCS_BASE_URL}}languages/zig-wasm\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-9> ###\n<li  />\n\n### <tag-10> ###\n<a href=\"?template=zig-wasm\" class=\"button\" target=\"_parent\" data-template=\"zig-wasm\" />\n\n",
+    "translation": "<tag-1> <tag-2>Zig website</tag-2> </tag-1> <tag-3> <tag-4>Zig language documentation</tag-4> </tag-3> <tag-5> <tag-6>Learn X in Y minutes, where X=Zig</tag-6> </tag-5> <tag-7> <tag-8>LiveCodes Documentation</tag-8> </tag-7> <tag-9> <tag-10>Load starter template</tag-10> </tag-9>"
+  },
+  "zigWasm.name": {
+    "notes": "",
+    "translation": "Zig (Wasm)"
   }
 }

src/livecodes/i18n/locales/en/language-info.ts

@@ -459,6 +459,11 @@ const languageInfo = {
     link: '<1><2>WebAssembly.org</2></1> <3> <4>WebAssembly Text Specs</4> </3> <5> <6>WebAssembly on MDN</6> </5> <7> <8>Understanding WebAssembly text format</8> </7> <9> <10>wabt.js documentation</10> </9> <11> <12>Learn X in Y minutes, where X=WebAssembly</12> </11> <13> <14>Load starter template</14> </13>',
     name: 'WebAssembly Text Format',
   },
+  zigWasm: {
+    desc: 'Zig compiler running on WebAssembly.',
+    link: '<1> <2>Zig website</2> </1> <3> <4>Zig language documentation</4> </3> <5> <6>Learn X in Y minutes, where X=Zig</6> </5> <7> <8>LiveCodes Documentation</8> </7> <9> <10>Load starter template</10> </9>',
+    name: 'Zig (Wasm)',
+  },
 } as const satisfies I18nTranslationTemplate;
 
 export default languageInfo;

src/livecodes/i18n/locales/en/translation.lokalise.json

@@ -2836,6 +2836,10 @@
     "notes": "",
     "translation": "WebAssembly Text Starter"
   },
+  "templates.starter.zig-wasm": {
+    "notes": "",
+    "translation": "Zig (Wasm) Starter"
+  },
   "templates.user.heading": {
     "notes": "",
     "translation": "My Templates"

src/livecodes/i18n/locales/en/translation.ts

@@ -1055,6 +1055,7 @@ const translation = {
       vue: 'Vue SFC Starter',
       vue2: 'Vue 2 Starter',
       wat: 'WebAssembly Text Starter',
+      'zig-wasm': 'Zig (Wasm) Starter',
     },
     user: {
       heading: 'My Templates',

src/livecodes/languages/languages.ts

@@ -82,6 +82,8 @@ import { vento } from './vento';
 import { vue, vueApp } from './vue';
 import { vue2 } from './vue2';
 import { wat } from './wat';
+import { zigWasm } from './zig-wasm';
+
 export const languages: LanguageSpecs[] = [
   html,
   markdown,
@@ -151,6 +153,7 @@ export const languages: LanguageSpecs[] = [
   phpWasm,
   cpp,
   cppWasm,
+  zigWasm,
   java,
   csharpWasm,
   fsharp,

src/livecodes/languages/zig-wasm/index.ts

@@ -0,0 +1 @@
+export * from './lang-zig-wasm';