app: add mach CLI and integrate wasmserve (#738)

app/Builder.zig

@@ -0,0 +1,359 @@
+const std = @import("std");
+const mime_map = @import("Builder/mime.zig").mime_map;
+const Target = @import("target.zig").Target;
+const OptimizeMode = std.builtin.OptimizeMode;
+const allocator = @import("root").allocator;
+
+const Builder = @This();
+
+const out_dir_path = "zig-out/www";
+const @"www/index.html" = @embedFile("Builder/www/index.html");
+const @"www/ansi_to_html.js" = @embedFile("Builder/www/ansi_to_html.js");
+const @"www/wasmserve.js" = @embedFile("Builder/www/wasmserve.js");
+const @"www/favicon.ico" = @embedFile("Builder/www/favicon.ico");
+
+steps: []const []const u8 = &.{},
+serve: bool = false,
+target: ?Target = null,
+optimize: OptimizeMode = .Debug,
+zig_path: []const u8 = "zig",
+zig_build_args: []const []const u8 = &.{},
+
+status: Status = .building,
+listen_port: u16 = 1717,
+subscribers: std.ArrayListUnmanaged(std.net.Stream) = .{},
+watch_paths: ?[][]const u8 = null,
+mtimes: std.AutoHashMapUnmanaged(std.fs.File.INode, i128) = .{},
+@"formated-www/index.html": []const u8 = undefined,
+
+const Status = union(enum) {
+    building,
+    built,
+    stopped,
+    compile_error: []const u8,
+};
+
+pub fn run(self: *Builder) !void {
+    if (self.serve) {
+        const child_pid = try std.os.fork();
+        if (child_pid == 0) try self.exec();
+
+        const wait_res = std.os.waitpid(child_pid, 0);
+        if (wait_res.status != 0) std.os.exit(1);
+
+        var out_dir = std.fs.cwd().openIterableDir(out_dir_path, .{}) catch |err| {
+            std.log.err("cannot open '{s}': {s}", .{ out_dir_path, @errorName(err) });
+            std.os.exit(1);
+        };
+        defer out_dir.close();
+
+        var wasm_file_name: ?[]const u8 = null;
+        var out_dir_iter = out_dir.iterate();
+        while (try out_dir_iter.next()) |entry| {
+            if (entry.kind != .File) continue;
+            if (std.mem.eql(u8, std.fs.path.extension(entry.name), ".wasm")) {
+                wasm_file_name = try allocator.dupe(u8, entry.name);
+            }
+        }
+        if (wasm_file_name == null) {
+            std.log.err("no WASM binary found at '{s}'", .{out_dir_path});
+            std.os.exit(1);
+        }
+
+        self.@"formated-www/index.html" = try std.fmt.allocPrint(
+            allocator,
+            @"www/index.html",
+            .{
+                .app_name = std.fs.path.stem(wasm_file_name.?),
+                .wasm_path = wasm_file_name.?,
+            },
+        );
+
+        const watch_thread = if (self.watch_paths) |_|
+            try std.Thread.spawn(.{}, watch, .{self})
+        else
+            null;
+        defer if (watch_thread) |wt| wt.detach();
+
+        var server = std.net.StreamServer.init(.{ .reuse_address = true });
+        defer server.deinit();
+        try server.listen(std.net.Address.initIp4(.{ 127, 0, 0, 1 }, self.listen_port));
+        std.log.info("started listening at http://127.0.0.1:{d}...", .{self.listen_port});
+
+        var pool = try allocator.create(std.Thread.Pool);
+        try pool.init(.{ .allocator = allocator });
+        defer pool.deinit();
+
+        while (true) {
+            const conn = try server.accept();
+            try pool.spawn(handleConn, .{ self, conn });
+        }
+    } else {
+        try self.exec();
+    }
+}
+
+fn exec(self: Builder) !void {
+    var arena = std.heap.ArenaAllocator.init(allocator);
+    defer arena.deinit();
+    const argv = try self.buildArgs(arena.allocator());
+
+    return std.os.execvpeZ(
+        argv[0].?,
+        @ptrCast([*:null]const ?[*:0]const u8, argv),
+        @ptrCast([*:null]const ?[*:0]const u8, std.os.environ.ptr),
+    );
+}
+
+fn buildArgs(self: Builder, arena: std.mem.Allocator) ![*:null]const ?[*:0]const u8 {
+    var argv = std.ArrayList(?[*:0]const u8).init(arena);
+    try argv.ensureTotalCapacity(self.steps.len + self.zig_build_args.len + 7);
+
+    argv.appendAssumeCapacity(try arena.dupeZ(u8, self.zig_path));
+    argv.appendAssumeCapacity("build");
+
+    for (self.steps) |step| {
+        argv.appendAssumeCapacity(try arena.dupeZ(u8, step));
+    }
+
+    argv.appendAssumeCapacity("--color");
+    argv.appendAssumeCapacity("on");
+    argv.appendAssumeCapacity(try std.fmt.allocPrintZ(arena, "-Doptimize={s}", .{@tagName(self.optimize)}));
+    if (self.target) |target| {
+        argv.appendAssumeCapacity(try std.fmt.allocPrintZ(arena, "-Dtarget={s}", .{try target.toZigTriple()}));
+    }
+
+    for (self.zig_build_args) |arg| {
+        argv.appendAssumeCapacity(try arena.dupeZ(u8, arg));
+    }
+
+    argv.appendAssumeCapacity(null);
+
+    return @ptrCast([*:null]const ?[*:0]const u8, try argv.toOwnedSlice());
+}
+
+fn watch(self: *Builder) void {
+    _ = self;
+    // TODO: use std.fs.Watch once async implemented
+}
+
+const path_handlers = std.ComptimeStringMap(*const fn (*Builder, std.net.Stream) void, .{
+    .{ "/", struct {
+        fn h(self: *Builder, stream: std.net.Stream) void {
+            sendData(stream, .ok, .close, mime_map.get(".html").?, self.@"formated-www/index.html");
+        }
+    }.h },
+    .{ "/notify", struct {
+        fn h(builder: *Builder, stream: std.net.Stream) void {
+            sendData(stream, .ok, .keep_alive, "text/event-stream", null);
+            builder.subscribers.append(allocator, stream) catch {
+                stream.close();
+                return;
+            };
+            builder.notify(stream);
+        }
+    }.h },
+    .{ "/wasmserve.js", struct {
+        fn h(_: *Builder, stream: std.net.Stream) void {
+            sendData(stream, .ok, .close, mime_map.get(".js").?, @"www/wasmserve.js");
+        }
+    }.h },
+    .{ "/ansi_to_html.js", struct {
+        fn h(_: *Builder, stream: std.net.Stream) void {
+            sendData(stream, .ok, .close, mime_map.get(".js").?, @"www/ansi_to_html.js");
+        }
+    }.h },
+    .{ "/favicon.ico", struct {
+        fn h(_: *Builder, stream: std.net.Stream) void {
+            sendData(stream, .ok, .close, mime_map.get(".ico").?, @"www/favicon.ico");
+        }
+    }.h },
+});
+
+fn sendData(
+    stream: std.net.Stream,
+    status: std.http.Status,
+    connection: std.http.Connection,
+    content_type: []const u8,
+    data: ?[]const u8,
+) void {
+    if (data) |d| {
+        stream.writer().print(
+            "HTTP/1.1 {d} {s}\r\n" ++
+                "Connection: {s}\r\n" ++
+                "Content-Length: {d}\r\n" ++
+                "Content-Type: {s}\r\n" ++
+                "\r\n{s}",
+            .{
+                @enumToInt(status),
+                status.phrase() orelse "N/A",
+                switch (connection) {
+                    .close => "close",
+                    .keep_alive => "keep-alive",
+                },
+                d.len,
+                content_type,
+                d,
+            },
+        ) catch {
+            stream.close();
+            return;
+        };
+    } else {
+        stream.writer().print(
+            "HTTP/1.1 {d} {s}\r\n" ++
+                "Connection: {s}\r\n" ++
+                "Content-Type: {s}\r\n" ++
+                "\r\n",
+            .{
+                @enumToInt(status),
+                status.phrase() orelse "N/A",
+                switch (connection) {
+                    .close => "close",
+                    .keep_alive => "keep-alive",
+                },
+                content_type,
+            },
+        ) catch {
+            stream.close();
+            return;
+        };
+    }
+}
+
+fn handleConn(self: *Builder, conn: std.net.StreamServer.Connection) void {
+    errdefer {
+        sendError(conn.stream, .internal_server_error);
+        conn.stream.close();
+    }
+
+    var buf: [2048]u8 = undefined;
+    const first_line = conn.stream.reader().readUntilDelimiter(&buf, '\n') catch |err| {
+        defer conn.stream.close();
+        return switch (err) {
+            error.StreamTooLong => sendError(conn.stream, .uri_too_long),
+            else => sendError(conn.stream, .bad_request),
+        };
+    };
+    var first_line_iter = std.mem.split(u8, first_line, " ");
+    _ = first_line_iter.next(); // skip method
+    if (first_line_iter.next()) |uri_str| {
+        const uri = std.Uri.parseWithoutScheme(uri_str) catch {
+            defer conn.stream.close();
+            return sendError(conn.stream, .bad_request);
+        };
+
+        const handler = path_handlers.get(uri.path) orelse {
+            // no handlers found. search in files
+            const rel_path = uri.path[1..];
+
+            const ext = std.fs.path.extension(rel_path);
+            const file_mime = mime_map.get(ext) orelse "text/plain";
+
+            const out_dir = std.fs.cwd().openDir(out_dir_path, .{}) catch |err| {
+                std.log.err("cannot open '{s}': {s}", .{ out_dir_path, @errorName(err) });
+                std.os.exit(1);
+            };
+
+            const file = out_dir.openFile(rel_path, .{}) catch |err| {
+                if (err == error.FileNotFound) {
+                    sendError(conn.stream, .not_found);
+                } else {
+                    sendError(conn.stream, .internal_server_error);
+                }
+                return;
+            };
+            defer file.close();
+
+            const file_size = file.getEndPos() catch {
+                sendError(conn.stream, .internal_server_error);
+                return;
+            };
+
+            conn.stream.writer().print(
+                "HTTP/1.1 200 OK\r\n" ++
+                    "Connection: close\r\n" ++
+                    "Content-Length: {d}\r\n" ++
+                    "Content-Type: {s}\r\n" ++
+                    "\r\n",
+                .{ file_size, file_mime },
+            ) catch return;
+            std.fs.File.writeFileAll(.{ .handle = conn.stream.handle }, file, .{}) catch return;
+
+            return;
+        };
+        handler(self, conn.stream);
+    } else {
+        defer conn.stream.close();
+        return sendError(conn.stream, .bad_request);
+    }
+}
+
+fn sendError(stream: std.net.Stream, status: std.http.Status) void {
+    sendData(stream, status, .close, mime_map.get(".txt").?, status.phrase() orelse "N/A");
+}
+
+fn notify(self: *Builder, stream: std.net.Stream) void {
+    stream.writer().print("event: {s}\n", .{@tagName(self.status)}) catch {
+        stream.close();
+        return;
+    };
+    switch (self.status) {
+        .compile_error => |msg| {
+            var lines = std.mem.split(u8, msg, "\n");
+            while (lines.next()) |line| {
+                stream.writer().print("data: {s}\n", .{line}) catch {
+                    stream.close();
+                    return;
+                };
+            }
+        },
+        .built, .building, .stopped => {},
+    }
+    _ = stream.write("\n") catch {
+        stream.close();
+        return;
+    };
+}
+
+fn compile(self: *Builder) void {
+    std.log.info("building...", .{});
+
+    var pipes = std.os.pipe() catch unreachable;
+    const child_pid = std.os.fork() catch unreachable;
+
+    if (child_pid == 0) {
+        std.os.close(pipes[0]);
+        std.os.dup2(pipes[1], std.os.STDERR_FILENO) catch @panic("OOM");
+        std.os.close(pipes[1]);
+        return self.exec() catch unreachable;
+    }
+
+    std.os.close(pipes[1]);
+    const wait_result = std.os.waitpid(child_pid, 0);
+
+    const stderr_file = std.fs.File{ .handle = pipes[0] };
+    const stderr = stderr_file.reader().readAllAlloc(allocator, std.math.maxInt(usize)) catch @panic("OOM");
+
+    std.io.getStdErr().writeAll(stderr) catch unreachable;
+
+    switch (wait_result.status) {
+        0 => {
+            allocator.free(stderr);
+            self.status = .built;
+            std.log.info("built", .{});
+        },
+        1 => {
+            std.log.warn("compile error", .{});
+            self.status = .{ .compile_error = stderr };
+        },
+        else => {
+            allocator.free(stderr);
+            self.status = .stopped;
+            std.log.warn("the build process has stopped unexpectedly", .{});
+        },
+    }
+    for (self.subscribers.items) |sub| {
+        self.notify(sub);
+    }
+}

app/Builder/mime.zig

@@ -0,0 +1,59 @@
+const std = @import("std");
+
+pub const mime_map = std.ComptimeStringMap([]const u8, .{
+    .{ ".aac", "audio/aac" },
+    .{ ".avif", "image/avif" },
+    .{ ".avi", "video/x-msvideo" },
+    .{ ".bin", "application/octet-stream" },
+    .{ ".bmp", "image/bmp" },
+    .{ ".bz", "application/x-bzip" },
+    .{ ".bz2", "application/x-bzip2" },
+    .{ ".css", "text/css" },
+    .{ ".csv", "text/csv" },
+    .{ ".eot", "application/vnd.ms-fontobject" },
+    .{ ".gz", "application/gzip" },
+    .{ ".gif", "image/gif" },
+    .{ ".htm", "text/html" },
+    .{ ".html", "text/html" },
+    .{ ".ico", "image/x-icon" },
+    .{ ".ics", "text/calendar" },
+    .{ ".jar", "application/java-archive" },
+    .{ ".jpeg", "image/jpeg" },
+    .{ ".jpg", "image/jpeg" },
+    .{ ".js", "text/javascript" },
+    .{ ".json", "application/json" },
+    .{ ".md", "text/x-markdown" },
+    .{ ".mjs", "text/javascript" },
+    .{ ".mp3", "audio/mpeg" },
+    .{ ".mp4", "video/mp4" },
+    .{ ".mpeg", "video/mpeg" },
+    .{ ".oga", "audio/ogg" },
+    .{ ".ogv", "video/ogg" },
+    .{ ".ogx", "application/ogg" },
+    .{ ".opus", "audio/opus" },
+    .{ ".otf", "font/otf" },
+    .{ ".png", "image/png" },
+    .{ ".pdf", "application/pdf" },
+    .{ ".rar", "application/vnd.rar" },
+    .{ ".rtf", "application/rtf" },
+    .{ ".sh", "application/x-sh" },
+    .{ ".svg", "image/svg+xml" },
+    .{ ".tar", "application/x-tar" },
+    .{ ".tif", ".tiff", "image/tiff" },
+    .{ ".toml", "text/toml" },
+    .{ ".ts", "video/mp2t" },
+    .{ ".ttf", "font/ttf" },
+    .{ ".txt", "text/plain" },
+    .{ ".wasm", "application/wasm" },
+    .{ ".wav", "audio/wav" },
+    .{ ".weba", "audio/webm" },
+    .{ ".webm", "video/webm" },
+    .{ ".webp", "image/webp" },
+    .{ ".woff", "font/woff" },
+    .{ ".woff2", "font/woff2" },
+    .{ ".yml", "application/x-yaml" },
+    .{ ".xhtml", "application/xhtml+xml" },
+    .{ ".xml", "application/xml" },
+    .{ ".zip", "application/zip" },
+    .{ ".7z", "application/x-7z-compressed" },
+});

app/Builder/www/ansi_to_html.js

@@ -0,0 +1 @@
+const defaults={fg:"#FFF",bg:"#000",newline:!1,stream:!1,colors:getDefaultColors()};function getDefaultColors(){const a={0:"#000",1:"#A00",2:"#0A0",3:"#A50",4:"#00A",5:"#A0A",6:"#0AA",7:"#AAA",8:"#555",9:"#F55",10:"#5F5",11:"#FF5",12:"#55F",13:"#F5F",14:"#5FF",15:"#FFF"};return range(0,5).forEach(b=>{range(0,5).forEach(c=>{range(0,5).forEach(d=>setStyleColor(b,c,d,a))})}),range(0,23).forEach(function(b){const c=toHexString(10*b+8);a[b+232]="#"+c+c+c}),a}function setStyleColor(a,c,d,e){const f=0<a?40*a+55:0,h=0<c?40*c+55:0,g=0<d?40*d+55:0;e[16+36*a+6*c+d]=toColorHexString([f,h,g])}function toHexString(a){let b=a.toString(16);for(;2>b.length;)b="0"+b;return b}function toColorHexString(a){const b=[];for(const c of a)b.push(toHexString(c));return"#"+b.join("")}function generateOutput(a,b,c,d){let e;return"text"===b?e=pushText(c,d):"display"===b?e=handleDisplay(a,c,d):"xterm256Foreground"===b?e=pushForegroundColor(a,d.colors[c]):"xterm256Background"===b?e=pushBackgroundColor(a,d.colors[c]):"rgb"==b&&(e=handleRgb(a,c)),e}function handleRgb(a,b){b=b.substring(2).slice(0,-1);const c=+b.substr(0,2),d=b.substring(5).split(";"),e=d.map(function(a){return("0"+(+a).toString(16)).substr(-2)}).join("");return pushStyle(a,(38==c?"color:#":"background-color:#")+e)}function handleDisplay(a,b,c){b=parseInt(b,10);const d={"-1":()=>"<br/>",0:()=>a.length&&resetStyles(a),1:()=>pushTag(a,"b"),3:()=>pushTag(a,"i"),4:()=>pushTag(a,"u"),8:()=>pushStyle(a,"display:none"),9:()=>pushTag(a,"strike"),22:()=>pushStyle(a,"font-weight:normal;text-decoration:none;font-style:normal"),23:()=>closeTag(a,"i"),24:()=>closeTag(a,"u"),39:()=>pushForegroundColor(a,c.fg),49:()=>pushBackgroundColor(a,c.bg),53:()=>pushStyle(a,"text-decoration:overline")};let e;return d[b]?e=d[b]():4<b&&7>b?e=pushTag(a,"blink"):29<b&&38>b?e=pushForegroundColor(a,c.colors[b-30]):39<b&&48>b?e=pushBackgroundColor(a,c.colors[b-40]):89<b&&98>b?e=pushForegroundColor(a,c.colors[8+(b-90)]):99<b&&108>b&&(e=pushBackgroundColor(a,c.colors[8+(b-100)])),e}function resetStyles(a){const b=a.slice(0);return a.length=0,b.reverse().map(function(a){return"</"+a+">"}).join("")}function range(a,b){const c=[];for(let d=a;d<=b;d++)c.push(d);return c}function notCategory(a){return function(b){return(null===a||b.category!==a)&&"all"!==a}}function categoryForCode(a){a=parseInt(a,10);let b=null;return 0===a?b="all":1===a?b="bold":2<a&&5>a?b="underline":4<a&&7>a?b="blink":8===a?b="hide":9===a?b="strike":29<a&&38>a||39===a||89<a&&98>a?b="foreground-color":(39<a&&48>a||49===a||99<a&&108>a)&&(b="background-color"),b}function pushText(a){return a}function pushTag(a,b,c){return c||(c=""),a.push(b),`<${b}${c?` style="${c}"`:""}>`}function pushStyle(a,b){return pushTag(a,"span",b)}function pushForegroundColor(a,b){return pushTag(a,"span","color:"+b)}function pushBackgroundColor(a,b){return pushTag(a,"span","background-color:"+b)}function closeTag(a,b){let c;if(a.slice(-1)[0]===b&&(c=a.pop()),c)return"</"+b+">"}function tokenize(a,b,c){function d(){return""}function e(a){return b.newline?c("display",-1):c("text",a),""}function f(b,c){c>h&&g||(g=!1,a=a.replace(b.pattern,b.sub))}let g=!1;const h=3,j=[{pattern:/^\x08+/,sub:d},{pattern:/^\x1b\[[012]?K/,sub:d},{pattern:/^\x1b\[\(B/,sub:d},{pattern:/^\x1b\[[34]8;2;\d+;\d+;\d+m/,sub:function(a){return c("rgb",a),""}},{pattern:/^\x1b\[38;5;(\d+)m/,sub:function(a,b){return c("xterm256Foreground",b),""}},{pattern:/^\x1b\[48;5;(\d+)m/,sub:function(a,b){return c("xterm256Background",b),""}},{pattern:/^\n/,sub:e},{pattern:/^\r+\n/,sub:e},{pattern:/^\r/,sub:e},{pattern:/^\x1b\[((?:\d{1,3};?)+|)m/,sub:function(a,b){g=!0,0===b.trim().length&&(b="0"),b=b.trimRight(";").split(";");for(const d of b)c("display",d);return""}},{pattern:/^\x1b\[\d?J/,sub:d},{pattern:/^\x1b\[\d{0,3};\d{0,3}f/,sub:d},{pattern:/^\x1b\[?[\d;]{0,3}/,sub:d},{pattern:/^(([^\x1b\x08\r\n])+)/,sub:function(a){return c("text",a),""}}],k=[];let{length:l}=a;outer:for(;0<l;){for(let b=0,c=0,d=j.length;c<d;b=++c){const c=j[b];if(f(c,b),a.length!==l){l=a.length;continue outer}}if(a.length===l)break;k.push(0),l=a.length}return k}function updateStickyStack(a,b,c){return"text"!==b&&(a=a.filter(notCategory(categoryForCode(c))),a.push({token:b,data:c,category:categoryForCode(c)})),a}class Filter{constructor(a){a=a||{},a.colors&&(a.colors=Object.assign({},defaults.colors,a.colors)),this.options=Object.assign({},defaults,a),this.stack=[],this.stickyStack=[]}toHtml(a){a="string"==typeof a?[a]:a;const{stack:b,options:c}=this,d=[];return this.stickyStack.forEach(a=>{const e=generateOutput(b,a.token,a.data,c);e&&d.push(e)}),tokenize(a.join(""),c,(a,e)=>{const f=generateOutput(b,a,e,c);f&&d.push(f),c.stream&&(this.stickyStack=updateStickyStack(this.stickyStack,a,e))}),b.length&&d.push(resetStyles(b)),d.join("")}}export default new Filter;

app/Builder/www/index.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>{[app_name]s}</title>
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+</head>
+
+<body>
+    <script type="module">
+        import {{mach}} from "./mach.js";
+        import {{sysjs}} from "./mach-sysjs.js";
+        import setupWasmserve from "./wasmserve.js";
+
+        setupWasmserve();
+
+        let imports = {{
+            mach,
+            sysjs,
+        }};
+
+        fetch("{[wasm_path]s}")
+            .then(response => response.arrayBuffer())
+            .then(buffer => WebAssembly.instantiate(buffer, imports))
+            .then(results => results.instance)
+            .then(instance => {{
+                sysjs.init(instance);
+                mach.init(instance);
+                instance.exports.wasmInit();
+
+                let frame = true;
+                let last_update_time = performance.now();
+                let update = function () {{
+                    if (!frame) {{
+                        instance.exports.wasmDeinit();
+                        return;
+                    }}
+                    if (mach.machHasEvent() ||
+                        last_update_time + mach.wait_timeout * 1000 <= performance.now()) {{
+                        if (instance.exports.wasmUpdate()) {{
+                            instance.exports.wasmDeinit();
+                            return;
+                        }}
+                        last_update_time = performance.now();
+                    }}
+                    window.requestAnimationFrame(update);
+                }};
+                window.requestAnimationFrame(update);
+            }})
+            .catch(err => console.error(err));
+    </script>
+</body>
+
+</html>

app/Builder/www/wasmserve.js

@@ -0,0 +1,68 @@
+import ansi_to_html from "./ansi_to_html.js";
+
+let evtSource = new EventSource("/notify");
+
+function setup() {
+	evtSource.addEventListener("building", function (e) {
+		// TODO
+	});
+	evtSource.addEventListener("built", function (e) {
+		window.location.reload();
+	});
+	evtSource.addEventListener("compile_error", function (e) {
+		createErrorScreen("An error occurred while building:", e.data)
+	});
+	evtSource.addEventListener("stopped", function (e) {
+		createErrorScreen("The build process has stopped unexpectedly:", e.data)
+	});
+}
+
+function createErrorScreen(msg, data) {
+	if (document.getElementById("error-screen") == null) {
+		let es = document.createElement("div");
+		es.id = "error-screen";
+		es.style.cssText = error_screen_css;
+		let h2 = document.createElement("h2");
+		let pre = document.createElement("pre");
+		h2.textContent = msg;
+		h2.style.cssText = error_screen_h2_css;
+		pre.innerHTML = ansi_to_html.toHtml(data);
+		pre.style.cssText = error_screen_pre_css;
+		es.appendChild(h2);
+		es.appendChild(pre);
+		document.body.appendChild(es);
+
+		// atm ANSI escape codes only works in chromium based browsers
+		if (!!window.chrome)
+			console.log(data);
+	} else {
+		document.getElementById("error-screen").
+			getElementsByTagName("pre").innerHTML = ansi_to_html.toHtml(data);
+	}
+}
+
+const error_screen_css =
+	"position: absolute;" +
+	"width: 100vw;" +
+	"height: 100vh;" +
+	"top: 0;" +
+	"left: 0;" +
+	"background: rgba(0, 0, 0, 0.8);" +
+	"font-family: system-ui, monospace;" +
+	"font-size: 16pt;" +
+	"padding: 20px;" +
+	"box-sizing: border-box;" +
+	"color: white;" +
+	"z-index: 1;";
+
+const error_screen_h2_css = "margin-top: 0;";
+
+const error_screen_pre_css =
+	"border-top: 8px solid #A00;" +
+	"padding: 10px;" +
+	"background: black;" +
+	"font-size: 12pt;" +
+	"white-space: pre-wrap;" +
+	"overflow: hidden;";
+
+export default setup;

app/main.zig

@@ -0,0 +1,177 @@
+const std = @import("std");
+const builtin = @import("builtin");
+const Builder = @import("Builder.zig");
+const Target = @import("target.zig").Target;
+
+const default_zig_path = "zig";
+
+var args: []const [:0]u8 = undefined;
+var arg_i: usize = 1;
+var gpa = std.heap.GeneralPurposeAllocator(.{}){};
+pub const allocator = gpa.allocator();
+
+pub fn main() !void {
+    defer _ = gpa.deinit();
+
+    args = try std.process.argsAlloc(allocator);
+    defer std.process.argsFree(allocator, args);
+
+    if (args.len == 1) return;
+
+    if (std.mem.eql(u8, args[arg_i], "build")) {
+        arg_i += 1;
+        var builder = Builder{};
+        var steps = std.ArrayList([]const u8).init(allocator);
+        var build_args = std.ArrayList([]const u8).init(allocator);
+
+        while (arg_i < args.len) : (arg_i += 1) {
+            if (argOption("-zig-path")) |value| {
+                builder.zig_path = value;
+            } else if (std.mem.eql(u8, args[arg_i], "--serve")) {
+                if (builder.target == null) builder.target = .wasm32;
+                if (builder.target.? != .wasm32) {
+                    std.log.err("--serve requires -target=wasm32", .{});
+                    try printHelp(.build);
+                    std.os.exit(1);
+                }
+                builder.serve = true;
+            } else if (argOption("-target")) |value| {
+                builder.target = Target.parse(value) orelse {
+                    std.log.err("invalid target '{s}'", .{args[arg_i]});
+                    try printHelp(.build);
+                    std.os.exit(1);
+                };
+            } else if (argOption("-listen-port")) |value| {
+                builder.listen_port = std.fmt.parseInt(u16, value, 10) catch {
+                    std.log.err("invalid port '{s}'", .{args[arg_i]});
+                    try printHelp(.build);
+                    std.os.exit(1);
+                };
+            } else if (argOption("-watch-path")) |value| {
+                var paths = std.mem.split(u8, value, ",");
+                builder.watch_paths = try allocator.alloc([]const u8, std.mem.count(u8, value, ",") + 1);
+                for (0..255) |i| {
+                    const path = paths.next() orelse break;
+                    builder.watch_paths.?[i] = std.mem.trim(u8, path, &std.ascii.whitespace);
+                }
+            } else if (argOption("-optimize")) |value| {
+                builder.optimize = std.meta.stringToEnum(std.builtin.OptimizeMode, value) orelse {
+                    std.log.err("invalid optimize mode '{s}'", .{args[arg_i]});
+                    try printHelp(.build);
+                    std.os.exit(1);
+                };
+            } else if (std.mem.eql(u8, args[arg_i], "--")) {
+                arg_i += 1;
+                while (arg_i < args.len) : (arg_i += 1) {
+                    try build_args.append(args[arg_i]);
+                }
+            } else {
+                try steps.append(args[arg_i]);
+            }
+        }
+
+        builder.steps = try steps.toOwnedSlice();
+        builder.zig_build_args = try build_args.toOwnedSlice();
+
+        return builder.run();
+    } else if (std.mem.eql(u8, args[arg_i], "help")) {
+        arg_i += 1;
+        var subcommand = SubCommand.help;
+
+        if (arg_i < args.len) {
+            if (std.mem.eql(u8, args[arg_i], "build")) {
+                subcommand = .build;
+            } else {
+                std.log.err("unknown command name '{s}'", .{args[arg_i]});
+                try printHelp(.help);
+                std.os.exit(1);
+            }
+        }
+        return printHelp(subcommand);
+    } else {
+        std.log.err("invalid command '{s}'", .{args[arg_i]});
+        try printHelp(.help);
+        std.os.exit(1);
+    }
+}
+
+pub const SubCommand = enum {
+    build,
+    help,
+};
+
+fn printHelp(subcommand: SubCommand) !void {
+    const stdout = std.io.getStdOut();
+    switch (subcommand) {
+        .build => {
+            try stdout.writeAll(
+                \\Usage: 
+                \\    mach build [steps] [options] [-- [zig-build-options]]
+                \\
+                \\General Options:
+                \\
+                \\  -zig-path [path]      Override path to zig binary
+                \\
+                \\  -target [target]      The CPU architecture and OS to build for
+                \\                        Default is native target
+                \\                        Supported targets:
+                \\                          linux-x86_64,   linux-aarch64,
+                \\                          macos-x86_64,   macos-aarch64,
+                \\                          windows-x86_64, windows-aarch64,
+                \\                          wasm32,
+                \\
+                \\  -optimize [optimize]  Prioritize performance, safety, or binary size
+                \\                        Default is Debug
+                \\                        Supported values:
+                \\                          Debug
+                \\                          ReleaseSafe
+                \\                          ReleaseFast
+                \\                          ReleaseSmall
+                \\
+                \\Serve Options:
+                \\
+                \\  --serve               Starts a development server
+                \\                        for testing WASM applications/games
+                \\
+                \\  -listen-port [port]   The development server port
+                \\
+                \\  -watch-path [paths]   Watches for changes in specified directory
+                \\                        and automatically builds and reloads
+                \\                        development server
+                \\                        Separate each path with comma (,)
+                \\
+                \\
+            );
+        },
+        .help => {
+            try stdout.writeAll(
+                \\Usage: 
+                \\  mach [command]
+                \\
+                \\Commands:
+                \\  build  Build current project
+                \\  help   Print this mesage or the help of the given command
+                \\
+                \\
+            );
+        },
+    }
+}
+
+pub fn argOption(name: []const u8) ?[]const u8 {
+    const cmd_arg = args[arg_i];
+    if (std.mem.startsWith(u8, cmd_arg, name)) {
+        if (cmd_arg.len > name.len + 1 and cmd_arg[name.len] == '=') {
+            return cmd_arg[name.len + 1 ..];
+        } else if (cmd_arg.len == name.len) {
+            arg_i += 1;
+            if (arg_i < args.len) {
+                return args[arg_i];
+            } else {
+                std.log.err("expected value after '{s}' option", .{cmd_arg});
+                std.os.exit(1);
+            }
+        }
+    }
+    return null;
+}

app/target.zig

@@ -0,0 +1,52 @@
+const std = @import("std");
+const allocator = @import("root").allocator;
+
+pub const Target = enum {
+    @"linux-x86_64",
+    @"linux-aarch64",
+    @"macos-x86_64",
+    @"macos-aarch64",
+    @"windows-x86_64",
+    @"windows-aarch64",
+    wasm32,
+
+    // TODO
+    // android,
+    // ios,
+
+    pub fn parse(str: []const u8) ?Target {
+        return if (std.mem.eql(u8, str, "linux"))
+            .@"linux-x86_64"
+        else if (std.mem.eql(u8, str, "windows"))
+            .@"windows-x86_64"
+        else if (std.mem.eql(u8, str, "macos"))
+            .@"macos-aarch64"
+        else if (std.mem.eql(u8, str, "wasm"))
+            .wasm32
+        else
+            std.meta.stringToEnum(Target, str) orelse return null;
+    }
+
+    pub fn toZigTriple(self: Target) ![]const u8 {
+        const zig_target = std.zig.CrossTarget{
+            .cpu_arch = switch (self) {
+                .@"linux-x86_64",
+                .@"macos-x86_64",
+                .@"windows-x86_64",
+                => .x86_64,
+                .@"linux-aarch64",
+                .@"macos-aarch64",
+                .@"windows-aarch64",
+                => .aarch64,
+                .wasm32 => .wasm32,
+            },
+            .os_tag = switch (self) {
+                .@"linux-x86_64", .@"linux-aarch64" => .linux,
+                .@"macos-x86_64", .@"macos-aarch64" => .macos,
+                .@"windows-x86_64", .@"windows-aarch64" => .windows,
+                .wasm32 => .freestanding,
+            },
+        };
+        return zig_target.zigTriple(allocator);
+    }
+};