Feat/add zig wasm #853

Seth0x41 · 2025-06-16T04:29:26Z

What type of PR is this? (check all applicable)

Description

Notes:

The current code doesn't support ZLS yet, but we're working on adding support for it together. Right now, the code uses SharedArrayBuffer if the browser supports it, and falls back to ArrayBuffer if it doesn't.
This means ZLS can't be used yet, but the server can still run normally.
The second point is that I used a simple caching mechanism for lazy loading, to reduce lookup time to O(1).
The source code is converted to a 32-bit integer and used as a cache key.
I used 31 as a prime number because it provides good hash distribution, helps avoid collisions, and is fast .. Java uses it in hashCode.
0x7fffffff is a 31-bit positive integer that keeps hash values positive and avoids overflow issues.
Third point, I haven’t added a formatter yet. Do you have any suggestions for one?

Looking forward to hearing your feedback. :)

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentations?

📓 docs (./docs)
📕 storybook (./storybook)
📜 README.md
🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify · 2025-06-16T04:29:32Z

✅ Deploy Preview for livecodes ready!

Name	Link
🔨 Latest commit	`f7c306e`
🔍 Latest deploy log	https://app.netlify.com/projects/livecodes/deploys/686e4d13ea84750008b47591
😎 Deploy Preview	https://deploy-preview-853--livecodes.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

src/livecodes/languages/zig-wasm/lang-zig-wasm-script.ts

hatemhosny · 2025-06-25T09:52:20Z

Great work (as usual!), @Seth0x41
Sorry for the late reply. I was quite busy.

Re: SharedArrayBuffer
Do we only need it for ZLS?
I see the compiler works without it. SharedArrayBuffer is mainly needed to share binary data between the main thread and web workers, which we are not currently using. I assume this will be needed for ZLS.
SharedArrayBuffer now works in LiveCodes (only on chrome) using chrome origin trial.
Sorry, the token header expired. I updated that and it should now be working (also for local development)
demo: https://livecodes.io/?x=id/2wbq233fzus
Origin trial allows using SharedArrayBuffer without needing crossOriginIsolated.
You probably need to change the detection to:

const isSharedArrayBufferSupported = typeof SharedArrayBuffer !== 'undefined';

When I enable it, I get an error which seems to be related to this code

Re: cache
I like that very much. Well done.

Re: formatting
ZLS should provide that.

I have some relatively minor comments. I will add these on code.

Please run npm run fix to fix failing CI tests.

Thank you :)

hatemhosny · 2025-06-25T09:54:21Z

src/livecodes/vendors.ts

 export const cppWasmBaseUrl = /* @__PURE__ */ getUrl('@chriskoch/[email protected]/');

 export const csharpWasmBaseUrl = /* @__PURE__ */ getUrl('@seth0x41/[email protected]/');
+export const zigWasmBaseUrl = /* @__PURE__ */ getUrl('@seth0x41/[email protected]/');


This file is sorted alphabetically to easily find the variables.
Please move this to the end of the file.

hatemhosny · 2025-06-25T09:57:37Z

src/livecodes/languages/zig-wasm/lang-zig-wasm-script.ts

+const JS_UNTAR_URL = 'https://unpkg.com/[email protected]/build/dist/untar.js';
+const WASI_SHIM_URL = 'https://unpkg.com/@bjorn3/[email protected]/dist/index.js';
+


Please move these to vendors.ts.
Also use the getUrl function to allow dynamically using the selected CDN.
e.g.
const jsUntarUrl = /* @__PURE__ */ getUrl('[email protected]/build/dist/untar.js');

hatemhosny · 2025-06-25T09:58:45Z

src/livecodes/languages/zig-wasm/lang-zig-wasm-script.ts

+livecodes.zig ??= {};
+
+// check if SharedArrayBuffer supported by the browser else it will use ArrayBuffer
+const isSharedArrayBufferSupported = typeof SharedArrayBuffer !== 'undefined' && window.crossOriginIsolated;


We can remove checking for corssOriginIsolated.

Suggested change

const isSharedArrayBufferSupported = typeof SharedArrayBuffer !== 'undefined' && window.crossOriginIsolated;

const isSharedArrayBufferSupported = typeof SharedArrayBuffer !== 'undefined';

hatemhosny · 2025-06-25T10:01:12Z

src/livecodes/languages/zig-wasm/lang-zig-wasm-script.ts

+const loadScript = (url: string): Promise<void> =>
+  new Promise<void>((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = url;
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error(`Failed to load ${url}`));
+    document.head.appendChild(script);
+  });
+


We already have a util function for that here: https://github.com/Seth0x41/livecodes/blob/dbfc085b293b2b6594f7625ddd5e0ab5719e665d/src/livecodes/utils/utils.ts#L175

await loadScript(url, 'untar');

hatemhosny · 2025-06-25T10:03:34Z

src/livecodes/languages/zig-wasm/lang-zig-wasm-script.ts

