Merge pull request #121 from jetzig-framework/debug-console

Debug console

.github/workflows/CI.yml

@@ -15,8 +15,6 @@ jobs:
   build:
     strategy:
       matrix:
-        #Deactivated windows for I don't know why it fails
-        #os: [ubuntu-latest, macos-latest, windows-latest]
         os: [ubuntu-latest, macos-latest, windows-latest]
     runs-on: ${{ matrix.os }}
     steps:

LICENSE-Zig

@@ -0,0 +1,21 @@
+The MIT License (Expat)
+
+Copyright (c) Zig contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

build.zig

@@ -110,6 +110,7 @@ pub fn build(b: *std.Build) !void {
     const test_build_options = b.addOptions();
     test_build_options.addOption(Environment, "environment", .testing);
     test_build_options.addOption(bool, "build_static", true);
+    test_build_options.addOption(bool, "debug_console", false);
     const run_main_tests = b.addRunArtifact(main_tests);
     main_tests.root_module.addOptions("build_options", test_build_options);
 
@@ -138,12 +139,24 @@ pub fn jetzigInit(b: *std.Build, exe: *std.Build.Step.Compile, options: JetzigIn
         "environment",
         "Jetzig server environment.",
     ) orelse .development;
+
     const build_static = b.option(
         bool,
         "build_static",
         "Pre-render static routes. [default: false in development, true in testing/production]",
     ) orelse (environment != .development);
 
+    const debug_console = b.option(
+        bool,
+        "debug_console",
+        "Render a debug console on error. Default: false.",
+    ) orelse false;
+
+    if (debug_console == true and environment != .development) {
+        std.debug.print("Environment must be `development` when `debug_console` is enabled.", .{});
+        return error.JetzigBuildError;
+    }
+
     const jetzig_dep = b.dependency(
         "jetzig",
         .{
@@ -171,6 +184,7 @@ pub fn jetzigInit(b: *std.Build, exe: *std.Build.Step.Compile, options: JetzigIn
     const build_options = b.addOptions();
     build_options.addOption(Environment, "environment", environment);
     build_options.addOption(bool, "build_static", build_static);
+    build_options.addOption(bool, "debug_console", debug_console);
     jetzig_module.addOptions("build_options", build_options);
 
     exe.root_module.addImport("jetzig", jetzig_module);

cli/commands/server.zig

@@ -9,22 +9,20 @@ pub const watch_changes_pause_duration = 1 * 1000 * 1000 * 1000;
 /// Command line options for the `server` command.
 pub const Options = struct {
     reload: bool = true,
+    debug: bool = true,
 
     pub const meta = .{
         .full_text =
         \\Launches a development server.
         \\
-        \\The development server reloads when files in `src/` are updated.
-        \\
-        \\To disable this behaviour, pass `--reload=false`
-        \\
         \\Example:
         \\
         \\  jetzig server
-        \\  jetzig server --reload=false
+        \\  jetzig server --reload=false --debug=false
         ,
         .option_docs = .{
             .reload = "Enable or disable automatic reload on update (default: true)",
+            .debug = "Enable or disable the development debug console (default: true)",
         },
     };
 };
@@ -62,18 +60,27 @@ pub fn run(
         },
     );
 
+    var argv = std.ArrayList([]const u8).init(allocator);
+    defer argv.deinit();
+
+    try argv.appendSlice(&.{
+        "zig",
+        "build",
+        util.environmentBuildOption(main_options.options.environment),
+        "-Djetzig_runner=true",
+    });
+
+    if (options.debug) try argv.append("-Ddebug_console=true");
+    try argv.appendSlice(&.{
+        "install",
+        "--color",
+        "on",
+    });
+
     while (true) {
         util.runCommandInDir(
             allocator,
-            &.{
-                "zig",
-                "build",
-                util.environmentBuildOption(main_options.options.environment),
-                "-Djetzig_runner=true",
-                "install",
-                "--color",
-                "on",
-            },
+            argv.items,
             .{ .path = realpath },
         ) catch {
             std.debug.print("Build failed, waiting for file change...\n", .{});
@@ -88,10 +95,9 @@ pub fn run(
             std.process.exit(1);
         }
 
-        const argv = &[_][]const u8{exe_path.?};
         defer allocator.free(exe_path.?);
 
-        var process = std.process.Child.init(argv, allocator);
+        var process = std.process.Child.init(&.{exe_path.?}, allocator);
         process.stdin_behavior = .Inherit;
         process.stdout_behavior = .Inherit;
         process.stderr_behavior = .Inherit;

demo/src/app/views/anti_csrf.zig

@@ -1,7 +1,12 @@
 const std = @import("std");
 const jetzig = @import("jetzig");
 
-pub const layout = "application";
+// Anti-CSRF middleware can be included in the view's `actions` declaration to apply CSRF
+// protection just to this specific view, or it can be added to your application's global
+// middleware stack defined in `jetzig_options` in `src/main.zig`.
+//
+// Use `{{context.authenticityToken()}}` or `{{context.authenticityFormField()}}` in a Zmpl
+// template to generate a token, store it in the user's session, and inject it into the page.
 
 pub const actions = .{
     .before = .{jetzig.middleware.AntiCsrfMiddleware},

demo/src/app/views/anti_csrf/index.zmpl

@@ -6,3 +6,5 @@
 
     <input type="submit" value="Submit Spam" />
 </form>
+
+<div>Try clearing `_jetzig_session` cookie before clicking "Submit Spam"</div>

demo/src/app/views/render_template.zig

@@ -0,0 +1,15 @@
+const std = @import("std");
+const jetzig = @import("jetzig");
+
+pub fn index(request: *jetzig.Request) !jetzig.View {
+    return request.renderTemplate("basic/index", .ok);
+}
+
+test "index" {
+    var app = try jetzig.testing.app(std.testing.allocator, @import("routes"));
+    defer app.deinit();
+
+    const response = try app.request(.GET, "/render_template", .{});
+    try response.expectStatus(.ok);
+    try response.expectBodyContains("Hello");
+}

demo/src/app/views/render_template/index.zmpl

@@ -0,0 +1,3 @@
+<div>
+  <span>Content goes here</span>
+</div>

demo/src/main.zig

@@ -90,6 +90,7 @@ pub const jetzig_options = struct {
             .same_site = true,
             .secure = true,
             .http_only = true,
+            .path = "/",
         },
     };
 

src/assets/debug.css

@@ -0,0 +1,121 @@
+/* reset https://www.joshwcomeau.com/css/custom-css-reset/ */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
+}
+
+#root, #__next {
+  isolation: isolate;
+}
+
+/* styles */
+
+body {
+  background-color: #222;
+}
+
+h1 {
+  font-family: monospace;
+  color: #e55;
+  padding: 1rem;
+  font-size: 1.6rem;
+}
+
+h2 {
+  font-family: monospace;
+  color: #a0a0a0;
+  padding: 1rem;
+  font-size: 1.6rem;
+}
+
+.stack-trace {
+  /* background-color: #e555; */
+  padding: 1rem;
+  font-family: monospace;
+}
+
+.stack-trace .stack-source-line .file-name {
+  color: #90bfd7;
+  display: block;
+  padding: 0.4rem;
+  font-weight: bold;
+}
+
+.stack-trace .stack-source-line {
+  background-color: #333;
+  padding: 1rem;
+  margin: 0;
+  border-bottom: 1px solid #ffa3;
+}
+
+.stack-trace .stack-source-line:last-child {
+  border-bottom: none;
+}
+
+.stack-trace .stack-source-line .line-content {
+  margin: 0;
+  padding: 0;
+}
+
+.stack-trace .stack-source-line .line-content.surrounding {
+  color: #ffa;
+}
+
+.stack-trace .stack-source-line .line-content.target {
+  color: #faa;
+  background-color: #e552;
+}
+
+.stack-trace .stack-source-line .line-content .line-number {
+  display: inline;
+
+}
+
+pre {
+  display: inline;
+  margin-right: 1rem;
+}
+
+.response-data {
+  color: #fff;
+  background-color: #333;
+  padding: 1rem;
+  margin: 1rem;
+}
+
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=json+zig */
+code[class*=language-],pre[class*=language-]{color:#ccc;font-family:monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]:not(pre)>code[class*=language-]{white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}
+
+.stack-trace .stack-source-line .line-number {
+  color: #ffa !important;
+}