Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
*.zig text=auto eol=lf
*.zon text=auto eol=lf
11 changes: 10 additions & 1 deletion .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ name: Deploy
on:
push:
branches: ["main"]
pull_request:
workflow_dispatch:

permissions:
Expand All @@ -21,9 +22,17 @@ jobs:
with:
node-version: 22

- uses: mlugg/setup-zig@v2

- name: Install binaryen
run: |
sudo apt-get update
sudo apt-get install binaryen

- run: |
zig build -Drelease -Dwasm-opt
npm ci
npx parcel build 404.html
npm run build

- uses: actions/upload-pages-artifact@v3
with:
Expand Down
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
node_modules
dist
.parcel-cache
.env
repos
.zig-cache
zig-out
17 changes: 0 additions & 17 deletions .proxyrc.js

This file was deleted.

67 changes: 0 additions & 67 deletions 404.html

This file was deleted.

29 changes: 5 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Zig and ZLS in the browser
# Zig Playground

Works pretty well in a bunch of browsers, but note the required security headers.

Expand All @@ -9,31 +9,12 @@ You can either:
- Use it online: https://playground.zigtools.org/
- Run it locally:

Requires Zig `0.15.1`.

```bash
zig build
npm install
npm run serve
npm run dev
```

Enjoy!

### Update artifacts

For the time being, the following artifacts have been commited to source control:

- `src/zls.wasm` - A build of [ZLS](https://github.com/zigtools/zls) (ReleaseSmall, wasm32-wasi, VERSION_TBA)
- `src/zig.wasm` - A build of [Zig](https://github.com/ziglang/zig) (ReleaseSmall, wasm32-wasi, 0.14.0 with `./zig.patch` applied)
- `src/zig.tar.gz` - The source code of [Zig](https://github.com/ziglang/zig). Only the `lib/std` subdirectory is needed.

The `./compile.sh` script can be used to create these artifacts:

```bash
./compile zls
./compile zig
./compile zig_tarball
```

Compiling Zig and ZLS may require different Zig compiler versions.

## TODOs

- [ ] Stop using `SharedArrayBuffer`s (they're awesome but a nightmare to deploy)
73 changes: 73 additions & 0 deletions build.zig
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
const std = @import("std");

pub fn build(b: *std.Build) void {
const target = b.resolveTargetQuery(.{ .cpu_arch = .wasm32, .os_tag = .wasi });
const optimize: std.builtin.OptimizeMode = b.standardOptimizeOption(.{ .preferred_optimize_mode = .ReleaseSmall });

const enable_wasm_opt = b.option(bool, "wasm-opt", "Run wasm-opt") orelse false;

const zls_step = b.step("zls", "compile and install ZLS");
const zig_step = b.step("zig", "compile and install Zig");
const tarball_step = b.step("zig_tarball", "compile and install zig.tar.gz");

b.getInstallStep().dependOn(zls_step);
b.getInstallStep().dependOn(zig_step);
b.getInstallStep().dependOn(tarball_step);

const zls_dependency = b.dependency("zls", .{
.target = target,
.optimize = optimize,
// .@"version-string" = @as([]const u8, "0.16.0-dev"),
});

const zls_exe = b.addExecutable(.{
.name = "zls",
.root_module = b.createModule(.{
.root_source_file = b.path("src/zls.zig"),
.target = target,
.optimize = optimize,
.imports = &.{
.{ .name = "zls", .module = zls_dependency.module("zls") },
},
}),
});
zls_exe.entry = .disabled;
zls_exe.rdynamic = true;
zls_step.dependOn(installArtifact(b, zls_exe, enable_wasm_opt));

const zig_dependency = b.dependency("zig", .{
.target = target,
.optimize = optimize,
.@"version-string" = @as([]const u8, "0.15.1"),
.@"no-lib" = true,
.dev = "wasm",
});
zig_step.dependOn(installArtifact(b, zig_dependency.artifact("zig"), enable_wasm_opt));

const run_tar = b.addSystemCommand(&.{ "tar", "-czf" });
const zig_tar_gz = run_tar.addOutputFileArg("zig.tar.gz");
tarball_step.dependOn(&b.addInstallFile(zig_tar_gz, "zig.tar.gz").step);
run_tar.addArg("-C");
run_tar.addDirectoryArg(zig_dependency.path("."));
run_tar.addArg("lib/std");
}

fn installArtifact(b: *std.Build, artifact: *std.Build.Step.Compile, enable_wasm_opt: bool) *std.Build.Step {
if (enable_wasm_opt) {
const wasm_opt = b.addSystemCommand(&.{
"wasm-opt",
"-Oz",
"--enable-bulk-memory",
"--enable-mutable-globals",
"--enable-nontrapping-float-to-int",
"--enable-sign-ext",
});
wasm_opt.addArtifactArg(artifact);
wasm_opt.addArg("-o");
const file_name = b.fmt("{s}.wasm", .{artifact.name});
const exe = wasm_opt.addOutputFileArg(file_name);
return &b.addInstallBinFile(exe, file_name).step;
} else {
return &b.addInstallArtifact(artifact, .{}).step;
}
}
17 changes: 17 additions & 0 deletions build.zig.zon
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.{
.name = .playground,
.version = "0.0.0",
.fingerprint = 0xdc188848360fd988, // Changing this has security and trust implications.
.minimum_zig_version = "0.15.1",
.dependencies = .{
.zls = .{
.url = "git+https://github.com/zigtools/zls?ref=0.15.0#ce6c8f02c78e622421cfc2405c67c5222819ec03",
.hash = "zls-0.15.0-rmm5fkjqIwDZpmDHyKwxa9K2gcI3FPaGVFPwjYWFBM5B",
},
.zig = .{
.url = "git+https://github.com/zigtools/zig?ref=wasm32-wasi#c019ad27607ad9a78b8fe62a482e2cd3e59c862a",
.hash = "zig-0.0.0-Fp4XJPL7IQ0pokn0NhKHKeNpXS-bMHUs0fi_q1yJHX5G",
},
},
.paths = .{""},
}
99 changes: 0 additions & 99 deletions compile.sh

This file was deleted.

30 changes: 30 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zig+ZLS Playground</title>

<link rel="stylesheet" href="style/style.css">
</head>
<body>
<button id="run">Run</button>

<main>
<div id="split-pane" style="--editor-height-percent: 100%;">
<div id="editor"></div>
<div id="resize-bar"></div>
<div id="output"></div>
</div>
</main>

<footer>
<h1><a href="https://playground.zigtools.org">playground</a></h1>
<span><span id="warning">Warning</span> Zig's self-hosted WebAssembly backend is still experimental!</span>
<span>A <a href="https://zigtools.org">zigtools</a> initiative.</span>
</footer>

<script src="/src/editor.ts" type="module"></script>
</body>
</html>
Loading