+  if (!(window as any).WASI) {
+    const wasiModule = await import(WASI_SHIM_URL);
+    ['WASI', 'File', 'Directory', 'OpenFile', 'PreopenDirectory', 'ConsoleStdout'].forEach(
+      (key) => wasiModule[key] && ((window as any)[key] = wasiModule[key])


I prefer not adding many global variables so that we do not pollute the user environment.
Please keep this in a local variable scoped inside the script.
If you really need to add global variables, please add them to window.livecodes.

hatemhosny · 2025-06-25T11:03:46Z

src/livecodes/languages/zig-wasm/lang-zig-wasm-script.ts

+    const fileData = isSharedArrayBufferSupported
+      ? createFile(entry.buffer)
+      : new File(entry.buffer);
+


createFile already checks for isSharedArrayBufferSupported and uses the same logic.

Suggested change

const fileData = isSharedArrayBufferSupported

? createFile(entry.buffer)

: new File(entry.buffer);

const fileData = createFile(entry.buffer);

hatemhosny · 2025-06-25T11:07:14Z

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

+  extensions: ['zig'],
+  editor: 'script',
+  largeDownload: true,
+};


We are not using prettier for formatting.
We should use formatter key instead and use ZLS there.

hatemhosny · 2025-06-25T11:08:30Z

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

+  extensions: ['zig'],
+  editor: 'script',
+  largeDownload: true,
+};


This is used as a label for the language in the UI for compiler code viewer.
Let's keep it zig.

Suggested change

};

compiledCodeLanguage: 'zig',

hatemhosny · 2025-06-25T11:13:05Z

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

+  extensions: ['zig'],
+  editor: 'script',
+  largeDownload: true,
+};


ZLS will provide highlighting for codemirror editor only.
We can tell the code editor to use syntax highlighting for Rust which has a relatively similar syntax.
We can then override that in codemirror.
We have to add rust to the Language type.

Suggested change

};

editor: 'script',

editorLanguage: 'rust',

hatemhosny · 2025-06-25T11:17:35Z

src/livecodes/templates/starter/index.ts

  prologStarter,
  blocklyStarter,
  diagramsStarter,
+  zigWasmStarter,


let's put it after C++
I try to keep related languages together.

hatemhosny · 2025-06-25T11:24:48Z

I found this: https://github.com/PlasmoHQ/prettier-plugin-zig
I did not try it.

hatemhosny · 2025-06-25T14:59:20Z

src/livecodes/templates/starter/zig-wasm-starter.ts

+    content: `
+<div class="container">
+  <h1>Hello, <span id="name">World</span>!</h1>
+  <img class="logo" alt="logo" src="http://127.0.0.1:8080/livecodes/assets/templates/zig.svg" />


We need to use baseUrl instead of absolute path for images in templates

Suggested change

<img class="logo" alt="logo" src="http://127.0.0.1:8080/livecodes/assets/templates/zig.svg" />

<img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/zig.svg" />

hatemhosny · 2025-06-25T15:02:15Z

src/livecodes/templates/starter/zig-wasm-starter.ts

+  name: 'zig-wasm',
+  title: 'Zig (Wasm) Starter',


I think we can just call the starter template zig.

Suggested change

name: 'zig-wasm',

title: 'Zig (Wasm) Starter',

name: 'zig',

title: 'Zig Starter',

We would then need to change the TS type and other mentions of the template name (e.g. in docs, language-info and command menu) to use the new template name.

sonarqubecloud · 2025-07-09T11:06:58Z

Quality Gate failed

Failed conditions
4 Security Hotspots

See analysis details on SonarQube Cloud

Seth0x41 added 2 commits June 16, 2025 06:41

zig support

45b8cc1

adding zig documentation

c4f5cd1

github-advanced-security bot found potential problems Jun 16, 2025

View reviewed changes

src/livecodes/languages/zig-wasm/lang-zig-wasm-script.ts Fixed Show fixed Hide fixed

src/livecodes/languages/zig-wasm/lang-zig-wasm-script.ts Fixed Show fixed Hide fixed

Merge branch 'develop' into feat/add-zig-wasm

dbfc085

hatemhosny reviewed Jun 25, 2025

View reviewed changes

Merge branch 'develop' into feat/add-zig-wasm

f7c306e

		const JS_UNTAR_URL = 'https://unpkg.com/[email protected]/build/dist/untar.js';
		const WASI_SHIM_URL = 'https://unpkg.com/@bjorn3/[email protected]/dist/index.js';

	const isSharedArrayBufferSupported = typeof SharedArrayBuffer !== 'undefined' && window.crossOriginIsolated;
	const isSharedArrayBufferSupported = typeof SharedArrayBuffer !== 'undefined';

	<img class="logo" alt="logo" src="http://127.0.0.1:8080/livecodes/assets/templates/zig.svg" />
	<img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/zig.svg" />

Uh oh!

Feat/add zig wasm #853

Are you sure you want to change the base?

Feat/add zig wasm #853

Uh oh!

Conversation

Seth0x41 commented Jun 16, 2025

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentations?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

Uh oh!

netlify bot commented Jun 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for livecodes ready!

Uh oh!

Uh oh!

Uh oh!

hatemhosny commented Jun 25, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hatemhosny commented Jun 25, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Jul 9, 2025

Quality Gate failed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Jun 16, 2025 •

edited

Loading